How to create an "Add to cart" button for all products in a page

Solved
Highlighted
Shopify Partner
8 0 0

Hi all!

 

I'm creating rebrand of our shop, and I'm including a simple wishlist solution. The solution works trough metafields, adding a "wishlist metafield" for a given user and product. Then, the user can check a wishlist page to see all products added to wishlist.

 

Now, I want to create a button to automatically add all the products from the wishlist page to the cart, so the wishlist is actually useful.

 

Any idea to how to do that? I have some coding knowledge, but I feel this is above my skill.

 

Thanks!

0 Likes
Highlighted
Shopify Expert
3550 543 843

Hi,

Please follow this:

1. Open your wishlist page and add this form in each wishlist product gird code.

<form method="post" action="/cart/add" id="custom_{{ variants.id }}">
    <input type="hidden" name="id" value="{{ variants.id }}">
    <input type="hidden" name="quantity" value="1">
    <button class="js-AddToCart" data-var="{{ variants.id }}">Add To Cart</button>
</form>

Note: So now you have this form in all product that in whishlist page.

Here please replace {{ variants.id }} with your product variant id.

2. add this js once in page at bottom or in theme.js 

$(document).on('click','.js-AddToCart',function(e){ 
      e.preventDefault();
        var id = $(this).attr('data-var');
        var frm_id="custom_"+id;
       $.ajax({
          type: 'POST', 
          url: '/cart/add.js',
          dataType: 'json', 
          data: $('#'+frm_id).serialize(),
          success: function(){
            location.href="/cart";
          }
       }); 
    });

Let me know if you need any help.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Shopify Partner
8 0 0

Hi!

 

Thanks for your response! 

 

But is not what I'm looking for. This adds an "Add to car" button to each product in the wishlist.

 

I don't want to show any button ON the products, but only ONE in the collection footer, that adds all products present in the page to the cart.

 

Thanks!

0 Likes
Highlighted
Shopify Expert
3550 543 843

Send me your wishlist page i will create script and sent

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Shopify Partner
8 0 0

Here it is:

 

{% if customer.id == blank %}
<div class="container-indent nomargin">
  <div class="tt-empty-cart">
    <div class="tt-block-title">
      <h1 class="tt-title">{{ "wishlist.wishlist_page.title" | t }}</h1>
    </div>
    <div class="tt-login-wishlist">
      <p>{{ "wishlist.wishlist_page.login_message" | t }}</p>
      <div class="row-btn">
        <a href="/account/login" class="btn btn-small">{{ "wishlist.wishlist_page.sign_in_button" | t }}</a>
        <a href="/account/register" class="btn btn-border btn-small">{{ "wishlist.wishlist_page.register_button" | t }}</a>
      </div>
    </div>
  </div>
</div>
{% else %}

