@savchukoleksii/shopify-template-checker

Check Shopify template in your javascript files. In Shopify themes very often we can find code for specific template:

if(location.path === `/pages/about`) {
    // do some staff for `about` template
}

This approach is not correct due to the fact that this template can be used on multiple pages. This package solves this problem.

---

Install

Using npm:

npm install @savchukoleksii/shopify-template-checker

Using yarn:

yarn add @savchukoleksii/shopify-template-checker

CDN:

<script src="https://cdn.jsdelivr.net/npm/@savchukoleksii/shopify-template-checker/dist/shopify-template-checker.js" />

---

Usage

Add following code to your Shopify layouts into head:

{%- capture template_name -%}
	{%- if template.directory != blank -%}{{- template.directory -}}/{%- endif -%}{{- template.name -}}{%- if template.suffix != blank -%}.{{- template.suffix -}}{%- endif -%}
{%- endcapture -%}

<meta property="theme:template" content="{{- template_name -}}">

After that you will be able to use package.

import * as ShopifyTemplateChecker from "@savchukoleksii/shopify-theme-checker"

if(ShopifyTemplateChecker.templateEquals("product")) {
    // do some action only for product template
}
 
if(ShopifyTemplateChecker.templateEquals("product.alternate")) {
    // do some action only for product template with suffix `alternate`
}

if(ShopifyTemplateChecker.templateNameEquals("product")) {
    // do some action only for all product templates
}

if(ShopifyTemplateChecker.templateSuffixEquals("alternate")) {
    // do some action only for all templates with suffix alternate
}

if(ShopifyTemplateChecker.templateDirectoryEquals("customers")) {
    // do some action only for all templates under `customers` directory
}

It is also possible to import only the required method:

import { templateEquals } from "@savchukoleksii/shopify-theme-checker"