Shopify themes, liquid, logos, and UX
I have a product that is a cash donation product. i've added a custom amount variant and want the quantity box to show when the custom variant is chosen. this works but only if i manually refresh the page and most people that visit the sit e aren't going to do this. how do i get this page to refresh automatically when the variant changes, or is there a better way.
{% if product.selected_variant.id == 30370837430349 %} <div class="product-form__item product-form__quantity-selector"> <label class="product-form__quantity-label{% unless section.settings.show_variant_labels %} product-form__quantity-label--hidden{% endunless %}" for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label> <input class="product-form__quantity-input" type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" pattern="[0-9]*"> </div> {% endif %}
this is the "if" statement and code i have used.
i'm using shopify's free narrative theme.
Solved! Go to the solution
This is an accepted solution.
Hello BVPark,
jQuery(function() { $('.single-option-selector').on('change', function(){ setTimeout(function(){ if($('[name="id"]').val() != "{{ product.selected_or_first_available_variant.id }}"){ location.reload(); } }, 1); }); });
use this script, it will reload page on variant selection.
Thanks
This is an accepted solution.
Hello BVPark,
jQuery(function() { $('.single-option-selector').on('change', function(){ setTimeout(function(){ if($('[name="id"]').val() != "{{ product.selected_or_first_available_variant.id }}"){ location.reload(); } }, 1); }); });
use this script, it will reload page on variant selection.
Thanks
Thanks for the help. Could you tell me where to put the script exactly? I assume this goes in the theme.js file? sorry i'm new to shopify and just learning.
Put it in custom.js under assets.
Thank you! this worked perfectly.
is there a way to specify the page that reloads? it seems to reload every product page that contains variants. i really only need this for one of my products.
They are different way to do this, check this basic one
{% if product.title == 'Test product name' %}
// Include your script, but in this you have to place js script in product.liquid or a/to your need.
{% endif%}
Thanks. I tried this but couldn't get it to work. I'll go back to the way it was before because it was working great. Thanks again.
Hi - I would love to use this code too. My shop uses Brooklyn theme and i do not see a custom.js under assets. Can you advise on where I can paste it?
This was a huge help, thanks @BVPark.
@Californiacut I didn't have a custom.js file either but look under Assets for something like theme.js, or similar and just paste the code at the bottom. I use Minimal and it was under theme.js.
Hi,
I am trying to do something similar. I'd like to have the page refresh when the selected variant is out of stock.
Hi use the Simple Theme when i bind this code in my Theme.js but he relod the Product Page again and agein when variant sold out is.
Thanks Guleria,
you are awesome!!! That code worked. I did not had a custom.js, but when I out it in the theme.js - everything works fine now.
I will save your contact information in case of a customization or problems, which I can't do myself. It looks like you are a very knowledgeable & nice guy, too.
I am sure there will be something in the future where I will need help from an expert like you.
Thanks again for sharing that solution!!
M
I have variants that doesn't work unless I refresh the page. I went to edit codes found a variant code as you can see in the screen shot I haven't touched it yet. I am trying to figure it out. If I would to ask for help would you help me with this. My email is jordanvankampen@yahoo.com. I will email this too.
jQuery(function() { $('.single-option-selector').on('change', function(){ setTimeout(function(){ if($('[name="id"]').val() != "{{ product.selected_or_first_available_variant.id }}"){ location.reload(); } }, 1); }); });
Hi Guleria,
This code refresh really too slow. Is there any way to refresh the page as fast as we select the variant product?
Regards
This is not working for me, but i am on a different theme. My selector code is
Wondering if maybe it just isn't working due to naming??
Love that solution. But i am struggeling a bit to include it into my code. Would love it if you could help me out! Just let me know 🙂
Firstly, I don't think refreshing the product page on variant change is a solution.
I think you have to check the existing JS functions. But still if you want to use this solution use this script in theme.liquid just before </body> tag and keep notes you have to make changes in it a/to the theme you are using.
Hi @Developer-G,
I am currently trying to add your code too because I need to reload the product page when selecting the variant. Can you tell me if the code also works with Craft Theme? I put it into the theme.liquid befor the closing </body>-Tag, but it doesn't work. And I have no custom.js or theme.js. Can you explain me what i'm doing wrong?
You would really be a big help!
Best regards
Daniela
Hello @Bambusbasis ,
First check the variant option you have with craft theme is using select box (drop-down) or radio buttons or something else. If theme is is using select box or radio button then pick the class name and replace it with
single-option-selector
Next step check field have same name
[name="id"]
if in your theme case its different please replace it too.
Thanks
I'm very happy that you help me! But I have some trouble understanding what you mean.
I think in my case it is using radio buttons. But I don't know where to check the class name. And how i find out if the field has the same name, i don't know either.
Can you explain it to me a bit more precisely?
Thanks
Hello @Developer-G,
I think now I found the information in the code:
If I understood correctly, this is the class name I need:
product-form-input
And the theme is using radio buttons. But what is the field name you mean?
I know I'm not a pro, but I hope you will help me anyway.
Best regards
Daniela
jQuery(function() {
$('.product-form-input [name=Breite]').on('change', function(){
setTimeout(function(){
if($(this).val() != "{{ product.selected_or_first_available_variant.id }}"){
location.reload();
}
}, 1);
});
});
Note: Code is not tested I just rewrite the existing solution a/to the screen-shot you shared.
Hey @Developer-G,
thanks for your help! It's not the solution yet, but I understand the code a bit better now.
However, I still have to ask a friend if he can explain the connections to me better.😅
Wish you a nice weekend!
Best regards
Daniela
I've finally been able to implement the desired behavior of our online shop 🙂
We are using Craft Version 8.0.0
In product-variant-options.liquid I assigned a class to the option buttons (line 52):
And added in main-product.liquid the following code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".refresh-button").on("change", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000); }); });
</script>
@Developer-GThx for your help!
I'm using 'Prestige' theme I recently added "Color swatch" to the "Frame Swatch" function but when I select the first value change it is working fine. But when I select the frame variant the price doesn't change. If I select a frame and then if I refresh this page then the price changes.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024