Product Tab showing multiple Product Metafield data on an HTML table

Highlighted
New Member
1 0 0

Hi everyone,

This is my first time starting a discussion and my knowledge on liquid is limited.

I'm creating a website that sells food & beverage products, and I have multiple metafields (such as nutrition information and case information) attached to my products uploaded via CSV.
I would like to use this metafield data to insert them into a table, shown on a tab on the product page. The tab has its own designated liquid file.

I've opened up the liquid file and it looks like the following:

 

{%- assign has_unique_tab_1 = false -%}
{%- assign has_unique_tab_2 = false -%}

{%- for tag in product.tags -%}
  {%- if tag contains '__tab1' -%}
    {%- assign first_custom_page = tag | split: ':' | last -%}
    {%- assign first_custom_page = pages[first_custom_page] -%}

    {%- assign unique_tab_1_title = first_custom_page.title -%}
    {%- assign unique_tab_1_content = first_custom_page.content -%}
    {%- assign has_unique_tab_1 = true -%}
  {%- endif -%}

{%- if first_page.handle != blank or second_page.handle != blank or has_unique_tab_1 or has_unique_tab_2 or has_unique_tab_3 or section.settings.reviews_enabled -%}
  <div class="Product__Tabs">
    {%- if has_unique_tab_1 -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- unique_tab_1_title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- unique_tab_1_content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if has_unique_tab_2 -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- unique_tab_2_title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- unique_tab_2_content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if has_unique_tab_3 -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- unique_tab_3_title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- unique_tab_3_content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if first_page != empty -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- first_page.title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- first_page.content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if second_page != empty -%}
      <div class="Collapsible Collapsible--large">
        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          {{- second_page.title -}} <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div class="Rte">
              {{- second_page.content -}}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if section.settings.reviews_enabled -%}
      <div class="Collapsible Collapsible--large">
        {%- comment -%}We parse from metafields the number of reviews. First we try to use the old way, and then the updated way{%- endcomment -%}
        {%- if product.metafields.spr.reviews contains 'itemprop="reviewCount"' -%}
          {%- assign reviews_count = product.metafields.spr.reviews | split: '<meta itemprop="reviewCount" content="' | last | split: '">' | first | times: 1 -%}
        {%- else -%}
          {%- assign reviews_count = product.metafields.spr.reviews | split: '"reviewCount": "' | last | split: '"' | first | plus: 0 -%}
        {%- endif -%}

        <button class="Collapsible__Button Heading u-h6" data-action="toggle-collapsible" aria-expanded="false">
          <span>{{ 'product.tabs.reviews' | t }} <span class="text--light">({{ reviews_count | default: 0 }})</span></span>
          <span class="Collapsible__Plus"></span>
        </button>

        <div class="Collapsible__Inner">
          <div class="Collapsible__Content">
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          </div>
        </div>
      </div>
    {%- endif -%}
  </div>
{%- endif -%}

 

 
I'd like for the  unique_tab1_content  to show the table for the case specs like the following HTML.
 

 

<table width="100%">
<tbody>
<tr>
<td>Case Info</td>
<td>{{ product.metafields.global.basic_info_case_size }}</td>
</tr>
<tr>
<td>Case Weight</td>
<td>{{ product.metafields.global.basic_info_case_weight }}</td>
</tr>
<tr>
<td>Barcode</td>
<td>{{ product.metafields.global.product_case_barcode }}</td>
</tr>
<tr>
<td>Case Pack</td>
<td>{{ product.metafields.global.basic_info_input_number }}</td>
</tr>
<tr>
<td><span>Origin</span></td>
<td>{{ product.metafields.global.basic_info_country_of_origin }}</td>
</tr>
</tbody>
</table>

 

 

I believe that I need to create the HTML table and the Liquid code that extract value from metafields.
Could anyone assist on how to do this?
 
Please let me know if there needs to be a clearer explanation as I have a hard time understanding this myself.
 
Thank you!
0 Likes