Announcement

Collapse
No announcement yet.

Add to cart action on CTGY Page

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

  • 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.
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • 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();
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • Thanks Matt. I must have done something wrong. I'm getting a 404 error when adding to the cart.
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


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

        Comment


        • 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?
          Matt Zimmermann
          Director of UI/UX Standards and Theme Development
          / Miva, Inc.

          Comment


          • Still trying to get this to work - it's looking like some sort of form error.
            Leslie Kirk
            Miva Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment


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

              Comment


              • 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
                Leslie Kirk
                Miva Certified Developer
                Miva Merchant Specialist since 1997
                Previously of Webs Your Way
                (aka Leslie Nord leslienord)

                Email me: [email protected]
                www.lesliekirk.com

                Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                Comment


                • 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.
                  Bruce Golub
                  Phosphor Media - "Your Success is our Business"

                  Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                  phosphormedia.com

                  Comment


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

                    Comment


                    • So, there still is not a way to do this?
                      Leslie Kirk
                      Miva Certified Developer
                      Miva Merchant Specialist since 1997
                      Previously of Webs Your Way
                      (aka Leslie Nord leslienord)

                      Email me: [email protected]
                      www.lesliekirk.com

                      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                      Comment


                      • Hi Leslie,

                        Are you receiving any JavaScript errors or what is happening?
                        Matt Zimmermann
                        Director of UI/UX Standards and Theme Development
                        / Miva, Inc.

                        Comment


                        • 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
                          Leslie Kirk
                          Miva Certified Developer
                          Miva Merchant Specialist since 1997
                          Previously of Webs Your Way
                          (aka Leslie Nord leslienord)

                          Email me: [email protected]
                          www.lesliekirk.com

                          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                          Comment


                          • 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.
                            Matt Zimmermann
                            Director of UI/UX Standards and Theme Development
                            / Miva, Inc.

                            Comment

                            Working...
                            X

                            This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

                            This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

                            Accept