├── .DS_Store
├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── config.yml.example
├── package.json
├── postcss.config.js
├── prettier.config.js
├── readme.md
├── shopify-dev-utils
    ├── convertToGlobalDataStructure.js
    ├── filters
    │   ├── asset_url.js
    │   ├── default_pagination.js
    │   ├── money_with_currency.js
    │   ├── money_without_trailing_zeros.js
    │   ├── script_tag.js
    │   ├── stylesheet_tag.js
    │   └── within.js
    ├── liquidDev.entry.js
    ├── liquidDev.loader.js
    ├── section-tags
    │   ├── index.d.ts
    │   ├── index.js
    │   ├── javascript.d.ts
    │   ├── javascript.js
    │   ├── schema.d.ts
    │   ├── schema.js
    │   ├── section.d.ts
    │   ├── section.js
    │   ├── stylesheet.d.ts
    │   └── stylesheet.js
    ├── storeData.js
    ├── storefrontApi.js
    ├── tags
    │   ├── paginate.d.ts
    │   └── paginate.js
    └── transformLiquid.js
├── src
    ├── assets
    │   ├── favicon
    │   │   └── .gitkeep
    │   ├── fonts
    │   │   ├── .gitkeep
    │   │   ├── noto-serif
    │   │   │   ├── NotoSerif-Bold.ttf
    │   │   │   └── NotoSerif-Regular.ttf
    │   │   └── poppins
    │   │   │   ├── Poppins-ExtraBold.ttf
    │   │   │   ├── Poppins-Light.ttf
    │   │   │   ├── Poppins-Regular.ttf
    │   │   │   ├── Poppins-SemiBold.ttf
    │   │   │   └── Poppins-Thin.ttf
    │   ├── images
    │   │   └── great-success.png
    │   └── svg
    │   │   └── webpack.svg
    ├── components
    │   ├── helpers
    │   │   └── cart-fetch-api
    │   │   │   └── cart-fetch-api.js
    │   ├── layout
    │   │   ├── theme.js
    │   │   └── theme.liquid
    │   ├── sections
    │   │   ├── banner-with-text
    │   │   │   └── banner-with-text.liquid
    │   │   ├── cart
    │   │   │   └── cart.liquid
    │   │   ├── feature-collection
    │   │   │   └── featured-collection.liquid
    │   │   ├── featured-product
    │   │   │   └── featured-product.liquid
    │   │   ├── footer
    │   │   │   └── footer.liquid
    │   │   ├── header
    │   │   │   └── header.liquid
    │   │   ├── image-with-text
    │   │   │   └── image-with-text.liquid
    │   │   └── product
    │   │   │   ├── product.js
    │   │   │   └── product.liquid
    │   ├── snippets
    │   │   ├── dynamic-modal
    │   │   │   └── dynamic-modal.liquid
    │   │   ├── global-css
    │   │   │   ├── global-css.js
    │   │   │   ├── global-css.liquid
    │   │   │   └── global-css.scss
    │   │   ├── input-counter
    │   │   │   ├── input-counter.js
    │   │   │   ├── input-counter.liquid
    │   │   │   └── input-counter.scss
    │   │   ├── message
    │   │   │   ├── message.js
    │   │   │   ├── message.liquid
    │   │   │   └── message.scss
    │   │   ├── pagination
    │   │   │   ├── accessible-pagination.liquid
    │   │   │   └── default-pagination.liquid
    │   │   ├── responsive-bg-image
    │   │   │   └── responsive-bg-image.liquid
    │   │   └── responsive-image
    │   │   │   └── responsive-image.liquid
    │   ├── tailwind.css
    │   └── templates
    │   │   ├── 404.liquid
    │   │   ├── article.liquid
    │   │   ├── blog.liquid
    │   │   ├── cart.liquid
    │   │   ├── collection.liquid
    │   │   ├── customers
    │   │       ├── account.liquid
    │   │       ├── activate_account.liquid
    │   │       ├── addresses.liquid
    │   │       ├── login.liquid
    │   │       ├── order.liquid
    │   │       ├── register.liquid
    │   │       └── reset_password.liquid
    │   │   ├── gift_card.liquid
    │   │   ├── index.liquid
    │   │   ├── list-collections.liquid
    │   │   ├── page.contact.liquid
    │   │   ├── page.liquid
    │   │   ├── product.liquid
    │   │   └── search.liquid
    ├── config
    │   ├── settings_data.json
    │   └── settings_schema.json
    └── locales
    │   └── en.default.json
