Narrative Theme - Add to Cart on collection template

[Keyser]

Hi guys !

As title suggest, I'm having a problem displaying the same "Add to Cart" button as displayed on Featured Product section.

I tried several other proposed solutions, but that doesn't fix the problem. At this time, buttons are displayed, but there is a redirection to the cart page.  

Is there a solution to allow user to stay on the collection page when products are added to the cart ?

Many thanks in advance for your assistance ! 🙂 

[Jasoliya · Accepted solution]

Hi,

You can add like following:

<input type="button" value="Add to cart" class="add_to_cart" />
<script>
$(document).ready(function () {
        $(document).on('click','.add_to_cart',function(){
            var quantity = //add quantity selector here
            var id= // variant selecto here
            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: {id:id,quantity:quantity},
                success: function(){
                }
            });
        })
    });
</script>

Note: change quantity and variant with your theme selector, i have used placeholder button for now.

Let me know if you need help 

[Fayyaz_Ahmed]

You need to use shopify ajax api to add item to cart staying at the collection page.  Here is url  https://help.shopify.com/en/themes/development/getting-started/using-ajax-api

[Jasoliya · Accepted solution]

Hi,

You can add like following:

<input type="button" value="Add to cart" class="add_to_cart" />
<script>
$(document).ready(function () {
        $(document).on('click','.add_to_cart',function(){
            var quantity = //add quantity selector here
            var id= // variant selecto here
            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: {id:id,quantity:quantity},
                success: function(){
                }
            });
        })
    });
</script>

Note: change quantity and variant with your theme selector, i have used placeholder button for now.

Let me know if you need help 

[Keyser]

Thank you very much for your quick reply !

Ihave already read this method on previous post and I've already tested Ajax API and your code Jasoliya_Brij. 

Moreover with you solution Jasoliya Brjj, I obtained a button that  works well, but there is here a redirection on the product page.

Currently, i used the Snippets "Product-form", which i include on "Product-Page" but there is still  a redirection, but this time, on the cart.

Thank you ! And please excuse my English..

figure-1 : product-card.liquid

figure-2 : collection page

[Jasoliya · Accepted solution]

This is because i think you have type="submit" ? you have to change it with type="button".

Text me on mail or Skype i will help in your code.

[queensdelightdk]

Hello,

I have the same issue with Narrative theme. I would like to have an add to cart button on the collection page along with quantity selector.

Can you please tell me where should I paste that code?

Thank you very much,

Sebastian

[Jasoliya]

Hi @queensdelightdk 

Add bellow code in snippet->product-card.liquid file at end 

<input type="number" class="add_qty" />
<input type="button" v_id="{{ product.variants.first.id }}" value="Add to cart" class="add_to_cart" />

Add below code in asset->theme.js at end of file

 $(document).on('click','.add_to_cart',function(){
            var quantity = $(this).prev('.add_qty').val();
            var id= $(this).attr('v_id');
            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: {id:id,quantity:quantity},
                success: function(){
                }
            });
        })

[jonnypcraft]

This works a treat thank you, I didnt need the quantity selector so deleted that bit. The only thing it doesnt do is update the cart bag at the top right of the website in real time to show its been added. Also it doesnt tell the customer its been added to cart by way of text notification or pop up. Is there a way to do this?

Lastly I'd like to make the button active when clicked, maybe a rollover or cursor change, can you help?

Heres a link to the page.... https://craftbeerme.myshopify.com/collections/all

[Jasoliya]

thing that you want is not simple to do and i can see you have redirecting  on cart page not adding by Js

[arthor]

For those still looking, I found a work-around.  You need to simulate an update to the input field in the cart form. Its quite easy actually. This is triggering first an input blur event, and then an input event. Like so:

$('.cart-drawer input').trigger('blur'); // simluate deselect  setTimeout(function(){ 
  $('.cart-drawer input').trigger('input'); // simualte edit
}, 350);

I've found it works best if there is some kind of delay on the blur event to allow the cart reload to finish, since there is no callback its a bit of guess work. Running this code will force an update of the cart whether it's empty or active. 

I have only tested this on the Narrative theme, but if the others use the same cart drawer this should work as well.

[handsomebee]

Hi Jasoliya -- 

I have tried to do the same for my store, but it does not format properly. Here is the code of my product.card.liquid

