Add product to cart through the custom page

[Gediminas_Butku]

Dear all,

I am trying to edit my custom page so people could add product x to the cart without leaving the page. I was trying to find a solution for this but looks like I can't do it by myself.

This is a screenshot of what I want to add:

I would need to change the button text, remove the order note, etc. This is just an example.

I need to put it there:

This would be the best way, because the buyer could also decide about the quantity on the same page.

I was trying to do it in a simple way too (adding an image with a permalink "add to cart" but it didn't work out.

Anybody could help me with that? Happy to give more information if needed.

[Jasoliya · Accepted solution]

Replace this code with bellow code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('click','.add_to_cart',function(){
            var quantity = $(".quantity option:selected").val();
            quantity = parseInt(quantity);
            var id="15426278195309";
            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: {id:id,quantity:quantity},
                success: function(){
                    location.href="/cart";
                }
            });
        })
    });    
</script>

Let me know if need any help.

[Jasoliya]

Hi,

You can display product title,image,price and add to cart button and add bellow code to add product direct from this page

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

$(document).on('click','.add_to_cart',function(){
    var id="{{ variants_id }}";
    $.ajax({
      type: 'POST', 
      url: '/cart/add.js',
      dataType: 'json', 
      data: {id:id,quantity:1},
      success: function(){
            location.href="/cart";
      }
   });
})

Note: Replace you add to cart button and add this class in button add_to_cart.

-Change variants_id  with product variants id.

-I have added dummy button so change with your style and text.

Let me know if you need help.

[Gediminas_Butku]

Hi, thanks for your time!

When I added this code to my custom page, I got this:

[Ninthony]

You need to put the jQuery in script tags:

<script>
$(document).on('click','.add_to_cart',function(){
    var id="{{ variants_id }}";
    $.ajax({
      type: 'POST', 
      url: '/cart/add.js',
      dataType: 'json', 
      data: {id:id,quantity:1},
      success: function(){
            location.href="/cart";
      }
   });
})
</script>

[Gediminas_Butku]

Many thanks for your help! 

Something is still missing. When I press the button - it does nothing. Check it by yourself, please - https://www.shopyte.eu/pages/test

Also, could you add one more line of code for the quantity drop down form?

Appreciate your time.

[Ninthony]

First, where you have your id variable declared, take out the double curly braces "{{ }}".  I think @Jasoliya was under the impression you were working in a liquid file so you would be able to use liquid output, which is what the double curly braces indicate. You need to make a select element with the amounts you want to be able to put in the cart, so in this example, say 10. Your code should look kind of like this:

<input type="button" value="Add to cart" class="add_to_cart">
<select class="quantity">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<script>
$(document).on('click','.add_to_cart',function(){
  var quantity = $(".quantity option:selected").val();
  quantity = parseInt(quantity);
  var id="2191830286445";
    $.ajax({
      type: 'POST', 
      url: '/cart/add.js',
      dataType: 'json', 
      data: {id:id,quantity:quantity},
      success: function(){
            location.href="/cart";
      }
   });
})
</script>

[Gediminas_Butku]

Unfortunately, same result - when I press button - nothing happens. Any more ideas?

[Ninthony]

It works on my end, the only thing that I can think of is that you're not using the variant ID of the product, you're using the product id. Do you have a link to the product you're trying to add?

[Gediminas_Butku]

Yes, the link of the product is https://www.shopyte.eu/products/tree-to-be-planted

I just checked the test page with my mobile phone and it doesn't do anything either.

[Ninthony]

Yeah you were using the wrong number. Give this a go:

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

<select class="quantity">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<script>
$(document).on('click','.add_to_cart',function(){
  var quantity = $(".quantity option:selected").val();
  quantity = parseInt(quantity);
  console.log(quantity)
    
    var id="15426278195309";
    $.ajax({
      type: 'POST', 
      url: '/cart/add.js',
      dataType: 'json', 
      data: {id:id,quantity:quantity},
      success: function(){
            location.href="/cart";
      }
   });
})
</script>

[Gediminas_Butku]

