FROM CACHE - en_header

Narrative Theme - Add to Cart on collection template

Solved
Keyser
Tourist
9 0 3

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 ! 🙂 

 

 

 

Accepted Solutions (2)

Accepted Solutions
Jasoliya
Shopify Expert
4532 586 1144

This is an 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 

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Expert
4532 586 1144

This is an 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.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 21 (21)
Fayyaz_Ahmed
Shopify Partner
176 34 64

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

Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
Jasoliya
Shopify Expert
4532 586 1144

This is an 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 

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Keyser
Tourist
9 0 3

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 

 

 

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

 

Product-page.PNGcollection-page.PNG

 

Jasoliya
Shopify Expert
4532 586 1144

This is an 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.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
queensdelightdk
New Member
2 0 0

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
Shopify Expert
4532 586 1144

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(){
                }
            });
        })

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
jonnypcraft
New Member
1 0 0

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
Shopify Expert
4532 586 1144

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
arthor
Tourist
4 0 2

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
New Member
2 0 1

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:

 

The Handsome Bee | Organic Face and Beard Oil – The Handsome Bee Company 2020-07-28 18-09-42.png

 

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

 

Thank you!

 

Nick

Jasoliya
Shopify Expert
4532 586 1144

Hi nick

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

Capture.PNG

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> 
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
handsomebee
New Member
2 0 1

Thank you so much!

meandatree
Excursionist
24 0 3

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

 

Jasoliya
Shopify Expert
4532 586 1144

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

Follow this post may be help.

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
meandatree
Excursionist
24 0 3

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

collections button.JPG

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

product page button.JPG

 

 

ottolina
Tourist
8 0 0
idwithin
Excursionist
23 0 5

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.

RuneH
New Member
1 0 0

@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
Shopify Expert
4532 586 1144

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(){
                }
            });
        })
    });

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here