Add to cart button on collections page without going to cart page.

Matty3
Tourist
11 0 1

I am using Venture Theme, which I assume uses ajax already as you can add products to the cart within the product template page without moving to the cart page, and would like the same thing to happen on the collections page.

        <div class="quick-add">
          <form method="post" action="/cart/add"  enctype="multipart/form-data" class="product-form" id="AddToCartForm">
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
            <!-- <input type="hidden" name="return_to" value="back" /> -->
              {% unless product.variants.first.available %}
                <button type="submit" name="add" id="AddToCart-{{ product.variants.first.id }}" class="btn btn--full product-form__cart-submit btn--sold-out" disabled="disabled">
                  <span id="AddToCartText-{{ section.id }}">
                    {{ 'products.product.sold_out' | t }}
                  </span>  
                </button>  
              {% else %}
                <button type="submit" name="add" id="AddToCart-{{ product.variants.first.id }}" class="btn btn--full product-form__cart-submit">
                  <span  id="AddToCartText-{{ section.id }}">
                    {{ 'products.product.add_to_cart' | t }}
                  </span>  
                </button>  
              {% endunless %}
          </form>              
        </div>

I currently have the code for the buttons working fine, although the div is hidden at them moment, until I can fix this issue. You can view my store here (https://www.truebites.co.uk/collections/beef-and-steak) if it helps.

I am looking to have the add to cart buttons function as they do in the product template pages, i.e. a message appears in the notification bar and the user stays exactly where they are on the current page. If this possible? 

Thanks,

Matt

 

 

0 Likes

Hi Matty,

Yes, it is possible to have the Add to cart buttons function on the Collection page. But this work is not easy (not only to copy-paste some code).

I see a few variants how you can realize it:

  1. Hire a Shopify expert;
  2. Install some Quick view app;
  3. Buy a theme with Quick view function (in this case you need to update design too).

Best,
Arthur

Founder at GenovaWebArt | info@genovawebart.com
0 Likes
Daniel808
Explorer
57 2 19

@Matty3  May I ask what solution you found in the end?

0 Likes
MarshFarm
New Member
1 0 0

Hi, 

 

I'm trying to achieve the exact same thing and hitting brick-walls. 

 

I see you've succeeded in the implementation. Do you have any guidance on this?

 

Any help would be great.

 

Thank you

0 Likes
Matty3
Tourist
11 0 1

Hi,

Not sure where you got with this, but there was a small problem in the javascript if I remember correctly (it's been a while since I figured it out). I took the add to cart ajax code and rewrote it as a new function, in the theme.js file, specifically to add items from the collections page. 

Hope that helps,

Matt

0 Likes