├── tailwind.config.js
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3daddict/themekit-webpack/5f05ecbb27a7493d4bb01cb24035fa1b4145208f/.DS_Store


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["@babel/preset-env"],
3 |     "plugins": ["@babel/plugin-transform-runtime"]
4 | }


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /dist/**
2 | /shopify-dev-utils/**
3 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "parser": "babel-eslint",
 3 |     "extends": ["plugin:@shopify/esnext", "plugin:@shopify/node", "prettier"],
 4 |     "rules": {
 5 |         "quotes": [2, "single", { "avoidEscape": true }],
 6 |         "no-unused-vars": "warn",
 7 |         "no-undef": "off"
 8 |     }
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .vscode
 2 | *.DS_Store
 3 | dist
 4 | node_modules
 5 | *.lock
 6 | package-lock.json
 7 | *.yml
 8 | *error.log
 9 | .idea
10 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |  advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |  address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |  professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at themekit@3daddict.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Contributing
 2 | 
 3 | First off, thank you for considering contributing to A Shopify Theme with Themekit and Webpack. It's exciting to see what we can do with modern build tools.
 4 | 
 5 | ### Where do I go from here?
 6 | 
 7 | If you notice a bug or have a feature request, [make one](https://github.com/activeadmin/activeadmin/issues/new)! I'm no pro, creating issues helps improve this repo and helps learn about all that is involved building themes.
 8 | Please make sure to check the [CODE_OF_CONDUCT.md](https://github.com/3daddict/themekit-webpack/blob/master/CODE_OF_CONDUCT.md) before contributing to this repo.
 9 | 
10 | ### Fork & create a branch
11 | 
12 | If there is something you think you can fix, then [fork themekit-webpack](https://help.github.com/articles/fork-a-repo) and create
13 | a branch with a descriptive name.
14 | 
15 | A good branch name would be (where issue #33 is the ticket you're working on):
16 | 
17 | ```sh
18 | git checkout -b 33-add-infinite-scroll-feature
19 | ```
20 | 
21 | ### Verify build with ESLint
22 | When testing your new feature ensure you are passing ESLint rules by running
23 | ```sh
24 | yarn build
25 | ```
26 | Make note of any errors that get flagged from ESLint and fix before creating a PR.
27 | 
28 | ### Make a Pull Request
29 | 
30 | At this point, you should switch back to your master branch and make sure it's
31 | up to date with themekit-webpack's master branch:
32 | 
33 | ```sh
34 | git remote add upstream git@github.com:themekit-webpack/themekit-webpack.git
35 | git checkout master
36 | git pull upstream master
37 | ```
38 | 
39 | Then update your feature branch from your local copy of master, and push it!
40 | 
41 | ```sh
42 | git checkout 33-add-infinite-scroll-feature
43 | git rebase master
44 | git push --set-upstream origin 33-add-infinite-scroll-feature
45 | ```
46 | Finally, go to GitHub and [make a Pull Request](https://help.github.com/articles/creating-a-pull-request) 😎
47 | ### Keeping your Pull Request updated
48 | 
49 | If a maintainer asks you to "rebase" your PR, they're saying that a lot of code
50 | has changed, and that you need to update your branch so it's easier to merge.
51 | 
52 | To learn more about rebasing in Git, there are a lot of good [git rebasing](http://git-scm.com/book/en/Git-Branching-Rebasing) [resources](https://help.github.com/en/github/using-git/about-git-rebase) but here's the suggested workflow:
53 | 
54 | ```sh
55 | git checkout 33-add-infinite-scroll-feature
56 | git pull --rebase upstream master
57 | git push --force-with-lease 33-add-infinite-scroll-feature
58 | ```
59 | ### Merging a PR (maintainers only)
60 | 
61 | A PR can only be merged into `master` by a maintainer if:
62 | 
63 | * It is passing ESLint.
64 | * It has no requested changes.
65 | * It is up to date with current master.
66 | 
67 | Any maintainer is allowed to merge a PR if all of these conditions are met.
68 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 3daddict
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/config.yml.example:
--------------------------------------------------------------------------------
 1 | # Copy or rename the config.yml.example to config.yml
 2 | # You can find your shopify credentials by going to your Shopify admin and creating a Private App
 3 | # See more info below on how to create a Private app and cloned themes
 4 | 
 5 | # Credentials for yarn start
 6 | development:
 7 |   password: 
 8 |   theme_id: ""
 9 |   store: 
10 |   storefront_api_key: 
11 |   directory: dist/
12 |   # Note: when first deploying to a new theme you may have to comment out the ignore files.
13 |   # Then after first upload uncomment them.
14 |   ignore_files:
15 |     - config/settings_data.json
16 |     - "*.js"
17 |     - "*.hot-update.json"
18 | 
19 | # Credentials for yarn build & deploy
20 | production:
21 |   password: 
22 |   theme_id: ""
23 |   store: 
24 |   directory: dist/
25 |   ignore_files:
26 |     - config/settings_data.json
27 | 
28 | ########### Creating a Private App ###########
29 | # Click Apps from the admin sidebar
30 | # Scroll down to the bottom and click on Manage private apps
31 | # Create a new private app by clicking the button
32 | # Name your app and add an email
33 | # Under the Admin API expand the selection and scroll down to Themes, change to Read and write
34 | # Under the Storefront API check the checkbox: Allow this app to access your storefront data using the Storefront API
35 | # Click the save button and grab the credentials to add below for the yml config
36 | 
37 | ########### Cloning a Theme ###########
38 | # It's not recommended to work off your published theme
39 | # Duplicate a theme by going to Actions on your published theme and clicking Duplicate
40 | # Rename your theme and then click edit code
41 | # Look at the url and grab the theme id at the end of it for example: 116723349937
42 | # This is the theme id to add above in the yml config


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "themekit-webpack",
 3 |   "version": "1.0.0",
 4 |   "main": "webpack.config.js",
 5 |   "license": "MIT",
 6 |   "keywords": [],
 7 |   "author": "Mike Salvati",
 8 |   "private": true,
 9 |   "scripts": {
10 |     "start": "TAILWIND_MODE=watch webpack serve --mode=development --config webpack.dev.js",
11 |     "build": "webpack --mode=production --config webpack.prod.js && npx tailwindcss build -i src/components/tailwind.css -o dist/assets/tailwind.css.liquid && cleancss -o dist/assets/tailwind.min.css.liquid dist/assets/tailwind.css.liquid",
12 |     "deploy": "webpack --mode=production --config webpack.prod.js && npx tailwindcss build -i src/components/tailwind.css -o dist/assets/tailwind.css.liquid && cleancss -o dist/assets/tailwind.min.css.liquid dist/assets/tailwind.css.liquid && shopify-themekit deploy --env=production"
13 |   },
14 |   "dependencies": {
15 |     "validator": "^13.5.2"
16 |   },
17 |   "devDependencies": {
18 |     "@babel/core": "^7.12.10",
19 |     "@babel/eslint-parser": "^7.14.7",
20 |     "@babel/plugin-transform-runtime": "^7.12.10",
21 |     "@babel/preset-env": "^7.12.11",
22 |     "@shopify/eslint-plugin": "^40.4.0",
23 |     "@shopify/themekit": "^1.1.7",
24 |     "autoprefixer": "^10.3.1",
25 |     "axios": "^0.21.1",
26 |     "babel-loader": "^8.2.2",
27 |     "babel-plugin-transform-class-properties": "^6.24.1",
28 |     "browser-sync": "^2.26.14",
29 |     "clean-css-cli": "^5.3.0",
30 |     "clean-webpack-plugin": "^4.0.0-alpha.0",
31 |     "copy-webpack-plugin": "6.x",
32 |     "core-js": "^3.8.3",
33 |     "css-loader": "^6.2.0",
34 |     "debug": "^4.3.1",
35 |     "eslint": "^7.31.0",
36 |     "eslint-config-prettier": "^8.3.0",
37 |     "eslint-webpack-plugin": "^3.0.1",
38 |     "file-loader": "^6.2.0",
39 |     "glob": "^7.1.6",
40 |     "graphql": "^15.5.0",
41 |     "html-webpack-plugin": "^5.3.2",
42 |     "liquidjs": "^9.20.1",
43 |     "mini-css-extract-plugin": "^2.1.0",
44 |     "node-fetch": "^2.6.1",
45 |     "node-sass": "^6.0.1",
46 |     "postcss": "^8.3.6",
47 |     "postcss-loader": "^6.1.1",
48 |     "prettier": "^2.2.1",
49 |     "raw-loader": "^4.0.2",
50 |     "sass": "^1.32.5",
51 |     "sass-loader": "^12.1.0",
52 |     "style-loader": "^3.2.1",
53 |     "tailwindcss": "^2.2.7",
54 |     "transform-class-properties": "^1.0.0-beta",
55 |     "typescript": "^4.1.3",
56 |     "webpack": "^5.18.0",
57 |     "webpack-bundle-analyzer": "^4.4.0",
58 |     "webpack-cli": "^4.4.0",
59 |     "webpack-dev-server": "^3.11.2",
60 |     "webpack-merge": "^5.7.3",
61 |     "webpack-shell-plugin-next": "^2.2.2",
62 |     "yaml": "^1.10.0",
63 |     "yargs": "^17.0.1"
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: {
3 |       tailwindcss: {},
4 |       autoprefixer: {},
5 |     }
6 | };
7 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   printWidth: 100,
3 |   trailingComma: 'es5',
4 |   singleQuote: true,
5 |   tabWidth: 4
6 | };
7 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | ![GitHub](https://img.shields.io/github/license/3daddict/themekit-webpack) ![GitHub issues](https://img.shields.io/github/issues/3daddict/themekit-webpack) ![GitHub watchers](https://img.shields.io/github/watchers/3daddict/themekit-webpack) ![GitHub Repo stars](https://img.shields.io/github/stars/3daddict/themekit-webpack) ![GitHub forks](https://img.shields.io/github/forks/3daddict/themekit-webpack) [![Github all releases](https://img.shields.io/github/downloads/3daddict/themekit-webpack/total.svg)](https://GitHub.com/3daddict/themekit-webpack/releases/)
  2 | 
  3 | # (Legacy) Shopify ThemeKit with Webpack 5
  4 | This is a starter Theme using Webpack, ThemeKit and TailwindCSS for developing Shopify themes with modern build tools. The goal is to create a tool with a component-based folder structure and is easy to use. With the new Shopify CLI a Webpack Dev Server is no loger needed. Please refer to this new project for Shopify 2.0 theme: [webpack-shopify-cli](https://github.com/3daddict/webpack-shopify-cli)
  5 | 
  6 | ## Contributing
  7 | To contribute to this repo please see
  8 | - [CONTRIBUTING.md](https://github.com/3daddict/themekit-webpack/blob/master/CONTRIBUTING.md)
  9 | - [CODE_OF_CONDUCT.md](https://github.com/3daddict/themekit-webpack/blob/master/CODE_OF_CONDUCT.md)
 10 | 
 11 | ## 📁 Folder Structure
 12 | This is set up for a component-based file structure. All liquid, js and scss are in the same folder to keep things in one place.
 13 | Example of folder structure:
 14 | * components
 15 |     * sections
 16 |         * header
 17 |             - header.js
 18 |             - header.liquid
 19 |             - header.scss
 20 | 
 21 | **Note:** always import component scss files into the component javascript file. For example `import './header.scss';` is inside `header.js`. This ensures the scss will get compiled to css with Webpack.
 22 | There are some rules to follow with this folder structure. For each component liquid file use the following template.
 23 | ```html
 24 | <style></style>
 25 | <html></html>
 26 | <script></script>
 27 | ```
 28 | It's important to reference styles and scripts from the compiles assets folder. Webpack will compile all js and css files under the filename.
 29 | For example a starting template for a `header.liquid` component would look like this.
 30 | ```html
 31 | <!-- Reference to compiled style in assets folder -->
 32 | {{ 'bundle.header.css' | asset_url | stylesheet_tag }}
 33 | 
 34 | <div class="header_container">
 35 |     <!-- HTML HERE -->
 36 | </div>
 37 | 
 38 | <!-- Reference to compiled js in assets folder -->
 39 | {{ 'bundle.header.js' | asset_url | script_tag }}
 40 | ```
 41 | **Note:** The scss or css file can alternatively be imported into the js file which will get compiled with webpack.
 42 | ## Node Version Manager
 43 | This theme setup is built with Yarn, Webpack and ThemeKit which are dependant on NodeJS versions.
 44 | You can use node `v14` to install dependencies and run build commands.
 45 | - Install [nvm](http://npm.github.io/installation-setup-docs/installing/using-a-node-version-manager.html)
 46 | - Run `nvm install v14` in terminal
 47 | - Install dependencies `yarn install`
 48 | 
 49 | ## Clean-CSS CLI
 50 | This project uses [clean-css-cli](https://www.npmjs.com/package/clean-css-cli) to minify TailwindCSS during build.
 51 | 
 52 | Install Clean-CSS CLI  
 53 | `yarn add clean-css-cli -g`  
 54 | **Note:** Global install via -g option is recommended unless you want to execute the binary via a relative path, i.e. ./node_modules/.bin/cleancss
 55 | 
 56 | ## TailwindCSS
 57 | This project uses [TailwindCSS](https://tailwindcss.com/) `v2` a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. Checkout the amazing [documentation](https://tailwindcss.com/docs) and start adding classes to your elements.
 58 | 
 59 | ## Getting Started
 60 | - Install dependencies `yarn install` or `npm i`
 61 | - Rename the `config.yml.example` to `config.yml` and add the Shopify Theme credentials
 62 | - Run a build test `yarn build` if no errors then you are good to go  
 63 |   
 64 | **Note:** the first time you run `yarn start` or `yarn deploy` to a new theme you must comment out `ignore_files`.
 65 | ```
 66 | # - config/settings_data.json
 67 | # - "*.js"
 68 | # - "*.hot-update.json"
 69 | ```
 70 | 
 71 | ## Webpack Dev Server
 72 | - `yarn start` will run build commands and start the webpack development server.
 73 | - `yarn build` will run build commands and create a dist folder of the compiled files.
 74 | - `yarn deploy` will upload the dist folder contents to your theme configured in the yml
 75 | 
 76 | ## Self-Signed Certificate
 77 | In the event that you find the HMR assets are not loading and the requests to localhost:9000 are 404 you will need to approve or pass a valid certificate.
 78 | To solve this issue you can open a new browser window and approve the SSL Certificate or pass a valid certificate as mentioned here [devServer.https](https://webpack.js.org/configuration/dev-server/#devserverhttps).
 79 | 
 80 | **Note:** a quick fix with Chrome `chrome://flags/#allow-insecure-localhost` change to enable
 81 | 
 82 | ## HMR (Hot Module Reloading)
 83 | When in development mode `yarn start` hot module reloading is enabled. It watches for changes to `JavaScript`, `CSS` and `Liquid` files. When JS or CSS is changes the browser will change without the need to refresh. When changes are made to liquid files a manual browser reload may be required.
 84 | 
 85 | ## Whitespace control
 86 | In [Liquid](https://shopify.github.io/liquid/basics/whitespace/), you can include a hyphen in your tag syntax `{{-`, `-}}`, `{%-`, and `-%}` to strip whitespace from the left or right side of a rendered tag.
 87 | By including hyphens in your `assign` tag, you can strip the generated whitespace from the rendered template.
 88 | If you don’t want any of your tags to print whitespace, as a general rule you can add hyphens to both sides of all your tags (`{%-` and `-%}`):
 89 | ```html
 90 | {%- assign username = "Borat Margaret Sagdiyev" -%}
 91 | {%- if username and username.size > 10 -%}
 92 |   Wow, {{ username }}, I like!
 93 | {%- else -%}
 94 |   Hello there!
 95 | {%- endif -%}
 96 | ```
 97 | 
 98 | ## Variable Scope & Components
 99 | This is not unique to this project but it's worth mentioning and creating a component example. See the `src/components/snippets/dynamic-modal/dynamic-modal.liquid` component. This is a simple modal that uses variable scope for data, styles and functions.
100 | Use this `dynamic-modal.liquid` component by creating a trigger element or function like a button with an id.
101 | ```html
102 | <button id="testButton">Trigger Modal</button>
103 | ```
104 | Next we include the modal in a section with declared variables. These will be scoped to the snippet and we now have a dynamic reusable modal component we can use throughout our theme.
105 | ```html
106 | {%- render 'dynamic-modal', 
107 |   id: "testModal", 
108 |   openModalBtn: "modalBtn",
109 |   title: "Modal Title",
110 |   body: "Modal Body",
111 |   buttonOne: "Alert",
112 |   buttonOneFunction: "alert('Q: Do you struggle with impostor syndrome? Me: no I’m great at it')"
113 |   buttonTwo: "Close",
114 |   buttonTwoStyle: "text-white bg-red-500 hover:bg-red-700"
115 |   buttonTwoFunction: "modal.style.display = 'none';"
116 | -%}
117 | ```
118 | I came across this idea using `include` from [David Warrington's](https://github.com/davidwarrington) article [Shopify Variable Scopes](https://ellodave.dev/blog/2019/5/24/shopify-variable-scopes/) and re-factored to use `render` tags. If you find some good use cases for these please post them in the [discussion ideas category](https://github.com/3daddict/themekit-webpack/discussions/categories/ideas)
119 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/convertToGlobalDataStructure.js:
--------------------------------------------------------------------------------
 1 | module.exports.convertToGlobalDataStructure = function convertToGlobalDataStructure(gqlData) {
 2 |     // return gqlData;
 3 |     return {
 4 |         shop: {
 5 |             name: gqlData.shop.name,
 6 |         },
 7 |         collections: gqlData.collections.edges.map(({ node }) => ({
 8 |             title: node.title,
 9 |             id: node.id,
10 |             handle: node.handle,
11 |             image: node.image,
12 |             description: node.description,
13 |             url: `/collections/${node.handle}`,
14 |             products: node.products.edges.map((product) => ({
15 |                 id: product.node.id,
16 |                 title: product.node.title,
17 |                 description: product.node.description,
18 |                 handle: product.node.handle,
19 |                 available: product.node.availableForSale,
20 |                 price: product.node.priceRange.maxVariantPrice, // preserve the entire obj for money-* filters
21 |                 price_max: product.node.priceRange.maxVariantPrice,
22 |                 price_min: product.node.priceRange.minVariantPrice,
23 |                 price_varies:
24 |                     +product.node.priceRange.maxVariantPrice.amount !==
25 |                     +product.node.priceRange.minVariantPrice,
26 |                 url: `/products/${product.node.handle}`,
27 |                 featured_image:
28 |                     product.node.images.edges.length > 0
29 |                         ? {
30 |                               id: product.node.images.edges[0].node.id,
31 |                               alt: product.node.images.edges[0].node.altText,
32 |                               src: product.node.images.edges[0].node.originalSrc,
33 |                           }
34 |                         : null,
35 |             })),
36 |         })),
37 |     };
38 | };
39 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/filters/asset_url.js:
--------------------------------------------------------------------------------
1 | module.exports.assetUrl = function assetUrl(v) {
2 |     const { publicPath } = this.context.opts.loaderOptions;
3 | 
4 |     return `${publicPath}${v}`;
5 | };
6 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/filters/default_pagination.js:
--------------------------------------------------------------------------------
 1 | module.exports.defaultPagination = function defaultPagination(paginate, ...rest) {
 2 |     const next = rest.filter((arg) => arg[0] === 'next').pop();
 3 |     const previous = rest.filter((arg) => arg[0] === 'previous').pop();
 4 | 
 5 |     const prevLabel =
 6 |         previous.length > 0 ? previous.pop() : paginate.previous ? paginate.previous.title : '';
 7 |     const nextLabel = next.length > 0 ? next.pop() : paginate.next ? paginate.next.title : '';
 8 | 
 9 |     const prevPart = paginate.previous
10 |         ? `<span class="prev"><a href="${paginate.previous.url}" title="${prevLabel}">${prevLabel}</a></span>`
11 |         : '';
12 |     const nextPart = paginate.next
13 |         ? `<span class="next"><a href="${paginate.next.url}" title="${nextLabel}">${nextLabel}</a></span>`
14 |         : '';
15 | 
16 |     const pagesPart = paginate.parts
17 |         .map((part) => {
18 |             if (part.is_link) {
19 |                 return `<span class="page"><a href="${part.url}" title="${part.title}">${part.title}</a></span>`;
20 |             }
21 |             return `<span class="page current">${part.title}</span>`;
22 |         })
23 |         .join('');
24 | 
25 |     return `${prevPart}${pagesPart}${nextPart}`;
26 | };
27 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/filters/money_with_currency.js:
--------------------------------------------------------------------------------
 1 | module.exports.moneyWithCurrency = function moneyWithCurrency(price) {
 2 |     if (!price || !price.currencyCode || !price.amount) {
 3 |         return '';
 4 |     }
 5 | 
 6 |     // the price that this object gets has 2 fields it is not the same value in "real" env,
 7 |     // at real it should be only a number multiplied by 100
 8 |     return new Intl.NumberFormat('en', {
 9 |         style: 'currency',
10 |         currency: price.currencyCode,
11 |         maximumFractionDigits: 2,
12 |     }).format(price.amount);
13 | };
14 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/filters/money_without_trailing_zeros.js:
--------------------------------------------------------------------------------
 1 | const { moneyWithCurrency } = require('./money_with_currency');
 2 | 
 3 | module.exports.moneyWithoutTrailingZeros = function moneyWithoutTrailingZeros(price) {
 4 |     // the price that this object gets has 2 fields it is not the same value in "real" env,
 5 |     // at real it should be only a number multiplied by 100
 6 |     const moneyWithCurrencyAndTrailingZeros = moneyWithCurrency(price);
 7 |     return moneyWithCurrencyAndTrailingZeros.replace(
 8 |         /([,.][^0]*(0+))\D*$/,
 9 |         (match, group, zeros) => {
10 |             const cutSize = zeros.length > 1 ? zeros.length + 1 : zeros.length;
11 |             return match.replace(group, group.substring(0, group.length - cutSize));
12 |         }
13 |     );
14 | };
15 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/filters/script_tag.js:
--------------------------------------------------------------------------------
1 | module.exports.scriptTag = function scriptTag(v) {
2 |     return `<script src="${v}"></script>`;
3 | };
4 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/filters/stylesheet_tag.js:
--------------------------------------------------------------------------------
1 | module.exports.stylesheetTag = function stylesheetTag() {
2 |     return ''; // in Dev mode we load css from js for HMR
3 | };
4 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/filters/within.js:
--------------------------------------------------------------------------------
1 | module.exports.within = function within(productUrl, collection) {
2 |     return `${collection.url}${productUrl}`;
3 | };
4 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/liquidDev.entry.js:
--------------------------------------------------------------------------------
 1 | const context = require.context(
 2 |     '../src',
 3 |     true,
 4 |     /(collection|footer|featured-product|featured-collection|header|message)\.liquid$/
 5 | );
 6 | 
 7 | const cache = {};
 8 | 
 9 | context.keys().forEach(function (key) {
10 |     cache[key] = context(key);
11 | });
12 | 
13 | function replaceHtml(key, startCommentNode) {
14 |     const commentNodeType = startCommentNode.nodeType;
15 |     while (
16 |         startCommentNode.nextSibling.nodeType !== commentNodeType ||
17 |         !startCommentNode.nextSibling.nodeValue.includes(`hmr-end: ${key}`)
18 |     ) {
19 |         startCommentNode.nextSibling.remove();
20 |     }
21 | 
22 |     const tpl = document.createElement('template');
23 |     tpl.innerHTML = cache[key];
24 |     startCommentNode.parentNode.insertBefore(tpl.content, startCommentNode.nextSibling);
25 | }
26 | 
27 | if (module.hot) {
28 |     module.hot.accept(context.id, function () {
29 |         const newContext = require.context(
30 |             '../src',
31 |             true,
32 |             /(collection|footer|featured-product|featured-collection|header|message)\.liquid$/
33 |         );
34 |         const changes = [];
35 |         newContext.keys().forEach(function (key) {
36 |             const newFile = newContext(key);
37 |             if (cache[key] !== newFile) {
38 |                 changes.push(key);
39 |                 cache[key] = newFile;
40 |             }
41 |         });
42 | 
43 |         changes.forEach((changedFile) => {
44 |             traverseHMRComments(changedFile, replaceHtml);
45 |         });
46 |     });
47 | }
48 | 
49 | function traverseHMRComments(file, callback) {
50 |     const nodeIterator = document.createNodeIterator(
51 |         document.body,
52 |         NodeFilter.SHOW_COMMENT,
53 |         function (node) {
54 |             return node.nodeValue.includes(`hmr-start: ${file}`)
55 |                 ? NodeFilter.FILTER_ACCEPT
56 |                 : NodeFilter.FILTER_REJECT;
57 |         }
58 |     );
59 | 
60 |     while (nodeIterator.nextNode()) {
61 |         callback(file, nodeIterator.referenceNode);
62 |     }
63 | }
64 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/liquidDev.loader.js:
--------------------------------------------------------------------------------
 1 | const loaderUtils = require('loader-utils');
 2 | const path = require('path');
 3 | const { Liquid } = require('liquidjs');
 4 | const glob = require('glob');
 5 | const { moneyWithoutTrailingZeros } = require('./filters/money_without_trailing_zeros');
 6 | const { moneyWithCurrency } = require('./filters/money_with_currency');
 7 | const { within } = require('./filters/within');
 8 | const { defaultPagination } = require('./filters/default_pagination');
 9 | const { scriptTag } = require('./filters/script_tag');
10 | const { stylesheetTag } = require('./filters/stylesheet_tag');
11 | const { assetUrl } = require('./filters/asset_url');
12 | const { getStoreGlobalData } = require('./storeData');
13 | const { liquidSectionTags } = require('./section-tags/index');
14 | const { Paginate } = require('./tags/paginate');
15 | 
16 | let engine;
17 | let loadPromise;
18 | 
19 | function initEngine() {
20 |     if (!loadPromise) {
21 |         loadPromise = new Promise(async (resolve) => {
22 |             const liquidFiles = [
23 |                 ...glob
24 |                     .sync('./src/components/**/*.liquid')
25 |                     .map((filePath) =>
26 |                         path.resolve(path.join(__dirname, '../'), path.dirname(filePath))
27 |                     )
28 |                     .reduce((set, dir) => {
29 |                         set.add(dir);
30 |                         return set;
31 |                     }, new Set()),
32 |             ];
33 | 
34 |             engine = new Liquid({
35 |                 root: liquidFiles, // root for layouts/includes lookup
36 |                 extname: '.liquid', // used for layouts/includes, defaults "",
37 |                 globals: await getStoreGlobalData(),
38 |             });
39 | 
40 |             engine.registerFilter('asset_url', assetUrl);
41 |             engine.registerFilter('stylesheet_tag', stylesheetTag);
42 |             engine.registerFilter('script_tag', scriptTag);
43 |             engine.registerFilter('default_pagination', defaultPagination);
44 |             engine.registerFilter('within', within);
45 |             engine.registerFilter('money_with_currency', moneyWithCurrency);
46 |             engine.registerFilter('money_without_trailing_zeros', moneyWithoutTrailingZeros);
47 | 
48 |             engine.registerTag('paginate', Paginate);
49 |             engine.plugin(liquidSectionTags());
50 | 
51 |             resolve();
52 |         });
53 |     }
54 | 
55 |     return loadPromise;
56 | }
57 | 
58 | module.exports = async function (content) {
59 |     if (this.cacheable) this.cacheable();
60 |     const callback = this.async();
61 | 
62 |     if (!engine) {
63 |         await initEngine();
64 |     }
65 | 
66 |     engine.options.loaderOptions = loaderUtils.getOptions(this);
67 |     const { isSection } = engine.options.loaderOptions;
68 | 
69 |     // section handled specially
70 |     if (typeof isSection === 'function' && isSection(this.context)) {
71 |         const sectionName = path.basename(this.resourcePath, '.liquid');
72 |         content = `{% section "${sectionName}" %}`;
73 |     }
74 | 
75 |     return engine
76 |         .parseAndRender(content, engine.options.loaderOptions.globals || {})
77 |         .then((result) => callback(null, result));
78 | };
79 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/section-tags/index.d.ts:
--------------------------------------------------------------------------------
1 | import { Liquid } from 'liquidjs';
2 | export declare function liquidSectionTags(): (this: Liquid) => void;
3 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/section-tags/index.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | Object.defineProperty(exports, "__esModule", { value: true });
 3 | exports.liquidSectionTags = void 0;
 4 | const javascript_1 = require("./javascript");
 5 | const schema_1 = require("./schema");
 6 | const section_1 = require("./section");
 7 | const stylesheet_1 = require("./stylesheet");
 8 | function liquidSectionTags() {
 9 |     return function () {
10 |         this.registerTag('section', section_1.Section);
11 |         this.registerTag('schema', schema_1.Schema);
12 |         this.registerTag('stylesheet', stylesheet_1.StyleSheet);
13 |         this.registerTag('javascript', javascript_1.JavaScript);
14 |     };
15 | }
16 | exports.liquidSectionTags = liquidSectionTags;
17 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/section-tags/javascript.d.ts:
--------------------------------------------------------------------------------
1 | import { TagImplOptions } from 'liquidjs/dist/template/tag/tag-impl-options';
2 | export declare const JavaScript: TagImplOptions;
3 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/section-tags/javascript.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | Object.defineProperty(exports, "__esModule", { value: true });
 3 | exports.JavaScript = void 0;
 4 | exports.JavaScript = {
 5 |     parse: function (tagToken, remainTokens) {
 6 |         this.tokens = [];
 7 |         const stream = this.liquid.parser.parseStream(remainTokens);
 8 |         stream
 9 |             .on('token', (token) => {
10 |             if (token.name === 'endjavascript')
11 |                 stream.stop();
12 |             else
13 |                 this.tokens.push(token);
14 |         })
15 |             .on('end', () => {
16 |             throw new Error(`tag ${tagToken.getText()} not closed`);
17 |         });
18 |         stream.start();
19 |     },
20 |     render: function () {
21 |         const text = this.tokens.map((token) => token.getText()).join('');
22 |         return `<script>${text}</script>`;
23 |     }
24 | };
25 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/section-tags/schema.d.ts:
--------------------------------------------------------------------------------
1 | import { TagImplOptions } from 'liquidjs/dist/template/tag/tag-impl-options';
2 | export declare const Schema: TagImplOptions;
3 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/section-tags/schema.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | Object.defineProperty(exports, "__esModule", { value: true });
 3 | exports.Schema = void 0;
 4 | function generateSettingsObj(settings) {
 5 |     if (!Array.isArray(settings)) {
 6 |         return settings;
 7 |     }
 8 |     return settings
 9 |         .filter((entry) => !!entry.id)
10 |         .reduce((sectionSettings, entry) => {
11 |         sectionSettings[entry.id] = entry.default;
12 |         return sectionSettings;
13 |     }, {});
14 | }
15 | exports.Schema = {
16 |     parse: function (tagToken, remainTokens) {
17 |         this.tokens = [];
18 |         const stream = this.liquid.parser.parseStream(remainTokens);
19 |         stream
20 |             .on('token', (token) => {
21 |             if (token.name === 'endschema') {
22 |                 stream.stop();
23 |             }
24 |             else
25 |                 this.tokens.push(token);
26 |         })
27 |             .on('end', () => {
28 |             throw new Error(`tag ${tagToken.getText()} not closed`);
29 |         });
30 |         stream.start();
31 |     },
32 |     render: function (ctx) {
33 |         const json = this.tokens.map((token) => token.getText()).join('');
34 |         const schema = JSON.parse(json);
35 |         const scope = ctx.scopes[ctx.scopes.length - 1];
36 |         scope.section = {
37 |             settings: generateSettingsObj(schema.settings),
38 |             blocks: (schema.blocks || []).map((block) => ({
39 |                 ...block,
40 |                 settings: generateSettingsObj(block.settings)
41 |             }))
42 |         };
43 |         return '';
44 |     }
45 | };
46 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/section-tags/section.d.ts:
--------------------------------------------------------------------------------
1 | import { TagImplOptions } from 'liquidjs';
2 | export declare const Section: TagImplOptions;
3 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/section-tags/section.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | Object.defineProperty(exports, "__esModule", { value: true });
 3 | exports.Section = void 0;
 4 | const quoted = /^'[^']*'|"[^"]*"$/;
 5 | exports.Section = {
 6 |     parse: function (token) {
 7 |         this.namestr = token.args;
 8 |     },
 9 |     render: function* (ctx, emitter) {
10 |         let name;
11 |         if (quoted.exec(this.namestr)) {
12 |             const template = this.namestr.slice(1, -1);
13 |             name = yield this.liquid._parseAndRender(template, ctx.getAll(), ctx.opts);
14 |         }
15 |         if (!name)
16 |             throw new Error('cannot include with empty filename');
17 |         const templates = yield this.liquid._parseFile(name, ctx.opts, ctx.sync);
18 |         // Bubble up schema tag for allowing it's data available to the section
19 |         templates.sort((tagA) => {
20 |             return tagA.token.kind === 4 &&
21 |                 tagA.token.name === 'schema'
22 |                 ? -1
23 |                 : 0;
24 |         });
25 |         const scope = {};
26 |         ctx.push(scope);
27 |         yield this.liquid.renderer.renderTemplates(templates, ctx, emitter);
28 |         ctx.pop();
29 |     }
30 | };
31 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/section-tags/stylesheet.d.ts:
--------------------------------------------------------------------------------
1 | import { TagImplOptions } from 'liquidjs';
2 | export declare const StyleSheet: TagImplOptions;
3 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/section-tags/stylesheet.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | Object.defineProperty(exports, "__esModule", { value: true });
 3 | exports.StyleSheet = void 0;
 4 | const sass_1 = require("sass");
 5 | const quoted = /^'[^']*'|"[^"]*"$/;
 6 | const processors = {
 7 |     '': (x) => x,
 8 |     sass: sassProcessor,
 9 |     scss: sassProcessor
10 | };
11 | exports.StyleSheet = {
12 |     parse: function (token, remainTokens) {
13 |         this.processor = token.args;
14 |         this.tokens = [];
15 |         const stream = this.liquid.parser.parseStream(remainTokens);
16 |         stream
17 |             .on('token', (token) => {
18 |             if (token.name === 'endstylesheet')
19 |                 stream.stop();
20 |             else
21 |                 this.tokens.push(token);
22 |         })
23 |             .on('end', () => {
24 |             throw new Error(`tag ${token.getText()} not closed`);
25 |         });
26 |         stream.start();
27 |     },
28 |     render: async function (ctx) {
29 |         let processor = '';
30 |         if (quoted.exec(this.processor)) {
31 |             const template = this.processor.slice(1, -1);
32 |             processor = await this.liquid.parseAndRender(template, ctx.getAll(), ctx.opts);
33 |         }
34 |         const text = this.tokens.map((token) => token.getText()).join('');
35 |         const p = processors[processor];
36 |         if (!p)
37 |             throw new Error(`processor for ${processor} not found`);
38 |         const css = await p(text);
39 |         return `<style>${css}</style>`;
40 |     }
41 | };
42 | function sassProcessor(data) {
43 |     return new Promise((resolve, reject) => sass_1.render({ data }, (err, result) => err ? reject(err) : resolve('' + result.css)));
44 | }
45 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/storeData.js:
--------------------------------------------------------------------------------
 1 | const yaml = require('yaml');
 2 | const fs = require('fs');
 3 | const path = require('path');
 4 | const { convertToGlobalDataStructure } = require('./convertToGlobalDataStructure');
 5 | const { StorefrontApi } = require('./storefrontApi');
 6 | 
 7 | const configFile = path.join(__dirname, '../config.yml');
 8 | let config = { token: '', baseURL: '' };
 9 | if (fs.existsSync(configFile)) {
10 |     const configYml = yaml.parse(fs.readFileSync(configFile, 'utf-8'));
11 |     config.token = configYml.development.storefront_api_key;
12 |     config.baseURL = configYml.development.store;
13 | 
14 |     if (!config.token) {
15 |         console.warn(`'storefront_api_key' was not found in 'config.yml'`);
16 |     }
17 | }
18 | 
19 | function getGlobalSettings() {
20 |     const rawSettings = require('../src/config/settings_schema.json');
21 |     const overrides = { environment: 'development' };
22 | 
23 |     return rawSettings
24 |         .filter((section) => !!section.settings)
25 |         .reduce((result, section) => {
26 |             section.settings
27 |                 .filter((setting) => !!setting.id && typeof setting.default !== 'undefined')
28 |                 .forEach((setting) => {
29 |                     result[setting.id] = overrides[setting.id] || setting.default;
30 |                 });
31 |             return result;
32 |         }, {});
33 | }
34 | 
35 | async function getStoreGlobalData() {
36 |     const storefrontApi = new StorefrontApi(config);
37 | 
38 |     const data = await storefrontApi
39 |         .getStoreData()
40 |         .then(({ data }) => convertToGlobalDataStructure(data));
41 | 
42 |     return {
43 |         shop: {
44 |             name: data.shop.name,
45 |         },
46 |         settings: getGlobalSettings(),
47 |         linklists: {
48 |             'main-menu': {
49 |                 title: '',
50 |                 levels: 1,
51 |                 links: [
52 |                     {
53 |                         title: 'Home',
54 |                         url: '/',
55 |                         links: [],
56 |                     },
57 |                     {
58 |                         title: 'Catalog',
59 |                         url: '/collections/all',
60 |                         links: [],
61 |                     },
62 |                 ],
63 |             },
64 |         },
65 |         collection: data.collections[0],
66 |     };
67 | }
68 | 
69 | module.exports.getStoreGlobalData = getStoreGlobalData;
70 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/storefrontApi.js:
--------------------------------------------------------------------------------
 1 | const Axios = require('axios');
 2 | 
 3 | class StorefrontApi {
 4 |     constructor({ baseURL, token }) {
 5 |         console.log(`https://${baseURL}/api/2020-10/graphql`);
 6 |         this.axios = Axios.create({
 7 |             baseURL: `https://${baseURL}/api/2020-10/graphql`,
 8 |             headers: {
 9 |                 Accept: 'application/json',
10 |                 'Content-Type': 'application/graphql',
11 |                 'X-Shopify-Storefront-Access-Token': token,
12 |             },
13 |         });
14 |     }
15 | 
16 |     async getStoreData() {
17 |         return this.axios
18 |             .post(
19 |                 '',
20 |                 `
21 | {
22 |   shop {
23 |     name
24 |   }
25 |   collections(first: 50) {
26 |     edges {
27 |       node {
28 |         id
29 |         title
30 |         handle
31 |         description
32 |         image(scale:1) {
33 |           id
34 |           altText
35 |           originalSrc
36 |           transformedSrc
37 |         }
38 |         products(first: 50) {
39 |           edges {
40 |             node {
41 |               id
42 |               title
43 |               description
44 |               handle
45 |               availableForSale
46 |               priceRange {
47 |                 maxVariantPrice {
48 |                   amount
49 |                   currencyCode
50 |                 }
51 |                 minVariantPrice {
52 |                   amount
53 |                   currencyCode
54 |                 }
55 |               }
56 |               images(first: 1) {
57 |                 edges {
58 |                   node {
59 |                     id
60 |                     altText
61 |                     originalSrc
62 |                   }
63 |                 }
64 |               }
65 |               onlineStoreUrl
66 |             }
67 |           }
68 |         }
69 |       }
70 |     }
71 |   }
72 | }
73 | `
74 |             )
75 |             .then(({ data }) => data)
76 |             .catch(err => {
77 |               console.log(err);
78 |               res.sendStatus(500);
79 |           });
80 |     }
81 | }
82 | 
83 | module.exports.StorefrontApi = StorefrontApi;
84 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/tags/paginate.d.ts:
--------------------------------------------------------------------------------
1 | import { TagImplOptions } from 'liquidjs/dist/template/tag/tag-impl-options';
2 | export declare const Paginate: TagImplOptions;
3 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/tags/paginate.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.Paginate = void 0;
  4 | const liquidjs_1 = require("liquidjs");
  5 | function generatePaginateObj({ offset, perPage, total }) {
  6 |     const pages = Math.ceil(total / perPage);
  7 |     const currentPage = Math.floor((offset + perPage) / perPage);
  8 |     const paginate = {
  9 |         current_offset: offset,
 10 |         current_page: currentPage,
 11 |         items: total,
 12 |         page_size: perPage,
 13 |         parts: Array(pages)
 14 |             .fill(0)
 15 |             .map((_, index) => {
 16 |             const page = index + 1;
 17 |             if (page === currentPage) {
 18 |                 return { title: page, is_link: false };
 19 |             }
 20 |             return { title: page, url: `?page=${page}`, is_link: true };
 21 |         }),
 22 |         pages,
 23 |         previous: undefined,
 24 |         next: undefined
 25 |     };
 26 |     if (currentPage === pages && pages > 1) {
 27 |         paginate.previous = {
 28 |             title: '\u0026laquo; Previous',
 29 |             url: `?page=${currentPage - 1}`,
 30 |             is_link: true
 31 |         };
 32 |     }
 33 |     else if (currentPage < pages && pages > 1) {
 34 |         paginate.next = {
 35 |             title: 'Next \u0026raquo;',
 36 |             url: `?page=${currentPage + 1}`,
 37 |             is_link: true
 38 |         };
 39 |     }
 40 |     return paginate;
 41 | }
 42 | function populateVariableObj({ list, originalValue, depth }) {
 43 |     if (depth.length === 0) {
 44 |         return list;
 45 |     }
 46 |     const clone = JSON.parse(JSON.stringify(originalValue));
 47 |     depth.reduce((result, prop, index) => {
 48 |         const propName = prop.getText();
 49 |         if (index === depth.length - 1) {
 50 |             result[propName] = list;
 51 |         }
 52 |         return result[propName] || {};
 53 |     }, clone);
 54 |     return clone;
 55 | }
 56 | exports.Paginate = {
 57 |     parse: function (tagToken, remainTokens) {
 58 |         this.templates = [];
 59 |         const stream = this.liquid.parser.parseStream(remainTokens);
 60 |         stream
 61 |             .on('start', () => {
 62 |             const toknenizer = new liquidjs_1.Tokenizer(tagToken.args);
 63 |             const list = toknenizer.readValue();
 64 |             const by = toknenizer.readIdentifier();
 65 |             const perPage = toknenizer.readValue();
 66 |             liquidjs_1.assert(list.size() &&
 67 |                 by.content === 'by' &&
 68 |                 +perPage.getText() > 0 &&
 69 |                 +perPage.getText() <= 50, () => `illegal tag: ${tagToken.getText()}`);
 70 |             this.args = { list, perPage: +perPage.getText() };
 71 |         })
 72 |             .on('tag:endpaginate', () => stream.stop())
 73 |             .on('template', (tpl) => {
 74 |             this.templates.push(tpl);
 75 |         })
 76 |             .on('end', () => {
 77 |             throw new Error(`tag ${tagToken.getText()} not closed`);
 78 |         });
 79 |         stream.start();
 80 |     },
 81 |     render: function* (ctx, emitter) {
 82 |         const list = yield liquidjs_1.evalToken(this.args.list, ctx) || [];
 83 |         const perPage = this.args.perPage;
 84 |         const currentPage = +ctx.get(['current_page']);
 85 |         const offset = currentPage ? (currentPage - 1) * perPage : 0;
 86 |         const variableName = this.args.list.getVariableAsText();
 87 |         const originalValue = ctx.get([variableName]);
 88 |         const scopeList = list.slice(offset, offset + perPage);
 89 |         const data = populateVariableObj({
 90 |             list: scopeList,
 91 |             originalValue,
 92 |             depth: this.args.list.props
 93 |         });
 94 |         const paginate = generatePaginateObj({
 95 |             offset,
 96 |             perPage,
 97 |             total: list.length
 98 |         });
 99 |         const scope = { [variableName]: data, paginate };
100 |         ctx.push(scope);
101 |         yield this.liquid.renderer.renderTemplates(this.templates, ctx, emitter);
102 |         ctx.pop();
103 |     }
104 | };
105 | 


