Merge pull request #58 from 3daddict/include-to-render-update

changed include to render on simple compnents, updated readme with SS…

Author: mike-diff

config.yml.example

@@ -9,6 +9,8 @@ development:
   store: 
   storefront_api_key: 
   directory: dist/
+  # Note: when first deploying to a new theme you may have to comment out the ignore files.
+  # Then after first upload uncomment them.
   ignore_files:
     - config/settings_data.json
     - "*.js"

readme.md

@@ -77,6 +77,8 @@ This project uses [TailwindCSS](https://tailwindcss.com/) `v2` a utility-first C
 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.
 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).
 
+**Note:** a quick fix with Chrome `chrome://flags/#allow-insecure-localhost` change to enable
+
 ## HMR (Hot Module Reloading)
 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.
 
@@ -95,29 +97,22 @@ If you don’t want any of your tags to print whitespace, as a general rule you
 
 ## Variable Scope & Components
 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.
-In this file we assign some default variables.
-```html
-{%- assign id = "defaultModal" -%}
-{%- assign openModalBtn = "defaultOpenButton" -%}
-{%- assign title = "Modal Title" -%}
-{%- assign body = "Modal Body" -%}
-```
-Use this `dynamic-modal.liquid` component by creating a trigger element like a button with an id.
+Use this `dynamic-modal.liquid` component by creating a trigger element or function like a button with an id.
 ```html
 <button id="testButton">Trigger Modal</button>
 ```
 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.
 ```html
-{%- include "dynamic-modal", 
-    id: "homePageTestModal",
-    openModalBtn: "testButton",
-    title: "Testing Title Variable",
-    body: "Testing the Dynamic Body Of the Modal...",
-    buttonOne: "Alert",
-    buttonOneFunction: "alert('Q: Do you struggle with impostor syndrome? Me: no I’m great at it')"
-    buttonTwo: "Close",
-    buttonTwoStyle: "text-white bg-red-500 hover:bg-red-700"
-    buttonTwoFunction: "modal.style.display = 'none';"
+{%- render 'dynamic-modal', 
+  id: "testModal", 
+  openModalBtn: "modalBtn",
+  title: "Modal Title",
+  body: "Modal Body",
+  buttonOne: "Alert",
+  buttonOneFunction: "alert('Q: Do you struggle with impostor syndrome? Me: no I’m great at it')"
+  buttonTwo: "Close",
+  buttonTwoStyle: "text-white bg-red-500 hover:bg-red-700"
+  buttonTwoFunction: "modal.style.display = 'none';"
 -%}
 ```
-Read more on this [Shopify Variable Scopes](https://ellodave.dev/blog/2019/5/24/shopify-variable-scopes/). 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)
+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)

src/components/layout/theme.liquid

@@ -30,7 +30,7 @@
 
   {%- comment -%}Varibles{%- endcomment -%}
   {{ content_for_header }}
-  {% include 'global-css' %}
+  {% render 'global-css' %}
 
   {{ 'tailwind.min.css' | asset_url | stylesheet_tag }}
   {{ 'bundle.global-css.css' | asset_url | stylesheet_tag }}

src/components/sections/header/header.liquid

@@ -29,7 +29,7 @@
         {%- for link in linklists[section.settings.menu].links -%}
         {%- if link.links != blank -%}
         <li class="inline-block mt-0 mr-4">
-          <a href="{{ link.url }}">{{ link.title }}{%- include 'icon-arrow-down' -%}</a>
+          <a href="{{ link.url }}">{{ link.title }}</a>
           <ul class="text-sm flex-grow">
             {%- for childlink in link.links -%}
             <li class="inline-block mt-0 mr-4"><a href="{{ childlink.url }}">{{ childlink.title }}</a>

src/components/sections/product/product.liquid

@@ -52,7 +52,7 @@
             </div>
           </div>
           <div class="mt-3 pb-5 border-b-2 border-gray-200 mb-5">
-            {% include 'input-counter' %}
+            {% render 'input-counter' %}
           </div>
           <div class="flex">
             <span

src/components/snippets/dynamic-modal/dynamic-modal.liquid

