Translation Check Script for Shopify Liquid Templates

Overview

This Node.js script is crafted to facilitate the identification and review of translation keys within Shopify Liquid templates. It's designed to support Shopify themes with or without a src directory, seamlessly adapting to different project structures. The script recursively scans for Liquid files, extracts potential translation keys, and generates a visual test page in the form of a index.translation-check.liquid file. This tool is invaluable for developers and translators working on internationalized Shopify themes, ensuring no translation key is left unchecked.

Features

• Adaptable File Scanning: Automatically detects and scans Liquid files in projects, regardless of whether they use a src folder structure.
• Translation Key Extraction: Identifies and extracts translation key patterns from Liquid files for easy review.
• Visual Test Page Generation: Outputs an index.translation-check.liquid file in the appropriate templates directory, listing all translation keys alongside their rendered translations.
• Missing Translations Highlighting: Incorporates a script to visually highlight any translations that are missing, aiding in quick identification and resolution.

Prerequisites

• Node.js must be installed on your system.
• Access to the Shopify theme's files you wish to review.

Usage

1. First install the package using npm or yarn:

   npm: npm install bao-translation-check --save-dev
   yarn: yarn add bao-translation-check --dev
   pnpm: pnpm add bao-translation-check --save-dev

2. Modify package.json: First, ensure your Shopify theme's package.json includes the following script entry:

   "scripts": {
      "build-translation-template": "bao-build-translation-template",
      "remove-translation-template": "bao-remove-translation-template",
      "translation-check": "bao-translation-check"
   }

3. Navigate to Your Theme's Root Directory: Open a terminal and change to your Shopify theme's root directory.
4. Execute the Script: Run the script by executing the following command in your terminal:

   npm run translation-check
   yarn translation-check
   pnpm translation-check

5. Locate the Output: Find the index.translation-check.liquid file within your theme's templates directory or src/templates if a src directory is used.
6. Preview on Your Store: Append

   ?view=translation-check
   &view=translation-check

   to the URL of your store's site to review the translation keys in action.

How To Develop Locally

• In this directory run npm link
• In the directory you want to use this package run npm link bao-translation-check
• Repeat the above steps for every change in this package
• To unlink the package run npm unlink bao-translation-check in the directory you linked it to
• To unlink the package run npm unlink in the directory you linked it from
• Publish the package to npm with npm publish once confident in the changes

Important Note

This script is intended for development and review purposes only. Be sure to remove or disable the inex.translation-check.liquid file from your live theme after completing your translation review to maintain a professional storefront appearance

Limitations

This script optimises for common translation key patterns and might not capture dynamically assigned translations accurately. It filters for keys containing a dot (.), assuming they represent structured translation paths. For translations dynamically constructed within Liquid logic (e.g., using assign), manual verification is recommended.

Contributions

We welcome contributions and suggestions to improve this script and make it more versatile for different Shopify theme structures. If you have ideas for enhancements, bug reports, or just wish to discuss potential changes, please feel free to reach out.

Contact

• Name: Steven John Robson
• Email: [email protected]
• Website: bao.agency

Fancy Joining Our Team?

An agency is only as good as its people, but luckily we have good people. Are you good people too?

Careers

TODOs

• ~~amend the way "templates" is detected to be more flexible~~
  • ~~search for "templates" folder that is NOT in dist folder to use~~
• ~~add layout none to remove header and footer~~
• ~~JS to remove all translations that are not missing~~
• ~~use Puppeteer to check for a class on the page to see if it's empty~~
• look into GitHub actions to run this on merge
• understand what we can do with it
• update the output when fail/success
• update the readme to explain the three scripts
• update the readme to explain an .env file is needed

  STORE=www.clientWebsiteURL.com