<div class="container-indent nomargin wkpagenoinfo{% unless customer.metafields.wishlist == blank %} hide{% endunless %}">
  <div class="tt-empty-wishlist">
    <h1 class="tt-title">{{ "wishlist.wishlist_page.title" | t }}</h1>
    <div class="icon-svg">
      <svg viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect fill="white"/>
        <path d="M28.4688 13.046C28.4062 13.14 28.3281 13.2341 28.2344 13.3282C28.1719 13.391 28.0938 13.4694 28 13.5635C27.9062 13.4694 27.8125 13.391 27.7188 13.3282C27.6562 13.2341 27.5938 13.14 27.5312 13.046C26.1875 11.6973 24.6562 10.6937 22.9375 10.035C21.25 9.345 19.5156 9 17.7344 9C15.9844 9 14.2656 9.345 12.5781 10.035C10.8906 10.6937 9.375 11.6973 8.03125 13.046C6.71875 14.3632 5.71875 15.8687 5.03125 17.5624C4.34375 19.2247 4 20.981 4 22.8315C4 24.682 4.34375 26.454 5.03125 28.1477C5.71875 29.81 6.71875 31.2998 8.03125 32.6171L26.9219 51.5766C27.0781 51.702 27.25 51.7961 27.4375 51.8589C27.625 51.953 27.8125 52 28 52C28.1875 52 28.375 51.953 28.5625 51.8589C28.75 51.7961 28.9219 51.702 29.0781 51.5766L47.9688 32.6171C49.2812 31.2998 50.2812 29.81 50.9688 28.1477C51.6562 26.454 52 24.682 52 22.8315C52 20.981 51.6562 19.2247 50.9688 17.5624C50.2812 15.8687 49.2812 14.3632 47.9688 13.046C46.625 11.6973 45.1094 10.6937 43.4219 10.035C41.7344 9.345 40 9 38.2188 9C36.4688 9 34.7344 9.345 33.0156 10.035C31.3281 10.6937 29.8125 11.6973 28.4688 13.046ZM45.8594 30.453L28 48.3775L10.1406 30.453C9.14062 29.4493 8.35938 28.2888 7.79688 26.9716C7.26562 25.6543 7 24.2743 7 22.8315C7 21.3888 7.26562 20.0088 7.79688 18.6915C8.35938 17.3742 9.14062 16.198 10.1406 15.163C11.2031 14.128 12.3906 13.3439 13.7031 12.8107C15.0469 12.2775 16.4062 12.0109 17.7812 12.0109C19.1562 12.0109 20.5 12.2775 21.8125 12.8107C23.1562 13.3439 24.3438 14.128 25.375 15.163C25.625 15.4139 25.8594 15.6805 26.0781 15.9628C26.3281 16.2451 26.5469 16.543 26.7344 16.8567C27.0156 17.2644 27.4375 17.4683 28 17.4683C28.5625 17.4683 28.9844 17.2644 29.2656 16.8567C29.4531 16.543 29.6562 16.2451 29.875 15.9628C30.125 15.6805 30.375 15.4139 30.625 15.163C31.6562 14.128 32.8281 13.3439 34.1406 12.8107C35.4844 12.2775 36.8438 12.0109 38.2188 12.0109C39.5938 12.0109 40.9375 12.2775 42.25 12.8107C43.5938 13.3439 44.7969 14.128 45.8594 15.163C46.8594 16.198 47.625 17.3742 48.1562 18.6915C48.7188 20.0088 49 21.3888 49 22.8315C49 24.2743 48.7188 25.6543 48.1562 26.9716C47.625 28.2888 46.8594 29.4493 45.8594 30.453Z" fill="#C4C4C4"/>
        <rect y="45" width="64.4191" height="3" transform="rotate(-30 0 45)" fill="#191919"/>
      </svg>
    </div>
    <p>{{ "wishlist.wishlist_page.empty_wishlist" | t }}</p>
    <a href="/" class="btn">{{ "wishlist.wishlist_page.continue_shopping" | t }}</a>
  </div>
</div>
{% unless customer.metafields.wishlist == blank %}
<div class="container-indent wkpageinfo">
  <div class="container container-fluid-custom-mobile-padding">
    <div class="tt-block-title">
      <h1 class="tt-title">{{ "wishlist.wishlist_page.title" | t }}</h1>
    </div>
    <div class="row tt-layout-product-item">
      {%- for field in customer.metafields.wishlist -%}
      {%- assign val = field | last -%}
      {%- assign product = all_products[val] -%}
      <div class="col-6 col-md-4 col-lg-3">
        {%- include "product-grid-item" -%}
      </div>
      {%- endfor -%}
    </div>
  </div>
</div>
{% endunless %}
{% endif %}

 

 

0 Likes
Highlighted
Shopify Expert
3550 543 843

This is an accepted solution.

Follow this:

Add bellow line in snippet->product-grid-item.liquid, in product grid code.

<input type="hidden" class="wish_page" value="{{ variants_id }}">

Note: Please assure that variants_id replace with variants id.

2. Add bellow button i footer where you want

<button class="js-AddToCart">Add To Cart</button>

3. Pu this code in page at bottom or in theme.js file

$(document).on('click','.js-AddToCart',function(){
            $.each($('.wish_page'),function(i,v){
            var id = $(this).val();
            $.ajax({
              type: 'POST', 
              url: '/cart/add.js',
              dataType: 'json', 
              async:false,
              data:{quantity: 1,id: id},
              success: function(){
                location.href="/cart";
              }
           }); 
        })
    })

Let me if you need any help.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Shopify Partner
8 0 0

Works perfect! Thanks for your help :))

0 Likes
Highlighted
New Member
1 0 0

What do u charge for yr services to do a Add to cart button on each product displayed in Collection


@Jasoliya wrote:

Send me your wishlist page i will create script and sent


 

0 Likes
Highlighted
New Member
4 0 0

Hi @Jasoliya 

I'm trying to add the "add to cart button" to my future collections in my product pages. Where do I have to include the code? I do not have the template you mentioned within my theme.

I'm using a sectioned theme, from a third party.

In my product pages, my theme include the feature collection as block, which calls an snippet "feature-collection.liquid" Do I Have to include it in the snippet?

 

Please any guidance is greatly appreciated

Ronald

0 Likes
Highlighted
Shopify Expert
3550 543 843

Yes try to add in "feature-collection.liquid" because as you have paid theme i cant say exact step. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes