Home > How to... > Script Library > Minimum Quantity script

Minimum Quantity script

To implement this script go to Design -> Product Detail Design. Then paste in the following code on the bottom of the html tab:

<script>
// the four values below are all in in milliseconds
// 1000 milliseconds = 1 second
// Time for the add to cart button to appear again
var add_to_cart_hidden = 1500
// Speed of the fade in of the message
var message_fadein = 500
// Delay for the message to start dissapearing
var message_fadeout_start = 500
// Speed of the fade ot of the message
var message_fadeout = 1000
 
    var target_button = '#btn_AddToBasket';
    var target_text = 'input#txt_Quantity';
    var limit
 
minimum_quantity = function(limit) {
    if(limit != null) {
    $(target_button).hover(
        function() {
            value = parseInt($(target_text).val());
            if ( value < limit ) {
                $(target_button).hide();
                $('#error_message').fadeIn(message_fadein);
                $(target_text).val(limit);
                setTimeout( function(){
                    $(target_button).show();
                }, add_to_cart_hidden);
            } else {
                return false;
            }
        },
        function() {
        setTimeout( function(){
            $('#error_message').fadeOut(message_fadeout);
        }, message_fadeout_start); 
        });
    } else {
        return false;
    }
}
     
$(document).ready( function() {
    limit = $('input#minimum_quantity').attr('value');
    // You can chage the default error message here
    var message =  'Minimum quantity for this item is '+limit+'.</br>The value has been reset';
    $(target_button).parent().parent().append('<div id="error_message" style="display: none;">'+message+'</div>');
    $(target_text).val(limit);
     
});
 
$(function() {
    minimum_quantity(limit);
});
</script>

Then go to the CSS tab on paste the following on the bottom:

div#error_message {
    position:absolute;
    top:40%;
    left:40%;
    z-index:10000000;
    background-color:white;
    color:black;
    padding:20px 10px;
    border:1px solid black;
    text-align:center;
}

The final step is placing a marker on your product description, alternatively if you plan on implementing a store wide minimum quantity limit, simply paste it on the html tab in Product detail design. Here is the marker:

<input id="minimum_quantity" type="hidden" value="9999" />

The value attribute controls the limit you want to impose. That means if you would like the minimum quantity on a product to be 10, change the 9999 in this example to 10.


Translate and Localize your website with 'Localizer pluggin

Shopping Cart Software by Ashop