@@ -1,30 +1,32 @@
 {%- comment -%}
 This snippet uses Variable Scope and can be re-used throughout the theme.
-To use this snippet in sections, add {%- include, key: value -%} with some assigned variables.
+To use this snippet in sections, add {%- render, key: value -%} with assigned variables.
 For Example:
+This is the target button id that will open the modal.
+<button id="modalBtn">TEST MODAL</button>
 =========================================================================
-{%- include "dynamic-modal",
-    id: "homePageTestModal",
-    openModalBtn: "testButton",
-    title: "Testing Title Variable",
-    body: "Testing the Dynamic Body Of the Modal..."
+Here is a render tag example to use in the section with some example variables declared.
+Note the openModalBtn matches the button element above which triggers the modal in this example.
+=========================================================================
+{%- render 'dynamic-modal', 
+  id: "testModal", 
+  openModalBtn: "modalBtn",
+  title: "Modal Title",
+  body: "Modal Body",
+  buttonOne: "Button One",
+  buttonOneStyle: "text-white bg-blue-500 hover:bg-blue-700",
+  buttonOneFunction: "javascript:void(0);",
+  buttonTwo: "Button Two",
+  buttonTwoStyle: "text-white bg-transparent hover:bg-blue-700 text-blue-500 hover:text-white border border-blue-500 hover:border-transparent",
+  buttonTwoFunction: "javascript:void(0);" 
 -%}
 =========================================================================
-These 👆 will change the default assignments below 👇
+id, openModalBtn, title and body are required. If you don't want buttons make the value = null.
+=========================================================================
 {%- endcomment -%}
-{%- assign id = "defaultModal" -%}
-{%- assign openModalBtn = "defaultOpenButton" -%}
-{%- assign title = "Modal Title" -%}
-{%- assign body = "Modal Body" -%}
-{%- assign buttonOne = null -%}
-{%- assign buttonOneStyle = "text-white bg-blue-500 hover:bg-blue-700" -%}
-{%- assign buttonOneFunction = "javascript:void(0);" -%}
-{%- assign buttonTwo = null -%}
-{%- assign buttonTwoStyle = "text-white bg-transparent hover:bg-blue-700 text-blue-500 hover:text-white border border-blue-500 hover:border-transparent" -%}
-{%- assign buttonTwoFunction = "javascript:void(0);" -%}
 
 <section class="hidden" id="{{ id }}">
-    <div class="flex items-center justify-center fixed left-0 bottom-0 w-full h-full bg-black bg-opacity-75" id="modalContainer">
+    <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">
         <div class="bg-white rounded-lg w-1/2">
             <div class="flex flex-col items-start p-4">
                 <div class="flex items-center w-full">

src/components/templates/collection.liquid

@@ -26,9 +26,9 @@
   {%- if settings.pagination and paginate.pages > 1 -%}
     {%- comment -%}Pagination Control in Theme Settings{%- endcomment -%}
     {%- if settings.pagination_type == 'accessable_pagination' -%}
-      {% include 'accessible-pagination' %}
+      {%- render 'accessible-pagination' with { paginate: paginate} -%}
     {%- elsif settings.pagination_type == 'default_pagination' -%}
-      {% include 'default-pagination' %}
+      {%- render 'default-pagination' with { paginate: paginate} -%}
     {%- endif -%}
   {%- endif -%}
   {% endpaginate %}

src/components/templates/list-collections.liquid

@@ -26,10 +26,10 @@
   {%- if settings.pagination and paginate.pages > 1 -%}
   {%- comment -%}Pagination Control in Theme Settings{%- endcomment -%}
     {%- if settings.pagination_type == 'accessable_pagination' -%}
-    {% include 'accessible-pagination' %}
+      {%- render 'accessible-pagination' with { paginate: paginate} -%}
     {%- endif -%}
     {%- if settings.pagination_type == 'default_pagination' -%}
-    {% include 'default-pagination' %}
+      {%- render 'default-pagination' with { paginate: paginate} -%}
     {%- endif -%}
   {%- endif -%}
   {%- endpaginate -%}