Can you create a common asset for specific pages in Debut theme?

[gmartin]

Hello, working on my first Shopify site! Debut theme.

Question - Is it possible to create a common asset that you can call as an include command or short code in chosen pages within the HTML command in the page or product editors? 

For example I have a table chart that belongs on certain product pages. I would like to be able to call this table through a short code or include command so if I need to make changes to the table I can do it once and have it update throughout the site.

I hope this makes sense. Appreciate any advice.

[Ninthony]

Yup, 100 percent. You'll be looking to create a snippet file. So in Online Store > Actions > Edit Code, open your snippets folder and Add a New Snippet. Lets just say for this case you call your snippet "my-table" -- it saves as "my-table.liquid". Then you paste your table code into the snippet. Then anywhere else on the site where you want to output your table you can call either:

{% include 'my-table' %}
// or
{% render 'my-table' %}

They do the same thing, but "include" has been deprecated. Also, you can pass variables and objects to snippet files if you may need them. Say you were putting your table on a product page, and for whatever reason you needed the price of that specific product included in the table dynamically. Well, when you're in product.liquid you have access to the product object, but in your snippet you don't. So you can actually pass the product object to your snippet:

{% render 'my-table' , my_product: product %}

Then if you needed the price in your snippet you could reference it by saying:

{{ my_product.price | money }}

//output $19.99

I would just call it product actually, but for the purposes of the explanation I called it "my_product" because doing:

{% render 'my-table' , product: product %}

Is kind of confusing. You can call it whatever you want on the left side, that's just how you'll have to refer to it in the snippet itself.

[gmartin]

Thanks for helping. I created the snippet and dropped my table code in it. Then I went to a product, switched to HTML in the description editor and then entered - 

{% render 'my-table' %}

in the source code. It didn't work. Will this only work in the code files and not in the product editor? 

[Ninthony]

Yeah you can only use liquid in the Theme code. So you'll have to do it in product.liquid, which probably points to a section file called product-template.liquid. What I would do is tag all of the products that you need to include this table in, something like "show table" -- I assume you're wanting to put it by your description. Let's just say you are, in product-template.liquid in your sections folder you would Ctrl + F and search for "product.description", you'll probably find something like this:

<div class="product-description">
  {{ product.description }}
</div>

Underneath that you can check and see if your product contains the tag "show table" and then display that snippet if it does:

<div class="product-description">
  {{ product.description }}
  {% if product.tags contains 'show table' %}
    {% render 'my-table' %}
  {% endif %}
</div>

Something like that. Let me know if you need help, I can request access to your themes and products and get it sorted out for you.

[gmartin]

Ok this makes sense. This approach would put my snippet below or above the description area correct? This helps but it looks like if I want to put the snippet copy inline or in the middle of the description copy, i'm out of luck. 

[Ninthony · Accepted solution]

There is a workaround, this could actually circumvent having to tag the product. You can break your description up with a split, first, and last filters in liquid. So let's say you create a special set of characters that you're never going to put in your description otherwise. Something like six hyphens:

Here's your product description, there's a bunch of stuff I want to say above the table
------
Here's more of my product description. I have more things to say down here underneath the table

Given the previous example you could say:

<div class="product-description">
{% if product.description contains '------' %}
  {{ product.description | split: '------' | first }}
  {% render 'my-table' %}
  {{ product.description | split '------' | last }}
{% else %}
  {{ product.description }}
{% endif %}
</div>

So in this scenario, if your description contained 6 hyphens in a row, we would split the description apart by those hyphens and show the first item in the split, then your table, then the last part of the split. If it didn't contain six hyphens in a row, it would output the description normally.

[gmartin]

I'll experiment with this. I tried the earlier solution you suggest with the if product.tag and it didn't work but I tried if product.type and it worked. so I set up my template a little different and it worked. Heres what it looked like in the product.template file -

<div class="grid">
<div class="grid__item medium-up--one-half bottom-padding">
<div class="product-single__description rte">
{{ product.description }}
</div>
</div>
<div class="grid__item medium-up--one-half">
{% if product.type contains 'Diamond Lapping' %}
{% render 'diamond-lapping-table' %}
{% endif %}
{% if product.type contains 'Lapping Films' %}
{% render 'lapping-table' %}
{% endif %}
{% if product.type contains 'Microfinishing Films' %}
{% render 'microfinishing-table' %}
{% endif %}
</div>
</div>

Pretty cool to see it work. Really appreciate your help!

[Ninthony]

Awesome, glad to hear it. No problem, feel free to reach out if you have any questions.