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

[SidFeyDesigns]

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.

[Matt Zimmermann]

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.

[SidFeyDesigns]

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

        // ---- 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?

[Matt Zimmermann]

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

[SidFeyDesigns]

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?

[Matt Zimmermann]

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

[SidFeyDesigns]

Okay I won't do that then.

Thanks for the help

[SidFeyDesigns]

So I added this to the scripts.js file

                                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:

                    $.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:

                    <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

[Matt Zimmermann]

Hi Nick,

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

[SidFeyDesigns]

I knew it was something small I was missing.

Thanks again for the help. That fixed the issue.