Add to cart action on CTGY Page

[Matt Zimmermann]

Hi Leslie,

To the best of my knowledge, there should be nothing stopping the ability to use the AJAX function on the category page. However, it will require some JavaScript finesse.

[lesliekirk]

Hi Leslie,

Are you receiving any JavaScript errors or what is happening?

I'll have to start over again - I don't recall what happened when I tried using this, but it must not have been pretty

[Matt Zimmermann]

Hi Leslie,

Are you receiving any JavaScript errors or what is happening?

[lesliekirk]

So, there still is not a way to do this?

[josec]

Hi Leslie,

Although your particular layout might need modifications, this should give you a good start.

Category Product List Layout

...

<div id="js-product-list" class="row bg-white category-product-layout">
<mvt:foreach iterator="product" array="category_listing:products">
<div class="column half medium-one-third large-one-fourth category-product">
<div class="flag">
<mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">
<mvt:assign name="l.settings:product:src" value="l.settings:product:imagetypes:main" />
<mvt:else>
<mvt:assign name="l.settings:product:src" value="g.theme_path $ '/images/img_no_thumb.jpg'" />
</mvt:if>
<a href="&mvte:product:link;" class="category-product-image-wrapper" data-mm-linktype="product-list-link">
<img src="&mvt:product:src;" alt="&mvte:product:name;">
</a>
<div class="category-product-cta-wrapper">
<button type="button" class="button category-product-cta-button category-product-cta-quickview js-quick-view" data-product-link="&mvte:urls:PROD:auto_sep;Product_Code=&mvte:product:code;&amp;show=quickview">
<span class="levels-icon-eye"></span>
<span class="category-product-cta-quickview-text"> Quickview</span>
</button>
<form action="&mvte:urls:_self:auto;" method="POST" class="category-product-form">
<input type="hidden" name="Action" value="ADPR">
<input type="hidden" name="Product_Code" value="&mvte:product:code;">
<input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;">
<input type="hidden" name="Quantity" value="1">
<input type="hidden" name="Attributes" value="Yes" />
<button class="button category-product-cta-button category-product-cta-button-adpr">
<span data-icon="&#xe07a;"></span><span class="category-product-cta-adpr-text"> Add to Cart</span>
</button>
</form>
</div>
</div>
<p class="category-product-name"><a data-mm-linktype="product-list-link" href="&mvte:product:link;">&mvt:product:name;</a></p>
<p>
<mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
<span class="category-product-retail-price">&mvt:product:formatted_base_price;</span> <span class="category-product-sale-price">&mvt:product:formatted_price;</span>
<mvt:else>
<span class="category-product-price">&mvt:product:formatted_price;</span>
</mvt:if>
<mvt:if expr="l.settings:product:customfield_values:customfields:product_flag">
<mvt:do file="g.Module_Feature_URI_UT" name="l.settings:clean_flag" value="tolower(URI_Slugify(l.settings:product:customfield_values:customfields:product_flag))" />
<span class="category-product-flag &mvt:clean_flag;">&mvt:product:customfield_values:customfields:product_flag;</span>
</mvt:if>
</p>
</div>
</mvt:foreach>
</div>
<!-- end category-product listings -->

...

Add to jsCTGY in scripts.js