--------------------------------------------------------------------------------
/shopify-dev-utils/transformLiquid.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports.transformLiquid = function transformLiquid(publicPath) {
 4 |   return (content, absolutePath) => {
 5 |     const relativePath = path.join(__dirname, '../src');
 6 |     const diff = path.relative(relativePath, absolutePath);
 7 | 
 8 |     content = content
 9 |       .toString()
10 |       .replace(
11 |         /{{\s*'([^']+)'\s*\|\s*asset_url\s*\|\s*(stylesheet_tag|script_tag)\s*}}/g,
12 |         function (matched, fileName, type) {
13 |           if (type === 'stylesheet_tag') {
14 |             if (fileName !== 'tailwind.min.css') {
15 |               return '';
16 |             }
17 |             return matched;
18 |           }
19 | 
20 |           return `<script src="${publicPath}assets/${fileName}"></script>`;
21 |         }
22 |       );
23 | 
24 |     if(diff.includes('/layout/theme.liquid')) {
25 |       // inject HMR entry bundle
26 |       content = content.replace('</head>',`<script src="${publicPath}assets/bundle.liquidDev.js"></script></head>`)
27 |     }
28 | 
29 |     return `<!-- hmr-start: ./${diff} -->${content}<!-- hmr-end: ./${diff} -->`;
30 |   };
31 | }
32 | 


--------------------------------------------------------------------------------
/src/assets/favicon/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3daddict/themekit-webpack/5f05ecbb27a7493d4bb01cb24035fa1b4145208f/src/assets/favicon/.gitkeep


--------------------------------------------------------------------------------
/src/assets/fonts/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3daddict/themekit-webpack/5f05ecbb27a7493d4bb01cb24035fa1b4145208f/src/assets/fonts/.gitkeep


--------------------------------------------------------------------------------
/src/assets/fonts/noto-serif/NotoSerif-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3daddict/themekit-webpack/5f05ecbb27a7493d4bb01cb24035fa1b4145208f/src/assets/fonts/noto-serif/NotoSerif-Bold.ttf


--------------------------------------------------------------------------------
/src/assets/fonts/noto-serif/NotoSerif-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3daddict/themekit-webpack/5f05ecbb27a7493d4bb01cb24035fa1b4145208f/src/assets/fonts/noto-serif/NotoSerif-Regular.ttf


