1

You can see what I am trying to do on this test page - the top button labelled "MAILCHIMP + CHECKOUT" is what I'm working on.

I am trying to accomplish 3 things (at the moment 2 & 3 are working on my test page):

  1. Send form data to MailChimp
  2. Redirect to checkout
  3. Auto-populate the checkout fields with the form data

I can use a plugin and make a form that sends data to MailChimp that works fine, but when I add code to do 2 & 3 the MailChimp plugin fails. The plugin I'm using is MailChimp for WordPress and the form I made with it is structured like this:

<p>
    <label>First Name</label>
    <input type="text" name="FNAME" placeholder="First Name"
    required="">
</p>
<p>
    <label>Last Name</label>
    <input type="text" name="LNAME" placeholder="Last Name"
    required="">
</p>
<p>
    <label>Phone Number</label>
    <input type="tel" name="PHONE" placeholder="Phone" required="">
</p>
<p>
    <label>Email address: 
        <input type="email" name="EMAIL" placeholder="Email" required />
</label>
</p>
<p>
    <input type="submit" value="Give me 2 Weeks FREE" onclick=""/>
</p>

The code I'm using to accomplish 2 & 3 is here:

<script>
    var regForm1 = jQuery('#mc4wp-form-1'),
         regBtn1 = jQuery('#mc4wp-form-1 input[type=submit]');

    regBtn1.on('click touch', function(e1) {
        e1.preventDefault();

        billing_first_name = regForm1.find('.mc4wp-form-fields > p:nth-child(1) > input:nth-child(2)').val()
         billing_last_name = regForm1.find('.mc4wp-form-fields > p:nth-child(2) > input:nth-child(2)').val()
                     billing_phone = regForm1.find('.mc4wp-form-fields > p:nth-child(3) > input:nth-child(2)').val()           
             billing_email = regForm1.find('.mc4wp-form-fields > p:nth-child(4) > label:nth-child(1) > input:nth-child(1)').val()
                
        // Add Cookies
         if (billing_first_name && billing_last_name && billing_phone && billing_email) {

              alert(billing_first_name + " - " + billing_last_name + " - " + billing_phone + " - " + billing_email);

            Cookies.set("billing_first_name", billing_first_name, {
               path: '/',
               expiration: 30
            })
            Cookies.set("billing_last_name", billing_last_name, {
               path: '/',
               expiration: 30
            })
            Cookies.set("billing_phone", billing_phone, {
                path: '/',
                expiration: 30
            })
            Cookies.set("billing_email", billing_email, {
                path: '/',
                expiration: 30
            })
            
            var url = `?add-to-cart=18074`;
            alert(url);
            window.location = url; 
            } else {
                alert("Please fill in all fields");
            }
        });
    // Fill in the cookies and immediately remove
    (function($) {
        $(document).ready(function() {
            const billing_first_name = Cookies.get("billing_first_name");
            const billing_last_name = Cookies.get("billing_last_name");
            const billing_email = Cookies.get("billing_email");
            const billing_phone = Cookies.get("billing_phone");

        if (billing_first_name) {
            $("#billing_first_name").val(billing_first_name)
            Cookies.remove("billing_first_name")
        }
        if (billing_last_name) {
            $("#billing_last_name").val(billing_last_name)
            Cookies.remove("billing_last_name")
        }
        if (billing_phone) {
            $("#billing_phone").val(billing_phone)
            Cookies.remove("billing_phone")
        }
        if (billing_email) {
            $("#billing_email").val(billing_email)
            Cookies.remove("billing_email")
        }
    })
    })(jQuery)
    
</script>

Any ideas on how I could make this work? Do I need to make something wait for something or do I need an entirely new approach?

1 Answer 1

0

I got help with this, the fix involved two functions in functions.php and one plugin.

The functions:

// Add to Cart for optin Form

add_action( 'template_redirect', 'website_add_to_cart_on_custom_page');
 
function website_add_to_cart_on_custom_page(){
 
    if( is_page( 'homepagee' ) ) { // is a page slug
 
        WC()->cart->add_to_cart( 18074 ); // add to cart product with ID
 
    }
 
}


// Autofill checkout fields from URL
 
add_filter( 'woocommerce_checkout_fields' , 'website_prefill_checkout_fields');
  
function website_prefill_checkout_fields ( $checkout_fields ) {
  
    /**
     * Query string fields to populate in checkout,
     *
     * Ex.
     * 'fname' => is query parameter name,
     * 'billing_first_name' => matching field of checkout 
     *
     * You can add other fields in the same way
     */
    $query_fields = array(
         
        'fname' => 'billing_first_name',
        'lname' => 'billing_last_name',
        'email' => 'billing_email',
        'phone' => 'billing_phone',
    );
 
    // We will loop the above array to check if the field exists in URL or not.
    // If it exists we will add it to the checkout field's default value
 
    foreach ( $query_fields as $field_slug => $match_field ) {
         
        // Check if it is in URL or not, An not empty.
        if ( isset( $_GET[ $field_slug ] ) && ! empty( $_GET[ $field_slug ] ) ) {
 
            // Sanitize the value and store it in a variable.
            $field_value = sanitize_text_field( $_GET[ $field_slug ] );
 
            // Check if match field exists in checkout form or not.
            if( isset( $checkout_fields['billing'][ $match_field ] ) ){
 
                // Assign the pre-fill value to checkout field
                $checkout_fields['billing'][ $match_field ]['default'] = $field_value;
            }
        }       
    }
 
 
    // Return the fields
    return $checkout_fields;
}

add_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_login_form', 10 );

The plugin we used was https://wordpress.org/plugins/mailchimp-for-wp/ and under the Form > Form Behaviour in this section we selected 'Yes' for the "Hide form after a successful sign-up?" and then added a url in the "Redirect to URL after successful sign-ups" field.

In that field, we followed the following format:

https://domain.com/checkout/?fname={data key="FNAME"}&lname={data key="LNAME"}&email={data key="EMAIL"}&phone={data key="PHONE"} 

Hopefully this helps someone down the road.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.