Liquid, JavaScript, themes, sales channels
I'm trying to add a 'Size chart' button to my product page and have a size chart popup when clicking the button. All products have different size guides, so the button should link to the page tag form "meta-size-chart-{pagename}" in order to open the specific chart for the product. I was able to get 'Size chart' on the page and a popup appears, but it's blank. How would I get the specific size chart for the product to popup?
Here is how the product page looks with the button:
And when you click 'Size chart', this is the popup that appears:
I did grab code from the previous theme that allowed us to have a size chart popup, thinking that it would help.
Here is what I copied from old theme and added to our new theme
** snippets/product-form.liquid**
{% for tag in product.tags %}
{% if tag contains 'meta-size-chart-' %}
{% assign meta-size-chart = true %}
{% endif %}
{% endfor %}
{% comment %} Size chart Mobile{% endcomment %}
{% if settings.size_chart != blank or meta-size-chart %}
<a href="javascript:;" class="product__size-chart size-chart--medium-down" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
{% render 'popup-size-chart', product_id: product.id %}
{% endif %}
{% comment %} Size chart{% endcomment %}
{% if settings.size_chart != blank or meta-size-chart %}
<a href="javascript:;" class="product__size-chart medium-down--hidden" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline">Size Guide{% render 'icon', name: 'right-caret' %}</a>
{% render 'popup-size-chart', product_id: product.id %}
{% endif %}
In the same file, this is the code that allows me to have 'Size chart' on the prod page and the popup to appear:
{% if settings.size_chart != blank or meta-size-chart %}
<button type="button" class="ProductForm__LabelLink Link Text--subdued" data-action="open-modal" aria-controls="modal-{{ size_chart_page.handle }}">
{{- 'product.form.size_chart' | t -}}
</button>
{% endif %}
Hi @hae_villareal ,
this looks to specific for a direct answer in this forum, but if you share the link to your shop and accept me as a collaborator I am happy to have a look.
Regards
Thomas
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024