--------------------------------------------------------------------------------
/src/assets/fonts/poppins/Poppins-ExtraBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3daddict/themekit-webpack/5f05ecbb27a7493d4bb01cb24035fa1b4145208f/src/assets/fonts/poppins/Poppins-ExtraBold.ttf


--------------------------------------------------------------------------------
/src/assets/fonts/poppins/Poppins-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3daddict/themekit-webpack/5f05ecbb27a7493d4bb01cb24035fa1b4145208f/src/assets/fonts/poppins/Poppins-Light.ttf


--------------------------------------------------------------------------------
/src/assets/fonts/poppins/Poppins-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3daddict/themekit-webpack/5f05ecbb27a7493d4bb01cb24035fa1b4145208f/src/assets/fonts/poppins/Poppins-Regular.ttf


--------------------------------------------------------------------------------
/src/assets/fonts/poppins/Poppins-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3daddict/themekit-webpack/5f05ecbb27a7493d4bb01cb24035fa1b4145208f/src/assets/fonts/poppins/Poppins-SemiBold.ttf


--------------------------------------------------------------------------------
/src/assets/fonts/poppins/Poppins-Thin.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3daddict/themekit-webpack/5f05ecbb27a7493d4bb01cb24035fa1b4145208f/src/assets/fonts/poppins/Poppins-Thin.ttf


--------------------------------------------------------------------------------
/src/assets/images/great-success.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/3daddict/themekit-webpack/5f05ecbb27a7493d4bb01cb24035fa1b4145208f/src/assets/images/great-success.png


--------------------------------------------------------------------------------
/src/assets/svg/webpack.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#1c78c0" d="M117.29 98.1L66.24 127V104.49L98 87 117.29 98.1zm3.5-3.16V34.55L102.11 45.35V84.16l18.67 10.77zM10.71 98.1l51 28.88V104.49L29.94 87zm-3.5-3.16V34.55L25.89 45.35V84.16zm2.19-64.3L61.76 1V22.76L28.21 41.21l-.27.15zm109.18 0L66.24 1V22.76L99.79 41.2l.27.15 18.54-10.71zM61.76 99.37L30.37 82.1V47.92L61.76 66zm4.48 0L97.63 82.12V47.92L66.24 66zM32.5 44L64 26.66 95.5 44 64 62.16 32.5 44z"/></svg>


--------------------------------------------------------------------------------
/src/components/helpers/cart-fetch-api/cart-fetch-api.js:
--------------------------------------------------------------------------------
 1 | const base = '/cart';
 2 | 
 3 | function send({method, path, data}) {
 4 | 
 5 | 	const fetch = require('node-fetch').default;
 6 | 
 7 | 	const opts = {method, headers: {}};
 8 | 
 9 | 	if (data) {
10 | 		opts.headers['Content-Type'] = 'application/json';
11 | 		opts.body = JSON.stringify(data);
12 | 	}
13 | 
14 | 	return fetch(`${base}/${path}`, opts)
15 | 		.then(res => res.text())
16 | 		.then(json => {
17 | 			try {
18 | 				return JSON.parse(json);
19 | 			} catch (err) {
20 | 				return json;
21 | 			}
22 | 		});
23 | }
24 | 
25 | export function get(path) {
26 | 	return send({method: 'GET', path});
27 | }
28 | 
29 | export function del(path) {
30 | 	return send({method: 'DELETE', path});
31 | }
32 | 
33 | export function post(path, data) {
34 | 	return send({method: 'POST', path, data});
35 | }
36 | 
37 | export function put(path, data) {
38 | 	return send({method: 'PUT', path, data});
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/layout/theme.js:
--------------------------------------------------------------------------------
1 | import '../tailwind.css';
2 | 
3 | const themeFunction = () => 'Theme JS ES6 Function!';
4 | console.log(themeFunction());
5 | 


--------------------------------------------------------------------------------
/src/components/layout/theme.liquid:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |   <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
 7 |   {%- if page_description -%}
 8 |     <meta name="description" content="{{ page_description | escape }}">
 9 |   {%- endif -%}
10 | 
11 |   <link rel="canonical" href="{{ canonical_url }}">
12 |   {%- if settings.favicon != blank -%}
13 |     <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
14 |   {%- endif -%}
15 | 
16 |   {%- capture seo_title -%}
17 |     {{ page_title }}
18 |     {%- if current_tags -%}
19 |       {%- assign meta_tags = current_tags | join: ', ' -%} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
20 |     {%- endif -%}
21 |     {%- if current_page != 1 -%}
22 |       &ndash; {{ 'general.meta.page' | t: page: current_page }}
23 |     {%- endif -%}
24 |     {%- assign escaped_page_title = page_title | escape -%}
25 |     {%- unless escaped_page_title contains shop.name -%}
26 |       &ndash; {{ shop.name }}
27 |     {%- endunless -%}
28 |   {%- endcapture -%}
29 |   <title>{{ seo_title | strip }}</title>
30 | 
31 |   {%- comment -%}Varibles{%- endcomment -%}
32 |   {{ content_for_header }}
33 |   {% render 'global-css' %}
34 | 
35 |   {{ 'tailwind.min.css' | asset_url | stylesheet_tag }}
36 |   {{ 'bundle.global-css.css' | asset_url | stylesheet_tag }}
37 |   {{ 'bundle.runtime.js' | asset_url | script_tag }}
38 |   {% if settings.environment == 'development' %}
39 |     {{ 'bundle.liquidDev.js' | asset_url | script_tag }}
40 |   {% endif %}
41 |   {{ 'bundle.theme.js' | asset_url | script_tag }}
42 | </head>
43 | <body id="{{ page_title | handle }}" class="template-{{ template.name | handle }}">
44 |   {% section 'header' %}
45 | 
46 |   {% if shop.customer_accounts_enabled %}
47 |     {% if customer %}
48 |       <a href="/account">account</a>
49 |       {{ 'log out'  | customer_logout_link }}
50 |     {% else %}
51 |       {{ 'log in ' | customer_login_link }}
52 |       {{ 'register' | customer_register_link }}
53 |     {% endif %}
54 |   {% endif %}
55 | 
56 |   <main role="main" id="MainContent">
57 |     {{ content_for_layout }}
58 |   </main>
59 | 
60 |   {% section 'footer' %}
61 | 
62 | </body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/src/components/sections/banner-with-text/banner-with-text.liquid:
--------------------------------------------------------------------------------
 1 | <section class="banner_image relative flex flex-col" data-section-id="{{ section.id }}">
 2 |     {%- if section.settings.image != blank -%}
 3 |     <picture class="ratio-16/9 object-cover w-full">
 4 |       <source media="(max-width: 375px)" srcset="{{ section.settings.image | img_url: '375x' }}, {{ section.settings.image | img_url: '375x', scale: 2 }} 2x">
 5 |       <source media="(max-width: 768px)" srcset="{{ section.settings.image | img_url: '768x' }}, {{ section.settings.image | img_url: '768x', scale: 2 }} 2x">
 6 |       <img class="w-full" src="{{ section.settings.image | img_url: '1200x' }}"
 7 |         srcset="{{ section.settings.image | img_url: '1200x' }}, {{ section.settings.image | img_url: '1200x', scale: 2 }} 2x"
 8 |         alt="{%- if section.settings.image.alt != blank -%}{{ section.settings.image.alt | escape }}{%- else -%}{{ section.settings.title | escape }}{%- endif -%}"
 9 |         loading="lazy">
10 |     </picture>
11 |     {%- else -%}
12 |       <img src="https://picsum.photos/1200/600" alt="placeholder image">
13 |     {%- endif -%}
14 |     {%- if section.settings.overlay -%}
15 |       <div class="absolute bg-black opacity-50 top-0 right-0 bottom-0 left-0"></div>
16 |     {%- endif -%}
17 |     <div class="banner_title text-white p-8 absolute inset-0 flex flex-col items-center justify-center text-center">
18 |       <h1 class="text-2xl sm:text-6xl">{{ section.settings.title }}</h1>
19 |       <p class="text-base sm:text-4xl">{{ section.settings.text }}</p>
20 |       {%- if section.blocks -%}
21 |         <div class="flex flex-row flex-wrap justify-center mt-8">
22 |           {%- for block in section.blocks -%}
23 |           <a href="{{ block.settings.link }}">
24 |             <button class="bg-blue-500 hover:bg-blue-700 py-2 px-4 mx-2 rounded">{{ block.settings.text }}</button>
25 |           </a>
26 |           {%- endfor -%}
27 |         </div>
28 |       {%- endif -%}
29 |     </div>
30 | </section>
31 | 
32 | {% schema %}
33 |   {
34 |     "name": "Banner with Text",
35 |     "max_blocks": 2,
36 |     "settings": [
37 |       {
38 |         "type": "image_picker",
39 |         "id": "image",
40 |         "label": "Banner Image"
41 |       },
42 |       {
43 |         "type": "checkbox",
44 |         "id": "overlay",
45 |         "label": "Image Overlay",
46 |         "info": "Darken Image with Black Overlay",
47 |         "default": true
48 |       },
49 |       {
50 |         "type": "url",
51 |         "id": "banner_link",
52 |         "label": "Banner Link"
53 |       },
54 |       {
55 |         "type": "text",
56 |         "id": "title",
57 |         "label": "Banner Heading",
58 |         "default": "ThemeKit with Webpack"
59 |       },
60 |       {
61 |         "type": "textarea",
62 |         "id": "text",
63 |         "label": "Banner Body",
64 |         "default": "A modern Shopify Theme with Webpack and TailwindCSS"
65 |       }
66 |     ],
67 |     "blocks": [
68 |       {
69 |         "type": "select",
70 |         "name": "CTA Button",
71 |         "settings": [
72 |           {
73 |             "label": "Button Text",
74 |             "id": "text",
75 |             "type": "text",
76 |             "default": "CTA Button"
77 |           },
78 |           {
79 |             "label": "Button Link",
80 |             "id": "link",
81 |             "type": "url"
82 |           }
83 |         ]
84 |       }
85 |     ],
86 | 	"presets": [
87 |       {
88 |         "name": "Banner with Text",
89 |         "category": "Image"
90 |       }
91 |     ]
92 |   }
93 | {% endschema %}


--------------------------------------------------------------------------------
/src/components/sections/cart/cart.liquid:
--------------------------------------------------------------------------------
 1 | <div class="flex justify-center my-6 mx-6">
 2 |     <div class="flex flex-col w-full p-4">
 3 |         <div class="flex-1">
 4 |             <form action="/cart" method="post" novalidate>
 5 |                 <table class="w-full text-sm lg:text-base" cellspacing="0">
 6 |                     <thead>
 7 |                         <tr class="h-12 uppercase">
 8 |                             <th class="hidden md:table-cell"></th>
 9 |                             <th class="text-left">Product</th>
10 |                             <th class="lg:text-right text-left pl-5 lg:pl-0">
11 |                                 <span class="lg:hidden" title="Quantity">QTY</span>
12 |                                 <span class="hidden lg:inline">Quantity</span>
13 |                             </th>
14 |                             <th class="hidden text-right md:table-cell">Unit Price</th>
15 |                             <th class="text-right">Total Price</th>
16 |                         </tr>
17 |                     </thead>
18 |                     <tbody>
19 |                         {%- for item in cart.items -%}
20 |                         <tr>
21 |                             <td class="hidden pb-4 md:table-cell">
22 |                                 <a href="{{ item.url | within: collections.all }}">
23 |                                     <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}"
24 |                                         class="w-20 rounded" alt="Thumbnail">
25 |                                 </a>
26 |                             </td>
27 |                             <td>
28 |                                 <a href="{{ item.url }}">
29 |                                     <p class="mb-2 md:ml-4">{{ item.product.title }}</p>
30 |                                     <button type="button" class="text-gray-700 md:ml-4">
31 |                                         <small>
32 |                                             <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">Remove</a>
33 |                                         </small>
34 |                                     </button>
35 |                                 </a>
36 |                             </td>
37 |                             <td class="justify-center md:justify-end md:flex mt-6">
38 |                                 <div class="w-20 h-10">
39 |                                     <div class="relative flex flex-row w-full h-8">
40 |                                         <input type="number" name="updates[]" id="updates_{{ item.key }}"
41 |                                             value="{{ item.quantity }}" min="0"
42 |                                             class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" />
43 |                                     </div>
44 |                                 </div>
45 |                             </td>
46 |                             <td class="hidden text-right md:table-cell">
47 |                                 <span class="text-sm lg:text-base">
48 |                                     {%- if item.original_line_price != item.line_price -%}{{ item.original_line_price | money }}{%- endif -%}
49 |                                     {{ item.line_price | money }}
50 |                                     {%- for discount in item.discounts -%}{{ discount.title }}{%- endfor -%}
51 |                                 </span>
52 |                             </td>
53 |                             <td class="text-right">
54 |                                 <span class="text-sm lg:text-base">
55 |                                     {{ item.line_price | times: item.quantity | money }}
56 |                                 </span>
57 |                             </td>
58 |                         </tr>
59 |                         {% endfor %}
60 |                     </tbody>
61 |                 </table>
62 |                 <div class="py-4 float-right">
63 |                     <div class="flex justify-between">
64 |                         <div class="lg:py-2 m-2">
65 |                             Subtotal
66 |                         </div>
67 |                         <div class="lg:py-2 m-2">
68 |                             {{ cart.total_price | money }}
69 |                         </div>
70 |                     </div>
71 |                     <div class="flex">
72 |                         <button type="submit" name="update"
73 |                             class="flex justify-center px-10 py-3 mt-6 text-white uppercase bg-blue-500 rounded hover:bg-blue-700 mx-2">
74 |                             UPDATE
75 |                         </button>
76 |                         <button type="submit" name="checkout"
77 |                             class="flex justify-center px-10 py-3 mt-6 text-white uppercase bg-blue-500 rounded hover:bg-blue-700 mx-2">
78 |                             CHECKOUT
79 |                         </button>
80 |                     </div>
81 |                 </div>
82 |             </form>
83 |         </div>
84 |     </div>


--------------------------------------------------------------------------------
/src/components/sections/feature-collection/featured-collection.liquid:
--------------------------------------------------------------------------------
 1 | {%- assign collection = collections[section.settings.collection] -%}
 2 | <section class="py-16 bg-gray-300">
 3 |   <div class="container m-auto px-6">
 4 |    <div class="lg:flex justify-between items-center">
 5 |        <div class="lg:w-6/12 lg:p-0 p-7">
 6 |         {%- if section.settings.title != blank -%}
 7 |           <h1 class="text-4xl font-bold leading-tight mb-5 capitalize">{{ section.settings.title | escape }}</h1>
 8 |         {%- endif -%}
 9 |         {%- if section.settings.description != blank -%}
10 |           <p class="text-xl">{{ section.settings.description | escape }}</p>
11 |         {%- endif -%}
12 |           <div class="py-5">
13 |             {%- if section.settings.button_link and section.settings.button -%}
14 |               <a href="{{ section.settings.button_link }}" class="bg-blue-500 hover:bg-blue-700 text-white featured-collection-button rounded-full py-2 px-5 text-lg  mr-3">{{ section.settings.button }}</a>
15 |             {%- elsif section.settings.button -%}
16 |               <a href="https://tailwindcomponents.com/" target="_blank" class="bg-blue-500 hover:bg-blue-700 text-white featured-collection-button rounded-full py-2 px-5 text-lg  mr-3">TailwindCSS Components</a>
17 |             {%- endif -%}
18 |           </div>
19 |         </div>
20 |         <div class="lg:w-5/12 order-2">
21 |           {%- if collection.image -%}
22 |             <img src="{{ collection.image | img_url: '976x' }}"
23 |           style="transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg);" alt="" class="rounded">
24 |           {%- else -%}
25 |             <img src="https://picsum.photos/976/600"
26 |           style="transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg);" alt="" class="rounded">
27 |           {%- endif -%}
28 |         </div>
29 |     </div>
30 |   </div>
31 | </section>
32 | 
33 | {% schema %}
34 |   {
35 |     "name": "Featured collection",
36 |     "settings": [
37 |       {
38 |         "type": "text",
39 |         "id": "title",
40 |         "label": "Heading",
41 |         "default": "Featured Collection"
42 |       },
43 |       {
44 |         "type": "text",
45 |         "id": "description",
46 |         "label": "Description",
47 |         "default": "There are some cool Tailwind CSS components you can use with this project."
48 |       },
49 |       {
50 |         "type": "text",
51 |         "id": "button",
52 |         "label": "CTA Text",
53 |         "default": "TailwindCSS Components"
54 |       },
55 |       {
56 |         "type": "url",
57 |         "id": "button_link",
58 |         "label": "Button URL"
59 |       },
60 |       {
61 |         "id": "collection",
62 |         "type": "collection",
63 |         "label": "Collection"
64 |       }
65 |     ],
66 |     "presets": [
67 |       {
68 |         "name": "Featured collection",
69 |         "category": "Collection"
70 |       }
71 |     ]
72 |   }
73 | {% endschema %}
74 | 


