Liquid, JavaScript, themes, sales channels
Hello,
My lorenza theme has the option to show a size guide in the "Size" dropdown field.
The code to set the the page for the size guide is like this:
{% capture guide_trigger %}
<a
href="#"
class="variant-popup__trigger accent type-body-small"
data-variant-popup-trigger
data-modal-content-id="modal-{{ settings.variant_popup_page }}"
style="padding-right: 20px;"
>
{{ settings.variant_popup_text }}
</a>
<div id="modal-{{ settings.variant_popup_page }}" class="variant-popup__content modal-content">
<h2 class="type-heading-1 mt0 mb3">{{ variant_popup_page.title }}</h2>
{{ variant_popup_page.content }}
</div>
{% endcapture %}
I would like to add a rule so that when the product.title contains "waxed" -> to show this page: https://senkels.at/pages/length-guide
and when the product.title contains "sneaker" - > to show this page: https://senkels.at/pages/sneaker-length-guide
Does anyone know how I would need to set this up with the code above?
I have already tried this but It did not work:
{% capture guide_trigger %}
<a
href="#"
class="variant-popup__trigger accent type-body-small"
data-variant-popup-trigger
{%if product.title contains "waxed" %}
data-modal-content-id="modal-{{https://senkels.at/length-guide }}"
{% endif %}
{%if product.title contains "sneaker" %}
data-modal-content-id="modal-{{https://senkels.at/pages/sneaker-length-guide}}"
{% endif %}
style="padding-right: 20px;"
>
{{ settings.variant_popup_text }}
</a>
<div id="modal-{{ settings.variant_popup_page }}" class="variant-popup__content modal-content">
<h2 class="type-heading-1 mt0 mb3">{{ variant_popup_page.title }}</h2>
{{ variant_popup_page.content }}
</div>
{% endcapture %}
Hi
You are placing the actual value you want to use, https://senkels.at/length-guide, in a liquid object/variable denoted by {{ }}. Without surrounding it with "" it seems from here https://shopify.github.io/liquid/basics/introduction it would be treated as an object name when you want the value.
So try as
data-modal-content-id="modal-https://senkels.at/length-guide" is probably quickest way to verify
Regards
Peter
Hi @peterloane ,
Thank you for your inpug. I just tried that.
Now the good thing is, your line of code isn't breaking it anymore, so it's display correctly in the theme. But unfortunately, the size guide isn't opening when clicking on it. Do you have another idea what could be fixed to make this work?
https://senkels.at/collections/3mm/products/black-3mm-flat
The code now look as follows:
{% capture guide_trigger %}
<a
href="#"
class="variant-popup__trigger accent type-body-small"
data-variant-popup-trigger
{%if product.title contains "waxed" %}
data-modal-content-id="modal-https://senkels.at/length-guide"
{% endif %}
{%if product.title contains "sneaker" %}
data-modal-content-id="modal-https://senkels.at/pages/sneaker-length-guide"
{% endif %}
style="padding-right: 20px;"
>
{{ settings.variant_popup_text }}
</a>
<div id="modal-{{ settings.variant_popup_page }}" class="variant-popup__content modal-content">
<h2 class="type-heading-1 mt0 mb3">{{ variant_popup_page.title }}</h2>
{{ variant_popup_page.content }}
</div>
{% endcapture %}
Hi @senkels
Should your first link be https://senkels.at/pages/detailed-length-guide ?
https://senkels.at/length-guide gives a 404 not found error
Looking at the rest of the code you shared, have you defined size variants or a variant_popup_page ?
See https://help.shopify.com/en/manual/products/variants.
As the template code is referencing liquid objects, {{ settings.variant_popup_page }} ,{{ variant_popup_page.title }}, etc hardcoding pages is probably not going to work as you want....
When I look at the link you shared
https://senkels.at/collections/3mm/products/black-3mm-flat if I click 'not sure' link in the length dialog this functionality seems to be working as you describe .....
Hi,
Yes I was working in a theme duplicate so on the live theme it does work but only with 1 size guide for all products, sorry forgot t mention this.
Yes, In the customization options I have to define a page that is to be used for the size guide popup.
The theme dev who I asked about this told me they don't have the time to do this for me but he said I could probably do it with an " if rule".
Hi
Cool, that makes more sense to me now
In the customization options can you define a second page that might be used for the size guide popup ?
Hi @peterloane
no I unfortunately can’t select more than one. The theme dev said this is unsupported by Shopify so if I would want to have that, I‘d need to build something with an IF rule.
Hi @senkels
Looking at your site source I see
data-modal-content-id="modal-length-guide"
so I guess you defined a customization popup page with an id of length-guide ?
Yes, the page is named length guide. And the page I would like to display in the popup when the product name contains sneaker is …/pages/sneaker-length-guide
Hi @senkels
If you have both pages defined then try this , change
data-modal-content-id="modal-https://senkels.at/length-guide" to data-modal-content-id="modal-length-guide"
and
data-modal-content-id="modal-https://senkels.at/pages/sneaker-length-guide" to data-modal-content-id="modal-sneaker-length-guide"
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024