Add "IF" Rule to show different size guide

senkels
Excursionist
53 0 9

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

 

Replies 9 (9)

peterloane
Shopify Partner
44 5 14

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

 

 

senkels
Excursionist
53 0 9

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

peterloane
Shopify Partner
44 5 14

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 ..... 

 

senkels
Excursionist
53 0 9

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". 

peterloane
Shopify Partner
44 5 14

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 ? 

senkels
Excursionist
53 0 9

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. 

peterloane
Shopify Partner
44 5 14

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 ?

 

senkels
Excursionist
53 0 9

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 

 

peterloane
Shopify Partner
44 5 14

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"