Adding Multiple Variants/Products/Quantities to the cart with one click - HELP Plz

Chris_Cozzens
Shopify Partner
25 0 2

Hello All,

I have been searching for this for quite a while and have found many threads related to this , but not really a great answer on how to do this or if it is possible.  

I sell food on an ecommerce site.  I want to sell a "plan" which would consist of 4x Item one , 3xItem two ,5x Item Three , .... and so on. 

These items would be a bundle of items that I will display on a page and have a "Buy bundle now" Button.  Ideally i would like this to go to the cart page with a cart that consists of

4x Item one

3x Item two 

5x Item three

From here the user would be able to proceed to checkout as normal or continue shopping.  

I have tried using permalinks , however this directs you right to the checkout screen and would not allow the user to easily continue shopping. Is there a way to set this up?  I apologize if this was answered in another thread , i was nto able to find it. 

Thank you in advance for any help, i have been pulling my hair out with this one. 

-Chris

0 Likes
Chris_Cozzens
Shopify Partner
25 0 2

I am currently doing this below , however it only works for one product.  Is there a way i can edit this to do multiple products ? i.e. data id = [var id 1 , var id 2 , var id 3 ]  , data quantitiy = [ 4,3,5]

 

  1. added a class to the button called "buy-it-now-button"
    <a class="buy-it-now-button">Buy It Now!</a>
  2. added data attributes for a jquery listener:
    <a class="buy-it-now-button" data-id="PRODUCTID" data-qty="1">Buy It Now</a>

     

  3. created a jquery listener at the bottom of my theme.liquid:
     <script>
        //WHEN THE PAGE LOADS START LISTENING
        $(function(){
    
          //IF SOMEONE CLICKS THE BUTTON WITH THE AFFORMENTIONED CLASS
          $('.buy-it-now-button').click(function(){
            //GET TEH PRODUCT ID FROM THE CLICKED LINK
            var id = $(this).attr('data-id');
            
            //GET TEH QUANTITY FROM THE CLICKED LINK
            var quantity = $(this).attr('data-qty');
    
            //POST IT
            $.ajax({
              type: "POST",
              url: '/cart/add.js?quantity='+quantity+'&id='+id,
              
              //SEND THEM TO THE CART AFTER SUCCESS
              success: function(){
                window.location.href = "/cart"; 
              },
    
             //SHOPIFY RETURNS AN ERROR NO MATTER WHAT. SCREW IT SEND 
             //THEM TO THE CART ANYWAY   
              error: function(){
               window.location.href = "/cart"; 
              }
            });
          })
        })
      </script>

     

  4. Added jquery to the head section of the theme.liquid:
    {{ 'api.jquery.js' | shopify_asset_url | script_tag }}
0 Likes
Chris_Cozzens
Shopify Partner
25 0 2

bump , does anyone have an answer to this ? Still looking for a solution. :/

0 Likes
rvanvas
Shopify Partner
1 0 0

You can update multiple products this way:

'/cart/update.js?updates[id]=2&updates[id]=3&updates[id]=3'

0 Likes

This thread is quite old, but if this helps others who are looking for the same solution for adding multiple variants to the cart with one click.

You can use the MultiVariants ‑ Bulk Order app to allow your customers to order multiple variants and quantities of the same product in just one click.

Here is the demo, you can take a look.

It comes with more pro features, such as:

  1. Bulk variant add to cart
  2. Incremental quantity selector for merchants who are selling quantity in a bundle like 10, 50, 100, 500
  3. Variants display in a matrix/tabular, swatch, list, or select view
  4. Min/Max number of variants ordering
  5. Min/Max quantity per variant or combination of variants.
  6. Add custom text to variants

multiple variants in a table.png

 

Bulk variant add to cart with direct to checkout buttonBulk variant add to cart with direct to checkout button

 

0 Likes