How to clear form input on page load woocommerce checkout - wordpress

I am offering customers a repurchase on the order confirmed page. If they click the link they are sended directly to the checkout page. However, the form is then prefilled with the previous data. I would like to clear it, because the idea is one product(ticket) per person.
So far i have the following (and in the page source i can see the script is loaded):
function print_script() {
if (isset($_GET['extrapersoon']) && is_page(21560)){
echo '<script>
window.addEventListener("load", function(){myFunction()};
function myFunction() {
document.getElementsByClassName("woocommerce-checkout").reset();
}
</script>';
}
}
add_action('wp_print_scripts', 'print_script');
I tried other triggers too, such as window.load but no result yet.
Anyone?

You should put the script in the footer using add_action( 'wp_footer', 'print_script' ); to make sure the form gets cleared after the data was loaded into it.
Wordpress has jQuery on default, so I'm using it to look for all the forms in the document and clear them. The function is automatically called on page load, therefore no need for a event listener.
<?php
function print_script() {
if (isset($_GET['extrapersoon']) && is_page(21560)) { ?>
<script type="text/javascript">
( function( $ ) {
$('form').each(function() { this.reset() });
}( jQuery ) );
</script>
<?php }
}
add_action( 'wp_footer', 'print_script' ); ?>

Related

CF7 hook breaks form after submit

I'm trying to use some CF7 hooks, but they seem to break something in the workflow after the submit.
I tried for example to add the following snippet to print something in the console:
function debug_to_console($cf7) {
echo '<div display="none"><script type="text/javascript">console.log("console log message");</script></div>';
//return $cf7;
}
add_action( 'wpcf7_before_send_mail', 'debug_to_console' );
When I enable it, nothing gets printed in the console and the [response](the notification after submitting the form) stops working.
The email instead gets delivered.
Any idea?
Thanks!
Use javascript events for frontend. https://contactform7.com/dom-events/
If you want fire action before ajax call use:
$('.wpcf7-form').submit(function() {
// action
});
We can not echo the result to front end from the wordpress hooks.
Try DOM Events from Contact form 7
document.addEventListener( 'wpcf7submit', function( event ) {
var entry = event.detail.inputs.find(element => element.name == 'entry_id');
switch(event.detail.contactFormId){
case "220": case "222":
alert(event.detail);
break;
default : console.log("Error");break;
}

Where exactly is the "Before Header Content hook" in Wordpress?

I want to add a little code to the "Before Header Content hook" but I don't know where that is... Can you please help me?
Try:
add_action('init', 'process_post');
function process_post()
{
echo "test";
}
this is a modified version of #ajay 's solution
if you are going to use this, then you have to make sure that the current user is not an admin using is_admin() function.. and only display it if he is not an admin ...
why !?
because if you didn't, it may mess up the wp-admin of your website..
add_action('init', 'process_post');
function process_post()
{
if (!is_admin()) {
echo "test";
}
}
This could be tricky simply because every theme differs with how the loop is displayed, however you could create a plugin to use the loop_start action, which is called before the first post of the standard WP loop:
add_action( 'loop_start', 'test_loop_start' );
function test_loop_start( $query ){
echo 'this is my inserted text';
}
Now using this would display it every single time the loop is called (whether on a page, a post, category page, search page, etc.), which you may not want.
add_action( 'loop_start', 'test_loop_start' );
function test_loop_start( $query ){
if(is_category() OR is_singular()) {
echo 'this is my inserted text';
}
}

Send an Email and Download a PDF on click of Contact Form 7 Submit button

I have a contact form in my Wordpress website. In that I have three fields Name, Email and Mobile, and a button called Submit. When the user fills all the fields and click on Submit button an email should send which can possible with Contact From 7 plugin.
But challenge here is I need to make the user download a PDF also, when he clicks on Submit button upon filling all the fields.'
How can I achieve this in Wordpress?
You can use the wpcf7_mail_sent hook provided by Contact form 7 like this:
add_action('wpcf7_mail_sent', function ($cf) {
// Run code after the email has been sent
});
This link: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/ also describes another way:
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer()
{ ?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event )
{
//Write a javascript code to download the file.
} , false );
</script>
<?php
}
Since the on_sent_ok has been deprecated, here is an example you could use as inspiration.
I had the similar need to add a download CTA after the content of all case studies of a website, but "in exchange" of user's data for:
display a CF7 form on your page, I had the same one on all case studies post type single which I hooked after the content
find a way to get the wanted PDF url for people to download, as for me all case studies have a different PDF, I simply added an ACF field, filtered on PDF only, which returns the file url
based on CF7 Dom events, choose the action you prefer to make the dowload happens, as I am not sending any confirmation email, I prefer working on the wpcf7submit event. Note that wpcf7submit event is fired only if the form has been validated
So the code looks like this:
<?php
// For simplicity, using an anonymous functions
add_action( 'wp_print_footer_scripts', function () {
// Check the wanted singular post type loading
if ( is_admin() || ! is_singular( 'case-study' ) ) {
return;
}
// Check if the ACF PDF field is not empty for use
$pdf_link = get_field( 'pdf' );
if ( empty( $pdf_link ) ) {
return;
}
// Hook on the "wpcf7submit" CF7 Dom event to force the download
printf( "<script>document.addEventListener( 'wpcf7submit', function( event ) { window.open('%s'); }, false );</script>", $pdf_link );
} );

How can I use is_page() inside a plugin?

I want my plugin to register a script only in a certain page.
For example, inside my plugin file I want to write something like this:
if (is_page()) {
$pageid_current = get_the_ID();
$page_slug = get_post($pageid_current)->post_name;
if ($page_slug == 'articles'){
wp_register_script('myscript', '/someurl/main.js');
}
}
But I get the error:
is_page was called incorrectly. Conditional query tags do not work
before the query is run. Before then, they always return false. Please
see Debugging in WordPress for more information. (This message was
added in version 3.1.)
How can I, inside of a plugin, register a script in a certain page?
is_page() only work within template files.
And to use it within plugin files, you need to use it with the combination of template_redirect action hook.
This action hook executes just before WordPress determines which template page to load.
So following snippet would work:
add_action( 'template_redirect', 'plugin_is_page' );
function plugin_is_page() {
if ( is_page( 'articles' ) ) {
wp_register_script( 'my-js-handler', '/someurl/main.js', [], '1.0.0', true );
}
}
You could use is_page() after template redirect so you need to add in the hook like this :
add_action('template_redirect','your_function');
function your_function(){
if ( is_page('test') ) {
// do you thing.
}
}
You must register your script as if you want it to work everywhere.
You can de-register it after the job is done, like this:
function deregister_my_script() {
if (!is_page('page-d-exemple') ) {
wp_deregister_script( 'custom-script-1' );
}
}
add_action('wp_print_scripts', 'deregister_my_script', 100 );

How to add a button to a custom post type in Wordpress?

I have a "Products" custom post type. Normally, this custom post type have an "Add New" button. I want to add another button call "Update from Provider".
Currently, I have modify the Wordpress code (in "wordpress\wp-admin\includes\class-wp-list-table.php") to add that button. In this case, when I update Wordpress, my modified code will be deleted. Therefore, I need to move that button to my plug-in code.
In this case, please help me how to move that button to my plug-in code.
Well, if you opened the core file you saw that there's no action in it where we can hook.
Only a couple of filters. We can use the following:
add_filter( 'views_edit-movies', 'so_13813805_add_button_to_views' );
function so_13813805_add_button_to_views( $views )
{
$views['my-button'] = '<button id="update-from-provider" type="button" title="Update from Provider" style="margin:5px">Update from Provider</button>';
return $views;
}
It produces this:
To put it in an approximate position from where you'd like, use the following:
add_action( 'admin_head-edit.php', 'so_13813805_move_custom_button' );
function so_13813805_move_custom_button( )
{
global $current_screen;
// Not our post type, exit earlier
if( 'movies' != $current_screen->post_type )
return;
?>
<script type="text/javascript">
jQuery(document).ready( function($)
{
$('#update-from-provider').prependTo('span.displaying-num');
});
</script>
<?php
}
Which results in this:

Resources