Not working. It does nothing when I press it. I hope you still have more ideas :))

[Ninthony]

Just have to debug it, cause something weird is going on. I can run that code on my console and it works. Go ahead and put an alert function in there to make sure the click is responding in the first place. A dialog box should come up that says "On Click Working".

$(document).on('click','.add_to_cart',function(){
  var quantity = $(".quantity option:selected").val();
  quantity = parseInt(quantity);
  console.log(quantity)
    
alert('On Click Working');

    var id="15426278195309";
    $.ajax({
      type: 'POST', 
      url: '/cart/add.js',
      dataType: 'json', 
      data: {id:id,quantity:quantity},
      success: function(){
            location.href="/cart";
      }
   });
})

[Gediminas_Butku]

The same result, nothing happens after I click it. Have you tried to click it on my website?

[Ninthony]

Yes I have, it does not work on page load. But if I pull up the console and enter in the same code and run it, the click will work.  I'm not entirely sure what the problem is. I'm also recreating a similar situation on my developer store to see if it's something with adding it on a page, but it's working over here. I can literally copy the code from your html and run it in the console and it works. The only thing I can think of to maybe do is use a document ready function.

Try this:

<script>
$(function(){
$(document).on('click','.add_to_cart',function(){
  var quantity = $(".quantity option:selected").val();
  quantity = parseInt(quantity);
  console.log(quantity)
    
alert('On Click Working');

    var id="15426278195309";
    $.ajax({
      type: 'POST', 
      url: '/cart/add.js',
      dataType: 'json', 
      data: {id:id,quantity:quantity},
      success: function(){
            location.href="/cart";
      }
   });
})
});
</script>

[Jasoliya]

Hi,
I have checked you page and i can see that Jquery library not load on this page that's why jquery not working so please add this link above <script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

be sure that you have added correct var id="15426278195309";

Let me know if you need help.

[Gediminas_Butku]

Unfortunately, it doesn't work either.  Not sure if this is something weird, but after I save the page, it adds to the code some symbols:

<script>// <![CDATA[
$(function(){
$(document).on('click','.add_to_cart',function(){
var quantity = $(".quantity option:selected").val();
quantity = parseInt(quantity);
console.log(quantity)

alert('On Click Working');

var id="15426278195309";
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: {id:id,quantity:quantity},
success: function(){
location.href="/cart";
}
});
})
});
// ]]></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

[Jasoliya · Accepted solution]

Replace this code with bellow code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('click','.add_to_cart',function(){
            var quantity = $(".quantity option:selected").val();
            quantity = parseInt(quantity);
            var id="15426278195309";
            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: {id:id,quantity:quantity},
                success: function(){
                    location.href="/cart";
                }
            });
        })
    });    
</script>

Let me know if need any help.

[Gediminas_Butku]

Great! That worked! Thank you all for your help! Really appreciate it. Much love!

[Gediminas_Butku]

Would you be willing to help me a little further? 

There is a link for public version - https://www.shopyte.eu/pages/reforestation

You see, I have added a different style of button and the quantity selector (I took it from my current web style), but it doesn't work. Could You tell me what I should edit? The only thing what I need to do (if this is possible)  is to put a cap for the possible quantity (let's say it's 100).

The code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function () {
        $(document).on('click','.add_to_cart',function(){
            var quantity = $(".quantity option:selected").val();
            quantity = parseInt(quantity);
            var id="15426278195309";
            $.ajax({
                type: 'POST',
                url: '/cart/add.js',
                dataType: 'json',
                data: {id:id,quantity:quantity},
                success: function(){
                    location.href="/cart";
                }
            });
        })
    });
// ]]></script>
<input type="button" value="Add to cart" class="ProductForm__AddToCart Button Button--secondary Button--full" />
<div class="QuantitySelector QuantitySelector--large">
<span class="QuantitySelector__Button Link Link--secondary" data-action="decrease-quantity"> <svg class="Icon Icon--minus" role="presentation" viewbox="0 0 16 2"> <path d="M1,1 L15,1" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square"></path> </svg></span> <input type="text" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1" /> <span class="QuantitySelector__Button Link Link--secondary" data-action="increase-quantity"> <svg class="Icon Icon--plus" role="presentation" viewbox="0 0 16 16"> <g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="square"> <path d="M8,1 L8,15"></path> <path d="M1,8 L15,8"></path> </g> </svg></span></div>

