├── .readme-img
    ├── cart.png
    ├── dynamic-product.jpg
    ├── product-list.jpg
    └── product.png
├── LICENSE
├── README.md
├── v1
    ├── add-to-cart
    │   ├── cart.html
    │   └── index.html
    ├── cart
    │   └── index.html
    ├── category-list
    │   └── index.html
    ├── order-status
    │   └── index.html
    ├── product-full
    │   └── index.html
    ├── product-search
    │   └── index.html
    ├── products-dynamic
    │   ├── README.md
    │   ├── cart.html
    │   ├── categories.html
    │   ├── index.html
    │   └── product.html
    ├── products-list
    │   └── index.html
    └── view-cart
    │   └── index.html
└── v2
    ├── add-to-cart
        ├── cart.html
        └── index.html
    ├── auth-button
        └── index.html
    ├── cart
        └── index.html
    ├── category-list
        └── index.html
    ├── order-status
        └── index.html
    ├── product-full
        └── index.html
    ├── product-search
        └── index.html
    ├── products-dynamic
        ├── README.md
        ├── cart.html
        ├── categories.html
        ├── index.html
        └── product.html
    ├── products-list
        └── index.html
    ├── user-settings
        └── index.html
    └── view-cart
        └── index.html


/.readme-img/cart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Reflow-HQ/examples/08a5c20a373e55a0c1e6821670967ddc3098a55a/.readme-img/cart.png


--------------------------------------------------------------------------------
/.readme-img/dynamic-product.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Reflow-HQ/examples/08a5c20a373e55a0c1e6821670967ddc3098a55a/.readme-img/dynamic-product.jpg


--------------------------------------------------------------------------------
/.readme-img/product-list.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Reflow-HQ/examples/08a5c20a373e55a0c1e6821670967ddc3098a55a/.readme-img/product-list.jpg