<div class="card critical-clear" id="Card-{{ product.id }}" data-animate>
  <a href="{{ product.url | within: collection }}" class="card__wrapper{% if section.settings.show_spacing %} card__wrapper--padding{% endif %} text-center">

    {% if product.featured_image %}
      {% include 'card-image', type: product.featured_image, grid_style: grid_style %}
    {% endif %}

    <div class="card__info{% if grid_style == 'grid' %} card__info--aligned{% endif %}">
      {% if section.settings.show_vendor %}
        <div class="card__brand">{{ product.vendor }}</div>
      {% endif %}

      <h3 class="card__name h4">{{ product.title }}</h3>

      {% if product.available %}
        <div class="card__price">
          {%- assign variant = product.selected_or_first_available_variant %}
          {% if product.compare_at_price > product.price %}
            {% comment %}
              Product is on sale
            {% endcomment %}
            {% if product.price_varies %}
              {% assign sale_price = product.price | money_without_trailing_zeros %}
              <span class="visually-hidden"> {{ 'products.product.price' | t }} </span>
              {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
            {% else %}
              <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
              <span class="card__price--sale">{{ product.price | money_without_trailing_zeros }}</span>

              <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              <span class="card__price--regular-strike">
                <span class="card__price--regular">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
              </span>
              {%- if variant.available and variant.unit_price_measurement -%}
                {% include 'product-unit-price', variant: variant %}
              {% endif %}
            {% endif %}

          {% else %}
            {% comment %}
              Not on sale, but could still have varying prices
            {% endcomment %}
            {% if product.price_varies %}
              {% assign price = product.price | money_without_trailing_zeros %}
              {{ 'products.product.from_text_html' | t: price: price }}
            {% else %}
              {{ product.price | money_without_trailing_zeros }}
              {%- if variant.available and variant.unit_price_measurement -%}
                {% include 'product-unit-price', variant: variant %}
              {% endif %}
            {% endif %}
          {% endif %}
        </div>
      {% else %}
        <div class="card__availability">
          {{ 'products.product.sold_out' | t }}
        </div>
      {% endif %}
    </div>
    {% if product.compare_at_price > product.price %}
      {% assign sale_text_length = 'products.product.on_sale' | t | size %}
      <span class="card__badge{% if sale_text_length > 6 %} card__badge--large{% endif %}">
        {{ 'products.product.on_sale' | t }}
      </span>
    {% endif %}
  </a>
</div>

<input type="number" class="add_qty" />
<input type="button" v_id="{{ product.variants.first.id }}" value="Add to cart" class="add_to_cart" />

For theme.js, I added the code at the end but will not include that whole code here since it is very long.

However, when I save that, the output is:

Do you have any ideas as to what I am doing wrong?

Thank you!

Nick

[Jasoliya]

Hi nick

You have to move code between <a> and </div> like this image:

Now: change add to cart code to this:

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

[handsomebee]

Thank you so much!

[meandatree]

How do you make the page stay there on collections page like the featured product page with the button indicating added to cart?

[Jasoliya]

For that you ahve to add "add to cart" button on colelction page and then its Ajax code.

Follow this post may be help.

[meandatree]

I did and so far I have gotten up to this in my product card but my secondary "view cart-added to cart" buttons do not view in my product collection page like my featured product page. 

       </a>
  <form method="add" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input class="product-form__quantity-input" type="number" id="Quantity-product-template" name="quantity" value="1" min="1" pattern="[0-9]*" style="padding-left: 105.925px; opacity: 1;">
<button class="btn btn--to-secondary btn--full product__add-to-cart-button shopify-payment-btn btn--secondary" data-cart-submit="" type="submit" name="button" aria-label="Add to Cart">
    <span class="primary-text" aria-hidden="false" data-cart-primary-submit-text="">QUICK ADD
      </span>
    <span class="secondary-text" aria-hidden="true" data-cart-secondary-submit-text="">View cart</span>   
  </button>
      </form>  
                                                                                                                   
  </div>

My quick add button  and quantity both work just fine but I'm redirected out of collections page to cart

 Need them to show added to cart and secondary "View Cart" button activated and not taking customer to cart like my product page below

[idwithin]

Hi there, this code works. But it doesn't seem to work with any AJAX. All it does for me is take the site to the cart page.

The drawer does not come up on the right like the other add to cart buttons. How can I get it to work like this?

Thank you.

[ktura]

this added the add to cart button on the side on collection page instead of under each product. can you help me please 

 

[RuneH]

@Jasoliya 

Hey, you wrote "you can add like following:", but where do I add the code snippet you wrote?

<input type="button" value="Add to cart" class="add_to_cart" />
<script>
$(document).ready(function () {
        $(document).on('click','.add_to_cart',function(){
            var quantity = //add quantity selector here
            var id= // variant selecto here
            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: {id:id,quantity:quantity},
                success: function(){
                }
            });
        })
    });
</script>

[Jasoliya]

Add this code where you want to show button.

<input type="button" value="Add to cart" class="add_to_cart" />

Add this code in any Js file at bottom

$(document).ready(function () {
        $(document).on('click','.add_to_cart',function(){
            var quantity = //add quantity selector here
            var id= // variant selecto here
            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: {id:id,quantity:quantity},
                success: function(){
                }
            });
        })
    });

[Jasoliya]

send me store url and code screenshot where you are adding ?

[ottolina]

A better solution is here: https://community.shopify.com/c/Shopify-Design/Add-to-cart-button-on-collection-page-variation-optio...