Debut Theme – Product Swatches

Excursionist
14 0 4

Hi @Fanfi 

Please sure the code on product-swatch.js correct with this code below:

 

$(function() {
  $('.swatch :radio').change(function() {
    var optionIndex = $(this).closest('.swatch').attr('data-option-index');
    var optionValue = $(this).val();
    $(this)
      .closest('form')
      .find('.single-option-selector')
      .eq(optionIndex)
      .val(optionValue)
      .trigger('change');
  });
});

 

 

These are 3 files I changed on my local and it help swatch work fine.
Selection_258.pngSelection_261.png

Selection_260.png

You can hide the .selector-wrapper after you were sure the jquery code works fine.
Ex: when you selected the swatch option. Then you saw selector-wrapper also change the value => the code is worked

You can use inspect or F12 the browser on the product details page.
It will help you know to correct the problem of swatches is not working on the product page

0 Likes
Excursionist
14 0 4

Hi @Fanfi 

You can hide .selector-swapper with CSS then it works fine.

Selection_262.pngSelection_263.png

0 Likes
New Member
5 0 0

Hey @vietbq1989 

Thanks for your help.

Everything looks exactly like your examples. But still it doesn't work. When I click on variant buttons, nothing changes.

I took Inspection screenshot, maybe it can help :

Screen Shot 2020-11-19 at 10.50.55 PM.png

0 Likes
Excursionist
14 0 4

Hi @Fanfi 

Please let me know to correct your version Debut.

Go to Online Store > Themes

 

 

Click on Actions > Edit Code

 

shopify-themes-edit-code.png

Open up Config and click on “settings_schema.json” and you will see the “theme_version” within the file.

Selection_271.png

You have this error because $ available not defined.
Therefore, the jQuery process when you choose the option still not working.

$ is Undefined error only occur when Jquery file not load.

So please check your code added in theme.js is in the init function.

This issue occurs because your code load first and jquery library load after that.


Can you try to change $ to jQuery in file product-swatch.js?

 

jQuery(function() {
  jQuery('.swatch :radio').change(function() {
    var optionIndex = jQuery(this).closest('.swatch').attr('data-option-index');
    var optionValue = jQuery(this).val();
    jQuery(this)
      .closest('form')
      .find('.single-option-selector')
      .eq(optionIndex)
      .val(optionValue)
      .trigger('change');
  });
});

 


Or you can research some solution on google with keyword Shopify  $ or jQuery is not defined? 

Hope it can help you.
Thanks.


0 Likes
Tourist
3 0 0

Hi vietbq1989,

 

I managed to make it work with your method, but: this doesn't add the correct variant (only and always the first available one) to the cart and I also ran into an issue where when I want to add a variant to the cart it gives me the following error:

 

TypeError: Cannot read property 'classList' of null
    at Product._setCartCountBubble (theme.js?v=16941873179886687807:8536)
    at theme.js?v=16941873179886687807:8377

 

Do you think you could help me with this? I've been struggling so much..

 

Thanks!

0 Likes
Excursionist
14 0 4

Hi @Siemen 

I'm not sure about your issue.
I don't change any code on theme.js file.
With swatch.liquid file, it is simple to render all options from variants.
You can see Jquery in file product-swatch.js only is a trigger like with behavior you selected option(color or size).

 

$(function() {
  $('.swatch :radio').change(function() {
    var optionIndex = $(this).closest('.swatch').attr('data-option-index');
    var optionValue = $(this).val();
    $(this)
      .closest('form')
      .find('.single-option-selector')
      .eq(optionIndex)
      .val(optionValue)
      .trigger('change');
  });
});

 


Therefore, it doesn't affect qty or option is selected.  

0 Likes
Excursionist
14 0 4

Hi @Siemen , @Siemen 

I will write all guide with my solution for swatch on Debut theme version 17.1.0

 

Step 1: Create a new file on snippet/
Selection_273.png
    This is the content of the file swatch.liquid => Click Here

Step 2:  Include swatch.liquid in sections/product-template.liquid

find line 157:

{% for option in product.options_with_values %}
Copy

and paste the swatch code above this line

 

 

{% if product.available and product.variants.size > 1 %}
        {% render 'swatch' for product.options as swatch %}
{% endif %}
{% for option in product.options_with_values %}

 

 

Selection_280.png
Step 3: Add a new product-swatches.js file on the Assets/ folder.


Selection_275.png
Create a product-swatch.js file on assets/ folder with content.

 

 

$(function() {
  $('.swatch :radio').change(function() {
    var optionIndex = $(this).closest('.swatch').attr('data-option-index');
    var optionValue = $(this).val();
    $(this)
      .closest('form')
      .find('.single-option-selector')
      .eq(optionIndex)
      .val(optionValue)
      .trigger('change');
  });
});

 

 

Selection_276.png

Step 4:  Add product-swatch.js file to theme.liquid file

Selection_277.png
In file layout/theme.liquid
line 109: add to a new  product-swatch.js file below code

<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

 

 

 

 

  <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
  <script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'product-swatch.js' | asset_url }}" defer="defer"></script>

 

 


Step5:
Upload to soldout.png to Access/ folder
Selection_278.png
This is soldout.png file

soldout.png

Step 6: Add swatch.css to assets/theme.scss.liquid

Copy and paste the content of this file at the bottom on file theme.scss.liquid file.
Selection_279.png



Then complete the 6 steps above.
You can see both the swatch and dropdown option default shown on the product page.
Please try to click a different option swatch. If you see a dropdown option default also change the value.
=> it works fine.
Selection_262.pngSelection_263.png

Step 7: You can hide .selector-swapper with CSS then it works fine.
Open theme.scss.liquid and add code below:

.selector-wrapper {
  display: none;
}
 

This is code will hide the dropdown option default.

This is the 7 steps for all steps show swatch on the product of mine.
It works fine for me.
Selection_281.pngSelection_282.png

 

Tourist
3 0 0

Hi @vietbq1989 ,

 

Thank you for such a detailed write up. Unfortunately I couldn't get it to work, I also saw that my theme version is 17.5.0, maybe that has something to do with it, I also don't see a way to revert to and older version.

 

Screenshot 2020-11-24 at 13.54.03.png

As you can see here, it actually does change the value of the selects, but it doesn't update the deep linking url or the price, and when i try to add it to the cart the icon keeps on spinning while giving me the same error:

TypeError: Cannot read property 'classList' of null
    at Product._setCartCountBubble (theme.js?v=785054923643579389:8536)
    at theme.js?v=785054923643579389:8377

 

When I check in the cart, the function only added the first variant instead of the selected one.

 

Kind regards,

 

Siemen

0 Likes
Excursionist
14 0 4

Hi @Siemen 

Can you send me the theme.js file?

Thanks,
VietBQ

0 Likes
Tourist
9 0 3

Hello wonderful shopify peeps,

Any solution for this but for Narrative theme ?

Would be grateful for any help / tips.

Many thanks.

0 Likes