function addToCart () {
$(document).on('click', '.js-add-to-cart', function(e) {
var $container = $(this).closest('.category-product');
var purchaseForm = $container.find('.js-purchase-product');
// Check the form is not currently submitting
if (purchaseForm.data('formstatus') !== 'submitting') {
// Set up variables
var form = purchaseForm;
var formData = form.serialize();
var formUrl = form.attr('action').replace('^https?:', '');
var formMethod = form.attr('method');
var responseMessage = $('#js-purchase-message');
var miniBasket = $('#js-mini-basket-container');
var processingImage = $('.processing-purchase', $container);
var purchaseButton = $(this);
var purchaseButtonText = purchaseButton.val();
var productcode = $("input[name='Product_Code']").val();

// Add status data to form
form.data('formstatus', 'submitting');

// Show processing message
processingImage.show();
purchaseButton.toggleDisabled().val('Processing...');
responseMessage.html('').hide();

// Send data to server for validation
$.ajax({
url: formUrl,
type: formMethod,
cache: false,
data: formData,
success: function(data, textStatus, jqXHR) {
if (data.search(/id="js-BASK"/i) != -1) {
$('html, body').animate({scrollTop: '0px'}, 250);
var responseMiniBasket = $(data).find('#js-mini-basket-container'),
miniBasketCount = responseMiniBasket.contents()[1].getAttribute('data-itemcount'),
miniBasketSubtotal = ' ' + responseMiniBasket.contents()[1].getAttribute('data-subtotal'),
miniBasketLinkCount = $('#js-mini-basket-count, #js-mobile-basket-button .notification'),
miniBasketLinkSubtotal = $('#js-mini-basket-subtotal');

$('.js-mini-basket-count').attr('data-basket-count', miniBasketCount); // Update basket quantity (display only)
miniBasketLinkSubtotal.text(miniBasketSubtotal); // Update basket subtotal (display only)

miniBasket.html(responseMiniBasket.contents()).addClass('open');
setTimeout(function () {
miniBasket.removeClass('open');
}, 4000);
}
else if(data.search(/id="js-PATR"/i) != -1) {
var missingAttrs = [];
form.find('.required').each(function () {
missingAttrs.push(' ' + $(this).attr('title'));
});
alert('All Required options have not been selected. Please review the following options: ' + missingAttrs + '.');
}
else if(data.search(/id="js-PLMT"/i) != -1) {
alert('We do not have enough of the Size/Color you have selected. Please adjust your quantity.');
}
else if(data.search(/id="js-POUT"/i) != -1) {
alert('The Size/Color you have selected is out of stock. Please review your options or check back later.');
}
else {
console.error('Unsuccessful ADPR');
console.log(formData, productcode, missingAttrs);
window.location.replace('http://www.a-zdarts.com/mm5/merchant.mvc?Screen=PROD&Product_Code=' + productcode);
}

// Hide processing message and reset formstatus
processingImage.hide();
purchaseButton.toggleDisabled().val(purchaseButtonText);
form.data('formstatus', 'idle');
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
}
// Prevent form from submitting
e.preventDefault();
});
}
addToCart();

In the ctgy-category_listing this code (mvt) work well to add product in the cart, but if you reload the same page then is added again the last one product in the cart.
The function for quick view is not working.
I think that JS code is not working because the class is different into page.

[Bruce - PhosphorMedia]

To manage multiple forms verses the one that appears on a product page, the product's form container is going to need a unique value for each product (i.e., an id #) and the function addToCart () function is going to needs some rewrites to support that.

That being said, for B2B, we usually go with a 'multi-add' scenario on categories.My approach to this would be to roll my own ajaxed add to basket, the call the mini-basket after the multi-adds have finished.

[lesliekirk]

Leslie, did you solve this? I need the exact same behavior too. It seems to all our beta testers that the quick view should "stick" on the CTGY page. They tell us that having to click back to get where they were is "stupid and it doesn't work right", that they "have to click a lot to get back" where they were.

I might add, the site is a wholesale site, and often the shoppers don't need the details if they are simply reordering.

I have not

[kayakbabe]

Leslie, did you solve this? I need the exact same behavior too. It seems to all our beta testers that the quick view should "stick" on the CTGY page. They tell us that having to click back to get where they were is "stupid and it doesn't work right", that they "have to click a lot to get back" where they were.

I might add, the site is a wholesale site, and often the shoppers don't need the details if they are simply reordering.

[lesliekirk]

Still trying to get this to work - it's looking like some sort of form error.

[Matt Zimmermann]

andrewbond - Did you make the page and JavaScript updates as posted above? If so, are you receiving any errors on the page and can you post a link to the page in question?

[andrewbond]

Was there ever a solution to this question? I would also like this option on the Iron and Wool Ready Theme.. Thanks!

[lesliekirk]

Thanks Matt. I must have done something wrong. I'm getting a 404 error when adding to the cart.

[Matt Zimmermann]

Hi Leslie,

Although your particular layout might need modifications, this should give you a good start.

Category Product List Layout

...

<div id="js-product-list" class="row bg-white category-product-layout">
    <mvt:foreach iterator="product" array="category_listing:products">
        <div class="column half medium-one-third large-one-fourth category-product">
            <div class="flag">
                <mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">
                    <mvt:assign name="l.settings:product:src" value="l.settings:product:imagetypes:main" />
                <mvt:else>
                    <mvt:assign name="l.settings:product:src" value="g.theme_path $ '/images/img_no_thumb.jpg'" />
                </mvt:if>
                <a href="&mvte:product:link;" class="category-product-image-wrapper" data-mm-linktype="product-list-link">
                    <img src="&mvt:product:src;" alt="&mvte:product:name;">
                </a>
                <div class="category-product-cta-wrapper">
                    <button type="button" class="button category-product-cta-button category-product-cta-quickview js-quick-view" data-product-link="&mvte:urls:PROD:auto_sep;Product_Code=&mvte:product:code;&amp;show=quickview">
                        <span class="levels-icon-eye"></span>
                        <span class="category-product-cta-quickview-text"> Quickview</span>
                    </button>
                    <form action="&mvte:urls:_self:auto;" method="POST" class="category-product-form">
                        <input type="hidden" name="Action" value="ADPR">
                        <input type="hidden" name="Product_Code" value="&mvte:product:code;">
                        <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;">
                        <input type="hidden" name="Quantity" value="1">
                        <input type="hidden" name="Attributes" value="Yes" />
                        <button class="button category-product-cta-button category-product-cta-button-adpr">
                            <span data-icon="&#xe07a;"></span><span class="category-product-cta-adpr-text"> Add to Cart</span>
                        </button>
                    </form>
                </div>
            </div>
            <p class="category-product-name"><a data-mm-linktype="product-list-link" href="&mvte:product:link;">&mvt:product:name;</a></p>
            <p>
                <mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
                    <span class="category-product-retail-price">&mvt:product:formatted_base_price;</span> <span class="category-product-sale-price">&mvt:product:formatted_price;</span>
                <mvt:else>
                    <span class="category-product-price">&mvt:product:formatted_price;</span>
                </mvt:if>
                <mvt:if expr="l.settings:product:customfield_values:customfields:product_flag">
                    <mvt:do file="g.Module_Feature_URI_UT" name="l.settings:clean_flag" value="tolower(URI_Slugify(l.settings:product:customfield_values:customfields:product_flag))" />
                    <span class="category-product-flag &mvt:clean_flag;">&mvt:product:customfield_values:customfields:product_flag;</span>
                </mvt:if>
            </p>
        </div>
    </mvt:foreach>
</div>
<!-- end category-product listings -->

...

Add to jsCTGY in scripts.js

function addToCart () {
    $(document).on('click', '.js-add-to-cart', function(e) {
        var $container   = $(this).closest('.category-product');
        var purchaseForm = $container.find('.js-purchase-product');
        // Check the form is not currently submitting
        if (purchaseForm.data('formstatus') !== 'submitting') {
            // Set up variables
            var form               = purchaseForm;
            var formData           = form.serialize();
            var formUrl            = form.attr('action').replace('^https?:', '');
            var formMethod         = form.attr('method');
            var responseMessage    = $('#js-purchase-message');
            var miniBasket         = $('#js-mini-basket-container');
            var processingImage    = $('.processing-purchase', $container);
            var purchaseButton     = $(this);
            var purchaseButtonText = purchaseButton.val();
            var productcode        = $("input[name='Product_Code']").val();

            // Add status data to form
            form.data('formstatus', 'submitting');

            // Show processing message
            processingImage.show();
            purchaseButton.toggleDisabled().val('Processing...');
            responseMessage.html('').hide();

            // Send data to server for validation
            $.ajax({
                url: formUrl,
                type: formMethod,
                cache: false,
                data: formData,
                success: function(data, textStatus, jqXHR) {
                    if (data.search(/id="js-BASK"/i) != -1) {
                        $('html, body').animate({scrollTop: '0px'}, 250);
                        var responseMiniBasket = $(data).find('#js-mini-basket-container'),
                            miniBasketCount = responseMiniBasket.contents()[1].getAttribute('data-itemcount'),
                            miniBasketSubtotal = ' ' + responseMiniBasket.contents()[1].getAttribute('data-subtotal'),
                            miniBasketLinkCount = $('#js-mini-basket-count, #js-mobile-basket-button .notification'),
                            miniBasketLinkSubtotal = $('#js-mini-basket-subtotal');

                        $('.js-mini-basket-count').attr('data-basket-count', miniBasketCount); // Update basket quantity (display only)
                        miniBasketLinkSubtotal.text(miniBasketSubtotal); // Update basket subtotal (display only)

                        miniBasket.html(responseMiniBasket.contents()).addClass('open');
                        setTimeout(function () {
                            miniBasket.removeClass('open');
                        }, 4000);
                    }
                    else if(data.search(/id="js-PATR"/i) != -1) {
                        var missingAttrs = [];
                        form.find('.required').each(function () {
                            missingAttrs.push(' ' + $(this).attr('title'));
                        });
                        alert('All Required options have not been selected. Please review the following options: ' + missingAttrs + '.');
                    }
                    else if(data.search(/id="js-PLMT"/i) != -1) {
                        alert('We do not have enough of the Size/Color you have selected. Please adjust your quantity.');
                    }
                    else if(data.search(/id="js-POUT"/i) != -1) {
                        alert('The Size/Color you have selected is out of stock. Please review your options or check back later.');
                    }
                    else {
                        console.error('Unsuccessful ADPR');
                        console.log(formData, productcode, missingAttrs);
                        window.location.replace('http://www.a-zdarts.com/mm5/merchant.mvc?Screen=PROD&Product_Code=' + productcode);
                    }

                    // Hide processing message and reset formstatus
                    processingImage.hide();
                    purchaseButton.toggleDisabled().val(purchaseButtonText);
                    form.data('formstatus', 'idle');
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            });
        }
        // Prevent form from submitting
        e.preventDefault();
    });
}
addToCart();

[lesliekirk]

Is it possible to get the same Add to Cart action that the PROD Page has on the CTGY Page? Right now, on the CTGY Page (using the Line Item layout) when the Add to Cart button is clicked, the customer is taken to the BASK. I'd like to have the customer stay on the CTGY screen AND have the mini-basket display. I thought using the button code from the PROD page and changing the body id to js-PROD might "trick" the javascript. Obviously, I'm wrong.