Debut Theme – Product Swatches

[vietbq1989]

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.

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

[vietbq1989]

Hi @Fanfi 

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

[Fanfi]

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 :

[vietbq1989]

Hi @Fanfi 

Please let me know to correct your version Debut.

Go to Online Store > Themes

Click on Actions > Edit Code

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

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.

[Siemen]

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!

[vietbq1989]

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.  

[vietbq1989]

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/

    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 %}

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

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');
  });
});

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

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

This is soldout.png file



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.



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.


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.

[Siemen]

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.

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

[vietbq1989]

Hi @Siemen 

Can you send me the theme.js file?

Thanks,
VietBQ

[Petit_Papa]

Hello wonderful shopify peeps,

Any solution for this but for Narrative theme ?

Would be grateful for any help / tips.

Many thanks.