{"id":13479533,"url":"https://github.com/uicrooks/shopify-mail-notifications","last_synced_at":"2025-04-11T02:31:25.063Z","repository":{"id":40200631,"uuid":"311764356","full_name":"uicrooks/shopify-mail-notifications","owner":"uicrooks","description":"Blazing-fast Shopify mail notifications templating environment with Liquid, MJML and Twig","archived":false,"fork":false,"pushed_at":"2022-06-25T16:56:51.000Z","size":1559,"stargazers_count":38,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-25T08:22:23.384Z","etag":null,"topics":["mail","mjml","shopify","twig","webpack"],"latest_commit_sha":null,"homepage":"","language":"Twig","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uicrooks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-10T19:33:01.000Z","updated_at":"2024-12-17T05:21:20.000Z","dependencies_parsed_at":"2022-06-27T00:03:57.635Z","dependency_job_id":null,"html_url":"https://github.com/uicrooks/shopify-mail-notifications","commit_stats":null,"previous_names":[],"tags_count":9,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uicrooks%2Fshopify-mail-notifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uicrooks%2Fshopify-mail-notifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uicrooks%2Fshopify-mail-notifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uicrooks%2Fshopify-mail-notifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uicrooks","download_url":"https://codeload.github.com/uicrooks/shopify-mail-notifications/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248329575,"owners_count":21085561,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mail","mjml","shopify","twig","webpack"],"created_at":"2024-07-31T16:02:18.570Z","updated_at":"2025-04-11T02:31:20.048Z","avatar_url":"https://github.com/uicrooks.png","language":"Twig","funding_links":[],"categories":["Twig"],"sub_categories":[],"readme":"\u003c!-- logo (start) --\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/img/logo.svg\" width=\"180px\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/img/banner.svg\" width=\"450px\"\u003e\n\u003c/p\u003e\n\u003c!-- logo (end) --\u003e\n\n\u003c!-- title / description (start) --\u003e\n\u003ch2 align=\"center\"\u003eShopify Mail Notifications\u003c/h2\u003e\n\nBlazing-fast templating environment for Shopify mail notifications with Liquid, ✉ MJML + 🌿 Twig. Create responsive emails quickly with less code.\n\u003c!-- title / description (end) --\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/img/screens.png\"\u003e\n\u003c/p\u003e\n\n\u003c!-- toc (start) --\u003e\n## Table of contents\n- [Features](#features)\n- [System requirements](#system-requirements)\n- [Getting started](#getting-started)\n- [Production](#production)\n- [Directories](#directories)\n- [Documentation](#documentation)\n- [Limitations](#limitations)\n\u003c!-- toc (end) --\u003e\n\n\u003c!-- features (start) --\u003e\n## Features\n- MJML\n- Twig\n- Liquid\n- Yaml\n- Webpack\n- Webpack-dev-server\n- Ready to use shopify mail notification templates\n\u003c!-- features (end) --\u003e\n\n\u003c!-- system requirements (start) --\u003e\n## System requirements\n- Node.js\n- npm or yarn\n\u003c!-- system requirements (end) --\u003e\n\n\u003c!-- getting started (start) --\u003e\n## Getting started\nInstall dependencies and run webpack-dev-server:\n\n### npm\n\n```shell\n$ npm install\n```\n\n```shell\n$ npm run dev\n```\n\n### yarn\n\n```shell\n$ yarn import # migrate package-lock.json to yarn.lock\n$ rm package-lock.json # or delete manually\n$ yarn install --force\n```\n\n```shell\n$ yarn dev\n```\n\n### Optional\nIf the server port is already in use, adjust `devServerPort` in `package.json`\n\u003c!-- getting started (end) --\u003e\n\n\u003c!-- production (start) --\u003e\n## Production\nGenerate minified `.liquid` files in `dist/` directory:\n\n### npm\n\n```shell\n$ npm run build\n```\n\n### yarn\n\n```shell\n$ yarn build\n```\n\u003c!-- production (end) --\u003e\n\n\u003c!-- directories (start) --\u003e\n## Directories\n| Directory | Description |\n| --- | --- |\n| .config | Contains webpack configs. |\n| src | Contains webpack's main entry point `main.js` which auto-loads all `.twig` files inside `src/templates/` and all subdirectories. |\n| src/assets | Contains images (used only during development). |\n| src/components | Contains reusable components. |\n| src/data | Contains `.yml` files. The contents are accessible in all `.twig` files. |\n| src/data/shopify | Contains `data.yml` file with Shopify dummy data (used during development to populate liquid templates). |\n| src/layouts | Contains layouts. |\n| src/templates | Contains mail templates. The `index.twig` template is reserved for navigation. |\n\u003c!-- directories (end) --\u003e\n\n\u003c!-- documentation (start) --\u003e\n## Documentation\n\nIt's important to understand in which order webpack transforms the code. First, webpack compiles the `.twig` templates, then `MJML` tags are compiled to `html`. If the `build` task is running `liquid` isn't compiled and is written directly to the `dist/` directory as `.liquid` files. If the `dev` task is running: data from `src/data/shopify/` is passed to the liquid code, it's compiled to regular `html` and served via webpack-dev-server.\n\n*Development flow*: `Twig` → `MJML` → `Shopify data` → `Liquid` → `.html files` → `Webpack-dev-server`\n\n*Production flow*: `Twig` → `MJML` → `.liquid files`\n\n### Additional notes\n- Data from `src/data/` is available in all `.twig` templates.\n- Data from `src/data/shopify/` is available during `liquid` compilation in development.\n- If you want to write `liquid` tags instead of `twig` tags, you have to escape them with `{% verbatim %}{% endverbatim %}` [about verbatim](https://twig.symfony.com/doc/2.x/tags/verbatim.html).\n- You might get a Parsing error, especially when using the `\u003c` character in `liquid` tags, use `\u003c!-- htmlmin:ignore --\u003e{% if foo \u003c 5 %}\u003c!-- htmlmin:ignore --\u003e` for a fix.\n- Some Shopify specific filters might not exist in the liquid compiler. To fix this for development, you can add additional filters to the `filters` section inside `.config/webpack.common.js`.\n\n### Additional docs\n- [MJML docs](https://documentation.mjml.io/)\n- [Twig docs](https://twig.symfony.com/doc/2.x/)\n- [Liquid docs](https://shopify.github.io/liquid/)\n\u003c!-- documentation (end) --\u003e\n\n\u003c!-- limitations (start) --\u003e\n## Limitations\n- If you change data in files inside `src/data/shopify/`, you have to restart webpack.\n- It's not possible to set `shop.email_accent_color` to change it later in Shopify.\n- `POS Exchange Receipt` template doesn't work.\n\u003c!-- limitations (end) --\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuicrooks%2Fshopify-mail-notifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuicrooks%2Fshopify-mail-notifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuicrooks%2Fshopify-mail-notifications/lists"}