Need a page refresh everytime a variant changes to get the correct code to load

Store Design
21

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

22

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

23

Hello @Guleria ,

I think now I found the information in the code:

Bildschirmfoto 2023-03-16 um 20.35.55.png
Bildschirmfoto 2023-03-16 um 20.35.55.png1874×460 103 KB

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

24 
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.

25

Hey @Guleria ,

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. :sweat_smile:

Wish you a nice weekend!

Best regards
Daniela

26

I’ve finally been able to implement the desired behavior of our online shop :slightly_smiling_face:

We are using Craft Version 8.0.0

In product-variant-options.liquid I assigned a class to the option buttons (line 52):

Bambusbasis_0-1680000217745.png
Bambusbasis_0-1680000217745.png660×315 8.14 KB

And added in main-product.liquid the following code:


** @Guleria **Thx for your help!

27

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.