Reference dependencies in Liquid using relative paths

[t-kelly]

Depends on #867

Problem

Dependencies in liquid files currently only reference file names. These file names are used in accordance to the type of dependency being used to create a path. For example {% section ‘header’ %} reference the sections/header.liquid files, and {{ ‘my-image.jpg’ | asset_url }} references the assets/my-image.jpg file.

By only using filenames we limit theme developers to only use the default folders required by Shopify. Developers cannot customize the structure of their project, such as organizing their files in sub folders.

The benefits of sub folders

Sub folders could be extremely helpful in structuring Slate theme code. For example, let’s consider how we currently structure a section and it’s dependencies:

• sections/product.liquid - The section liquid file containing Liquid/HTML, inline CSS, inline schema JSON, and inline JS.
• scripts/sections/project.js - The main JS for the section which is bundled with other scripts using Webpack.
• styles/sections/project.scss - The main styles for the section which is bundled with other styles using Webpack.

Even though these files are all directly related and dependent on each other, they are spread across three different directories. Wouldn’t it be nice to have them all in the same folder?

In addition to the previously mentioned files, we also have the opportunity to externalize other parts of the section, such as the schema. Instead of inlining the schema, the contents could be externalized and referenced via a relative path with the {% schema %} tag:

<my-section>
  ...
</my-section>

{% schema './schema.json' %}

Solution

Allow the liquid-loader to accept using the following tags with a relative path:

• {% layout ‘path’ %}
• {% section ‘path’ %}
• {% include ‘path’ %}
• {% schema ‘path’ %}

Allow the following filters to accept relative paths:

• asset_url
• asset_img_url