added netlify directory and netlify.toml to static/11ty-store/ - see …

…CHANGELOG

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ## [0.0.1-rtw.15] - Q2/2024
+Apr-16 - Missing netlify.toml file and netlify directory, I suspect. I placed it in both the directory and build directory e.g. static/11ty-store/petstuff - Note this is no longer an 11ty-store. Also, failing this there's apparently also Hydrogen-react https://shopify.dev/docs/api/hydrogen-react  
 Apr-15 - Figured it out - I think. Let's see  
 Apr-15 - Left out the hidden files in the new 11ty-store. Re-instated them, now Netlify should build the store ok  
 Apr-15 - Moved /static/11ty-store/ to /static/11ty-store.old and placed a shopify,hygraph website in a new 11ty-store directory  

static/11ty-store/README.md

@@ -1,6 +1,8 @@
 # Hydrogen template: Skeleton
 
-Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with [Remix](https://remix.run/), Shopify’s full stack web framework. This template contains a **minimal setup** of components, queries and tooling to get started with Hydrogen.
+Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with [Remix](https://remix.run/), 
+Shopify’s full stack web framework. 
+This template contains a **minimal setup** of components, queries and tooling to get started with Hydrogen.
 
 [Check out Hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen)
 [Get familiar with Remix](https://remix.run/docs/en/v1)

static/11ty-store/netlify.toml

@@ -0,0 +1,22 @@
+[build] 
+  publish = "dist"
+  command = "npm run build"
+
+[dev] 
+  publish = "./dist"
+  command = "npm run serve"
+
+[[redirects]]
+  from = "/api/*"
+  to = "/.netlify/functions/:splat"
+  status = 200
+
+[[redirects]]
+  from = "/cart"
+  to = "/.netlify/functions/cart-view"
+  status = 200
+
+
+[context.production]
+  environment = { SHOPIFY_API_ENDPOINT = "https://shop.datro.xyz/api/unstable/graphql.json", SHOPIFY_STOREFRONT_API_TOKEN = "e9c4dbd5f540d4cefcb2518f7648caf9" }
+

static/11ty-store/netlify/functions/add-to-cart.js

@@ -0,0 +1,79 @@
+/**
+ * Add to Cart API Endpoint
+ *
+ * * Purpose: Add a single item to the cart
+ * @param {string} cartId (Optional)
+ * @param {string} itemId - Usually it's the product variant id
+ * @param {number} quantity - Minimum 1
+ *
+ * @returns {object} cart that contains lines of items inside
+ * See './utils/createCartWithItem' for the data structure
+ *
+ * Examples:
+ *
+ * If a cart does not exist yet,
+ * ```
+ * fetch('/.netlify/functions/add-to-cart', {
+ *   method: 'POST',
+ *   body: JSON.stringify({
+ *     cardId: '', // cardId can also be omitted if desired
+ *     itemId: 'Z2lkOi8vc2hvcGlmFyaWFudC8zOTc0NDEyMDEyNzY5NA==',
+ *     quantity: 4
+ *   })
+ * })
+ * ```
+ *
+ * Add item to an existing cart
+ * ```
+ * fetch('/.netlify/functions/add-to-cart', {
+ *   method: 'POST',
+ *   body: JSON.stringify({
+ *     cartId: 'S9Qcm9kdWN0VmFyaWFudC8zOTc0NDEyMDEyNzY5NA',
+ *     itemId: 'Z2lkOi8vc2hvcGlmFyaWFudC8zOTc0NDEyMDEyNzY5NA==',
+ *     quantity: 4
+ *   })
+ * })
+ * ```
+ */
+
+const { createCartWithItem } = require('./utils/createCartWithItem')
+const { addItemToCart } = require('./utils/addItemToCart')
+
+exports.handler = async (event) => {
+  let { cartId, itemId, quantity } = JSON.parse(event.body)
+  quantity = parseInt(quantity);
+
+
+  if (cartId) {
+    console.log('--------------------------------')
+    console.log('Adding item to existing cart...')
+    console.log('--------------------------------')
+
+    const shopifyResponse = await addItemToCart({
+      cartId,
+      itemId,
+      quantity,
+    })
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify(shopifyResponse.cartLinesAdd.cart),
+    }
+  } else {
+    console.log('--------------------------------')
+    console.log('Creating new cart with item...')
+    console.log('--------------------------------')
+
+    console.log(itemId, quantity);
+
+    const createCartResponse = await createCartWithItem({
+      itemId,
+      quantity,
+    })
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify(createCartResponse.cartCreate.cart),
+    }
+  }
+}

static/11ty-store/netlify/functions/cart-view.js

@@ -0,0 +1,202 @@
+const fetch = require('node-fetch');
+
+
+exports.handler = async (event) => {
+
+  const rootURL = process.env.URL || "https://localhost:8888";
+
+  const cartId = event.queryStringParameters.cartId;
+  const result = await fetch(`${rootURL}/api/get-cart`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      cartId: cartId
+    }),
+  })
+  .then((res) =>{
+    return res.json()
+  });
+
+
+  const itemTotal = function(price, quantity) {
+    const totalPrice = Number(price) * Number(quantity)
+    return totalPrice.toFixed(2)
+  }
+
+
+  const cartItem = (cartId, item) => {
+    const displayTitleModifier = item.merchandise.title == "Default Title" ? "" : item.merchandise.title;
+    return ` <tr class="cart-table-row">
+    <td class="cart-table-cell">
+      <a href"=/products/${item.merchandise.product.handle}">
+        ${ item.merchandise.product.title } (${ item.merchandise.title })
+      </a>
+    </td>
+    <td class="cart-table-cell">
+      ${item.merchandise.priceV2.amount}
+    </td>
+    <td class="cart-table-cell">${ item.quantity }</td>
+    <td class="cart-table-cell">
+      ${ itemTotal(item.merchandise.priceV2.amount, item.quantity) }
+    </td>
+    <td class="cart-table-cell">
+      <form action="/api/remove-from-cart" method="POST">
+        <input type="hidden" name="cartId" value="${cartId}">
+        <input type="hidden" name="lineId" value="${item.id}">
+        <input type="submit" value="Remove item">
+      </form>
+    </td>
+  </tr>
+`};
+
+  const cartTotals = (cart) => {
+
+    if (!cart.lines.edges.length) {
+      console.log(`No basket`);
+      return `<div class="cart-total-content">
+        <div class="cart-total-column">
+          <a href="/">What you need is some meats and cheeses!</a>
+        </div>
+      </div>`;
+    }
+
+    return `
+    <div class="cart-total-content">
+      <div class="cart-total-column">
+        <p>
+          <strong>Subtotal:</strong>
+        </p>
+        <p>Shipping:</p>
+        <p>Tax:</p>
+        <p>Total:</p>
+      </div>
+      <div class="cart-total-column">
+        <p>
+          <strong>${cart.estimatedCost.subtotalAmount.amount} ${cart.estimatedCost.totalAmount.currencyCode} </strong>
+        </p>
+        <p>Free Shipping</p>
+        <p>${cart.estimatedCost.totalTaxAmount.amount} ${cart.estimatedCost.totalAmount.currencyCode} </p>
+        <p>${cart.estimatedCost.totalAmount.amount} ${cart.estimatedCost.totalAmount.currencyCode} </p>
+      </div>
+    </div>`;
+  }
+
+
+  let items = "";
+    result.cart.lines.edges.forEach(item => {
+    items += cartItem(result.cart.id, item.node)
+  });
+
+
+
+
+  const pageTemplate = (items, totals) => {return `
+  <html>
+  <head>
+    <link rel="stylesheet" href="/css/main.css">
+    <title>Your Cart</title>
+  </head>
+  <body>
+  
+    <header class="app-header">
+      <h1>Shoperoni</h1>
+      <nav class="main-nav">
+        <ul>
+          <li class="main-nav-item">
+            <a href="/">All<a>
+          </li>
+          <li class="main-nav-item">
+            <a href="/cheeses">Cheeses<a>
+          </li>
+          <li class="main-nav-item">
+            <a href="/meats">Meats<a>
+          </li>
+          <li class="main-nav-item">
+            <a href="/boards">Boards<a>
+          </li>
+          <li class="main-nav-item">
+            <div class="cart-size"></div>
+            <a href="/cart" class="cart cartLink">Shopping Cart</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <div class="cart-page">
+      <article class="cart-page-content">
+        <h1>Your Cart</h1>
+        <div>
+        <table class="cart-table">
+        <thead>
+          <th class="cart-table-heading">Item</th>
+          <th class="cart-table-heading">Price</th>
+          <th class="cart-table-heading">Quantity</th>
+          <th class="cart-table-heading">Total</th>
+          <th class="cart-table-heading">Actions</th>
+        </thead>
+        <tbody>
+        ${items}
+        </tbody>
+        </table>
+        <section class="cart-total">
+        ${cartTotals(result.cart)}
+        </section>
+        </div>
+      </article>
+    </div>
+    </main>
+    <footer>
+      <section class="testimonial">
+        <h2>
+          "The interplay of flavors between the cheese, meats and fruits is an
+          absolute delight."
+        </h2>
+        <p>Paul Hotcakes</p>
+      </section>
+      <section class="app-footer-links">
+        <ul>
+          <li>About</li>
+          <li>Company</li>
+          <li>Locations</li>
+          <li>Contact</li>
+          <li>Hours</li>
+        </ul>
+        <ul>
+          <li>Twitter</li>
+          <li>Facebook</li>
+          <li>Instagram</li>
+          <li>LinkedIn</li>
+        </ul>
+        <div class="newsletter">
+          <h2 class="newsletter-title">Sign up for our newsletter:</h2>
+          <input
+            class="newsletter-input"
+            type="email"
+            placeholder="Enter your email"
+          />
+        </div>
+      </section>
+  
+      <div class="project-credit">
+        <p>
+          This project is
+          <a href="https://github.com/philhawksworth/shopify-11ty">open source on GitHub </a>,
+          hosted with <a href="https://bit.ly/2G29YwK">Netlify</a>, built with
+          <a href="https://11ty.dev/">Eleventy</a>
+          and made by Phil Hawksworth (<a href="https://twitter.com/philhawksworth">@philhawksworth</a>)
+        </p>
+      </div>
+    </footer>
+    <script src="/js/shopping-ui.js"></script>
+  </body>
+  </html>
+  `};
+
+  return {
+    statusCode: 200,
+    body: pageTemplate(items, result.cart.estimatedCost)
+  };
+
+}