Stub out journey to cart

netlify.toml

@@ -11,3 +11,8 @@
   to = "/.netlify/functions/:splat"
   status = 200
 
+[[redirects]]
+  from = "/cart"
+  to = "/.netlify/functions/cart-view"
+  status = 200
+

netlify/functions/add-to-cart.js

@@ -0,0 +1,88 @@
+const { postToShopify } = require('../../src/utils/postToShopify');
+const querystring = require('querystring');
+
+
+exports.handler = async (event) => {
+
+  // Parse the form submission
+  if (event.httpMethod !== "POST") {
+    return { statusCode: 405, body: "Method Not Allowed" };
+  }
+  const {
+    quantity,
+    merchandiseId
+  } = querystring.parse(event.body);
+
+  console.log( quantity, merchandiseId);
+
+
+  const response = await postToShopify({
+    query: `mutation { createCart($cartInput: CartInput}) {
+      cartCreate(input: $cartInput) {
+        cart {
+          id
+          createdAt
+          updatedAt
+          lines(first:10) {
+            edges {
+              node {
+                id
+                merchandise {
+                  ... on ProductVariant {
+                    id
+                  }
+                }
+              }
+            }
+          }
+          attributes {
+            key
+            value
+          }
+          estimatedCost {
+            totalAmount {
+              amount
+              currencyCode
+            }
+          }
+        }
+      }
+    }`,
+    variables: `{
+      "cartInput": {
+        "lines" : [
+          {
+            "quantity": "${quantity}",
+            "merchandiseId": "${merchandiseId}"
+          }
+        ],
+        "attributes": {
+          "key": "cart_attribute",
+          "value": "Some cart attribute"
+        }
+      }
+    }`
+  });
+
+  console.log(response);  
+
+
+  // Shopify will create a new cart ID if required
+  const cardId = "DUMMY"
+
+  // Now that an item was added to the cart, take the user to it.
+  // We'll render this dynamically from a serverless function
+  return {
+    body: "",
+    statusCode: 302,
+    headers: {
+      Location: `/cart?cartId=${cardId}`,
+    }
+  };
+
+
+};
+
+
+
+

netlify/functions/cart-view.js

@@ -0,0 +1,13 @@
+
+exports.handler = async (event) => {
+
+  console.log(event.queryStringParameters);
+
+  const cartId = event.queryStringParameters.cartId;
+
+  return {
+    statusCode: 200,
+    body: `view of cart with ID: ${cartId}`
+  };
+
+}

src/site/_includes/product_detail.njk

@@ -3,15 +3,13 @@
   <p>{{ item.node.description }}</p>
   <img src="{{item.node.images.edges[0].node.src }}" alt="{{ item.node.images.edges[0].node.alt }}">
 
-
-  <form action="/api/add/" method="POST">
-    <select>
+  <form action="/api/add-to-cart/" method="POST">
     {% for variant in item.node.variants.edges %}
-      <option name="variant" value="{{ variant.node.id }}">{{ variant.node.title }} — {{ variant.node.priceV2.currencyCode }} {{ variant.node.priceV2.amount }}</option>
+    <input type="radio" id="{{ variant.node.id }}" name="merchandiseId" value="{{ variant.node.id }}" checked><label for="{{ variant.node.id }}">{{ variant.node.title }} - {{ variant.node.priceV2.currencyCode }} {{ variant.node.priceV2.amount }}</label>
     {% endfor %}
-    </select>
     <input type="number" name="quantity" value="1" />
-    <!-- <input type="text" name="checkoutId" value="1" /> -->
+    <input type="hidden" name="cartId" value="" />
     <input type="submit" value="Add to basket">
   </form>
+
 </div>

src/utils/postToShopify.js

@@ -11,7 +11,12 @@ exports.postToShopify = async ({ query, variables }) => {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({ query, variables }),
-    }).then((res) => res.json());
+    }).then(function(res) {
+
+     console.log(res);
+
+      return res.json();
+    })
 
     if (!result || !result.data) {
       return false;