Rendering Sections with conditions -- Empire Theme

Rendering Sections with conditions -- Empire Theme

x_jwm_x
Shopify Partner
1 0 0

Currently on Pixel Unions Empire theme:

 

Here's the situation: 

 

I have a "vendor" metaobject connected as a meta field in some of my products. 

 

I would like to dynamically render an "about the vendor" section and "view more from the vendor" section. 

 

I would like to add a conditional logic container that I can put an "image-with-text" section, and a "featured-collection" carousel inside of. 

 

{% if product.metafields.custom.vendor %}

 

{% render sections %}

 

{% endif %}

 

I tried creating a new section, but I don't know how to drop in other sections, also tried duplicated the desired sections and adding the logic directly to those, but I don't think I quite understand the theme enough to get this to work either. Thoughts? 

 

I can make this work by re-create the "image-with-text" section with a custom liquid block and CSS, but the "featured-products" section is proving difficult/too much work.  I don't want to reinvent the wheel here. 

 

 

 

 

 

 

 

 

Reply 1 (1)

tim
Shopify Expert
3627 314 1341

 

I'd like to suggest a solution which would require no theme code modification => makes theme updates easier.

 

The best approach would be to create an alternate template for products which have this metafield to include required sections and assign it only to those products. 
Cons: assigning templates manually may be overlooked if you have a lot of these products. Would be nice to automate it, but Flow does not have builtin action for assigning a template (a developer can create a custom action to do it, or use another app)

 

Alternatively, you can modify your default template to include those sections for all products, but add custom liquid sections to hide those empty sections if metafield is not set.
Cons: kinda hackish

 

Here is the idea: we create a custom liquid section which will output a CSS rule to hide the next section based on condition and insert it before each of the metafield-dependent sections like so:

  1.  Main product data section
  2. Custom liquid section
  3. Vendor image + text section (the one to be hidden if metafield is not set)

Here is the code for the  custom liquid section:

 

 

<style>
 #shopify-section-{{ section.id }} {
    display: none;
  }
 {% unless product.metafields.custom.vendor %}
  /* hide next section if metafield is not set */
  #shopify-section-{{ section.id }} + * {
    display: none;
  }
 {% endunless %}
</style>

 

 

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com