Announcement

Collapse
No announcement yet.

Bring Customer to Another Category Page When certain product is added to cart.

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

    Bring Customer to Another Category Page When certain product is added to cart.

    I was wondering if it is possible that when a certain product is added to the cart, it shows the product being added to the mini basket as normal, while also bringing them to a certain category page.
    Nick Harkins
    www.loveisarose.com
    *Web Developer
    *Miva
    *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

    #2
    You could try passing the URL you want to redirect to when the submit is made and, after the mini-basket hides, set a redirect to the URL passed. This would need to be modified in the JavaScript.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      Okay so I would have to add to this section of the scripts.js file?

      Code:
              // ---- AJAX Add To Cart ---- //
      
              function addToCart () {
      
                  $('#js-add-to-cart').on('click', function (e) {
      
                      var purchaseForm = $('#js-purchase-product');
      
                      // Check the form is not currently submitting
      
                      if (purchaseForm.data('formstatus') !== 'submitting') {
      
                          // Set up variables
      
                          var form = purchaseForm,
      
                              formData = form.serialize(),
      
                              randomNo = Math.ceil(Math.random() * 1000000), // IE Hack: Creating random number to refresh ajax call
      
                              formUrl = form.attr('action'),
      
                              formMethod = form.attr('method'),
      
                              responseMessage = $('#js-purchase-message'),
      
                              miniBasket = $('#js-mini-basket-container'),
      
                              processingImage = $('#js-processing-purchase'),
      
                              purchaseButton = $(this),
      
                              purchaseButtonText = purchaseButton.val();
      
      
      
                          if (/\?/.test(formUrl)) {
      
                              formUrl = formUrl + '&v=' + randomNo;
      
                          }
      
                          else {
      
                              formUrl = formUrl + '?v=' + randomNo;
      
                          };
      
      
      
                          // 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,
      
                              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');
      
      
      
                                      miniBasketLinkCount.text(miniBasketCount); // Update basket quantity (display only)
      
                                      miniBasketLinkSubtotal.text(miniBasketSubtotal); // Update basket subtotal (display only)
      
      
      
                                      miniBasket.html(responseMiniBasket.contents()).addClass('open');
                                      $('.mini-basket-table-wrap').scrollTop($('.mini-basket-table-wrap')[0].scrollHeight);
      
                                      setTimeout(function () {
      
                                          miniBasket.removeClass('open');
      
                                      }, 10000);
      
      
      
                                      // Re-Initialize Attribute Machine (if it is active)
      
                                      if (typeof attrMachCall !== 'undefined') {
      
                                          attrMachCall.Initialize();
      
                                      };
      
                                  }
      
                                  else if(data.search(/id="js-PATR"/i) != -1) {
      
                                      var missingAttrs = [];
      
                                      form.find('.required').each(function () {
      
                                          missingAttrs.push(' ' + $(this).attr('title'));
      
                                      });
      
                                      responseMessage.html('All <em class="red">Required</em> options have not been selected.<br />Please review the following options: <span class="red">' + missingAttrs + '</span>.').fadeIn();
      $('html, body').animate({scrollTop: ($('#js-purchase-message').offset().top - 100)},500);
      
                                  }
      
                                  else if(data.search(/id="js-PLMT"/i) != -1) {
      
                                      responseMessage.html('We do not have enough of the Size/Color you have selected.<br />Please adjust your quantity.').fadeIn().delay(3000).fadeOut();
      
                                  }
      
                                  else if(data.search(/id="js-POUT"/i) != -1) {
      
                                      responseMessage.html('The Size/Color you have selected is out of stock.<br />Please review your options or check back later.').fadeIn().delay(3000).fadeOut(); 
      
                                  }
      
                                  else {
      
                                      responseMessage.html('Please review options.').fadeIn().delay(3000).fadeOut();
      
                                  };
      
      
      
                                  // 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.stopImmediatePropagation();
                      e.preventDefault();
      
                  });
      
              };
      
              var addToCart = new addToCart;
      
      
      
              // ---- Related Products Carousel ---- //
      
              $.ajax({
      Would it be an if statement that would check the product codes? That way it would only redirect if those certain products are added?
      Nick Harkins
      www.loveisarose.com
      *Web Developer
      *Miva
      *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

      Comment


        #4
        Correct. The IF statement would probably best used as a custom product field so, it it is populate, the redirect URL is passed.
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          Okay.

          Also, Is there also something I can add for any product added to the cart that currently does not redirect and stays on the product page to have any entered product attributes to be cleared?
          Nick Harkins
          www.loveisarose.com
          *Web Developer
          *Miva
          *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

          Comment


            #6
            You could try performing a form reset through JavaScript, however those can be problematic.
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment


              #7
              Okay I won't do that then.

              Thanks for the help
              Nick Harkins
              www.loveisarose.com
              *Web Developer
              *Miva
              *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

              Comment


                #8
                So I added this to the scripts.js file

                Code:
                                                if ( $( "#family-tree" ).length ) {
                
                                                    $(document).ready(function(){
                                                        var url = "https://dev.loveisarose.com/family-tree-hearts-discs.html";
                                                        $(location).attr('href',url);
                                                    });
                
                                                };
                I added it here:

                Code:
                                    $.ajax({
                
                                        url: formUrl,
                
                                        type: formMethod,
                
                                        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');
                
                
                
                                                miniBasketLinkCount.text(miniBasketCount); // Update basket quantity (display only)
                
                                                miniBasketLinkSubtotal.text(miniBasketSubtotal); // Update basket subtotal (display only)
                
                
                
                                                miniBasket.html(responseMiniBasket.contents()).addClass('open');
                                                $('.mini-basket-table-wrap').scrollTop($('.mini-basket-table-wrap')[0].scrollHeight);
                
                                                setTimeout(function () {
                
                                                    miniBasket.removeClass('open');
                
                
                                                }, 5000);
                
                                                if ( $( "#family-tree" ).length ) {
                
                                                    $(document).ready(function(){
                                                        var url = "https://dev.loveisarose.com/family-tree-hearts-discs.html";
                                                        $(location).attr('href',url);
                                                    });
                
                                                };
                
                                                // Re-Initialize Attribute Machine (if it is active)
                
                                                if (typeof attrMachCall !== 'undefined') {
                
                                                    attrMachCall.Initialize();
                
                                                };
                
                                            }
                
                                            else if(data.search(/id="js-PATR"/i) != -1) {
                
                                                var missingAttrs = [];
                
                                                form.find('.required').each(function () {
                
                                                    missingAttrs.push(' ' + $(this).attr('title'));
                
                                                });
                The redirect now only happens if the familytree custom product field is present which is show as an empty <div> with an id of family-tree.

                I used this code on the PROD page:

                Code:
                                    <mvt:item name="customfields" param="Read_Product_Code( l.settings:product:code, 'familytree', g.familytree )" />
                                    <mvt:if expr="NOT ISNULL g.familytree">
                                        <div id="family-tree"></div>
                                    </mvt:if>
                The only thing I'm having trouble with is having the redirect happen after the mini basket closes

                Am I just not putting the redirect jquery code in the right place or in the right order?

                Thanks,

                Nick
                Nick Harkins
                www.loveisarose.com
                *Web Developer
                *Miva
                *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                Comment


                  #9
                  Hi Nick,

                  You would want to put the redirect code within the setTimeout function which closes the mini-basket.
                  Matt Zimmermann

                  Miva Web Developer
                  Alchemy Web Development
                  https://www.alchemywebdev.com
                  Site Development - Maintenance - Consultation

                  Miva Certified Developer
                  Miva Professional Developer

                  https://www.dev4web.net | Twitter

                  Comment


                    #10
                    I knew it was something small I was missing.

                    Thanks again for the help. That fixed the issue.
                    Nick Harkins
                    www.loveisarose.com
                    *Web Developer
                    *Miva
                    *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

                    Comment

                    Working...
                    X