Wix Stores - minimum quantity

Ask the community
, ,
1

Hi,

I setting up a Wix site. For logistical issues we only want our customers to buy a minimum of three items or multiples of three. (3,6,9,12…)

I’ve altered the cart page. with the following code:

import { getTotal } from 'backend/store';
import wixStores from 'wix-stores';

let total = 0;
let quantity = 0;
let discount = 0;

$w.onReady(function () {
    console.log("Cart OnReady");
    $w("#anchor3").scrollTo();
    getTotal().then(function(product) {
        total = product.totals.total;
        quantity = product.totals.quantity;
        discount = product.totals.discount;
        console.log("onCartChanged total: "+total+" quantity: "+quantity+" discount: "+discount);
        checkQty(quantity,discount);    
    });

    wixStores.onCartChanged((cart) => {
        total = cart.totals.total;
        quantity = cart.totals.quantity;
        discount = cart.totals.discount;
        console.log("onCartChanged total: "+total+" quantity: "+quantity+" discount: "+discount);
        checkQty(quantity,discount);
    });
});

export function minimumQty (qty) {
 let needed = 0;
 let remainder = quantity % 3;
 //console.log("remainder: "+remainder);
 if (remainder===0) {
        needed = 0;
    } else {
        needed = 3-remainder; 
    }   
 return needed;
}   

export function checkQty (qty,discnt) {
    $w("#boxDisableCheckout").hide();           
    $w("#boxDisableCheckout2").hide();          
 let needed = minimumQty(qty);
 //console.log("needed: "+needed);
 if (needed === 0) {
        $w("#textError").hide();
        $w("#textErroDesc").hide();
        $w("#textErroDesc1").hide();        
        $w("#textOk").show();
        $w("#imageOk").show();
 //enable chechout here
        $w("#boxDisableCheckout").hide();
        $w("#boxDisableCheckout2").hide();      
    } else {
        $w("#textOk").hide();
        $w("#imageOk").hide();
        $w("#textError").text = "You need " + needed + " more bottle(s) to checkout.";
        $w("#textError").show();
        $w("#textErroDesc").show();
        $w("#textErroDesc1").show();
 //disable checkout here 
 if (discnt===0) { 
            $w("#boxDisableCheckout").show();
            $w("#boxDisableCheckout2").hide();          
        } else {
            $w("#boxDisableCheckout2").show();
            $w("#boxDisableCheckout").hide();           
        }       
    }   
}

the objective here was to prevent the “checkout” button from being pressed, unless the order quantity was a multiple of 3. An invalid quantity would show an error message and cover the checkout button with a dummy disabled button, while a valid one would display an Ok message and hide the dummy button.

It sort of worked.

My issue is, the “Checkout” button is a moving target. Adding a promo code, for instance, moves it down by displaying the discount total. I can test is a discount is being applied but, while on the cart page, adding or removing a promo code does not trigger the “onCartChanged” event.

so my questions are:
- Is there any event that gets triggered when a cupon is added or removed?
- I would much rather prefer to disable the “Checkout” button directly, but seem to have absolutely no control over what happens inside the “shoppingCart” object rather than aesthetic changes. Is there any way to prevent an user to checkout, that is, for the “Checkout” button to become disabled by code?

Thanks,
José Caeiro

1 Like
2

Did you ever get this to work? I’m trying to similarly validate checkout and don’t see any API for checkout validation.