[Jasoliya · Accepted solution]

Hi,

Follow this:

Add add_to_cart class in button it look like:

<input type="button" value="Add to cart" class="add_to_cart ProductForm__AddToCart Button Button--secondary Button--full">

And quantity class in qty box it look like:

<input type="text" class="quantity QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1">

And change var quantity = $(".quantity option:selected").val(); with bellow

var quantity = $(".quantity").val();

Let me know if you need help.

[Ninthony]

Ah glad you got it worked out. Do you know what the problem was? I was thinking it was maybe because jQuery was added after  the script and I see that you have it included above the script now. 

[Anna_Wang1]

Hi Jasoliya,

I would like to use similiar feature in my store.  I want to add another product in this page. 

I tried mang times, but it still adds main product. The id is correct, i copied from admin page. Could you please let me know how to fix it? really appreciate.

<div class="products-container">
<div class="another-product-1">
<div class="text-left">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product-single__prices">
<span class="product-single__price">$795</span>
</div>
</div>
<h1 itemprop="name">Testing</h1>
<div class="swatch swatch-drop">
<div class="swatch-element first-product-swatch available">
<input id="first-size-xs" name="first-product-size" type="radio" value="xs"> <label for="first-size-xs">XS</label>
</div>
<input type="text" class="quantity QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1">
<button class="btn regular" id="first-addtocart" name="add" style="display: inline-block !important;" type="submit"><span id="AddToCartText">Add to Cart</span></button>
</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click','.add_to_cart',function(){
var quantity = $(".quantity").val();
quantity = parseInt(quantity);
// var product.id ="6836213612609";
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: {product.id: 6836213612609,quantity:quantity},
success: function(){
location.href="/cart";
}
});
})
});

</script>

[Jasoliya]

Hi

We cant  check this type of feature direct, for need to check coded and solution.

want to add other product on product page with variant  and add to cart ? 

[Anna_Wang1]

Hi, thank you for your reply. I want to add another product to the product page. And the product could be optional, customer can select it or not. it is similar to Frequently But Together.

[Jasoliya]

This is not simple task to do, you have to hire someone or me as its development work.

or use any app

[Anna_Wang1]

Can I know how much?

[Anna_Wang1]

I found a solution, but it doesn't work for me. 

https://community.shopify.com/c/shopify-design/two-separate-products-on-one-product-page/td-p/487424

[irum_s]

@Jasoliya @Ninthony 

I have customized the contact form and have added an  Select Dropdown with all available products (of all collection). I have also added a custom quantity selector. What I am trying to do is, add the selected product and its selected quantity to the cart and want to display cart on the same page below the select dropdown and add button. Can someone help me 

[irum_s]

@Jasoliya @Ninthony 

I have used your Javascript code but in "var id" you are using a static value, how can I use the variant id of a selected product (from a custom select dropdown menu showing all the products)

[Jasoliya]

Hi @irum_s 

If you have used liquid code to place all product in drop down then you can add any attribute in option for first available variant id and get id on selection of any product from that option, like that you can get dynamic id of variant for add to cart ,it just idea to do this, but it custom task so may be you need developer help too

Best regard 

[zigainfokalai]

Hi,

Can you help me

Actually, I want to show the collection product list.

In the product list, I want to show multiple variant types. Based on the variant, we need to show the variant price.

Variant types need to show the tab button. If I click tab 1, it will show the first variant, just like all variants.

After that, I want to show variant types in the dropdown. Whichever variant I selected, I need to show the price based on the variant ID.

Here, I want to add the product to the cart page. If I click the add to cart button, it will immediately add the item to the cart. based on the product ID and variant ID. It is possible to do so dynamically. I did everything programmatically. the final step is struggling.