--------------------------------------------------------------------------------
/src/components/sections/featured-product/featured-product.liquid:
--------------------------------------------------------------------------------
 1 | {%- assign product = all_products[section.settings.product] -%}
 2 | {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
 3 | <section class="my-8">
 4 |     <div class="container mx-auto px-6">
 5 |         <div class="md:flex md:items-center">
 6 |             <div class="w-full h-64 md:w-1/2 lg:h-96">
 7 |                 <img class="h-full w-full rounded-md object-cover max-w-lg mx-auto" src="{{ featured_media | img_url: "1050x" }}" alt="{{ featured_media.alt }}">
 8 |             </div>
 9 |             <div class="w-full max-w-lg mx-auto mt-5 md:ml-8 md:mt-0 md:w-1/2">
10 |                 <h3 class="text-gray-700 uppercase text-lg">{{ product.title | escape }}</h3>
11 |                 <span class="text-gray-500 mt-3">{{ product.price | money }}</span>
12 |                 <hr class="my-3">
13 |                 <div class="mt-2">
14 |                     <label class="text-gray-700 text-sm" for="count">Count:</label>
15 |                     <div class="flex items-center mt-1">
16 |                         <button class="text-gray-500 focus:outline-none focus:text-gray-600">
17 |                             <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
18 |                         </button>
19 |                         <span class="text-gray-700 text-lg mx-2">20</span>
20 |                         <button class="text-gray-500 focus:outline-none focus:text-gray-600">
21 |                             <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
22 |                         </button>
23 |                     </div>
24 |                 </div>
25 |                 <div class="mt-3">
26 |                     <label class="text-gray-700 text-sm" for="count">Color:</label>
27 |                     <div class="flex items-center mt-1">
28 |                         <button class="h-5 w-5 rounded-full bg-blue-600 border-2 border-blue-200 mr-2 focus:outline-none"></button>
29 |                         <button class="h-5 w-5 rounded-full bg-teal-600 mr-2 focus:outline-none"></button>
30 |                         <button class="h-5 w-5 rounded-full bg-pink-600 mr-2 focus:outline-none"></button>
31 |                     </div>
32 |                 </div>
33 |                 <div class="flex items-center mt-6">
34 |                     <button class="px-8 py-2 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Order Now</button>
35 |                     <button class="mx-2 text-gray-600 border rounded-md p-2 hover:bg-gray-200 focus:outline-none">
36 |                         <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
37 |                     </button>
38 |                 </div>
39 |             </div>
40 |         </div>
41 |     </div>
42 |   </section>
43 | 
44 |   {% schema %}
45 |   {
46 |     "name": "Featured product",
47 |     "settings": [
48 |       {
49 |         "type": "product",
50 |         "id": "product",
51 |         "label": "Product"
52 |       }
53 |     ],
54 |     "presets": [
55 |       {
56 |         "name": "Featured product",
57 |         "category": "Product"
58 |       }
59 |     ]
60 |   }
61 | {% endschema %}


--------------------------------------------------------------------------------
/src/components/sections/footer/footer.liquid:
--------------------------------------------------------------------------------
  1 | <footer class="footer relative pt-1 border-b-2">
  2 |   <div class="container mx-auto px-6">
  3 |     <div class="sm:flex sm:mt-8">
  4 |       <div class="mt-8 sm:mt-0 sm:w-full sm:px-8 flex flex-col md:flex-row justify-between">
  5 |         <div class="flex flex-col">
  6 |           {%- if section.settings.first_menu_enable -%}
  7 |           <span class="font-bold text-gray-700 uppercase mb-2">{{ section.settings.first_title }}</span>
  8 |           {%- if linklists[footer_linklist].links.size > 0 -%}
  9 |           {%- assign first_linklist = section.settings.first_linklist -%}
 10 |           {%- for link in linklists[footer_linklist].links -%}
 11 |           <span class="my-2">
 12 |             <a href="{{ link.url }}" class=" text-md">{{ link.title }}</a>
 13 |           </span>
 14 |           {%- endfor -%}
 15 |           {%- else -%}
 16 |           <span class="my-2"><a href="#" class=" text-md">link 1</a></span>
 17 |           <span class="my-2"><a href="#" class=" text-md">link 1</a></span>
 18 |           <span class="my-2"><a href="#" class=" text-md">link 1</a></span>
 19 |           {%- endif -%}
 20 |           {%- endif -%}
 21 |         </div>
 22 |         <div class="flex flex-col">
 23 |           {%- if section.settings.second_menu_enable -%}
 24 |           <span class="font-bold text-gray-700 uppercase mb-2">{{ section.settings.second_title }}</span>
 25 |           {%- if linklists[footer_linklist].links.size > 0 -%}
 26 |           {%- assign second_linklist = section.settings.second_linklist -%}
 27 |           {%- for link in linklists[footer_linklist].links -%}
 28 |           <span class="my-2">
 29 |             <a href="{{ link.url }}" class=" text-md">{{ link.title }}</a>
 30 |           </span>
 31 |           {%- endfor -%}
 32 |           {%- else -%}
 33 |           <span class="my-2"><a href="#" class=" text-md">link 1</a></span>
 34 |           <span class="my-2"><a href="#" class=" text-md">link 1</a></span>
 35 |           <span class="my-2"><a href="#" class=" text-md">link 1</a></span>
 36 |           {%- endif -%}
 37 |           {%- endif -%}
 38 |         </div>
 39 |         <div class="flex flex-col">
 40 |           {%- if section.settings.third_menu_enable -%}
 41 |           <span class="font-bold text-gray-700 uppercase mb-2">{{ section.settings.third_title }}</span>
 42 |           {%- if linklists[footer_linklist].links.size > 0 -%}
 43 |           {%- assign third_linklist = section.settings.third_linklist -%}
 44 |           {%- for link in linklists[footer_linklist].links -%}
 45 |           <span class="my-2">
 46 |             <a href="{{ link.url }}" class=" text-md">{{ link.title }}</a>
 47 |           </span>
 48 |           {%- endfor -%}
 49 |           {%- else -%}
 50 |           <span class="my-2"><a href="#" class=" text-md">link 1</a></span>
 51 |           <span class="my-2"><a href="#" class=" text-md">link 1</a></span>
 52 |           <span class="my-2"><a href="#" class=" text-md">link 1</a></span>
 53 |           {%- endif -%}
 54 |           {%- endif -%}
 55 |         </div>
 56 |       </div>
 57 |     </div>
 58 |   </div>
 59 |   <div class="container mx-auto px-6">
 60 |     <div class="mt-16 border-t-2 border-gray-300 flex flex-col items-center">
 61 |       <div class="sm:w-2/3 text-center py-6">
 62 |         <p class="text-sm font-bold mb-2">
 63 |           <small>&copy; {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: '/' }}. {{ powered_by_link }}</small>
 64 |         </p>
 65 |       </div>
 66 |     </div>
 67 |   </div>
 68 | </footer>
 69 | 
 70 | {% schema %}
 71 |   {
 72 |     "name": "Footer",
 73 |     "settings": [
 74 |       {
 75 |         "type": "header",
 76 |         "content": "First Menu"
 77 |       },
 78 |       {
 79 |         "type": "checkbox",
 80 |         "id": "first_menu_enable",
 81 |         "label": "Enable Menu",
 82 |         "default": true
 83 |       },
 84 |       {
 85 |         "type": "text",
 86 |         "id": "first_title",
 87 |         "label": "Menu Title",
 88 |         "default": "Menu 1"
 89 |       },
 90 |       {
 91 |         "type": "link_list",
 92 |         "id": "first_linklist",
 93 |         "label": "First menu"
 94 |       },
 95 |       {
 96 |         "type": "header",
 97 |         "content": "Second Menu"
 98 |       },
 99 |       {
100 |         "type": "checkbox",
101 |         "id": "second_menu_enable",
102 |         "label": "Enable Menu",
103 |         "default": true
104 |       },
105 |       {
106 |         "type": "text",
107 |         "id": "second_title",
108 |         "label": "Menu Title",
109 |         "default": "Menu 2"
110 |       },
111 |       {
112 |         "type": "link_list",
113 |         "id": "second_linklist",
114 |         "label": "Second menu"
115 |       },
116 |       {
117 |         "type": "header",
118 |         "content": "Third Menu"
119 |       },
120 |       {
121 |         "type": "checkbox",
122 |         "id": "third_menu_enable",
123 |         "label": "Enable Menu",
124 |         "default": true
125 |       },
126 |       {
127 |         "type": "text",
128 |         "id": "third_title",
129 |         "label": "Menu Title",
130 |         "default": "Menu 3"
131 |       },
132 |       {
133 |         "type": "link_list",
134 |         "id": "third_linklist",
135 |         "label": "Third menu"
136 |       }
137 |     ]
138 |   }
139 | {% endschema %}
140 | 


--------------------------------------------------------------------------------
/src/components/sections/header/header.liquid:
--------------------------------------------------------------------------------
  1 | <section data-section-id="{{ section.id }}">
  2 |   {%-  if section.settings.announcement_bar_enabled -%}
  3 |   <div class="announcement-bar-container text-center p-2">
  4 |     {%-  if section.settings.announcement_bar_link != blank -%}
  5 |     <a href="{{ section.settings.announcement_bar_link }}">
  6 |       {{ section.settings.announcement_bar_text }}
  7 |     </a>
  8 |     {%-  else -%}
  9 |     <p>{{ section.settings.announcement_bar_text }}</p>
 10 |     {%-  endif -%}
 11 |   </div>
 12 |   {%-  endif -%}
 13 |   <nav class="nav-bar-container flex items-center justify-between flex-wrap p-6">
 14 |     <div class="flex items-center flex-shrink-0 mr-6">
 15 |         {%- if section.settings.logo != blank -%}
 16 |             <div>
 17 |               <a href="/">
 18 |                 {%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}
 19 |                 <img src="{{ section.settings.logo | img_url: image_size }}"
 20 |                   srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
 21 |                   alt="{{ section.settings.logo.alt | default: shop.name }}">
 22 |               </a>
 23 |         </div>
 24 |         {%- endif -%}
 25 |         <a href="/"><span class="font-semibold text-xl tracking-tight">{{ shop.name }}</span></a>
 26 |     </div>
 27 |     <div class="flex-grow flex items-center w-auto">
 28 |       <ul class="text-sm flex-grow">
 29 |         {%- for link in linklists[section.settings.menu].links -%}
 30 |         {%- if link.links != blank -%}
 31 |         <li class="inline-block mt-0 mr-4">
 32 |           <a href="{{ link.url }}">{{ link.title }}</a>
 33 |           <ul class="text-sm flex-grow">
 34 |             {%- for childlink in link.links -%}
 35 |             <li class="inline-block mt-0 mr-4"><a href="{{ childlink.url }}">{{ childlink.title }}</a>
 36 |             </li>
 37 |             {%- endfor -%}
 38 |           </ul>
 39 |         </li>
 40 |         {%- else -%}
 41 |         <li class="inline-block mt-0 mr-4"><a href="{{ link.url }}">{{ link.title }}</a></li>
 42 |         {%- endif -%}
 43 |         {%- endfor -%}
 44 |       </ul>
 45 |     </div>
 46 |   </nav>
 47 | </section>
 48 | 
 49 | {% schema %}
 50 | {
 51 |   "name": "Header",
 52 |   "settings": [{
 53 |           "type": "header",
 54 |           "content": "Announcement Bar"
 55 |       },
 56 |       {
 57 |           "type": "checkbox",
 58 |           "id": "announcement_bar_enabled",
 59 |           "label": "Show Announcement",
 60 |           "default": true
 61 |       },
 62 |       {
 63 |           "type": "text",
 64 |           "id": "announcement_bar_text",
 65 |           "label": "Announcement Text",
 66 |           "default": "Webpack is awesome!"
 67 |       },
 68 |       {
 69 |           "type": "color",
 70 |           "id": "announcement_bar_bg",
 71 |           "label": "Background Color",
 72 |           "default": "#000000"
 73 |       },
 74 |       {
 75 |           "type": "color",
 76 |           "id": "announcement_bar_text_color",
 77 |           "label": "Annoucement Text Color",
 78 |           "default": "#FFFFFF"
 79 |       },
 80 |       {
 81 |           "type": "url",
 82 |           "id": "announcement_bar_link",
 83 |           "label": "Announcement Link",
 84 |           "info": "Optional"
 85 |       },
 86 |       {
 87 |           "type": "header",
 88 |           "content": "Navbar"
 89 |       },
 90 |       {
 91 |           "type": "color",
 92 |           "id": "nav_bar_bg",
 93 |           "label": "Navbar Background Color",
 94 |           "default": "#FFFFFF"
 95 |       },
 96 |       {
 97 |           "type": "color",
 98 |           "id": "nav_bar_text_color",
 99 |           "label": "Navbar Text Color",
100 |           "default": "#000000"
101 |       },
102 |       {
103 |           "type": "image_picker",
104 |           "id": "logo",
105 |           "label": "Logo Image"
106 |       },
107 |       {
108 |           "type": "range",
109 |           "id": "logo_max_width",
110 |           "min": 20,
111 |           "max": 420,
112 |           "step": 10,
113 |           "unit": "px",
114 |           "label": "Logo Width",
115 |           "default": 60
116 |       },
117 |       {
118 |           "type": "link_list",
119 |           "id": "menu",
120 |           "label": "Menu",
121 |           "default": "main-menu"
122 |       }
123 |   ]
124 | }
125 | {% endschema %}
126 | 
127 | {%- if section.settings.announcement_bar_enabled -%}
128 | <style>
129 |   .announcement-bar-container {
130 |     background: {{ section.settings.announcement_bar_bg}};
131 |     color: {{section.settings.announcement_bar_text_color}};
132 |   }
133 | 
134 |   .nav-bar-container {
135 |     background: {{ section.settings.nav_bar_bg}};
136 |     color: {{section.settings.nav_bar_text_color}};
137 |   }
138 | 
139 |   .logo-image {
140 |     display: block;
141 |     max-width: {{section.settings.logo_max_width}}px;
142 |   }
143 | </style>
144 | {%- endif -%}
145 | 


