Cart Popup on collection page

Highlighted
New Member
9 0 0

Hello!

 

I am working with the Debut theme and using grid layout to displays my products in each collection.

I managed to create an add to cart button with a plus minus quantity selector for each product, but when you add an item to the cart, it takes you to the cart. Shoppers then have to "continue shopping" and navigate back to the collection to add another product.  If possible, I would like the cart popup to appear or have the page not go to the cart at all. The url is lifesabaatch.com the collection is the build a baatch

 

0 Likes
Highlighted
Shopify Partner
57 3 3

Hey there! I just reviewed your theme and doing this would require a little bit of coding  with Javascript. Are you comfortable with that?

 

It will involve copy/pasting some already existing JS code on your theme as well as writing a little bit of our own. If you are comfortable with please let me know, and i'll come back with a more detailed response on how to accomplish.

0 Likes
Highlighted
New Member
9 0 0

I have a limed bit of experience with coding, but I will give it a shot!

0 Likes
Highlighted
New Member
9 0 0

Sounds good, ill give it a shot. how would this be done?

0 Likes
Highlighted
Shopify Partner
57 3 3

 

Okay! We'll try to hack together a solution here that involves the least amount of custom coding. Your theme's base code does not make this easy, as the cart popup is tied directly to the product page logic.

 

Just to lay the ground work here for the goal here: You are trying to make the Add To Cart button you developed on the collection pages work with an Ajax functionality on submit, similar to the actions on your Product Pages.

 

You theme accomplishes this via Javascript inside the file azexo.js in your assets folder of your theme. To be more exact, the function inside the file that accomplishes this is 

_addItemToCart

You should be able to find this if you CRTL+F for that phrase with the file open. Your theme unfortunately only exposes this exact function on the product pages. Heres how we are going to adapt this file to work for you!

Go near the bottom of the file, where you see this:

        }
        $body.find('.azh-content-wrapper').addClass('az-enable-transitions');
    });
})(jQuery);jQuery.noConflict(true);

 

We are going to add some code just above the last line (before the }); on the second to last line), so it looks like this:

 

(function(){
const _addItemCustom = function (data) {
                var self = this;
                var params = {
                    url: '/cart/add.js',
                    data: jQuery(data).serialize(),
                    dataType: 'json'
                };

                $.post(params)
                        .done(function (item) {

                        })
                        .fail(function (response) {

                        });
};

$(document).on('submit', '.grid__item--collection-template form', function(event){
 event.preventDefault();
  _addItemCustom($(event.target));
});
})();})(jQuery);jQuery.noConflict(true);

 

Now this will handle the adding the product w/o going to the cart page. But the trouble is populating/showing the cart popup!  I will have to come back to figure out how to re-work your cart drawer at the moment, I'm posting this comment hoping someone else might be able to pick it up while I'm busy!

 

0 Likes
Highlighted
New Member
9 0 0

Screen Shot 2020-06-04 at 1.48.53 PM.png

 

This is what Ive got, but it still directs me to the product page when added to cart is pushed

0 Likes
Highlighted
Shopify Partner
57 3 3

Looks like you deleted an extra line of code.

 

You have this

 

$body.find('.azh-content-wrapper').addClass('az-enable-transitions');
    $body.find('.azh-content-wrapper').addClass('az-enable-transitions');
    (function(){

it should look like 

$body.find('.azh-content-wrapper').addClass('az-enable-transitions');
    $body.find('.azh-content-wrapper').addClass('az-enable-transitions');
 });
    (function(){
0 Likes
Highlighted
New Member
9 0 0
        $body.find('.azh-content-wrapper').addClass('az-enable-transitions');
    $body.find('.azh-content-wrapper').addClass('az-enable-transitions');
 });
    (function(){
const _addItemCustom = function (data) {
                var self = this;
                var params = {
                    url: '/cart/add.js',
                    data: jQuery(data).serialize(),
                    dataType: 'json'
                };

                $.post(params)
                        .done(function (item) {

                        })
                        .fail(function (response) {

                        });
};

$(document).on('submit', '.grid__item--collection-template form', function(event){
 event.preventDefault();
  _addItemCustom($(event.target));
});
})(jQuery);jQuery.noConflict(true);

Updated, still takes me to the cart when a quantity is selected and ad to cart is pushed.  I really appreciate you taking the time to help me.

0 Likes
Highlighted
Shopify Partner
57 3 3

One more syntax error fix! I've editted the code you provided above

 

        $body.find('.azh-content-wrapper').addClass('az-enable-transitions');
    $body.find('.azh-content-wrapper').addClass('az-enable-transitions');
 });
    (function(){
const _addItemCustom = function (data) {
                var self = this;
                var params = {
                    url: '/cart/add.js',
                    data: jQuery(data).serialize(),
                    dataType: 'json'
                };

                $.post(params)
                        .done(function (item) {

                        })
                        .fail(function (response) {

                        });
};

$(document).on('submit', '.grid__item--collection-template form', function(event){
 event.preventDefault();
  _addItemCustom($(event.target));
});
})();
})(jQuery);jQuery.noConflict(true);
0 Likes
Highlighted
New Member
9 0 0

Fantastic, that took care of going to the cart. I will standby to see if the cart popup can be worked!

0 Likes