Swatch.liquid Error Nesting too Deep

Highlighted
Shopify Partner
5 0 0

I have tried to add swatches on my product page but I got a error

 

Error: Liquid error (swatch line 2): Nesting too deep

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

Please help me to resolve the issue

0 Likes
Highlighted

Try to use this code

{% if product.available and product.variants.size > 1 %}
    {% for option in product.options %}
        {% render 'swatch' with option %}
    {% endfor %}
{% endif %}
- [Tutorial] How to customize Shopify product page: academy.pagefly.io/customize-shopify-product-pages
- Are you having problems customizing your Shopify pages? Check out PageFly - Advanced Shopify Page Builder
0 Likes
Highlighted
Shopify Partner
5 0 0
0 Likes
Highlighted

Can you post full code here

- [Tutorial] How to customize Shopify product page: academy.pagefly.io/customize-shopify-product-pages
- Are you having problems customizing your Shopify pages? Check out PageFly - Advanced Shopify Page Builder
0 Likes
Highlighted
Shopify Partner
5 0 0

Below code in swatch.liquid

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

Below code in product-template.liquid

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

I did not find selectCallback function, so I added below code in script tag

var selectCallback = function(variant, selector){
// BEGIN SWATCHES
if (variant) {
var form = jQuery('#' + selector.domIdPrefix).closest('form');
for (var i = 0, length = variant.options.length; i < length; i++) {
var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] + '"]');
if (radioButton.size()) {
radioButton.get(0).checked = true;
}
}
}
};

And the below code added in theme.liquid

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

 

0 Likes