Announcement

Collapse
No announcement yet.

Add to cart action on CTGY Page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Matt Zimmermann
    replied
    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.

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by Matt Zimmermann View Post
    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

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Leslie,

    Are you receiving any JavaScript errors or what is happening?

    Leave a comment:


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

    Leave a comment:


  • josec
    replied
    Originally posted by Matt Zimmermann View Post
    Hi Leslie,

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

    Category Product List Layout
    Code:
    ...
    
    <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
    Code:
    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.

    Last edited by Rick Wilson; 03-08-19, 09:29 AM.

    Leave a comment:


  • Bruce - PhosphorMedia
    replied
    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.

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by kayakbabe View Post
    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

    Leave a comment:


  • kayakbabe
    replied
    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.

    Leave a comment:


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

    Leave a comment:


  • Matt Zimmermann
    replied
    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?

    Leave a comment:


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

    Leave a comment:


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

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Leslie,

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

    Category Product List Layout
    Code:
    ...
    
    <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
    Code:
    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();

    Leave a comment:


  • lesliekirk
    started a topic Add to cart action on CTGY Page

    Add to cart action on CTGY Page

    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.
Working...
X