--------------------------------------------------------------------------------
/.readme-img/product.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Reflow-HQ/examples/08a5c20a373e55a0c1e6821670967ddc3098a55a/.readme-img/product.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 ReflowToolkit
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Reflow Examples
 2 | 
 3 | This repo contains a few examples which demonstrate what is possible with the [Reflow Ecommerce Toolkit](https://reflowhq.com). Browse this repo's directories to see the source code.
 4 | 
 5 | ## Product Page
 6 | 
 7 | ![product page](./.readme-img/product.png)
 8 | 
 9 | Demonstrates how the [Product](https://reflowhq.com/docs/product.html) component renders a page, complete with a media gallery and add to cart button.
10 | 
11 | [Demo](https://reflow-hq.github.io/examples/v2/product-full/index.html) | [Source Code](./v2/product-full)
12 | 
13 | ## Product List
14 | 
15 | ![product list](./.readme-img/product-list.jpg)
16 | 
17 | This example which shows a straightforward use of the [Product List](https://reflowhq.com/docs/product-list.html) component.
18 | 
19 | [Demo](https://reflow-hq.github.io/examples/v2/products-list/index.html) | [Source Code](./v2/products-list)
20 | 
21 | ## Shopping Cart
22 | 
23 | ![cart](./.readme-img/cart.png)
24 | 
25 | Shows how easy it is to combine a [Shopping Cart](https://reflowhq.com/docs/shopping-cart.html) and [Add to Cart](https://reflowhq.com/docs/add-to-cart.html) buttons.
26 | 
27 | [Demo](https://reflow-hq.github.io/examples/v2/cart/index.html) | [Source Code](./v2/cart)
28 | 
29 | ## Dynamic Product
30 | 
31 | ![dynamic product](./.readme-img/dynamic-product.jpg)
32 | 
33 | Demonstrates a full online store, by combining a Shopping Cart, Product List and Product. More info is available in the `products-dynamic` folder.
34 | 
35 | [Demo](https://reflow-hq.github.io/examples/v2/products-dynamic/index.html) | [Source Code](./v2/products-dynamic)


--------------------------------------------------------------------------------
/v1/add-to-cart/cart.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 |     <meta charset="utf-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <title>Shopping Cart</title>
 8 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 9 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
10 |   </head>
11 | 
12 |   <body>
13 | 
14 |     <ul class="nav shadow-sm d-flex justify-content-center">
15 |       <li class="nav-item"><a class="nav-link active" href="index.html">Products</a></li>
16 |       <li class="nav-item"><a class="nav-link active text-black">Cart</a></li>
17 |     </ul>
18 | 
19 |     <div class="container pt-5">
20 |       <div data-reflow-type="shopping-cart"></div>
21 |     </div>
22 | 
23 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/v1/add-to-cart/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Add to Cart Examples</title>
 7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 8 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
 9 |   </head>
10 | 
11 |   <body>
12 |     <ul class="nav shadow-sm d-flex justify-content-center">
13 |       <li class="nav-item"><a class="nav-link active text-black">Products</a></li>
14 |       <li class="nav-item"><a class="nav-link" href="cart.html">Cart</a></li>
15 |     </ul>
16 |     <div class="container pt-5">
17 | 
18 |       <h1>Add to Cart Examples</h1>
19 | 
20 |       <hr class="my-4">
21 | 
22 |       <p>Full example with quantities and variants.</p>
23 |       <div data-reflow-type="add-to-cart" data-reflow-product="458412058" data-reflow-shoppingcart-url="./cart.html"></div>
24 | 
25 |       <hr class="my-4">
26 | 
27 |       <p>Button, quantity and custom text.</p>
28 |       <div data-reflow-type="add-to-cart" data-reflow-product="277093884" data-reflow-show="button, quantity"
29 |         data-reflow-addtocart-text="Add Product 2" data-reflow-shoppingcart-url="./cart.html"></div>
30 | 
31 |         <hr class="my-4">
32 | 
33 |       <p>Button only, without a shopping cart url. Won't display a "See Cart" button in the notification.</p>
34 | 
35 |       <div data-reflow-type="add-to-cart" data-reflow-product="13156819" data-reflow-show="button"
36 |         data-reflow-addtocart-text="Add Product 3"></div>
37 | 
38 |     </div>
39 | 
40 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/v1/cart/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Shopping Cart</title>
 7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 8 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
 9 |   </head>
10 | 
11 |   <body>
12 |     <div class="hstack gap-1 p-3 justify-content-center shadow-sm">
13 |       <div data-reflow-type="add-to-cart" data-reflow-product="108661429" data-reflow-show="button" data-reflow-addtocart-text="Add Product 1"></div>
14 |       <div data-reflow-type="add-to-cart" data-reflow-product="277093884" data-reflow-show="button" data-reflow-addtocart-text="Add Product 2"></div>
15 |       <div data-reflow-type="add-to-cart" data-reflow-product="13156819" data-reflow-show="button" data-reflow-addtocart-text="Add Product 3"></div>
16 |     </div>
17 | 
18 |     <div class="container pt-5">
19 |       <div data-reflow-type="shopping-cart"></div>
20 |     </div>
21 | 
22 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/v1/category-list/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>All Categories</title>
 7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 8 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
 9 |   </head>
10 | 
11 |   <body>
12 |     <div class="container pt-5">
13 | 
14 |       <h3 class="mb-4">Categories (unstyled)</h3>
15 |       <div data-reflow-type="category-list"></div>
16 | 
17 |       <hr class="my-5">
18 | 
19 |       <h3 class="mb-4">Categories (horizontal-bar)</h3>
20 |       <div data-reflow-type="category-list" data-reflow-layout="horizontal-bar" data-reflow-category-link="https://example.com/?category={id}"></div>
21 | 
22 |     </div>
23 | 
24 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/v1/order-status/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Order Status</title>
 7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 8 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
 9 |   </head>
10 | 
11 |   <body>
12 | 
13 |     <div class="alert alert-primary text-center" role="alert"><span><strong>Tip: </strong>add <a href="?order_id=testing&secure_hash=testing">?order_id=testing&amp;secure_hash=testing</a> to see example data.</span></div>
14 | 
15 |     <div class="container pt-5 d-flex flex-column justify-content-center align-items-center">
16 |         <div data-reflow-type="order-status"></div>
17 |     </div>
18 | 
19 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/v1/product-full/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <title>Reflow Example</title>
 8 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 9 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
10 | </head>
11 | 
12 | <body>
13 |     <div class="container pt-5">
14 |         <div data-reflow-type="product" data-reflow-product="13156819"></div>
15 |     </div>
16 | 
17 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/v1/product-search/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Product Search</title>
 7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 8 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
 9 |   </head>
10 | 
11 |   <body>
12 |     <div class="container pt-5">
13 | 
14 |       <div data-reflow-type="product-search"></div>
15 | 
16 |       <hr class="my-5">
17 | 
18 |       <div data-reflow-type="product-list"></div>
19 | 
20 |     </div>
21 | 
22 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/v1/products-dynamic/README.md:
--------------------------------------------------------------------------------
 1 | # Dynamic Products Example
 2 | 
 3 | This example demonstrates how to link components together to create a fully featured store with products, categories and a shopping cart.
 4 | 
 5 | ## Dynamic Products
 6 | 
 7 | The [Products](https://reflowtoolkit.github.io/examples/v1/products-dynamic/index.html) example demonstrates how you can link a [Product List](https://reflowhq.com/docs/product-list.html) and a [Product](https://reflowhq.com/docs/product.html) component together, so that clicking an item in the list leads you to a full product page.
 8 | 
 9 | ### How it works
10 | 
11 | * Product List has the `data-reflow-product-link` attribute set to `./product.html?product={id}`. This instructs Reflow to wrap each list item in a link, and replace the `{id}` placeholder with the actual product id.
12 | * The product page looks for the `product` query parameter, and sets the `data-reflow-product` attribute on the tag on page load.
13 | 
14 | ## Dynamic Categories
15 | 
16 | In the [Categories](https://reflowtoolkit.github.io/examples/v1/products-dynamic/categories.html) example you can learn how to connect a [Category List](https://reflowhq.com/docs/category-list.html) and a [Product List](https://reflowhq.com/docs/product-list.html) component together. This creates a navigation menu for browsing all categories and products from the store.
17 | 
18 | ### How it works
19 | 
20 | * Category List has the `data-reflow-category-link` attribute set to `./index.html?category={id}` (the product list example page). This instructs Reflow to wrap each list item in a link, and replace the `{id}` placeholder with the actual category id.
21 | * The product list page looks for the `category` query parameter, and sets the `data-reflow-category` attribute on the tag on page load. It then lists all products from the specified category.
22 | 
23 | ## Shopping Cart
24 | 
25 | The [Cart](https://reflowtoolkit.github.io/examples/v1/products-dynamic/cart.html) example displays a shopping cart where you can see all the [Products](https://reflowhq.com/docs/product.html) that were added for purchase.
26 | 
27 | ### How it works
28 | 
29 | * The Product component has the `data-reflow-shoppingcart-url` attribute set to `./cart.html`.
30 | * This links the components together, so that when the **Add to Cart** button is pressed products are correctly added for purchase.


--------------------------------------------------------------------------------
/v1/products-dynamic/cart.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 |     <meta charset="utf-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <title>Shopping Cart</title>
 8 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 9 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
10 |   </head>
11 | 
12 |   <body>
13 | 
14 |     <ul class="nav shadow-sm d-flex justify-content-center">
15 |       <li class="nav-item"><a class="nav-link" href="index.html">Products</a></li>
16 |       <li class="nav-item"><a class="nav-link" href="categories.html">Categories</a></li>
17 |       <li class="nav-item"><a class="nav-link fw-bold text-black">Cart</a></li>
18 |     </ul>
19 | 
20 |     <div class="container pt-5">
21 |       <div data-reflow-type="shopping-cart"></div>
22 |     </div>
23 | 
24 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/v1/products-dynamic/categories.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>All Products</title>
 7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 8 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
 9 |   </head>
10 | 
11 |   <body>
12 |     <ul class="nav shadow-sm d-flex justify-content-center">
13 |       <li class="nav-item"><a class="nav-link" href="index.html">Products</a></li>
14 |       <li class="nav-item"><a class="nav-link fw-bold text-black">Categories</a></li>
15 |       <li class="nav-item"><a class="nav-link" href="cart.html">Cart</a></li>
16 |     </ul>
17 |     <div class="container pt-5">
18 | 
19 |       <h2 class="mb-4">Categories</h2>
20 |       <div data-reflow-type="category-list" data-reflow-category-link="./index.html?category={id}" data-reflow-layout="horizontal-bar"></div>
21 | 
22 |     </div>
23 | 
24 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/v1/products-dynamic/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>All Products</title>
 7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 8 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
 9 |   </head>
10 | 
11 |   <body>
12 |     <ul class="nav shadow-sm d-flex justify-content-center">
13 |       <li class="nav-item"><a class="nav-link fw-bold text-black">Products</a></li>
14 |       <li class="nav-item"><a class="nav-link" href="categories.html">Categories</a></li>
15 |       <li class="nav-item"><a class="nav-link" href="cart.html">Cart</a></li>
16 |     </ul>
17 |     <div class="container pt-5">
18 | 
19 |       <h2 class="mb-4">Products</h2>
20 |       <div id="product-list-comp" data-reflow-type="product-list" data-reflow-perpage="8" data-reflow-order="price_desc" 
21 |         data-reflow-layout="cards" data-reflow-product-link="./product.html?product={id}"></div>
22 | 
23 |     </div>
24 | 
25 |     <script>
26 | 
27 |       // Getting the category id from the URL and setting data-reflow-category 
28 |       // attribute dynamically.
29 | 
30 |       document.querySelector("#product-list-comp").dataset.reflowCategory = new URL(
31 |         location.href
32 |       ).searchParams.get("category");
33 |     </script>
34 | 
35 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/v1/products-dynamic/product.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 |     <meta charset="utf-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <title>Product Page</title>
 8 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 9 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
10 |   </head>
11 | 
12 |   <body>
13 | 
14 |     <ul class="nav shadow-sm d-flex justify-content-center">
15 |       <li class="nav-item"><a class="nav-link" href="index.html">Products</a></li>
16 |       <li class="nav-item"><a class="nav-link" href="categories.html">Categories</a></li>
17 |       <li class="nav-item"><a class="nav-link" href="cart.html">Cart</a></li>
18 |     </ul>
19 | 
20 |     <div class="container pt-5">
21 |       <!-- Since we don't pass a data-reflow-product parameter, the Product component will look for ?product=xxxx in the page URL. -->
22 |       <div data-reflow-type="product" data-reflow-shoppingcart-url="./cart.html" ></div>
23 | 
24 |       <h4 class="mt-5 mb-5">Similar Products</h4>
25 | 
26 |       <div id="similar-products" data-reflow-type="product-list" data-reflow-perpage="4" data-reflow-product-link="./product.html?product={id}" data-reflow-show="image,name,price" data-reflow-layout="cards">
27 |       </div>
28 | 
29 |       <script>
30 |           // Set Product List's data-reflow-similar-to attribute dynamically from the product id in the URL
31 |           let prodID = new URL(location.href).searchParams.get('product');
32 |           document.querySelector('#similar-products').dataset.reflowSimilarTo = prodID;
33 |       </script>
34 |     </div>
35 | 
36 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/v1/products-list/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>All Products</title>
 7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 8 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
 9 |   </head>
10 | 
11 |   <body>
12 |     <div class="container pt-5">
13 | 
14 |       <h2 class="mb-4">Products</h2>
15 |       <div data-reflow-type="product-list"></div>
16 | 
17 |     </div>
18 | 
19 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/v1/view-cart/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>View Cart</title>
 7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css" />
 8 |     <link href="https://cdn.reflowhq.com/v1/toolkit.min.css" rel="stylesheet" />
 9 |   </head>
10 | 
11 |   <body>
12 |     <div class="hstack gap-1 p-3 justify-content-center shadow-sm">
13 |       <div data-reflow-type="add-to-cart" data-reflow-product="108661429" data-reflow-show="button" data-reflow-addtocart-text="Add Product 1"></div>
14 |       <div data-reflow-type="add-to-cart" data-reflow-product="277093884" data-reflow-show="button" data-reflow-addtocart-text="Add Product 2"></div>
15 |       <div data-reflow-type="add-to-cart" data-reflow-product="13156819" data-reflow-show="button" data-reflow-addtocart-text="Add Product 3"></div>
16 |     </div>
17 |     
18 |     <div class="container pt-5 d-flex flex-column justify-content-center align-items-center">
19 | 
20 |         <!-- Example with an SVG icon -->
21 |         <div data-reflow-type="view-cart" data-reflow-summary-type="sidebar" data-reflow-shoppingcart-url="../products-dynamic/cart.html" class="mb-4">
22 |           <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
23 |               <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"></path>
24 |           </svg>
25 |         </div>
26 |         
27 |         <!-- Example with a dropdown summary. -->
28 |         <div data-reflow-type="view-cart" data-reflow-summary-type="dropdown" data-reflow-summary-position="left" data-reflow-shoppingcart-url="../products-dynamic/cart.html">View Cart</div>
29 |     </div>
30 | 
31 |     <script src="https://cdn.reflowhq.com/v1/toolkit.min.js" data-reflow-store="267418190" defer></script>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/v2/add-to-cart/cart.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>Shopping Cart</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <ul class="nav shadow-sm d-flex justify-content-center">
16 |       <li class="nav-item">
17 |         <a class="nav-link active" href="index.html">Products</a>
18 |       </li>
19 |       <li class="nav-item"><a class="nav-link active text-black">Cart</a></li>
20 |     </ul>
21 | 
22 |     <div class="container pt-5">
23 |       <div data-reflow-type="shopping-cart"></div>
24 |     </div>
25 | 
26 |     <script
27 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
28 |       data-reflow-project="267418190"
29 |       defer
30 |     ></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/v2/add-to-cart/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>Add to Cart Examples</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <ul class="nav shadow-sm d-flex justify-content-center">
16 |       <li class="nav-item">
17 |         <a class="nav-link active text-black">Products</a>
18 |       </li>
19 |       <li class="nav-item"><a class="nav-link" href="cart.html">Cart</a></li>
20 |     </ul>
21 |     <div class="container pt-5">
22 |       <h1>Add to Cart Examples</h1>
23 | 
24 |       <hr class="my-4" />
25 | 
26 |       <p>Full example with quantities and variants.</p>
27 |       <div
28 |         data-reflow-type="add-to-cart"
29 |         data-reflow-product="458412058"
30 |         data-reflow-shoppingcart-url="./cart.html"
31 |       ></div>
32 | 
33 |       <hr class="my-4" />
34 | 
35 |       <p>Button, quantity and custom text.</p>
36 |       <div
37 |         data-reflow-type="add-to-cart"
38 |         data-reflow-product="277093884"
39 |         data-reflow-show="button, quantity"
40 |         data-reflow-addtocart-text="Add Product 2"
41 |         data-reflow-shoppingcart-url="./cart.html"
42 |       ></div>
43 | 
44 |       <hr class="my-4" />
45 | 
46 |       <p>
47 |         Button only, without a shopping cart url. Won't display a "See Cart"
48 |         button in the notification.
49 |       </p>
50 | 
51 |       <div
52 |         data-reflow-type="add-to-cart"
53 |         data-reflow-product="13156819"
54 |         data-reflow-show="button"
55 |         data-reflow-addtocart-text="Add Product 3"
56 |       ></div>
57 |     </div>
58 | 
59 |     <script
60 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
61 |       data-reflow-project="267418190"
62 |       defer
63 |     ></script>
64 |   </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/v2/auth-button/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>Auth Button</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <div class="container pt-5">
16 |       <div
17 |         data-reflow-type="auth-button"
18 |         data-reflow-user-page-url="./user-settings.html"
19 |       ></div>
20 |     </div>
21 | 
22 |     <script
23 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
24 |       data-reflow-project="267418190"
25 |       defer
26 |     ></script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/v2/cart/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>Shopping Cart</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <div class="hstack gap-1 p-3 justify-content-center shadow-sm">
16 |       <div
17 |         data-reflow-type="add-to-cart"
18 |         data-reflow-product="108661429"
19 |         data-reflow-show="button"
20 |         data-reflow-addtocart-text="Add Product 1"
21 |       ></div>
22 |       <div
23 |         data-reflow-type="add-to-cart"
24 |         data-reflow-product="277093884"
25 |         data-reflow-show="button"
26 |         data-reflow-addtocart-text="Add Product 2"
27 |       ></div>
28 |       <div
29 |         data-reflow-type="add-to-cart"
30 |         data-reflow-product="13156819"
31 |         data-reflow-show="button"
32 |         data-reflow-addtocart-text="Add Product 3"
33 |       ></div>
34 |     </div>
35 | 
36 |     <div class="container pt-5">
37 |       <div data-reflow-type="shopping-cart"></div>
38 |     </div>
39 | 
40 |     <script
41 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
42 |       data-reflow-project="267418190"
43 |       defer
44 |     ></script>
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/v2/category-list/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>All Categories</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <div class="container pt-5">
16 |       <h3 class="mb-4">Categories (unstyled)</h3>
17 |       <div data-reflow-type="category-list"></div>
18 | 
19 |       <hr class="my-5" />
20 | 
21 |       <h3 class="mb-4">Categories (horizontal-bar)</h3>
22 |       <div
23 |         data-reflow-type="category-list"
24 |         data-reflow-layout="horizontal-bar"
25 |         data-reflow-category-link="https://example.com/?category={id}"
26 |       ></div>
27 |     </div>
28 | 
29 |     <script
30 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
31 |       data-reflow-project="267418190"
32 |       defer
33 |     ></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/v2/order-status/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>Order Status</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <div class="alert alert-primary text-center" role="alert">
16 |       <span
17 |         ><strong>Tip: </strong>add
18 |         <a href="?order_id=testing&secure_hash=testing"
19 |           >?order_id=testing&amp;secure_hash=testing</a
20 |         >
21 |         to see example data.</span
22 |       >
23 |     </div>
24 | 
25 |     <div
26 |       class="container pt-5 d-flex flex-column justify-content-center align-items-center"
27 |     >
28 |       <div data-reflow-type="order-status"></div>
29 |     </div>
30 | 
31 |     <script
32 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
33 |       data-reflow-project="267418190"
34 |       defer
35 |     ></script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/v2/product-full/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>Reflow Example</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <div class="container pt-5">
16 |       <div data-reflow-type="product" data-reflow-product="13156819"></div>
17 |     </div>
18 | 
19 |     <script
20 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
21 |       data-reflow-project="267418190"
22 |       defer
23 |     ></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/v2/product-search/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>Product Search</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <div class="container pt-5">
16 |       <div data-reflow-type="product-search"></div>
17 | 
18 |       <hr class="my-5" />
19 | 
20 |       <div
21 |         data-reflow-type="product-list"
22 |         data-reflow-show="image, name, excerpt, price, pagination"
23 |       ></div>
24 |     </div>
25 | 
26 |     <script
27 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
28 |       data-reflow-project="267418190"
29 |       defer
30 |     ></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/v2/products-dynamic/README.md:
--------------------------------------------------------------------------------
 1 | # Dynamic Products Example
 2 | 
 3 | This example demonstrates how to link components together to create a fully featured store with products, categories and a shopping cart.
 4 | 
 5 | ## Dynamic Products
 6 | 
 7 | The [Products](https://reflowtoolkit.github.io/examples/v2/products-dynamic/index.html) example demonstrates how you can link a [Product List](https://reflowhq.com/docs/product-list.html) and a [Product](https://reflowhq.com/docs/product.html) component together, so that clicking an item in the list leads you to a full product page.
 8 | 
 9 | ### How it works
10 | 
11 | * Product List has the `data-reflow-product-link` attribute set to `./product.html?product={id}`. This instructs Reflow to wrap each list item in a link, and replace the `{id}` placeholder with the actual product id.
12 | * The product page looks for the `product` query parameter, and sets the `data-reflow-product` attribute on the tag on page load.
13 | 
14 | ## Dynamic Categories
15 | 
16 | In the [Categories](https://reflowtoolkit.github.io/examples/v2/products-dynamic/categories.html) example you can learn how to connect a [Category List](https://reflowhq.com/docs/category-list.html) and a [Product List](https://reflowhq.com/docs/product-list.html) component together. This creates a navigation menu for browsing all categories and products from the store.
17 | 
18 | ### How it works
19 | 
20 | * Category List has the `data-reflow-category-link` attribute set to `./index.html?category={id}` (the product list example page). This instructs Reflow to wrap each list item in a link, and replace the `{id}` placeholder with the actual category id.
21 | * The product list page looks for the `category` query parameter, and sets the `data-reflow-category` attribute on the tag on page load. It then lists all products from the specified category.
22 | 
23 | ## Shopping Cart
24 | 
25 | The [Cart](https://reflowtoolkit.github.io/examples/v2/products-dynamic/cart.html) example displays a shopping cart where you can see all the [Products](https://reflowhq.com/docs/product.html) that were added for purchase.
26 | 
27 | ### How it works
28 | 
29 | * The Product component has the `data-reflow-shoppingcart-url` attribute set to `./cart.html`.
30 | * This links the components together, so that when the **Add to Cart** button is pressed products are correctly added for purchase.


--------------------------------------------------------------------------------
/v2/products-dynamic/cart.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>Shopping Cart</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <ul class="nav shadow-sm d-flex justify-content-center">
16 |       <li class="nav-item">
17 |         <a class="nav-link" href="index.html">Products</a>
18 |       </li>
19 |       <li class="nav-item">
20 |         <a class="nav-link" href="categories.html">Categories</a>
21 |       </li>
22 |       <li class="nav-item"><a class="nav-link fw-bold text-black">Cart</a></li>
23 |     </ul>
24 | 
25 |     <div class="container pt-5">
26 |       <div data-reflow-type="shopping-cart"></div>
27 |     </div>
28 | 
29 |     <script
30 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
31 |       data-reflow-project="267418190"
32 |       defer
33 |     ></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/v2/products-dynamic/categories.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>All Products</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <ul class="nav shadow-sm d-flex justify-content-center">
16 |       <li class="nav-item">
17 |         <a class="nav-link" href="index.html">Products</a>
18 |       </li>
19 |       <li class="nav-item">
20 |         <a class="nav-link fw-bold text-black">Categories</a>
21 |       </li>
22 |       <li class="nav-item"><a class="nav-link" href="cart.html">Cart</a></li>
23 |     </ul>
24 |     <div class="container pt-5">
25 |       <h2 class="mb-4">Categories</h2>
26 |       <div
27 |         data-reflow-type="category-list"
28 |         data-reflow-category-link="./index.html?category={id}"
29 |         data-reflow-layout="horizontal-bar"
30 |       ></div>
31 |     </div>
32 | 
33 |     <script
34 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
35 |       data-reflow-project="267418190"
36 |       defer
37 |     ></script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/v2/products-dynamic/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>All Products</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <ul class="nav shadow-sm d-flex justify-content-center">
16 |       <li class="nav-item">
17 |         <a class="nav-link fw-bold text-black">Products</a>
18 |       </li>
19 |       <li class="nav-item">
20 |         <a class="nav-link" href="categories.html">Categories</a>
21 |       </li>
22 |       <li class="nav-item"><a class="nav-link" href="cart.html">Cart</a></li>
23 |     </ul>
24 |     <div class="container pt-5">
25 |       <h2 class="mb-4">Products</h2>
26 |       <div
27 |         id="product-list-comp"
28 |         data-reflow-type="product-list"
29 |         data-reflow-perpage="8"
30 |         data-reflow-order="price_desc"
31 |         data-reflow-layout="cards"
32 |         data-reflow-product-link="./product.html?product={id}"
33 |       ></div>
34 |     </div>
35 | 
36 |     <script>
37 |       // Getting the category id from the URL and setting data-reflow-category
38 |       // attribute dynamically.
39 | 
40 |       document.querySelector("#product-list-comp").dataset.reflowCategory =
41 |         new URL(location.href).searchParams.get("category");
42 |     </script>
43 | 
44 |     <script
45 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
46 |       data-reflow-project="267418190"
47 |       defer
48 |     ></script>
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/v2/products-dynamic/product.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>Product Page</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <ul class="nav shadow-sm d-flex justify-content-center">
16 |       <li class="nav-item">
17 |         <a class="nav-link" href="index.html">Products</a>
18 |       </li>
19 |       <li class="nav-item">
20 |         <a class="nav-link" href="categories.html">Categories</a>
21 |       </li>
22 |       <li class="nav-item"><a class="nav-link" href="cart.html">Cart</a></li>
23 |     </ul>
24 | 
25 |     <div class="container pt-5">
26 |       <!-- Since we don't pass a data-reflow-product parameter, the Product component will look for ?product=xxxx in the page URL. -->
27 |       <div
28 |         data-reflow-type="product"
29 |         data-reflow-shoppingcart-url="./cart.html"
30 |         data-reflow-category-link="./index.html?category={id}"
31 |       ></div>
32 | 
33 |       <h4 class="mt-5 mb-5">Similar Products</h4>
34 | 
35 |       <div
36 |         id="similar-products"
37 |         data-reflow-type="product-list"
38 |         data-reflow-perpage="4"
39 |         data-reflow-product-link="./product.html?product={id}"
40 |         data-reflow-show="image,name,price"
41 |         data-reflow-layout="cards"
42 |       ></div>
43 | 
44 |       <script>
45 |         // Set Product List's data-reflow-similar-to attribute dynamically from the product id in the URL
46 |         let prodID = new URL(location.href).searchParams.get("product");
47 |         document.querySelector("#similar-products").dataset.reflowSimilarTo =
48 |           prodID;
49 |       </script>
50 |     </div>
51 | 
52 |     <script
53 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
54 |       data-reflow-project="267418190"
55 |       defer
56 |     ></script>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/v2/products-list/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>All Products</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <div class="container pt-5">
16 |       <h2 class="mb-4">Products</h2>
17 |       <div
18 |         data-reflow-type="product-list"
19 |         data-reflow-show="image, name, excerpt, price, pagination"
20 |       ></div>
21 |     </div>
22 | 
23 |     <script
24 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
25 |       data-reflow-project="267418190"
26 |       defer
27 |     ></script>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/v2/user-settings/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>User Settings</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <div class="container pt-5">
16 |       <div data-reflow-type="user-settings"></div>
17 |     </div>
18 | 
19 |     <script
20 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
21 |       data-reflow-project="267418190"
22 |       defer
23 |     ></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/v2/view-cart/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <title>View Cart</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.1/dist/litera/bootstrap.min.css"
10 |     />
11 |     <link href="https://cdn.reflowhq.com/v2/toolkit.min.css" rel="stylesheet" />
12 |   </head>
13 | 
14 |   <body>
15 |     <div class="hstack gap-1 p-3 justify-content-center shadow-sm">
16 |       <div
17 |         data-reflow-type="add-to-cart"
18 |         data-reflow-product="108661429"
19 |         data-reflow-show="button"
20 |         data-reflow-addtocart-text="Add Product 1"
21 |       ></div>
22 |       <div
23 |         data-reflow-type="add-to-cart"
24 |         data-reflow-product="277093884"
25 |         data-reflow-show="button"
26 |         data-reflow-addtocart-text="Add Product 2"
27 |       ></div>
28 |       <div
29 |         data-reflow-type="add-to-cart"
30 |         data-reflow-product="13156819"
31 |         data-reflow-show="button"
32 |         data-reflow-addtocart-text="Add Product 3"
33 |       ></div>
34 |     </div>
35 | 
36 |     <div
37 |       class="container pt-5 d-flex flex-column justify-content-center align-items-center"
38 |     >
39 |       <!-- Example with an SVG icon -->
40 |       <div
41 |         data-reflow-type="view-cart"
42 |         data-reflow-summary-type="sidebar"
43 |         data-reflow-shoppingcart-url="../products-dynamic/cart.html"
44 |         class="mb-4"
45 |       >
46 |         <svg
47 |           xmlns="http://www.w3.org/2000/svg"
48 |           width="1em"
49 |           height="1em"
50 |           fill="currentColor"
51 |           viewBox="0 0 16 16"
52 |         >
53 |           <path
54 |             d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"
55 |           ></path>
56 |         </svg>
57 |       </div>
58 | 
59 |       <!-- Example with a dropdown summary. -->
60 |       <div
61 |         data-reflow-type="view-cart"
62 |         data-reflow-summary-type="dropdown"
63 |         data-reflow-summary-position="left"
64 |         data-reflow-shoppingcart-url="../products-dynamic/cart.html"
65 |       >
66 |         View Cart
67 |       </div>
68 |     </div>
69 | 
70 |     <script
71 |       src="https://cdn.reflowhq.com/v2/toolkit.min.js"
72 |       data-reflow-project="267418190"
73 |       defer
74 |     ></script>
75 |   </body>
76 | </html>
77 | 


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