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.
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.
1 Like
Hi, thanks for your time!
When I added this code to my custom page, I got this:
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>
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.
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>
Unfortunately, same result - when I press button - nothing happens. Any more ideas?
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?
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.
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>
Not working. It does nothing when I press it. I hope you still have more ideas :))
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";
}
});
})
The same result, nothing happens after I click it. Have you tried to click it on my website?
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>
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 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.
1 Like
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:
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.
2 Likes
Great! That worked! Thank you all for your help! Really appreciate it. Much love!
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>
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.
2 Likes
