Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Modified product-description.liquid to support metafield tab contant
<!-- Snippets/product-description.liquid -->
<div class="product-description" itemprop="description">
{% assign MFTab2 = product.metafields.tab2.content %}
{% assign MFTab3 = product.metafields.tab3.content %}
{% assign MFTab4 = product.metafields.tab4.content %}
<ul class="tabs js-tabs-container">
{%- if tab_1 != blank -%}
<li class="product-description__tab">
<h5 class="h5--no-margin">
{%- if tab_2_content != blank or MFTab2 or MFTab3 or MFTab4 or tab_3_content != blank -%}
<a href="#tab-1" data-tab="1" class="active js-tabs-link">{{ tab_1 }}</a>
{%- else -%}
<div class="active js-tabs-link">{{ tab_1 }}</div>
{%- endif -%}
</h5>
</li>
{%- endif -%}
{%- if tab_2_content != blank or MFTab2 and tab_2 != blank and tab_1 != blank -%}
<li class="product-description__tab">
<h5 class="h5--no-margin">
<a href="#tab-2" data-tab="2" class="js-tabs-link">{{ tab_2 }}</a>
</h5>
</li>
{%- endif -%}
{%- if tab_3_content != blank or MFTab3 and tab_3 != blank and tab_1 != blank -%}
<li class="product-description__tab">
<h5 class="h5--no-margin">
<a href="#tab-3" data-tab="3" class="js-tabs-link">{{ tab_3 }}</a>
</h5>
</li>
{%- endif -%}
{%- if tab_4_content != blank or MFTab4 and tab_4 != blank and tab_1 != blank -%}
<li class="product-description__tab">
<h5 class="h5--no-margin">
<a href="#tab-4" data-tab="4" class="js-tabs-link">{{ tab_4 }}</a>
</h5>
</li>
{%- endif -%}
</ul>
<div class="tab-container js-tabs-content-container">
<div class="tab-content tab-1 current checkMyHeight js-tab-1">
<div class="rte">
<div class="description" itemprop="description">
{{product.description}}
</div>
</div>
</div>
{%- if tab_2 != blank or MFTab2 -%}
<div id="tab-2" class="tab-content tab-2 js-tab-2">
<div class="rte">
<div class="description" itemprop="description">
{%- if MFTab2 -%}
{%- if MFTab2 contains "page-" -%}
{%- assign MFTab2 = MFTab2 | remove_first:"page-" -%}
{{ pages[MFTab2].content }}
{%- else -%}
{{ MFTab2 }}
{%- endif -%}
{%- else -%}
{% capture tab2Content %}{{section.settings.tab_2_content}}{%endcapture%}
{{ pages[tab2Content].content }}
{%- endif -%}
</div>
</div>
</div>
{%- endif -%}
{%- if tab_3 != blank or MFTab3 -%}
<div id="tab-3" class="tab-content tab-3 js-tab-3">
<div class="rte">
<div class="description" itemprop="description">
{%- if MFTab3 -%}
{%- if MFTab3 contains "page-" -%}
{%- assign MFTab3 = MFTab3 | remove_first:"page-" -%}
{{ pages[MFTab3].content }}
{%- else -%}
{{ MFTab3 }}
{%- endif -%}
{%- else -%}
{% capture tab3Content %}{{section.settings.tab_3_content}}{%endcapture%}
{{ pages[tab3Content].content }}
{%- endif -%}
</div>
</div>
</div>
{%- endif -%}
{%- if tab_4 != blank or MFTab4 -%}
<div id="tab-4" class="tab-content tab-4 js-tab-4">
<div class="rte">
<div class="description" itemprop="description">
{%- if MFTab4 -%}
{%- if MFTab4 contains "page-" -%}
{%- assign MFTab4 = MFTab4 | remove_first:"page-" -%}
{{ pages[MFTab4].content }}
{%- else -%}
{{ MFTab4 }}
{%- endif -%}
{%- else -%}
{% capture tab4Content %}{{section.settings.tab_4_content}}{%endcapture%}
{{ pages[tab4Content].content }}
{%- endif -%}
</div>
</div>
</div>
{%- endif -%}
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment