render tag completed, readme updated, fixed #45

Author: mike-diff

readme.md

@@ -97,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/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">