Question about free product and cache on cart

[viztamin]

Hi,
I found some problem when using the coupon plugin.

My objective is, when the customer buys the products that meet the condition then the auto coupon will give 1 of 3 choices for free. It allows multiplication of free product equal to the amount of they buy the conditioning product.

here is my test site: http://test.scoozipizza.com/

e.g.
– If you add “Salmon pizza” to cart, then you click the cart icon on top right, you will see the free product show in detail and there is EDIT button besides.
– If you click Edit button then will show the optional of free product that customer can select.
– If you increase the amount and update cart, then you click edit button again it looks like there are some delay and cache in the cart.

Ref. Video
https://youtu.be/xgNyFb7LDR0
see at sec 32

*I don’t use any cache plugin.

Do you have any idea how to solve this case?

Regards,
Wit

[Soft79]

Hi,
First of all: props for the beatiful override with the modal gift form!

I tried to reproduce your issue on mobile (Android) but the add to cart buttons don’t work. Instead I used ?add-to-cart= to test…

After adding several pizzas and gifts to the cart and then reducing the amount of pizzas; the amount of gifts on the form were also reduced.

Please use the dev tools of your browser to verify if the ajax fragment received after “update cart” has the right amounts.

I’ll try it from a desktop later.

[Soft79]

I tried it from the desktop it seems to work well.

Only, if the customer changes the values too fast; the popup will be refreshed all the time which may cause issues.

This is what triggers the auto update in our script:

$( document ).on(
  'change input',
  '.wjecf-auto-submit :input',
  me.ajax_update_cart
);

Maybe it’s a good idea to work around that. For example removing .wjecf-auto-submit from the form but wrapping the submit-button with a .wjecf-auto-submit …

[Soft79]

First, I noticed you’re directly editing the storefront theme. This is a bad idea, you should use a child theme.

I created a modal version of our template. Try the following override in YOUR_CHILD_THEME/woocommerce-auto-added-coupons/cart/select-free-product.php:

<?php
/**
 * Select Free Product on Cart page
 *
 * This template can be overridden by copying it to yourtheme/woocommerce-auto-added-coupons/cart/select-free-product.php
 *
 * @version     2.6.0
 */

defined('ABSPATH') or die();

/**************************************************************************

Available variables: 
 $free_gift_coupons     : (deprecated) An array of WC_Coupon objects applied to the cart that grant free product selections
 $template              : The template helper object (WJECF_Pro_Free_Products_Template)
 $coupons_form_data     : An array with the following info:
     [ 
        $coupon_code => 
            [
                 'coupon'                  => The WC_Coupon object
                 'coupon_code'             => The coupon code
                 'allow_multiple_products' => True if multiplication is enabled for this coupon
                 'form_items'              => WJECF_Free_Product_Item objects. Contains all info about the free products 
                 'selected_quantity'       => Amount of items selected by the customer
                 'max_quantity'            => The max amount of free products for this coupon
                 'name_prefix'             => The name prefix for all form input elements (checkbox / radiobutton / input type="number") for this coupon (e.g. 'wjecf_free_sel[0]')
                 'id_prefix'               => The unique prefix to use for all DOM elements for this coupon ( e.g. 'wjecf_free_sel_0')
                 'totalizer_id'            => The id of the <input> that is used to count the total amount of selected items (e.g. 'wjecf_free_sel_0_total_qty')
                 'template'                => The template helper object (WJECF_Pro_Free_Products_Template)
            ],
     ]

**************************************************************************/

//Don't display if no free product selections...
if (empty( $coupons_form_data ) ) return;

?>
<style>
.wjecf-modal-group {
    width:100vw;
    height:100vh;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
}
.wjecf-modal-popup {
    height: auto;
    padding: 100px 30px;
    margin: 15px auto;

    width: 900px;
    /* height: 500px; */
    max-width: calc(100% - 30px);
    max-height: calc(100% - 30px);
    overflow: auto;
    background: #fff;
    position: relative;
    text-align: center;
}
</style>
<tr class="wjecf-fragment-cart-select-free-product">
    <td colspan="6" data-title="<?php _e( 'Free products', 'woocommerce-jos-autocoupon' ); ?>">
        <button type="button" onclick="jQuery('.wjecf-modal-group').show();" style="margin-left:auto">Choose your free gift</button>    
        <div class='wjecf-modal-group' style='display:none'>
            <div class='wjecf-modal-popup'>
            <?php
                //Only auto-popup if the user didn't select (all) the free gifts 
                $auto_popup = false;

                //Display the free product options
                foreach( $coupons_form_data as $coupon_code => $coupon_form_data ):
                    $template->render_template( 'coupon-select-free-product.php', $coupon_form_data );
                    if ($coupon_form_data->selected_quantity < $coupon_form_data->max_quantity ) $auto_popup = true;
                endforeach;
            ?>
            <button type="submit" name="update_cart">Submit</button>
            </div>
        </div>
        <?php
            if ( $auto_popup ):
        ?>
                <script>
                    jQuery( document ).ready( function($) {
                        $('.wjecf-modal-group').show();
                    });
                </script>
        <?php
            endif;
        ?>
    </td>
</tr>

[Author]

Posts