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.
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" />
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"