Skip to content

Instantly share code, notes, and snippets.

@hussnainsheikh

hussnainsheikh/table-liquid.liquid

Last active November 25, 2021 01:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hussnainsheikh/3e2afd3983efb6ecc5e0e4ec3212de67 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hussnainsheikh/3e2afd3983efb6ecc5e0e4ec3212de67 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hussnainsheikh revised this gist Nov 25, 2021. No changes.
  2. hussnainsheikh created this gist Jun 30, 2021.
    48 changes: 48 additions & 0 deletions table-liquid.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    {%- comment -%} Metafields {%- endcomment -%}
    {%- if product.metafields.xojson != blank -%} //change "xojson" with your scope of metafields, can be global or something else which you defined while creating them.
    <div class="row container" id="Specifications">
    <header class="section__header column small-12">
    <h3 class="section__title heading h3">Product Attributes</h3>
    </header>
    <div class="row">
    <div class="columns medium-6 small-12 tooltip-container">
    <table role="presentation" style="width: 80%;background: #fff;border: solid 1px #ddd;margin-bottom: 1.25rem;table-layout: auto;">
    <tbody>
    {% for field in product.metafields.xojson %}
    {%- if field[1] != blank -%}
    {%- assign meta_json = field[1] -%}
    {% for cs_field in meta_json %}
    {%- if cs_field[1] != blank -%}
    <tr>
    <td><strong>{{cs_field[0]}}</strong></td>
    <td>{{cs_field[1]}}</td>
    </tr>
    {%- endif -%}
    {% endfor %}
    {%- endif -%}
    {% endfor %}
    </tbody>
    </table>
    </div>
    </div>
    </div>
    {%- endif -%}


    //Some style is shop dependent, so change those classes accordingly.

    <style>
    table tr th, table tr td {
    color: #222;
    font-size: .875rem;
    padding: .5625rem .625rem;
    text-align: left;
    }
    table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td {
    display: table-cell;
    line-height: 1.125rem;
    }
    table tr.even, table tr.alt, table tr:nth-of-type(even) {
    background: #f9f9f9;
    }
    </style>