Insert a table in product description area with metafields & with CSS formatting

cozydeliver
Excursionist
25 2 8

Hi there,

With 2.0 metafileds function, I'm wondering if I can insert a table with metafields and CSS formatting.

 

(1) I have some metafileds setup (will add more later on):

cozydeliver_0-1638932054022.png

(2) I also insert a table in product description area:

cozydeliver_1-1638932168133.png

It seems like I'm doing double work here. Ideally, I would like to insert some coding in product description section so that I only need to fill in metafield and product description table will generate automatically.

 

a. Logic should be: 1.Create a table. If product attribute A is blank, then not show up in desciption table, otherwise show product attribute A & its value. Then product attribute B, C, D,...etc.

b. I'd like to format the table size, key length,value length with some CSS formating.

Ideally, I'd like the table formatting look like this:

cozydeliver_2-1638932777623.png

Please share your thoughts. It's much appreciated!

 

Best,

Vincent

 

Replies 7 (7)

MrL22
Shopify Partner
18 0 12

I was looking for a very similar thing to generate tables and ended up developing this free tool which can be implemented easily into your theme. https://webforward.github.io/shopify-tables/ 

 

What I wanted to avoid was that if I needed to change the styling or layout of the table, I did not want to be editing all of my products again. 

MrBenn
Tourist
3 0 0

Hi, this seems like the ideal solution for what I am attempting. However, after generating the following table I get this error on render.

 

Liquid syntax error (line 6): Expected id but found number in "{{ row.0 }}"

 

[
{"1":"Lengths"},
{"1":"Small","2":"Test"},
{"1":"Medium","2":"Test"}
]

 

I copied the code from your specification table and updated the namespace and key.

MrL22
Shopify Partner
18 0 12

Hi MrBenn

 

I have just tried this again on a new store I am working on and it is working. Can you try changing {{ row.0 }} to {{ row.1 }} and let me know what happens?

MrBenn
Tourist
3 0 0

Hey! I tried this and got the below.

 

Liquid syntax error (line 6): Expected id but found number in "{{ row.1 }}"

 

To help I have also pasted my specification-table.liquid - I am essentially trying to use the table to make a size chart under a collapsible tab.

 

{% if product.metafields.custom.size_chart_table.value != blank %}
    <table class="table table-bordered">
        {% for row in product.metafields.custom.size_chart_table %}          
            <tr>
                {% if row.size == 1 %}
                    <th colspan="999">{{ row.1 }}</th>
                {% else %}
                    {% for col in row %}
                        <td>{{ col | last }}</td>
                    {% endfor %}
                {% endif %}
            </tr>
        {% endfor %}
    </table>
{% endif %}

 

 

 

MrL22
Shopify Partner
18 0 12

That is very odd. I wonder what is different in your set up. Defintely set the field to type of JSON?

 

Can you try this?

 

{% if product.metafields.namespace.metakey.value.size > 0 %}
    <table class="table table-bordered">
        {% for row in product.metafields.namespace.metakey.value %}
            <tr>
                {% if row.size == 1 %}
                    {% for col in row %}
                        <th colspan="999">{{ col | last }}</th>
                    {% endfor %}
                {% else %}
                    {% for col in row %}
                        <td>{{ col | last }}</td>
                    {% endfor %}
                {% endif %}
            </tr>
        {% endfor %}
    </table>
{% endif %}
MrBenn
Tourist
3 0 0

Thanks for your speedy replies. 

Found the issue - I stupidly removed the .value after the namespace; I noticed after I re-did with the code you posted. Apologies!

MrL22
Shopify Partner
18 0 12

Thanks for letting me know. Now I see it 🙂 Glad you got it working.