How to implement conditional sections in 2.0 themes?

[Ceri-Waters]

Hiya,

So in the current 1.0 setup you're able to do conditional sections.

As an example, if you wanted to bring in a different section depending on product type you can do:

            {%- if product.type contains 'Watch' -%}
                {% section 'product-watch' %}
            {%- else -%}
                {% section 'product' %}
            {%- endif -%}

Or, if you want to display aspects of the site differently for specific customers you can do:

            {%- if customer.tags contains 'Wholesale' -%}
                {% section 'header' %}
            {%- else -%}
                {% section 'header-wholesale' %}
            {%- endif -%}

My question is, how can you achieve this logic with the 2.0 structure since templates are now just JSON files. With the first example, you could achieve it by having a seperate template, but what about the second? In the second scenario, both sections ultimately have the same definition and output their HTML via a snippet - however it allows clients to control e..g the menu displayed for certain customers and so forth.

We've used this logic in quite a few bespoke themes, and I'm just wondering what's the best way to adapt this to 2.0.

Thanks in Advance,

Ceri.

[NegativeSpace]

My initial thought would be to move the conditional logic into the section file

[Ceri-Waters]

That would mean doubling up all of the section settings however. Currently I'm able to have one set of section settings for the header for e.g. retail customers, and another identical section file for wholesale. They then pass their data into a snippet which handles the rendering.

My only option at the moment is to include both sets of headers in the template, but only render the one which isn't ideal.

[Ceri-Waters]

Any other thoughts?

[sjattwood]

What was your solution to this? Having the same issue re adding conditional sections below the fold on product pages. 

[Ceri-Waters]

I haven't implemented anything yet, but the only solution I can currently think of is always including the Section, but having the logic of wherever it displays or not inside the section code. So the section will always be included, but may not neccessarily display.

My alternative approach for smaller sections within the header/footer will be to have them as static sections in the Template, but to actually load them via Ajax as seen here: https://shopify.dev/api/section-rendering . Will be a good technique for smaller secitons needed in multiple areas, e.g. a Store Switcher (drop down of international stores to choose from).

[PurpleMamba]

Did you find a solution for this?

[Ceri-Waters · Accepted solution]

In the end I moved the majority of the section code into a snippet, created two sections each with the logic of including said snippet and then added both sections to the template. Works basically the same.