Add to cart from collection page - but not navigate to cart when clicked - Simple Theme

Solved
wilow3dev
Tourist
9 0 4

Morning, 

I am using Simple theme.

I have added an 'add-to-cart' on my collection page [product-grid-item.liquid] by following this link:

 https://community.shopify.com/c/Feedback-On-My-Store/Add-to-Cart-button-on-collections-page/td-p/691... 

I added a new snippet called 'add-to-cart.liquid' that contained the following:

 

<form method="post" action="/cart/add" class="add2cart__collection">
      <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
      <input min="1" type="number" id="quantity" name="quantity" value="1" class="add2cart__collection--quantity"/>
       <input type="submit" value="Add" class="btn add2cart__collection--button">
    </form>

 

and have in my product-grid-item.liquid the following:

 

{% include 'add-to-cart'%}

 

 

However I do not want to navigate away to the cart once 'add to cart' is clicked, but instead would like the product added to the cart, and a notification to say that product was added to cart.

This was also requested as a follow up on the link above as well.

Assistance to implement would be appreciated. 

0 Likes
paramSoft
Shopify Partner
1484 243 681

Hello @wilow3dev , for that, you have to implement it using AJAX. PLease reference this site Link 

 
 

image.png

 

if this solution works, then please like and accept it as solution

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
ThemuMitch
Explorer
45 11 11

This is an accepted solution.

@wilow3dev,

 

Go to the Shopify online code editor and edit the theme.js.liquid file. Add this code to the bottom of the file:

 

$(document).ready(function() {
  $('.add2cart__collection--button').on('click', function(evt) {
    evt.preventDefault();
    var $addToCartBtn = $(this),
      $addToCartForm = $(this).closest('form'),
      $addToCartText = $(this).find('span');
    if ($addToCartForm.length) {
      $addToCartBtn
        .data('add-to-cart', $addToCartText.text())
        .prop('disabled', true)
        .addClass('btn--ajax-disabled');
      $.ajax({
        url: '/cart/add.js',
        dataType: 'json',
        type: 'post',
        data: $addToCartForm.serialize(),
        success: function() {
          // reupdate cart count
          theme.afterCartLoad();
          $addToCartBtn.prop('disabled', false);
          $addToCartBtn.removeClass('btn--ajax-disabled');
          $('<div></div>')
            .text(theme.strings.itemAddedToCart)
            .addClass('product-single__notification')
            .insertAfter($addToCartBtn);
        },
        error: function(XMLHttpRequest) {
          var data = eval('(' + XMLHttpRequest.responseText + ')');
          var response = data.description;
          var status = XMLHttpRequest.status;
          $addToCartBtn.removeClass('btn--ajax-disabled');
          if (status === 422) {
            $addToCartText.text(theme.strings.soldOut);
          } else {
            $addToCartBtn.prop('disabled', false);
            $addToCartText.text($addToCartBtn.data('add-to-cart'));
          }
          $addToCartBtn.after('<p class="errors">' + response + '</p>');
        }
      });
    }
  });
});

 

 

After this change, visitors will be able to add products to their cart from collections, without being redirected to the cart page. I've used the existing behaviour of how the Simple theme adds products to the cart, and applied it to your new snippet. Note that this code is specific to both the Simple theme and your custom snippet. If either is changed, this code may no longer work.

If you don't see the changes straight away, you may need to empty your browser cache and hard reload the page.

I hope this helps.

Was your problem solved? Please mark this post as an Accepted Solution
wilow3dev
Tourist
9 0 4

@ThemuMitch 

Thank you for the response and code suggestion. 

This does work [thanks] by: 

- adding product to cart directly without navigating to the cart [very happy with this]

- update cart quantities show on the collection page [perfect]

It also display a notification saying 'item added to cart' which is also what I want. However the positioning violates/ bled over the border box placed around the product in question. [Please see image below for illustration.]

Is it possible to modify this code to have the notification show beneath the ["quantity" and] "add" button?

Thanks in advance.

image.png 

0 Likes
paramSoft
Shopify Partner
1484 243 681

Please provide website url and if your store is password protected then also provide password

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
wilow3dev
Tourist
9 0 4

I have managed to get the notification show beneath the 'add' button by changing the code to:

 

$(document).ready(function() {
  $('.add2cart__collection--button').on('click', function(evt) {
    evt.preventDefault();
    var $addToCartBtn = $(this),
      $addToCartForm = $(this).closest('form'),
      $addToCartText = $(this).find('span');
    if ($addToCartForm.length) {
      $addToCartBtn
        .data('add-to-cart', $addToCartText.text())
        .prop('disabled', true)
        .addClass('btn--ajax-disabled');
      $.ajax({
        url: '/cart/add.js',
        dataType: 'json',
        type: 'post',
        data: $addToCartForm.serialize(),
        success: function() {
          // reupdate cart count
          theme.afterCartLoad();
          $addToCartBtn.prop('disabled', false);
          $addToCartBtn.removeClass('btn--ajax-disabled');
          $('<div></div>')
            .text(theme.strings.itemAddedToCart)
            //.addClass('product-single__notification')
          	.addClass('add2cart__collection--notification')
            //.insertAfter($addToCartBtn);
          	.insertAfter($addToCartForm);
        },
        error: function(XMLHttpRequest) {
          var data = eval('(' + XMLHttpRequest.responseText + ')');
          var response = data.description;
          var status = XMLHttpRequest.status;
          $addToCartBtn.removeClass('btn--ajax-disabled');
          if (status === 422) {
            $addToCartText.text(theme.strings.soldOut);
          } else {
            $addToCartBtn.prop('disabled', false);
            $addToCartText.text($addToCartBtn.data('add-to-cart'));
          }
          $addToCartBtn.after('<p class="errors">' + response + '</p>');
        }
      });
    }
  });
});

 

 

Specifically I changed  from .insertAfter(addToCartBtn) to .insertAfter($addToCartForm);

and then also the .addClass to point to my own css.

 

It works as expected now. Thank you so much for the help. 

 

image.png