--------------------------------------------------------------------------------
/src/components/sections/image-with-text/image-with-text.liquid:
--------------------------------------------------------------------------------
  1 | {%- comment -%}
  2 |   This is a required section for the Shopify Theme Store.
  3 |   It is available when you add the "Image with text" section in the theme editor.
  4 | 
  5 |   Theme Store required settings
  6 |   - Image
  7 |   - Heading: title of the block
  8 |   - Text: description of the block
  9 | 
 10 |   Theme Store optional settings
 11 |   - Button label: label associated with the button
 12 |   - Button link: link of the button
 13 | {%- endcomment -%}
 14 | 
 15 | <section class="image-with-text">
 16 |   {% capture image_layout %}
 17 |     <div class="image-with-text__image">
 18 |       {% if section.settings.image != blank %}
 19 |         {% include 'responsive-image' with
 20 |           image: section.settings.image,
 21 |           max_width: 545,
 22 |           max_height: 545
 23 |         %}
 24 |       {% else %}
 25 |         {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
 26 |       {% endif %}
 27 |     </div>
 28 |   {% endcapture %}
 29 | 
 30 |   {% if section.settings.layout == 'left' %}
 31 |     {{ image_layout }}
 32 |   {% endif %}
 33 | 
 34 |   <div class="image-with-text__text">
 35 |     {% if section.settings.title != blank %}
 36 |       <h2>{{ section.settings.title | escape }}</h2>
 37 |     {% endif %}
 38 |     {% if section.settings.text != blank %}
 39 |       <div>{{ section.settings.text }}</div>
 40 |     {% endif %}
 41 |     {% if section.settings.button_label != blank and section.settings.button_link != blank %}
 42 |       <a href="{{ section.settings.button_link }}">
 43 |         {{ section.settings.button_label | escape }}
 44 |       </a>
 45 |     {% endif %}
 46 |   </div>
 47 | 
 48 |   {% if section.settings.layout == 'right' %}
 49 |     {{ image_layout }}
 50 |   {% endif %}
 51 | </section>
 52 | 
 53 | {% schema %}
 54 |   {
 55 |     "name": "Image with text",
 56 |     "settings": [
 57 |       {
 58 |         "type": "image_picker",
 59 |         "id": "image",
 60 |         "label": "Image"
 61 |       },
 62 |       {
 63 |         "type": "select",
 64 |         "id": "layout",
 65 |         "label": "Image alignment",
 66 |         "default": "left",
 67 |         "options": [
 68 |           {
 69 |             "value": "left",
 70 |             "label": "Left"
 71 |           },
 72 |           {
 73 |             "value": "right",
 74 |             "label": "Right"
 75 |           }
 76 |         ]
 77 |       },
 78 |       {
 79 |         "type": "text",
 80 |         "id": "title",
 81 |         "label": "Heading",
 82 |         "default": "Image with text"
 83 |       },
 84 |       {
 85 |         "type": "richtext",
 86 |         "id": "text",
 87 |         "label": "Text",
 88 |         "default": "<p>Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
 89 |       },
 90 |       {
 91 |         "type": "text",
 92 |         "id": "button_label",
 93 |         "label": "Button label"
 94 |       },
 95 |       {
 96 |         "type": "url",
 97 |         "id": "button_link",
 98 |         "label": "Button link"
 99 |       }
100 |     ],
101 |     "presets": [
102 |       {
103 |         "name": "Image with text",
104 |         "category": "Image"
105 |       }
106 |     ]
107 |   }
108 | {% endschema %}
109 | 


--------------------------------------------------------------------------------
/src/components/sections/product/product.js:
--------------------------------------------------------------------------------
 1 | import {post} from '../../helpers/cart-fetch-api/cart-fetch-api';
 2 | 
 3 | document.getElementById('AddToCartForm').onsubmit = async function (event) {
 4 |     const btn = document.getElementById('AddToCartBtn');
 5 |     const id = document.getElementById('AddToCartBtn').value;
 6 |     const option1 = document.getElementById('option1').value;
 7 |     const option2 = document.getElementById('option2').value;
 8 |     const qty = document.getElementById('counterQty').value;
 9 | 
10 |     event.preventDefault();
11 |     const response = await post('add.js', {id, option1, option2, qty});
12 |     
13 |     if(response) {
14 |         btn.textContent = 'ITEM ADDED';
15 |     }
16 |     return false;
17 | };


--------------------------------------------------------------------------------
/src/components/sections/product/product.liquid:
--------------------------------------------------------------------------------
 1 | {% assign current_variant = product.selected_or_first_available_variant %}
 2 | {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
 3 | <section class="text-gray-700 body-font overflow-hidden bg-white">
 4 |   <div class="container px-5 py-6 lg:py-24 mx-auto">
 5 |     <div class="lg:w-4/5 mx-auto flex flex-wrap">
 6 |       <img alt="{{ featured_image.alt | escape }}"
 7 |         class="lg:w-1/2 w-full object-cover object-center rounded border border-gray-200"
 8 |         src="{{ featured_image | img_url: 'large' }}">
 9 |       <div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
10 |         {%- comment -%}<h2 class="text-sm title-font text-gray-500 tracking-widest">BRAND NAME</h2>{%- endcomment -%}
11 |         <h1 class="text-gray-900 text-3xl title-font font-medium mb-1" id="">{{ product.title }}</h1>
12 |         <p class="leading-relaxed">{{ product.content }}</p>
13 |         <form method="post" enctype="multipart/form-data" id="AddToCartForm">
14 |           <div class="flex mt-6 items-center">
15 |               <div class="flex ml-6 items-center">
16 |                   <span class="mr-3">Size</span>
17 |                   <div class="relative">
18 |                     <select
19 |                       class="rounded border appearance-none border-gray-400 py-2 focus:outline-none focus:border-red-500 text-base pl-3 pr-10"
20 |                       id="option2">
21 |                       {% for color_option in product.options_by_name['Size'].values %}
22 |                       <option>{{ color_option }}</option>
23 |                       {% endfor %}
24 |                     </select>
25 |                     <span
26 |                       class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
27 |                       <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
28 |                         class="w-4 h-4" viewBox="0 0 24 24">
29 |                         <path d="M6 9l6 6 6-6"></path>
30 |                       </svg>
31 |                     </span>
32 |                   </div>
33 |                 </div>
34 |             <div class="flex ml-6 items-center">
35 |               <span class="mr-3">Color</span>
36 |               <div class="relative">
37 |                 <select
38 |                   class="rounded border appearance-none border-gray-400 py-2 focus:outline-none focus:border-red-500 text-base pl-3 pr-10"
39 |                   id="option1">
40 |                   {% for color_option in product.options_by_name['Color'].values %}
41 |                   <option>{{ color_option }}</option>
42 |                   {% endfor %}
43 |                 </select>
44 |                 <span
45 |                   class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
46 |                   <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
47 |                     class="w-4 h-4" viewBox="0 0 24 24">
48 |                     <path d="M6 9l6 6 6-6"></path>
49 |                   </svg>
50 |                 </span>
51 |               </div>
52 |             </div>
53 |           </div>
54 |           <div class="mt-3 pb-5 border-b-2 border-gray-200 mb-5">
55 |             {% render 'input-counter' %}
56 |           </div>
57 |           <div class="flex">
58 |             <span
59 |               class="title-font font-medium text-2xl text-gray-900">{{ product.price | money_without_trailing_zeros }}</span>
60 |             <button
61 |               class="flex ml-auto text-white bg-blue-500 border-0 py-2 px-6 focus:outline-none hover:bg-blue-600 rounded"
62 |               type="submit" name="add" id="AddToCartBtn" value="{{ current_variant.id }}">ADD TO CART</button>
63 |           </div>
64 |         </form>
65 |       </div>
66 |     </div>
67 |   </div>
68 | </section>
69 | 
70 | {{ 'bundle.product.js' | asset_url | script_tag }}
71 | 


--------------------------------------------------------------------------------
/src/components/snippets/dynamic-modal/dynamic-modal.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 | This snippet uses Variable Scope and can be re-used throughout the theme.
 3 | To use this snippet in sections, add render tag with key: value for assigned variables.
 4 | For Example:
 5 | This is the target button id that will open the modal.
 6 | <button id="modalBtn">TEST MODAL</button>
 7 | =========================================================================
 8 | Here is a render tag example to use in the section with some example variables declared.
 9 | Note the openModalBtn matches the button element above which triggers the modal in this example.
10 | =========================================================================
11 | {%- render 'dynamic-modal', 
12 |   id: "testModal", 
13 |   openModalBtn: "modalBtn",
14 |   title: "Modal Title",
15 |   body: "Modal Body",
16 |   buttonOne: "Button One",
17 |   buttonOneStyle: "text-white bg-blue-500 hover:bg-blue-700",
18 |   buttonOneFunction: "javascript:void(0);",
19 |   buttonTwo: "Button Two",
20 |   buttonTwoStyle: "text-white bg-transparent hover:bg-blue-700 text-blue-500 hover:text-white border border-blue-500 hover:border-transparent",
21 |   buttonTwoFunction: "javascript:void(0);" 
22 | -%}
23 | =========================================================================
24 | id, openModalBtn, title and body are required. If you don't want buttons make the value = null.
25 | =========================================================================
26 | {%- endcomment -%}
27 | 
28 | <section class="hidden" id="{{ id }}">
29 |     <div class="flex items-center justify-center fixed left-0 bottom-0 w-full h-full bg-black bg-opacity-75 z-50" id="modalContainer">
30 |         <div class="bg-white rounded-lg w-1/2">
31 |             <div class="flex flex-col items-start p-4">
32 |                 <div class="flex items-center w-full">
33 |                     <div class="text-gray-900 font-medium text-xl">{{ title }}</div>
34 |                     <span class="ml-auto fill-current text-gray-700 w-6 h-6 cursor-pointer" id="closeModalBtn">
35 |                         <svg
36 |                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
37 |                             <path
38 |                                 d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" />
39 |                         </svg>
40 |                     </span>
41 |                 </div>
42 |                 <hr>
43 |                 <div class="my-4">{{ body }}</div>
44 |                 <hr>
45 |                 <div class="ml-auto my-2">
46 |                     {%- if buttonOne -%}
47 |                         <button 
48 |                         class="{{ buttonOneStyle }} mx-2 py-2 px-4 rounded"
49 |                         onclick="{{ buttonOneFunction }}">
50 |                             {{ buttonOne }}
51 |                         </button>
52 |                     {%- endif -%}
53 |                     {%- if buttonTwo -%}
54 |                         <button 
55 |                         class="{{ buttonTwoStyle }} mx-2 py-2 px-4 rounded"
56 |                         onclick="{{ buttonTwoFunction }}">
57 |                             {{ buttonTwo }}
58 |                         </button>
59 |                     {%- endif -%}
60 |                 </div>
61 |             </div>
62 |         </div>
63 |     </div>
64 | </section>
65 | 
66 | <script>
67 |     // Assignments
68 |     var modal = document.getElementById("{{ id }}");
69 |     var modalContainer = document.getElementById("modalContainer");
70 |     var btn = document.getElementById("{{ openModalBtn }}");
71 |     var closeBtn = document.getElementById("closeModalBtn");
72 | 
73 |     // Button click handler 
74 |     btn.onclick = function () {
75 |         modal.style.display = "block";
76 |     }
77 | 
78 |     // X icon click handler
79 |     closeBtn.onclick = function () {
80 |         modal.style.display = "none";
81 |     }
82 | 
83 |     // Click outside modal close click handler
84 |     window.onclick = function (event) {
85 |         if (event.target == modalContainer) {
86 |             modal.style.display = "none";
87 |         }
88 |     }
89 | </script>
90 | 


--------------------------------------------------------------------------------
/src/components/snippets/global-css/global-css.js:
--------------------------------------------------------------------------------
1 | import './global-css.scss';


--------------------------------------------------------------------------------
/src/components/snippets/global-css/global-css.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}Declare liquid variables here and use then in the global-css.scss file{%- endcomment -%}
 2 | {% style %}
 3 |     {{ settings.font_heading | font_face }}
 4 |     {{ settings.font_body | font_face }}
 5 |   
 6 |     {%- assign font_body_bold = settings.font_body | font_modify: 'weight', 'bolder' -%}
 7 |     {%- assign font_body_bold_italic = font_body_bold | font_modify: 'style', 'italic' -%}
 8 |   
 9 |     {{ font_body_bold | font_face }}
10 |     {{ font_body_bold_italic | font_face }}
11 |   
12 |     :root {
13 |       --font-heading: {{ settings.font_heading.family }}, {{ settings.font_heading.fallback_families }};
14 |       --font-body: {{ settings.font_body.family }}, {{ settings.font_body.fallback_families }};
15 |       --font-body-weight: {{ settings.font_body.weight }};
16 |       --font-body-style: {{ settings.font_body.style }};
17 |       --font-body-bold-weight: {{ font_body_bold.weight | default: 'bold' }};
18 |     }
19 | {% endstyle %}
20 | 


--------------------------------------------------------------------------------
/src/components/snippets/global-css/global-css.scss:
--------------------------------------------------------------------------------
 1 | //
 2 | // Typography
 3 | $font-heading: var(--font-heading);
 4 | $font-body: var(--font-body);
 5 | $font-heading-base-size: var(--font-text-base-size);
 6 | $font-body-weight: var(--font-body-weight);
 7 | $font-body-style: var(--font-body-style);
 8 | $font-body-bold-weight: var(--font-body-bold-weight);
 9 | 
10 | html {
11 |     font-size: 16px;
12 | }
13 | 
14 | body {
15 |     font-family: $font-body;
16 |     font-weight: $font-body-weight;
17 |     font-style: $font-body-style;
18 | }
19 | 
20 | h1,
21 | h2,
22 | h3,
23 | h4,
24 | h5,
25 | h6 {
26 |     font-family: $font-heading;
27 | }
28 | 
29 | 


--------------------------------------------------------------------------------
/src/components/snippets/input-counter/input-counter.js:
--------------------------------------------------------------------------------
 1 | import './input-counter.scss';
 2 | 
 3 | function decrement(el) {
 4 |   const btn = el.target.parentNode.parentElement.querySelector('button[data-action="decrement"]');
 5 |   const target = btn.nextElementSibling;
 6 |   let value = Number(target.value);
 7 |   if (value > 1) {
 8 |     value--;
 9 |     target.value = value;
10 |   }
11 | }
12 | 
13 | function increment(el) {
14 |   const btn = el.target.parentNode.parentElement.querySelector('button[data-action="decrement"]');
15 |   const target = btn.nextElementSibling;
16 |   let value = Number(target.value);
17 |   value++;
18 |   target.value = value;
19 | }
20 | 
21 | const decrementButtons = document.querySelectorAll('button[data-action="decrement"]');
22 | const incrementButtons = document.querySelectorAll('button[data-action="increment"]');
23 | decrementButtons.forEach(btn => {
24 |   btn.addEventListener('click', decrement);
25 | });
26 | incrementButtons.forEach(btn => {
27 |   btn.addEventListener('click', increment);
28 | });


--------------------------------------------------------------------------------
/src/components/snippets/input-counter/input-counter.liquid:
--------------------------------------------------------------------------------
 1 | {{ 'bundle.input-counter.css' | asset_url | stylesheet_tag }}
 2 | 
 3 | <div class="custom-number-input flex ml-6 items-center h-10 w-32">
 4 |     <span class="mr-3">QTY</span>
 5 |     <div class="flex flex-row h-10 w-full rounded relative bg-transparent mt-1">
 6 |         <button type="button" id="btn-decrement" data-action="decrement"
 7 |             class="oh-full w-20 rounded-l cursor-pointer border-l border-t border-b border-gray-400 hover:bg-gray-200">
 8 |             <span class="m-auto text-2xl font-thin">−</span>
 9 |         </button>
10 |         <input type="number"
11 |             class="text-center w-full bg-white md:text-basecursor-default flex items-center border border-gray-400"
12 |             name="custom-input-number" value="1"
13 |             id="counterQty" />
14 |         <button type="button" id="btn-increment" data-action="increment"
15 |             class="h-full w-20 rounded-r cursor-pointer border-r border-t border-b border-gray-400 hover:bg-gray-200">
16 |             <span class="m-auto text-2xl font-thin">+</span>
17 |         </button>
18 |     </div>
19 | </div>
20 | 
21 | {{ 'bundle.input-counter.js' | asset_url | script_tag }}
22 | 


--------------------------------------------------------------------------------
/src/components/snippets/input-counter/input-counter.scss:
--------------------------------------------------------------------------------
 1 | input[type='number']::-webkit-inner-spin-button,
 2 | input[type='number']::-webkit-outer-spin-button {
 3 |     -webkit-appearance: none;
 4 |     margin: 0;
 5 | }
 6 | 
 7 | .custom-number-input input:focus {
 8 |     outline: none !important;
 9 | }
10 | 
11 | .custom-number-input button:focus {
12 |     outline: none !important;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/snippets/message/message.js:
--------------------------------------------------------------------------------
1 | // testing importing scss
2 | import './message.scss';
3 | 
4 | // Testing arrow functions
5 | const messageFunction = () => 'Message JS ES6 Function';
6 | console.log(messageFunction());
7 | 


--------------------------------------------------------------------------------
/src/components/snippets/message/message.liquid:
--------------------------------------------------------------------------------
1 | {{ 'bundle.message.css' | asset_url | stylesheet_tag }}
2 | 
3 | <div class="message_container">
4 |     <h1 class="message_heading">This is a message from a snippet</h1>
5 | </div>
6 | 
7 | {{ 'bundle.message.js' | asset_url | script_tag }}
8 | 


--------------------------------------------------------------------------------
/src/components/snippets/message/message.scss:
--------------------------------------------------------------------------------
 1 | .message_container {
 2 |     display: flex;
 3 |     color: #000;
 4 | }
 5 | .message_heading {
 6 |     color: purple;
 7 |     font-size: 2rem;
 8 |     text-align: right;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/snippets/pagination/accessible-pagination.liquid:
--------------------------------------------------------------------------------
 1 | {%- if paginate.pages > 1 -%}
 2 | <nav role="navigation" class="my-12">
 3 |     <ul class="flex justify-center pl-0 list-none rounded my-2">
 4 |         {%- if paginate.previous-%}
 5 |         <li class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-blue-700 border-r-0 ml-0 rounded-l hover:bg-gray-200">
 6 |             <a class="page-link" href="{{ paginate.previous.url }}">Previous</a>
 7 |         </li>
 8 |         {%- else -%}
 9 |         <li class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-gray-500 border-r-0 ml-0 rounded-l cursor-not-allowed">Previous</li>
10 |         {%- endif -%}
11 | 
12 |         {%- for part in paginate.parts -%}
13 |         {%- if part.is_link -%}
14 |         <li class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-blue-700 border-r-0 hover:bg-gray-200">
15 |             <a class="page-link" href="{{ part.url }}">{{ part.title }}</a>
16 |         </li>
17 |         {%- else -%}
18 |         {%- if part.title == paginate.current_page -%}
19 |         <li class="relative block py-2 px-3 leading-tight border border-gray-300 border-r-0 bg-blue-400 text-white">{{ part.title }}</li>
20 |         {%- else -%}
21 |         <li class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-blue-700 border-r-0 hover:bg-gray-200">{{ part.title }}</li>
22 |         {%- endif -%}
23 |         {%- endif -%}
24 |         {%- endfor -%}
25 | 
26 |         {%- if paginate.next -%}
27 |         <li class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-blue-700 rounded-r hover:bg-gray-200"><a class="page-link" href="{{ paginate.next.url }}">Next</a></li>
28 |         {%- else -%}
29 |         <li class="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-gray-500 border-r-0 ml-0 rounded-l cursor-not-allowed">Next</li>
30 |         {%- endif -%}
31 |     </ul>
32 | </nav>
33 | {%- endif -%}
34 | 


--------------------------------------------------------------------------------
/src/components/snippets/pagination/default-pagination.liquid:
--------------------------------------------------------------------------------
1 | <nav role="navigation" class="text-center my-6 mx-auto">
2 | {{ paginate | default_pagination: next: 'Older', previous: 'Newer' }}
3 | </nav>


--------------------------------------------------------------------------------
/src/components/snippets/responsive-bg-image/responsive-bg-image.liquid:
--------------------------------------------------------------------------------
 1 | {% comment %}
 2 |     It creates a style tag containing "background-image" properties to load the correct image depending on the resolution
 3 |     Dependencies:
 4 |     - Lazysizes plugin (https://github.com/aFarkas/lazysizes) which enable responsive image with faster load time and better performance.
 5 |     - Lazysizes Bgset (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset) To use responsive images on background-image (CSS)
 6 | 
 7 |     Accepts:
 8 |     - image: {Object} Image object
 9 | 
10 |     Usage:
11 |     In your liquid template file, copy the following line
12 | 
13 |     <div class="lazyload" data-bgset="{% include 'responsive-bg-image', image: article.image %}"></div>
14 | {% endcomment %}
15 | {%- if image != blank -%}
16 |   {%- if image.width > 180 -%}{{ image | img_url: '180x' }} 180w {{ 180 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
17 |   {%- if image.width > 360 -%}{{ image | img_url: '360x' }} 360w {{ 360 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
18 |   {%- if image.width > 540 -%}{{ image | img_url: '540x' }} 540w {{ 540 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
19 |   {%- if image.width > 720 -%}{{ image | img_url: '720x' }} 720w {{ 720 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
20 |   {%- if image.width > 900 -%}{{ image | img_url: '900x' }} 900w {{ 900 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
21 |   {%- if image.width > 1080 -%}{{ image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
22 |   {%- if image.width > 1296 -%}{{ image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
23 |   {%- if image.width > 1512 -%}{{ image | img_url: '1512x' }} 1512w {{ 1512 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
24 |   {%- if image.width > 1728 -%}{{ image | img_url: '1728x' }} 1728w {{ 1728 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
25 |   {%- if image.width > 1944 -%}{{ image | img_url: '1944x' }} 1944w {{ 1944 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
26 |   {%- if image.width > 2160 -%}{{ image | img_url: '2160x' }} 2160w {{ 2160 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
27 |   {%- if image.width > 2376 -%}{{ image | img_url: '2376x' }} 2376w {{ 2376 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
28 |   {%- if image.width > 2592 -%}{{ image | img_url: '2592x' }} 2592w {{ 2592 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
29 |   {%- if image.width > 2808 -%}{{ image | img_url: '2808x' }} 2808w {{ 2808 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
30 |   {%- if image.width > 3024 -%}{{ image | img_url: '3024x' }} 3024w {{ 3024 | divided_by: image.aspect_ratio | round }}h,{%- endif -%}
31 |   {%- assign image_size = image.width | append: 'x' -%}
32 |   {{ image | img_url: image_size }} {{ image.width }}w {{ image.height }}h
33 | {%- endif -%}
34 | 


--------------------------------------------------------------------------------
/src/components/snippets/responsive-image/responsive-image.liquid:
--------------------------------------------------------------------------------
 1 | {%- comment -%}
 2 |     It creates a style tag and it restricts an image from growing larger than its max resolution.
 3 | 
 4 |     Dependencies:
 5 |     - Lazysizes plugin (https://github.com/aFarkas/lazysizes) which enable responsive image with faster load time and better performance.
 6 |     - Lazysizes Responsive Images as a Service (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias) To load the correct image size with our CDN
 7 |     - Lazysizes Bgset (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset) To use responsive images on background-image (CSS)
 8 | 
 9 |     Accepts:
10 |     - max_width: {Number} Max width of the image container
11 |     - max_height: {Number} Max height of the image container
12 |     - image: {Object} Image object
13 |     - image_class: {String} class name of the <img />
14 |     - image_attributes: {String}  additional HTML attributes of the <img />
15 |     - wrapper_class: {String} class name of the <div> wrapper
16 |     - wrapper_attributes: {String} additional HTML attributes of the <div> wrapper
17 | 
18 |     Usage:
19 |     In your liquid template file, copy the following line
20 |     - {% include 'responsive-image' with image: featured_image, image_class: "css-class", wrapper_class: "wrapper-css-class", max_width: 700, max_height: 800 %}
21 | {%- endcomment -%}
22 | 
23 | {%- comment -%} Added incremental number to avoid conflict styling code when the same images are using this snippet {%- endcomment -%}
24 | {%- capture responsive_image_counter %}{% increment responsive_image_counter %}{% endcapture -%}
25 | 
26 | <style>
27 |   {%- comment -%}
28 |     The image aspect ratio tells us the orientation of the image:
29 |     - less than 1.0 is portrait
30 |     - exactly 1.0 is square
31 |     - greater than 1.0 is landscape
32 |   {%- endcomment -%}
33 |   {%- if image.aspect_ratio <= 1 -%}
34 |     {%- assign max_height_image = image.height | at_most: max_height -%}
35 |     {%- assign max_width_image = max_height_image | times: image.aspect_ratio -%}
36 |   {%- else -%}
37 |     {%- assign max_width_image = image.width | at_most: max_width -%}
38 |     {%- assign max_height_image = max_width_image | divided_by: image.aspect_ratio -%}
39 |   {%- endif -%}
40 | 
41 |   #Image-{{ image.id }}-{{ responsive_image_counter }} {
42 |     max-width: {{ max_width_image }}px;
43 |     max-height: {{ max_height_image }}px;
44 |   }
45 |   #ImageWrapper-{{ image.id }}-{{ responsive_image_counter }} {
46 |     max-width: {{ max_width_image }}px;
47 |   }
48 | 
49 |   #ImageWrapper-{{ image.id }}-{{ responsive_image_counter }}::before {
50 |     {%- comment -%}
51 |       When you change the window screen width, we want to make sure that the container's size is proportionally calculated.
52 |       Note regarding padding percentage: The percentage is calculated with respect to the width of the generated box's containing block (source: http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties)
53 |     {%- endcomment -%}
54 |     padding-top:{{ max_height_image | divided_by: max_width_image | times: 100}}%;
55 |   }
56 | </style>
57 | 
58 | {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
59 | 
60 | {%- comment -%} Limit image widths to valid options based on image.width {%- endcomment -%}
61 | {%- assign image_widths = '180,360,540,720,900,1080,1296,1512,1728,1944,2160,2376,2592,2808,3024' | split: ',' -%}
62 | {%- capture image_widths -%}
63 |   {%- for width in image_widths -%}
64 |     {%- comment -%} Check if image width is less or equal to width {%- endcomment -%}
65 |     {%- assign width_num = width | plus: 0 | round -%}
66 |     {%- if image.width >= width_num -%}{{ width_num }},{%- endif -%}
67 |   {%- endfor -%}
68 |   {{ image.width }}
69 | {%- endcapture -%}
70 | {%- assign image_widths = image_widths | strip -%}
71 | 
72 | <div id="ImageWrapper-{{ image.id }}-{{ responsive_image_counter }}" data-image-id="{{ image.id }}" class="responsive-image__wrapper {{ wrapper_class }}" {{ wrapper_attributes }}>
73 |   <img id="Image-{{ image.id }}-{{ responsive_image_counter }}"
74 |     class="responsive-image__image lazyload {{ image_class }}"
75 |     src="{{ image | img_url: '300x' }}"
76 |     data-src="{{ img_url }}"
77 |     data-widths="[{{ image_widths }}]"
78 |     data-aspectratio="{{ image.aspect_ratio }}"
79 |     data-sizes="auto"
80 |     tabindex="-1"
81 |     alt="{{ image.alt | escape }}"
82 |     {{ image_attributes }}
83 |   >
84 | </div>
85 | 
86 | <noscript>
87 |   <img class="{{ image_class }}" src="{{ image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
88 | </noscript>
89 | 


--------------------------------------------------------------------------------
/src/components/tailwind.css:
--------------------------------------------------------------------------------
1 | /* purgecss start ignore */
2 | @tailwind base;
3 | @tailwind components;
4 | /* purgecss end ignore */
5 | @tailwind utilities;
6 | 
7 | /* Add Custom CSS Below this line */
8 | 


--------------------------------------------------------------------------------
/src/components/templates/404.liquid:
--------------------------------------------------------------------------------
1 | <h1>{{ 'general.404.title' | t }}</h1>
2 | <p>{{ 'general.404.subtext_html' | t }}</p>
3 | 


--------------------------------------------------------------------------------
/src/components/templates/article.liquid:
--------------------------------------------------------------------------------
 1 | {% assign number_of_comments = article.comments_count %}
 2 | {% if comment and comment.created_at %}
 3 |   {% assign number_of_comments = article.comments_count %}
 4 | {% endif %}
 5 | 
 6 | <h1>{{ article.title }}</h1>
 7 | {% capture author %}<strong>{{ article.author }}</strong>{% endcapture %}
 8 | {% capture date %}<time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
 9 | {{ article.author }} @ {{ article.created_at }}
10 | 
11 | <div>{{ article.content }}</div>
12 | {% if blog.comments_enabled? %}
13 |   <h2>{{ number_of_comments }} comments</h2>
14 |   {% paginate article.comments by 5 %}
15 |     {% for comment in article.comments %}
16 |       <div>
17 |         <div>{{ comment.content }}</div>
18 |         {{ comment.author }} @ {{ comment.created_at }}
19 |       </div>
20 |     {% endfor %}
21 |     {% if paginate.pages > 1 %}
22 |       {{ paginate | default_pagination }}
23 |     {% endif %}
24 |   {% endpaginate %}
25 | 
26 |   <div>
27 |     {% form 'new_comment', article %}
28 |       {{ form.errors | default_errors }}
29 |       <label for="CommentAuthor">name</label>
30 |       <input type="text" name="comment[author]" id="CommentAuthor" placeholder="name" value="{{ form.author }}" autocapitalize="words">
31 | 
32 |       <label for="CommentEmail">email</label>
33 |       <input type="email" name="comment[email]" id="CommentEmail" placeholder="email" value="{{ form.email }}" autocorrect="off" autocapitalize="off">
34 | 
35 |       <label for="CommentBody">message</label>
36 |       <textarea name="comment[body]" id="CommentBody" placeholder="message">{{ form.body }}</textarea>
37 | 
38 |       <input type="submit" value="post">
39 |     {% endform %}
40 |   </div>
41 | {% endif %}
42 | 


--------------------------------------------------------------------------------
/src/components/templates/blog.liquid:
--------------------------------------------------------------------------------
 1 | {% paginate blog.articles by 5 %}
 2 | 
 3 | <h1>{{ blog.title }}</h1>
 4 | {% for article in blog.articles %}
 5 |   <div>
 6 |     <h2><a href="{{ article.url }}">{{ article.title }}</a></h2>
 7 |     {{ article.author }} @ {{ article.created_at }}
 8 |     <div>
 9 |       {% if article.excerpt.size > 0 %}
10 |         {{ article.excerpt }}
11 |       {% else %}
12 |         <p>{{ article.content | strip_html | truncatewords: 100 }}</p>
13 |       {% endif %}
14 |     </div>
15 |   </div>
16 | {% endfor %}
17 | 
18 | {% if paginate.pages > 1 %}
19 |   {{ paginate | default_pagination }}
20 | {% endif %}
21 | 
22 | {% endpaginate %}
23 | 


--------------------------------------------------------------------------------
/src/components/templates/cart.liquid:
--------------------------------------------------------------------------------
1 | {% if cart.item_count > 0 %}
2 | <h1 class="mx-2">Your Cart</h1>
3 | {% section 'cart' %}
4 | {% else %}
5 | <h2>cart</h2>
6 | Cart is empty
7 | {% endif %}


--------------------------------------------------------------------------------
/src/components/templates/collection.liquid:
--------------------------------------------------------------------------------
 1 | <section class="mx-3">
 2 |   {% paginate collection.products by 8 %}
 3 |     <h1>{{ collection.title }}</h1>
 4 |     <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-4">
 5 |     {% for product in collection.products %}
 6 |     <a class="mx-auto" href="{{ product.url | within: collection }}">
 7 |       <div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden my-6">
 8 |         <div class="px-4 py-2">
 9 |           <h2 class="text-gray-900 font-bold text-lg h-12 uppercase">{{ product.title }}</h2>
10 |           <p class="text-gray-600 text-sm mt-1">{{ product.description | strip_html | truncate: 40 }}</p>
11 |         </div>
12 |         <img class="h-56 w-full object-cover mt-2" src="{{ product.featured_image.src | img_url: 'large' }}"
13 |           alt="{{ product.featured_image.alt | escape }}" />
14 |         <div class="flex items-center justify-between p-4">
15 |           <h1 class="text-gray-900 font-bold text-xl">{{ product.price | money_without_trailing_zeros }}</h1>
16 |           <button
17 |             class="px-3 py-1 bg-gray-200 text-sm text-gray-900 font-semibold rounded">{%- if product.available -%}VIEW
18 |             ITEM{%- else -%}SOLD OUT{%- endif -%}</button>
19 |         </div>
20 |       </div>
21 |     </a>
22 |     {% else %}
23 |     <p>no matches</p>
24 |     {% endfor %}
25 |   </div>
26 |   {%- if settings.pagination and paginate.pages > 1 -%}
27 |     {%- comment -%}Pagination Control in Theme Settings{%- endcomment -%}
28 |     {%- if settings.pagination_type == 'accessable_pagination' -%}
29 |       {%- render 'accessible-pagination' with { paginate: paginate} -%}
30 |     {%- elsif settings.pagination_type == 'default_pagination' -%}
31 |       {%- render 'default-pagination' with { paginate: paginate} -%}
32 |     {%- endif -%}
33 |   {%- endif -%}
34 |   {% endpaginate %}
35 | </section>
36 | 


--------------------------------------------------------------------------------
/src/components/templates/customers/account.liquid:
--------------------------------------------------------------------------------
1 | <!-- /templates/customers/account.liquid -->
2 | 


--------------------------------------------------------------------------------
/src/components/templates/customers/activate_account.liquid:
--------------------------------------------------------------------------------
1 | <!-- /templates/customers/activate_account.liquid -->
2 | 


--------------------------------------------------------------------------------
/src/components/templates/customers/addresses.liquid:
--------------------------------------------------------------------------------
1 | <!-- /templates/customers/addresses.liquid -->
2 | 


--------------------------------------------------------------------------------
/src/components/templates/customers/login.liquid:
--------------------------------------------------------------------------------
1 | <!-- /templates/customers/login.liquid -->
2 | 


--------------------------------------------------------------------------------
/src/components/templates/customers/order.liquid:
--------------------------------------------------------------------------------
1 | <!-- /templates/customers/order.liquid -->
2 | 


--------------------------------------------------------------------------------
/src/components/templates/customers/register.liquid:
--------------------------------------------------------------------------------
1 | <!-- /templates/customers/register.liquid -->
2 | 


--------------------------------------------------------------------------------
/src/components/templates/customers/reset_password.liquid:
--------------------------------------------------------------------------------
1 | <!-- /templates/customers/reset_password.liquid -->
2 | 


--------------------------------------------------------------------------------
/src/components/templates/gift_card.liquid:
--------------------------------------------------------------------------------
 1 | {% layout none %}
 2 | <!doctype html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |   <meta name="viewport" content="width=device-width,initial-scale=1">
 7 |   <meta name="format-detection" content="telephone=no">
 8 |   {{ 'vendor/qrcode.js' | shopify_asset_url | script_tag }}
 9 | </head>
10 | <body>
11 |   <div id="qr-code"></div>
12 |   <script>
13 |     new QRCode(document.getElementById("qr-code"), {
14 |       text: "{{ gift_card.qr_identifier }}",
15 |       width: 120,
16 |       height: 120
17 |     });
18 |   </script>
19 |   <footer>
20 |     {% if gift_card.pass_url %}
21 |     <a href="{{ gift_card.pass_url }}">
22 |       <img id="apple-wallet-badge" src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="Add To Apple Wallet">
23 |     </a>
24 |     {% endif %}
25 |   </footer>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/src/components/templates/index.liquid:
--------------------------------------------------------------------------------
1 | {{ content_for_index }}


--------------------------------------------------------------------------------
/src/components/templates/list-collections.liquid:
--------------------------------------------------------------------------------
 1 | <section class="mx-3">
 2 |   {%- paginate collections by 4 -%}
 3 |   {%- for collection in collections -%}
 4 |   {%- unless collection.handle == 'frontpage' -%}
 5 |   {%- capture collection_title -%}{{ collection.title | escape }}{%- endcapture -%}
 6 |   <a href="{{ collection.url }}">{{ collection_title }} &rsaquo;</a>
 7 |   <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-6">
 8 |     {%- for product in collection.products limit:4 -%}
 9 |     <a class="mx-auto" href="{{ product.url | within: collection }}">
10 |       <div class="w-full max-w-sm mx-auto my-6 rounded-md shadow-md overflow-hidden">
11 |         <div class="px-5 py-3">
12 |           <img class="flex items-end justify-end" src="{{ product.featured_image.src | img_url: 'large' }}"
13 |             alt="{{ product.featured_image.alt | escape }}">
14 |           <h3 class="text-gray-700 h-12 uppercase">{{ product.title }}</h3>
15 |           {%- unless product.available -%}
16 |           <span class="text-gray-500 mt-2">sold out</span>
17 |           {%- endunless -%}
18 |         </div>
19 |       </div>
20 |     </a>
21 |     {%- endfor -%}
22 |   </div>
23 |   {%- endunless -%}
24 |   {%- endfor -%}
25 | 
26 |   {%- if settings.pagination and paginate.pages > 1 -%}
27 |   {%- comment -%}Pagination Control in Theme Settings{%- endcomment -%}
28 |     {%- if settings.pagination_type == 'accessable_pagination' -%}
29 |       {%- render 'accessible-pagination' with { paginate: paginate} -%}
30 |     {%- endif -%}
31 |     {%- if settings.pagination_type == 'default_pagination' -%}
32 |       {%- render 'default-pagination' with { paginate: paginate} -%}
33 |     {%- endif -%}
34 |   {%- endif -%}
35 |   {%- endpaginate -%}
36 | </section>
37 | 


--------------------------------------------------------------------------------
/src/components/templates/page.contact.liquid:
--------------------------------------------------------------------------------
 1 | <h1>{{ page.title }}</h1>
 2 | {% form 'contact' %}
 3 |   {% if form.posted_successfully? %} Thank you for your contact {% endif %}
 4 |   {{ form.errors | default_errors }}
 5 |   <label for="ContactFormName">name</label>
 6 |   <input type="text" id="ContactFormName" name="contact[name]">
 7 |   <label for="ContactFormEmail">email</label>
 8 |   <input type="email" id="ContactFormEmail" name="contact[email]">
 9 |   <label for="ContactFormPhone">phone</label>
10 |   <input type="tel" id="ContactFormPhone" name="contact[phone]">
11 |   <label for="ContactFormMessage">message</label>
12 |   <textarea rows="10" id="ContactFormMessage" name="contact[body]"></textarea>
13 |   <input type="submit" value="send">
14 | {% endform %}
15 | 


--------------------------------------------------------------------------------
/src/components/templates/page.liquid:
--------------------------------------------------------------------------------
1 | <h1>{{ page.title }}</h1>
2 | <div>{{ page.content }}</div>
3 | 


--------------------------------------------------------------------------------
/src/components/templates/product.liquid:
--------------------------------------------------------------------------------
1 | {% section 'product' %}
2 | 


--------------------------------------------------------------------------------
/src/components/templates/search.liquid:
--------------------------------------------------------------------------------
 1 | {% paginate search.results by 10 %}
 2 |   <form action="/search" method="get" role="search">
 3 |     <input type="search" name="q" value="{{ search.terms | escape }}">
 4 |     <button type="submit">search</button>
 5 |   </form>
 6 | 
 7 |   {% if search.performed %}
 8 |     {% for item in search.results %}
 9 |       {% if item.featured_image %}
10 |         <a href="{{ item.url | within: collection }}" title="{{ item.title | escape }}">
11 |           {{ item.featured_image.src | img_url: 'medium' | img_tag: item.featured_image.alt }}
12 |         </a>
13 |       {% endif %}
14 |       <h5>{{ item.title | link_to: item.url }}</h5>
15 |       <p>{{ item.content | strip_html | truncatewords: 50 }}</p>
16 |     {% else %}
17 |       no results
18 |     {% endfor %}
19 |   {% endif %}
20 | 
21 |   {% if paginate.pages > 1 %}{{ paginate | default_pagination }}{% endif %}
22 | {% endpaginate %}
23 | 


--------------------------------------------------------------------------------
/src/config/settings_data.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "current": "Default",
 3 |   "presets": {
 4 |     "Default": {
 5 |       "sections": {
 6 |         "banner-with-text": {
 7 |           "type": "banner-with-text",
 8 |           "blocks": {
 9 |             "banner-with-text-0": {
10 |               "type": "select"
11 |             },
12 |             "banner-with-text-1": {
13 |               "type": "select"
14 |             }
15 |           }
16 |         },
17 |         "featured-collection": {
18 |           "type": "featured-collection",
19 |           "settings": {
20 |             "collection": "frontpage"
21 |           }
22 |         },
23 |         "featured-product": {
24 |           "type": "featured-product"
25 |         }
26 |       },
27 |       "content_for_index": [
28 |         "banner-with-text",
29 |         "featured-collection",
30 |         "featured-product"
31 |       ]
32 |     }
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/config/settings_schema.json:
--------------------------------------------------------------------------------
 1 | [{
 2 |     "name": "theme_info",
 3 |     "theme_name": "Themekit Webpack",
 4 |     "theme_version": "1.0.0",
 5 |     "theme_author": "Mike Salvati",
 6 |     "theme_documentation_url": "https://github.com/Shopify/themekit",
 7 |     "theme_support_url": "https://github.com/Shopify/themekit/issues"
 8 |   },
 9 |   {
10 |     "name": "Developer",
11 |     "settings": [
12 |       {
13 |         "label": "Environment",
14 |         "id": "environment",
15 |         "type": "select",
16 |         "options": [
17 |           {
18 |             "label": "Development",
19 |             "value": "development"
20 |           },
21 |           {
22 |             "label": "Production",
23 |             "value": "production"
24 |           }
25 |         ],
26 |         "default": "production"
27 |       }
28 |     ]
29 |   },
30 |   {
31 |     "name": "Pagination Settings",
32 |     "settings": [{
33 |         "type": "checkbox",
34 |         "id": "pagination",
35 |         "label": "Enable Pagination",
36 |         "default": true,
37 |         "info": "Toggle ON/OFF Pagination"
38 |       },
39 |       {
40 |         "type": "radio",
41 |         "id": "pagination_type",
42 |         "label": "Pagination Type",
43 |         "options": [{
44 |             "value": "accessable_pagination",
45 |             "label": "Accessible Pagination"
46 |           },
47 |           {
48 |             "value": "default_pagination",
49 |             "label": "Default Pagination"
50 |           }
51 |         ],
52 |         "default": "accessable_pagination",
53 |         "info": "Select Pagination Style"
54 |       }
55 |     ]
56 |   },
57 |   {
58 |     "name": "Typography",
59 |     "settings": [
60 |       {
61 |         "type": "header",
62 |         "content": "Headings and Buttons"
63 |       },
64 |       {
65 |         "type": "font_picker",
66 |         "id": "font_heading",
67 |         "default": "archivo_n6",
68 |         "label": "Headings"
69 |       },
70 |       {
71 |         "type": "header",
72 |         "content": "Body Text"
73 |       },
74 |       {
75 |         "type": "font_picker",
76 |         "id": "font_body",
77 |         "default": "roboto_n4",
78 |         "label": "Body text"
79 |       }
80 |     ]
81 |   }
82 | ]
83 | 


--------------------------------------------------------------------------------
/src/locales/en.default.json:
--------------------------------------------------------------------------------
1 | {
2 |   "general": {
3 |     "404": {
4 |       "title": "Not found",
5 |       "subtext_html": "The page you were looking for does not exist"
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production';
 2 | 
 3 | module.exports = {
 4 |   mode: 'jit',
 5 |   purge: {
 6 |     enabled: mode === "development" ? false : true,
 7 |     content: ["./src/**/*.{js,liquid}"],
 8 |   },
 9 |   darkMode: false,
10 |   theme: {
11 |     extend: {},
12 |   },
13 |   variants: {},
14 |   plugins: [],
15 | }
16 | 


--------------------------------------------------------------------------------
/webpack.common.js:
--------------------------------------------------------------------------------
 1 | const glob = require('glob');
 2 | const { argv } = require('yargs');
 3 | const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 5 | const ESLintPlugin = require('eslint-webpack-plugin');
 6 | const CopyPlugin = require('copy-webpack-plugin');
 7 | 
 8 | const isDev = argv.mode === 'development';
 9 | const stats = isDev ? 'errors-warnings' : { children: false };
10 | 
11 | module.exports = {
12 |     stats: stats,
13 |     entry: glob.sync('./src/components/**/*.js').reduce((acc, path) => {
14 |         const entry = path.replace(/^.*[\\\/]/, '').replace('.js', '');
15 |         acc[entry] = path;
16 |         return acc;
17 |     }, {}),
18 |     module: {
19 |         rules: [
20 |             {
21 |                 test: /\.(png|svg|jpg|gif)$/,
22 |                 use: ['file-loader'],
23 |             },
24 |             {
25 |                 test: /\.(woff|woff2|eot|ttf|otf)$/,
26 |                 use: ['file-loader'],
27 |             },
28 |             {
29 |                 test: /\.js$/,
30 |                 exclude: /node_modules/,
31 |                 use: ['babel-loader'],
32 |             },
33 |         ],
34 |     },
35 |     plugins: [
36 |         new CleanWebpackPlugin({
37 |             cleanStaleWebpackAssets: false,
38 |         }),
39 |         new ESLintPlugin({
40 |             fix: true,
41 |         }),
42 |         new MiniCssExtractPlugin({
43 |             filename: '/assets/bundle.[name].css',
44 |         }),
45 |         new CopyPlugin({
46 |             patterns: [
47 |                 {
48 |                     from: 'src/assets/**/*',
49 |                     to: 'assets/',
50 |                     flatten: true,
51 |                 },
52 |                 {
53 |                     from: 'src/config/*.json',
54 |                     to: 'config/[name].[ext]',
55 |                 },
56 |                 {
57 |                     from: 'src/locales/*.json',
58 |                     to: 'locales/[name].[ext]',
59 |                 },
60 |             ],
61 |         }),
62 |     ].filter(Boolean),
63 |     optimization: {
64 |         runtimeChunk: { name: 'runtime' },
65 |     },
66 | };
67 | 


--------------------------------------------------------------------------------
/webpack.dev.js:
--------------------------------------------------------------------------------
  1 | const { merge } = require('we' + 'bpack-merge');
  2 | const glob = require('glob');
  3 | const common = require('./webpack.common.js');
  4 | const path = require('path');
  5 | const CopyPlugin = require('copy-webpack-plugin');
  6 | const WebpackShellPluginNext = require('webpack-shell-plugin-next');
  7 | const { transformLiquid } = require('./shopify-dev-utils/transformLiquid');
  8 | 
  9 | const port = 9000;
 10 | const publicPath = `https://localhost:${port}/`;
 11 | 
 12 | module.exports = merge(common, {
 13 |     mode: 'development',
 14 |     devtool: 'inline-source-map',
 15 |     entry: glob.sync('./src/components/**/*.js').reduce(
 16 |         (acc, path) => {
 17 |             const entry = path.replace(/^.*[\\\/]/, '').replace('.js', '');
 18 |             acc[entry] = path;
 19 |             return acc;
 20 |         },
 21 |         { liquidDev: './shopify-dev-utils/liquidDev.entry.js' }
 22 |     ),
 23 |     output: {
 24 |         filename: 'assets/bundle.[name].js',
 25 |         hotUpdateChunkFilename: 'hot/[id].[fullhash].hot-update.js',
 26 |         hotUpdateMainFilename: 'hot/[fullhash].hot-update.json',
 27 |         path: path.resolve(__dirname, 'dist'),
 28 |         publicPath,
 29 |     },
 30 |     cache: false,
 31 |     module: {
 32 |         rules: [
 33 |             {
 34 |                 test: /\.liquid$/,
 35 |                 use: [
 36 |                     { loader: 'raw-loader', options: { esModule: false } },
 37 |                     {
 38 |                         loader: path.resolve(__dirname, 'shopify-dev-utils/liquidDev.loader.js'),
 39 |                         options: {
 40 |                             publicPath,
 41 |                             isSection(liquidPath) {
 42 |                                 const diff = path.relative(
 43 |                                     path.join(__dirname, './src/components/'),
 44 |                                     liquidPath
 45 |                                 );
 46 |                                 const componentType = diff.split(path.sep).shift();
 47 |                                 return componentType === 'sections';
 48 |                             },
 49 |                         },
 50 |                     },
 51 |                 ],
 52 |             },
 53 |             {
 54 |                 test: /\.(sc|sa|c)ss$/,
 55 |                 use: [
 56 |                     'style-loader',
 57 |                     {
 58 |                         loader: 'css-loader',
 59 |                         options: {
 60 |                             url: false,
 61 |                         },
 62 |                     },
 63 |                     'postcss-loader',
 64 |                     {
 65 |                         loader: 'sass-loader',
 66 |                         options: {
 67 |                             sourceMap: true,
 68 |                         },
 69 |                     },
 70 |                 ],
 71 |             },
 72 |         ],
 73 |     },
 74 |     plugins: [
 75 |         new WebpackShellPluginNext({
 76 |             onBuildStart: {
 77 |                 scripts: [
 78 |                     'echo -- Webpack build started 🛠',
 79 |                     'shopify-themekit watch --env=development',
 80 |                 ],
 81 |                 blocking: false,
 82 |                 parallel: true,
 83 |             },
 84 |             onBuildError: {
 85 |                 scripts: ['echo -- ☠️ Aw snap, Webpack build failed...'],
 86 |             },
 87 |             onBuildEnd: {
 88 |                 scripts: [
 89 |                     'echo -- Webpack build complete ✓',
 90 |                     'echo -- Building TailwindCSS...',
 91 |                     'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid',
 92 |                     'echo -- Minifying TailwindCSS',
 93 |                     'cleancss -o dist/assets/tailwind.min.css.liquid dist/assets/tailwind.css.liquid',
 94 |                     'echo -- Deploying to theme ✈️',
 95 |                     'shopify-themekit deploy --env=development',
 96 |                     'echo -- Deployment completed ✓',
 97 |                     'shopify-themekit open',
 98 |                 ],
 99 |                 blocking: true,
100 |                 parallel: false,
101 |             },
102 |         }),
103 |         new CopyPlugin({
104 |             patterns: [
105 |                 {
106 |                     from: 'src/components/**/*.liquid',
107 |                     to: '[folder]/[name].[ext]',
108 |                     flatten: true,
109 |                     transformPath(targetPath, absolutePath) {
110 |                         const relativePath = path.join(__dirname, 'src/components');
111 |                         const diff = path.relative(relativePath, absolutePath);
112 |                         const targetFolder = diff.split(path.sep)[0];
113 |                         return path.join(targetFolder, path.basename(absolutePath));
114 |                     },
115 |                     transform: transformLiquid(publicPath),
116 |                 },
117 |             ],
118 |         }),
119 |     ],
120 |     devServer: {
121 |         contentBase: path.join(__dirname, 'dist'),
122 |         publicPath: '/',
123 |         headers: {
124 |             'Access-Control-Allow-Origin': '*',
125 |             'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
126 |             'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
127 |         },
128 |         compress: true,
129 |         port,
130 |         https: true,
131 |         disableHostCheck: true,
132 |         hot: true,
133 |         overlay: true,
134 |         writeToDisk: true,
135 |     },
136 | });
137 | 


--------------------------------------------------------------------------------
/webpack.prod.js:
--------------------------------------------------------------------------------
 1 | const { merge } = require('webpack-merge');
 2 | const common = require('./webpack.common.js');
 3 | const CopyPlugin = require('copy-webpack-plugin');
 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 5 | const path = require('path');
 6 | 
 7 | module.exports = merge(common, {
 8 |     mode: 'production',
 9 |     output: {
10 |         filename: './assets/bundle.[name].js',
11 |         path: path.resolve(__dirname, 'dist'),
12 |     },
13 |     module: {
14 |         rules: [
15 |             {
16 |                 test: /\.(sc|sa|c)ss$/,
17 |                 use: [
18 |                     MiniCssExtractPlugin.loader,
19 |                     {
20 |                         loader: 'css-loader',
21 |                         options: {
22 |                             url: false,
23 |                         },
24 |                     },
25 |                     'postcss-loader',
26 |                     {
27 |                         loader: 'sass-loader',
28 |                         options: {
29 |                             sourceMap: true,
30 |                         },
31 |                     },
32 |                 ],
33 |             },
34 |         ],
35 |     },
36 |     plugins: [
37 |         new CopyPlugin({
38 |             patterns: [
39 |                 {
40 |                     from: 'src/components/**/*.liquid',
41 |                     to: '[folder]/[name].[ext]',
42 |                     flatten: true,
43 |                     transformPath(targetPath, absolutePath) {
44 |                         const relativePath = path.join(__dirname, 'src/components');
45 |                         const diff = path.relative(relativePath, absolutePath);
46 |                         const targetFolder = diff.split(path.sep)[0];
47 |                         return path.join(targetFolder, path.basename(absolutePath));
48 |                     },
49 |                     transform: undefined,
50 |                 },
51 |             ],
52 |         }),
53 |     ].filter(Boolean),
54 | });
55 | 


--------------------------------------------------------------------------------