d
Topic
jony Member
Posts:
4
5 months ago
g
2
upvotes

Debut Theme – Product Swatches

Hi there,

Does anyone know how to use this Product Swatch tutorial with the Debut theme?
https://help.shopify.com/themes/customization/showcase-products/add-color-swatches

I can't find the selectCallback function anywhere.

Thanks

i
Replies
Posts:
4
3 months ago

Having the same issue. Is the color swatch customization maybe not possible on this theme?

The Web Elite | Shopify Experts
Posts:
4
about 1 month ago

Hi,

Did you actually find where the selectCallback function is? I am also looking for it and not able to find it. Thanks

Posts:
4
about 1 month ago

Hi Daniela,

No, it appears that with the update to Sectioned themes, Shopify has changed the way the selectCallback function works and it no longer goes by that name.

All the js now lives in a seperate file, usually called theme.js or something similar.

We have asked other theme developers about this and apparently, while swatches are still possible, the documentation from Shopify needs to be updated to reflect a new (apparently easier) method for setting these up in Sectioned themes.

So, basically we have been told to keep our eye on that customization and watch for an update.

So, if anyone on this thread notices an update there I think we would all appreciate a comment dropped here as a heads up.

Thanks everyone!

The Web Elite | Shopify Experts
Posts:
4
Last edited about 1 month ago
g
1
upvotes

Hey,

Thanks for the info. I checked the theme.js and managed to modify it so i see the color swatch! :) I dont think it's the nicest way to modify that js file but it will do till they publish the nice way :P So in theme.js at line 2482 you will find the variable variant declared and after i added the swatched code. Of course there are still some style changes that you should add by yourself as in the doc is css and now they are using scss, which i didnt do yet. But it seems to be working, adding it in the cart and everything.. Oh and you also have to add jquery to the theme so the other color select will dissappear. 

Posts:
4
about 1 month ago

Hi Daniela,

That is fantastic news, well done for playing around and finding a solution! We are so excited to hear that this could be the answer we have all been waiting for.

May I ask you to please clarify just this point: "Oh and you also have to add jquery to the theme so the other color select will dissappear. " What JQuery did you add and where?

And just to also confirm, are you using the Debut theme for this?

The Web Elite | Shopify Experts
Posts:
4
about 1 month ago

Yes, i use Debut :) JQuery, a js framework responsible for some magic :D In theme.liquid after this line '<!--[if lte IE 9]><script src="{{ 'vendor.js' | asset_url }}"></script><![endif]--> add this:


  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

Posts:
1099
30 days ago

It actually is not the best idea -- most probably you will end up with extra copy of jQuery loaded.

For many Sectioned themes jQuery is included as a part of vendor.js.  Your inlined scripts do not see it because it is not available until the page is fully loaded, because vendor.js is included with defer="defer" attribute (probably a Shopify's attempt to reduce the number of render-blocking scripts). 

So you have two options: a) remove the defer attribute and allow vendor.js to load as soon as it is included (which I recommend to all non-programmer type shopify users, since it is easy) or b) modify the code and include it in the theme.js (what I do myself).

Or, you should remove jQuery from the vendor.js file if you include it separately.

 

Want me to tweak a theme for you? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
Amber Hazel Member
Posts:
8
Last edited 26 days ago

I can't make this to work. Both drop-down and radio options are displayed on my product page. What am I doing wrong?

I added this below second </select> in product-template.liquid

{% if product.available and product.variants.size > 1 %}
  {% for option in product.options %}
    {% include 'swatch' with option %}
  {% endfor %}
{% endif %}  

I don't think my theme.js is same as your Daniela. This is my code arround line 2482.

          // The variant doesn't exist, disable submit button and change the text.
          // This may be an error or notice that a specific variant is not available.
          $(this.selectors.addToCart).prop('disabled', true);
          $(this.selectors.addToCartText).text(theme.strings.soldOut);
        }
      } else {
        $(this.selectors.addToCart).prop('disabled', true);
        $(this.selectors.addToCartText).text(theme.strings.unavailable);
        $(this.selectors.productPrices)
          .addClass('visibility-hidden')
          .attr('aria-hidden', 'false');
      }
    },

I'm not sure where to add code related to callback?

Scr thumb
Posts:
3
7 days ago

Would love an answer to this as well. Since selectCallback is gone, what needs to be changed in the code and where in theme.js does it go?

Posts:
4
5 days ago

You have the Color 2 times because of the jquery issue i was talking about. Remove the defer="defer" attribute, like Tim specified. It's in the theme.liquid line 62 and 63 for vendor.js. And in theme.js you need to add, at line 2484, so inside if(variant){

for (var i=0,length=variant.options.length; i<length; i++) {
          $('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
        }

 

Andrei Member
Posts:
5
about 24 hours ago

I'm having this same exact issue as the others in this thread. Everything appears fine on the product page, and the variants are listed correctly, but the variant selected by the swatches does not reflect what is added to cart (so it always just adds the default color and size in my case). I'm using Debut as the theme.

Please see the attached screenshot for where I added the code from the tutorial (that is otherwise supposed to go into selectCallback). I'm putting it exactly where Daniela suggests, although my line numbers are slightly different from other small modifications. Would it be possible for anyone with a working solution to upload the full relevant portion of their theme.js?

I see no errors in my JS console, any errors that I've seen I've squashed already. I'm not sure where to proceed from here.

 

Screen shot 2017 04 25 at 5.35.42 pm thumb
Andrei Member
Posts:
5
about 23 hours ago

Nevermind! Got it to work. I had originally commented out the dropdowns for the original size and color variants as they weren't disappearing fast enough - but seemingly this gave me my issue.

Make sure in theme.js your code looks exactly like this. Do a control-f for if (variant) { and add these lines immediately underneath:

for (var i=0,length=variant.options.length; i<length; i++) {
          $('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');

}

That's what I've done and it works great here! 

Log in or sign up for an account to reply.

f
Your Reply