v2.3.1

Author: sergejcodes

.config/.stylelintrc.js

@@ -2,19 +2,22 @@ module.exports = {
   extends: 'stylelint-config-recommended',
   plugins: [
     /**
+     * add plugins
      * docs: https://stylelint.io/user-guide/configure#plugins
      */
-    // 'stylelint-scss' // not included by default, add with a package manager
+    // 'stylelint-scss' // stylelint by itself supports SCSS syntax very well
   ],
   ignoreFiles: [
     /**
+     * ignore certain files
      * docs: https://stylelint.io/user-guide/configure#ignorefiles
      */
     // 'my-file.css',
     // '**/my-directory/*.css'
   ],
   rules: {
     /**
+     * add custom rules
      * docs: https://stylelint.io/user-guide/rules/list
      */
     'at-rule-no-unknown': [

.config/plugins/shopify/theme.init.js

@@ -28,7 +28,7 @@ if (Object.keys(options).length < 4) {
 }
 
 if (!options.env.match(/^(dev|live)$/)) {
-  console.error(chalk.red(`env should be ${chalk.inverse('dev')} or ${chalk.inverse('live')}`))
+  console.error(chalk.red(`env should be ${chalk.inverse(' dev ')} or ${chalk.inverse(' live ')}`))
   process.exit()
 }
 
@@ -44,7 +44,7 @@ let themeId // assigned after remote initialization
 const initTheme = async () => {
   // initialize empty theme on shopify store
   try {
-    const response  = await axios.post(
+    const response = await axios.post(
       `https://${options.store}/admin/api/2020-10/themes.json`,
       { theme: { name: options.name } },
       { headers: { 'X-Shopify-Access-Token': options.password } }

README.md

@@ -141,7 +141,7 @@ $ npm run shopify:init -- --password [your-api-password] --store [your-store.mys
 4. Start developing:
 ```sh
 $ npm run start
-$ npm run open:dev # open store url in default browser
+$ npm run open:dev # open/preview theme in default browser
 ```
 <!-- getting started (end) -->
 
@@ -161,9 +161,9 @@ $ npm run deploy:live -- --allow-live
 ```
 
 ### Teams
-The `shopify:init` task always creates a new theme with a unique ID on the provided store. Sometimes it can be useful to connect to an existing initialized theme (e.g. when multiple people deploy to the same live environment).
+The `shopify:init` task always creates a new theme with a unique ID for the provided store. Sometimes it can be useful to connect to an existing initialized theme (e.g. when multiple people deploy to the same live environment).
 
-1. Run the following command to list all themes on the provided store and write down the ID for the theme in question:
+1. Run the following command to list all themes from the provided store and write down the ID for the theme in question:
 
 ```sh
 $ npm run shopify:themes -- --password [your-api-password] --store [your-store.myshopify.com]
@@ -405,7 +405,7 @@ shopify-theme-lab/             📁 root of your Shopify Theme Lab project
 │   │   ├── .shopifyignore     📄 files and directories that won't be uploaded to Shopify
 │   │   └── ...
 │   ├── webpack/               📁 webpack configs
-│   │   ├── webpack.common.js  📄 webpack shared config used by development and production
+│   │   ├── webpack.common.js  📄 webpack shared config used in development and production
 │   │   ├── webpack.dev.js     📄 webpack development config
 │   │   └── webpack.prod.js    📄 webpack production config
 │   ├── .browserslistrc        📄 Browserslist config
@@ -438,18 +438,18 @@ shopify-theme-lab/             📁 root of your Shopify Theme Lab project
 | dev | bundle and watch for changes in `src/` files with webpack |
 | build | create minified production files for Shopify in `shopify/assets/` directory |
 | reloadr | run an HTTP server and WebSocket server for remote auto-reloading |
-| lint | run `lint:js` and `lint:css` tasks one after another |
+| lint | run `lint:js` and `lint:css` tasks in sequence |
 | lint:js | lint `.js` and `.vue` files inside the `src/` directory |
 | lint:css | lint the `<style></style>` section of `.vue` files, `.css`, `.sass` and `.scss` files inside the `src/` directory |
 | shopify:watch | watch for changes in the `shopify/` directory and upload to the dev store |
 | shopify:init | initialize a theme on remote Shopify store and create a Shopify config file for the specified environment |
-| shopify:themes | list all themes with IDs on the provided store. Takes two arguments `--password` and `--store` |
+| shopify:themes | list all themes with IDs from the provided store. Takes two arguments `--password` and `--store` |
 | deploy:dev | upload the `shopify/` directory to the dev store |
 | deploy:live | upload the `shopify/` directory to the live store |
 | settings:dev | download `settings_data.json` from the dev store |
 | settings:live | download `settings_data.json` from the live store |
-| open:dev | open the URL of the dev store |
-| open:live | open the URL of the live store |
+| open:dev | open/preview theme on the dev store |
+| open:live | open/preview theme on the live store |
 <!-- tasks (end) -->
 
 <!-- development environment concepts (start) -->

package-lock.json

@@ -2,7 +2,7 @@
   "name": "shopify-theme-lab",
   "description": "Customizable modular development environment for blazing-fast Shopify theme creation",
   "author": "Sergej Samsonenko <contact@sergej.codes>",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "license": "MIT",
   "repository": {
     "type": "git",

package.json

@@ -1,20 +1,24 @@
 <div class="container">
-  <a href="/">Logo</a>
+  <a href="{{ routes.root_url }}">
+    Logo
+  </a>
 
   {% render 'layout-menu' %}
 
   <div>
     {% if shop.customer_accounts_enabled %}
       {% if customer %}
-        <a href="/account">{{ 'layout.customer.account' | t }}</a>
+        <a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
         {{ 'layout.customer.logout' | t | customer_logout_link }}
       {% else %}
         {{ 'layout.customer.log_in' | t | customer_login_link }}
         {{ 'layout.customer.register' | t | customer_register_link }}
       {% endif %}
     {% endif %}
 
-    <a href="/cart">{{ 'layout.cart.title' | t }}</a>
+    <a href="{{ routes.cart_url }}">
+      {{ 'layout.cart.title' | t }}
+    </a>
   </div>
 </div>
 

shopify/sections/header.liquid

@@ -30,14 +30,25 @@
           </div>
         </render-my-component>
 
+        <!-- global mixin -->
+        <div>
+          <div class="shopify-theme-lab__subline">
+            Global Vue mixin
+          </div>
+
+          <div>
+            NODE_ENV: {% raw %}{{ env }}{% endraw %}
+          </div>
+        </div>
+
         <!-- global directive -->
         <div>
           <div class="shopify-theme-lab__subline">
             Global Vue directive
           </div>
 
           <div v-my-directive>
-            Check the web console!
+            this text
           </div>
         </div>
 
@@ -48,7 +59,7 @@
           </div>
 
           <div>
-            {% raw %}{{ 'this string' | my-filter }}{% endraw %}
+            {% raw %}{{ 'this text' | my-filter }}{% endraw %}
           </div>
         </div>
       </div>

shopify/snippets/vue-examples.liquid

@@ -2,7 +2,7 @@ export default {
   name: 'myDirective',
   directive: {
     inserted (el) {
-      console.log(`${el.innerText} “v-my-directive” was used on this element.`)
+      el.innerText = `“v-my-directive” was used on ${el.innerText}`
     }
   }
 }