added shop page

assets/css/extended/style.css

@@ -1,4 +1,8 @@
-h1 {
+:root{
-  color: rgb(145, 70, 255);
+  --purple: rgb(145, 70, 255);
+}
+
+h1 {
+  color: var(--purple)
 }
 

config.yml

@@ -30,7 +30,7 @@ params:
   images: ["http://blog.ahmza.com/content/images/2021/11/Padlock-1.png"] #Change this
   DateFormat: "January 2, 2006"
   defaultTheme: dark # dark, light
-  disableThemeToggle: false
+  disableThemeToggle: true
 
   ShowReadingTime: true
   ShowShareButtons: false
@@ -132,14 +132,18 @@ menu:
       name: tags
       url: /tags/
       weight: 20
+    - identifier: shop
+      name: shop
+      url: /shop/
+      weight: 30
     - identifier: contact
       name: contact
       url: /contact
-      weight: 30
+      weight: 40
     - identifier: search
       name: search
       url: /search/
-      weight: 40
+      weight: 50
 # Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
 pygmentsUseClasses: true
 markup:

content/products/Skullstache-Holographic-Sticker-6.md

@@ -0,0 +1,9 @@
+---
+title: Skullstache Holographic Sticker
+code: SkullstacheSticker
+image: 'http://localhost:1313/img/SkullstacheHolographicSticker.png'
+---
+
+This is a set of 3 stickers you can purchase to personalise any of your surfaces.
+
+The sticker dimensions are: 76mm x 76mm

content/shop.md

@@ -0,0 +1,6 @@
+---
+layout: shop
+title: "Shop"
+date: 2023-11-11T03:00:04Z
+draft: false
+---

layouts/page/shop.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
+
+<head>
+    {{- partial "head.html" . }}
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@1.0.0/dist/drop-in/drop-in.esm.js"></script>
+    <link href="/css/minicart.css" rel="stylesheet" />
+    <link href="/css/drop-in.css" rel="stylesheet" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+
+<body class="
+{{- if eq site.Params.defaultTheme `dark` -}}
+{{- print " dark" }}
+{{- end -}}
+" id="top">
+    {{- partialCached "header.html" . .Page -}}
+    <main class="main">
+        <script>
+          (function() {
+            window.commercelayerConfig = {
+              clientId: 'FhOf27nCAGlzcFebyY1I5I_IERTt_9axJ9QTcID62Ao',
+              slug: 'ahmza',
+              scope: 'market:15644',
+              returnUrl: 'https://commercelayer.io/blog/composable-commerce-with-micro-frontends'
+            }
+          }());
+        </script>
+
+        <div class=shop-nav-div>
+          <ul class=shop-nav>
+            <li>
+              <cl-identity-status type="guest">
+                <cl-identity-link type="login" target="_parent">
+                  Login
+                </cl-identity-link>
+              </cl-identity-status>
+            </li>
+            <li>
+              <cl-identity-status type="customer">
+                <cl-identity-link type="login" target="_parent">
+                  Account
+                </cl-identity-link>
+              </cl-identity-status>
+            </li>
+            <li>
+              <cl-cart-link>
+                cart
+                <cl-cart-count hide-when-empty="true"></cl-cart-count>
+                <cl-cart></cl-cart>
+              </cl-cart-link>
+            </li>
+          </ul>
+        </div>
+
+        <div class=productList>
+          {{ range ( where .Site.RegularPages "Type" "products" ) }}
+            <div class=product>
+              <a href="{{ .RelPermalink }}">
+                <div class=prodImage>
+                  <img src="{{ .Params.image }}">
+                </div>
+                <div class=prodTitle>
+                  <h4>{{ .Title }}<h4>
+                </div>
+              </a>
+              <div class=prodPrice>
+                <cl-price code="{{ .Params.code }}">
+                  <cl-price-amount type="compare-at">.</cl-price-amount>
+                  <cl-price-amount type="price">.</cl-price-amount>
+                </cl-price>
+              </div>
+              <div class=prodStock>
+                <cl-availability code="{{ .Params.code }}">
+                  <cl-availability-status type="available" style="color: green;">
+                    • in stock
+                  </cl-availability-status>
+                  <cl-availability-status type="unavailable" style="color: red;">
+                    • out of stock
+                  </cl-availability-status>
+                </cl-availability>
+              </div>
+              <div class=prodAddToCart>
+                <cl-add-to-cart code="{{ .Params.code }}">
+                  Add to cart
+                </cl-add-to-cart>
+              </div>
+            </div>
+          {{ end }}
+        </div>
+
+      <style>
+        .main {
+          position: relative;
+          min-height: calc(100vh - var(--header-height) - var(--footer-height));
+          max-width: calc(1024px + var(--gap) * 2);
+          margin: auto;
+          padding var(--gap)
+
+        }
+        .productList {
+          display: inline-grid;
+          grid-template-columns: auto auto auto;
+          grid-auto-rows: 400px;
+          grid-gap: 30px 10px;
+          margin-top: 10px;
+        }
+        .product {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          background-color: var(--entry);
+          border: 1px solid var(--border);
+          border-radius: var(--radius);
+          text-align: center;
+          padding: var(--gap);
+        }
+        img{
+          margin-left: auto;
+          margin-right: auto;
+        }
+        .prodImage {
+          display:block;
+          width: 100%;
+          height: auto;
+          max-height: 100%;
+          border-radius: var(--radius);
+          overflow-clip-margin: content-box;
+          overflow: clip;
+          padding-bottom: 10px
+        }
+        .shop-nav {
+          list-style-type: none;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: flex-start;
+          max-width: calc(var(--nav-width) + var(--gap) * 2);
+          margin-inline-start: auto;
+          margin-inline-end: auto;
+        }
+        .shop-nav li {
+          padding-right:10px;
+          font-size: 16px;
+        }
+
+        @media only screen and (min-width: 608px) {
+          .productList {
+            grid-template-columns: auto auto auto;
+          }
+        }
+
+        @media only screen and (min-width: 609px) {
+          .productList {
+            grid-template-columns: auto auto auto auto;
+          }
+          .shop-nav {
+            justify-content: flex-end
+          }
+        }
+
+        @media only screen and (min-width: 992px) {
+          .productList {
+            grid-template-columns: auto auto auto auto auto;
+          }
+        }
+
+      </style>
+
+    </main>
+    {{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
+</body>
+
+</html>
+
+

layouts/shortcodes/rawhtml.html

@@ -0,0 +1,2 @@
+<!-- raw html -->
+{{.Inner}}

static/css/drop-in.css

@@ -0,0 +1,83 @@
+:root{
+    --cl-color-primary: var(--tertiary);
+    --cl-color-white: var(--content);
+}
+
+cl-availability-status[aria-disabled=true],cl-identity-status[aria-disabled=true]{
+    display:none
+}
+
+cl-price-amount{
+    color: var(--purple);
+    font-size:1em;
+    font-weight:600;
+    line-height:1.5em
+}
+
+cl-price-amount[type=compare-at]{
+    color: var(--content);
+    font-size:.875em;
+    font-weight:300;
+    line-height:1.25em;
+    text-decoration:line-through
+}
+
+cl-price-amount[type=compare-at]::part(strikethrough){
+    text-decoration:none
+}
+
+cl-add-to-cart{
+    display:inline-block;
+    background-image:none;
+    border:none;
+    font-weight:600;
+    color:var(--cl-color-white);
+    padding:.75rem 1rem .75rem 1rem;
+    border-radius: var(--radius);
+    background-color: var(--cl-color-primary);
+    cursor:default;
+    position: relative;
+    bottom: 0;
+}
+
+cl-add-to-cart:not([aria-disabled=true]){
+    background-color:var(--cl-color-primary);
+    cursor:pointer;
+}
+
+cl-cart-link,.cl-cart-link{
+    position:relative;
+    display:inline-block;
+    cursor:pointer;
+}
+
+cl-cart-link cl-cart-count,.cl-cart-link cl-cart-count{
+    position:absolute;
+    bottom:0;
+    right:0;
+    font-size:.5rem;
+    border-radius:50%;
+    background-color:var(--cl-color-primary);
+    min-width:1rem;
+    height:1rem;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    color:var(--cl-color-white);
+    transform:translate(120%, 0%);
+    padding:.2rem;
+}
+
+cl-cart-link cl-cart-count[hide-when-empty=""],cl-cart-link cl-cart-count[hide-when-empty=true],.cl-cart-link cl-cart-count[hide-when-empty=""],.cl-cart-link cl-cart-count[hide-when-empty=true]{
+    opacity:0
+}
+
+cl-cart-link cl-cart-count[quantity],.cl-cart-link cl-cart-count[quantity]{
+    transition:opacity .3s;opacity:1
+}
+
+cl-cart-link svg~cl-cart-count,.cl-cart-link svg~cl-cart-count{
+    bottom:0%;
+    right:0%;
+    transform:translate(30%, 0%);
+}

static/css/minicart.css

@@ -0,0 +1,69 @@
+cl-cart[type=mini]{
+  --cl-cart-mini-backdrop-bg: #000;
+  --cl-cart-mini-backdrop-opacity: 0.4;
+  --cl-cart-mini-backdrop-shadow: -1px 0px 10px rgba(0, 0, 0, .3);
+  --cl-cart-mini-modal-z-index: 100;
+  --cl-cart-mini-modal-bg: #fff;
+  --cl-cart-mini-modal-width: 400px;
+  --cl-cart-mini-modal-max-width: calc(100vw - 40px);
+  --cl-cart-mini-transition-duration: .3s;
+  --cl-cart-mini-transition-timing-function: ease-in-out;
+  display:flex;
+  cursor:auto;
+  position:fixed;
+  z-index:var(--cl-cart-mini-modal-z-index);
+  top:0;
+  width:var(--cl-cart-mini-modal-width);
+  max-width:var(--cl-cart-mini-modal-max-width);
+  height:100%;
+  pointer-events:none;
+  box-sizing:border-box;
+  box-shadow:none;
+  transition:box-shadow var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
+}
+
+cl-cart[type=mini]::before,cl-cart[type=mini]::after{
+  position:fixed;
+  content:" ";
+  opacity:0;
+  width:100%;
+  height:100%;
+  top:0;
+  right:0;
+  z-index:-1;
+  transition:opacity var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
+}
+
+cl-cart[type=mini]::before{
+  background:var(--cl-cart-mini-backdrop-bg)
+}
+
+cl-cart[type=mini]::after{
+  position:fixed;
+  width:var(--cl-cart-mini-modal-width);
+  max-width:var(--cl-cart-mini-modal-max-width);
+  box-shadow:var(--cl-cart-mini-backdrop-shadow)
+}
+
+cl-cart[type=mini],cl-cart[type=mini]::after{
+  right:calc(var(--cl-cart-mini-modal-width)*-1 + 0px);
+  transition:right var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function),opacity var(--cl-cart-mini-transition-duration) var(--cl-cart-mini-transition-timing-function)
+}
+
+cl-cart[type=mini][open]:not([open=false]){
+  right:0;
+  pointer-events:initial
+}
+
+cl-cart[type=mini][open]:not([open=false])::before{
+  opacity:var(--cl-cart-mini-backdrop-opacity)
+}
+
+cl-cart[type=mini][open]:not([open=false])::after{
+  right:0;
+  opacity:1
+}
+
+body.cl-cart--open{
+  overflow:hidden
+}

static/products.json

@@ -0,0 +1,9 @@
+[
+  {
+    "id": "STRATUS",
+    "name": "Stratus",
+    "price": 9.95,
+    "image": "",
+    "description": 'Testing descriptions and products for the shop page'
+  }
+]

tina/__generated__/_schema.json

@@ -1 +1 @@
-{"version":{"fullVersion":"1.4.27","major":"1","minor":"4","patch":"27"},"meta":{"flags":["experimentalData"]},"collections":[{"name":"post","label":"Posts","path":"content/posts","fields":[{"type":"string","name":"title","label":"Title","isTitle":true,"required":true,"namespace":["post","title"],"searchable":true},{"type":"rich-text","name":"body","label":"Body","isBody":true,"namespace":["post","body"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["post"]},{"name":"products","label":"Products","path":"content/products","fields":[{"type":"string","name":"productName","title":"Product Name","isTitle":true,"required":true,"namespace":["products","productName"],"searchable":true},{"type":"rich-text","name":"description","label":"Description","isBody":true,"namespace":["products","description"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["products"]}],"config":{"media":{"tina":{"publicFolder":"static","mediaRoot":""}}}}
+{"version":{"fullVersion":"1.4.27","major":"1","minor":"4","patch":"27"},"meta":{"flags":["experimentalData"]},"collections":[{"name":"post","label":"Posts","path":"content/posts","fields":[{"type":"string","name":"title","label":"Title","isTitle":true,"required":true,"namespace":["post","title"],"searchable":true},{"type":"rich-text","name":"body","label":"Body","isBody":true,"namespace":["post","body"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["post"]},{"name":"products","label":"Products","path":"content/products","fields":[{"type":"string","name":"title","label":"Product Name","isTitle":true,"required":true,"namespace":["products","title"],"searchable":true},{"type":"string","name":"code","label":"Code","required":true,"namespace":["products","code"],"searchable":true},{"type":"string","name":"image","label":"Image","required":false,"namespace":["products","image"],"searchable":true},{"type":"rich-text","name":"description","label":"Description","isBody":true,"namespace":["products","description"],"searchable":true,"parser":{"type":"markdown"}}],"namespace":["products"]}],"config":{"media":{"tina":{"publicFolder":"static","mediaRoot":""}},"search":{"tina":{"indexerToken":"3ad8991708087bb81af5aa2bd79586afd6d847fb","stopwordLanguages":["eng"]},"indexBatchSize":100,"maxSearchIndexFieldLength":100}}}

tina/__generated__/config.prebuild.jsx

@@ -46,11 +46,23 @@ var config_default = defineConfig({
         fields: [
           {
             type: "string",
-            name: "productName",
+            name: "title",
-            title: "Product Name",
+            label: "Product Name",
             isTitle: true,
             required: true
           },
+          {
+            type: "string",
+            name: "code",
+            label: "Code",
+            required: true
+          },
+          {
+            type: "string",
+            name: "image",
+            label: "Image",
+            required: false
+          },
           {
             type: "rich-text",
             name: "description",
@@ -60,6 +72,14 @@ var config_default = defineConfig({
         ]
       }
     ]
+  },
+  search: {
+    tina: {
+      indexerToken: "3ad8991708087bb81af5aa2bd79586afd6d847fb",
+      stopwordLanguages: ["eng"]
+    },
+    indexBatchSize: 100,
+    maxSearchIndexFieldLength: 100
   }
 });
 export {

tina/__generated__/frags.gql

@@ -6,6 +6,8 @@ fragment PostParts on Post {
 
 fragment ProductsParts on Products {
   __typename
-  productName
+  title
+  code
+  image
   description
 }

tina/__generated__/schema.gql

@@ -127,7 +127,9 @@ type PostConnection implements Connection {
 }
 
 type Products implements Node & Document {
-  productName: String!
+  title: String!
+  code: String!
+  image: String
   description: JSON
   id: ID!
   _sys: SystemInfo!
@@ -135,7 +137,9 @@ type Products implements Node & Document {
 }
 
 input ProductsFilter {
-  productName: StringFilter
+  title: StringFilter
+  code: StringFilter
+  image: StringFilter
   description: RichTextFilter
 }
 
@@ -178,7 +182,9 @@ input PostMutation {
 }
 
 input ProductsMutation {
-  productName: String
+  title: String
+  code: String
+  image: String
   description: JSON
 }
 

tina/__generated__/types.ts

@@ -224,7 +224,9 @@ export type PostConnection = Connection & {
 
 export type Products = Node & Document & {
   __typename?: 'Products';
-  productName: Scalars['String']['output'];
+  title: Scalars['String']['output'];
+  code: Scalars['String']['output'];
+  image?: Maybe<Scalars['String']['output']>;
   description?: Maybe<Scalars['JSON']['output']>;
   id: Scalars['ID']['output'];
   _sys: SystemInfo;
@@ -232,7 +234,9 @@ export type Products = Node & Document & {
 };
 
 export type ProductsFilter = {
-  productName?: InputMaybe<StringFilter>;
+  title?: InputMaybe<StringFilter>;
+  code?: InputMaybe<StringFilter>;
+  image?: InputMaybe<StringFilter>;
   description?: InputMaybe<RichTextFilter>;
 };
 
@@ -329,13 +333,15 @@ export type PostMutation = {
 };
 
 export type ProductsMutation = {
-  productName?: InputMaybe<Scalars['String']['input']>;
+  title?: InputMaybe<Scalars['String']['input']>;
+  code?: InputMaybe<Scalars['String']['input']>;
+  image?: InputMaybe<Scalars['String']['input']>;
   description?: InputMaybe<Scalars['JSON']['input']>;
 };
 
 export type PostPartsFragment = { __typename: 'Post', title: string, body?: any | null };
 
-export type ProductsPartsFragment = { __typename: 'Products', productName: string, description?: any | null };
+export type ProductsPartsFragment = { __typename: 'Products', title: string, code: string, image?: string | null, description?: any | null };
 
 export type PostQueryVariables = Exact<{
   relativePath: Scalars['String']['input'];
@@ -361,7 +367,7 @@ export type ProductsQueryVariables = Exact<{
 }>;
 
 
-export type ProductsQuery = { __typename?: 'Query', products: { __typename: 'Products', id: string, productName: string, description?: any | null, _sys: { __typename?: 'SystemInfo', filename: string, basename: string, breadcrumbs: Array<string>, path: string, relativePath: string, extension: string } } };
+export type ProductsQuery = { __typename?: 'Query', products: { __typename: 'Products', id: string, title: string, code: string, image?: string | null, description?: any | null, _sys: { __typename?: 'SystemInfo', filename: string, basename: string, breadcrumbs: Array<string>, path: string, relativePath: string, extension: string } } };
 
 export type ProductsConnectionQueryVariables = Exact<{
   before?: InputMaybe<Scalars['String']['input']>;
@@ -373,7 +379,7 @@ export type ProductsConnectionQueryVariables = Exact<{
 }>;
 
 
-export type ProductsConnectionQuery = { __typename?: 'Query', productsConnection: { __typename?: 'ProductsConnection', totalCount: number, pageInfo: { __typename?: 'PageInfo', hasPreviousPage: boolean, hasNextPage: boolean, startCursor: string, endCursor: string }, edges?: Array<{ __typename?: 'ProductsConnectionEdges', cursor: string, node?: { __typename: 'Products', id: string, productName: string, description?: any | null, _sys: { __typename?: 'SystemInfo', filename: string, basename: string, breadcrumbs: Array<string>, path: string, relativePath: string, extension: string } } | null } | null> | null } };
+export type ProductsConnectionQuery = { __typename?: 'Query', productsConnection: { __typename?: 'ProductsConnection', totalCount: number, pageInfo: { __typename?: 'PageInfo', hasPreviousPage: boolean, hasNextPage: boolean, startCursor: string, endCursor: string }, edges?: Array<{ __typename?: 'ProductsConnectionEdges', cursor: string, node?: { __typename: 'Products', id: string, title: string, code: string, image?: string | null, description?: any | null, _sys: { __typename?: 'SystemInfo', filename: string, basename: string, breadcrumbs: Array<string>, path: string, relativePath: string, extension: string } } | null } | null> | null } };
 
 export const PostPartsFragmentDoc = gql`
     fragment PostParts on Post {
@@ -385,7 +391,9 @@ export const PostPartsFragmentDoc = gql`
 export const ProductsPartsFragmentDoc = gql`
     fragment ProductsParts on Products {
   __typename
-  productName
+  title
+  code
+  image
   description
 }
     `;

tina/config.ts

@@ -47,11 +47,23 @@ export default defineConfig({
         fields: [
           {
             type: "string",
-            name: "productName",
+            name: "title",
-            title: "Product Name",
+            label: "Product Name",
             isTitle: true,
             required: true,
           },
+          {
+            type: "string",
+            name: "code",
+            label: "Code",
+            required: true,
+          },
+          {
+            type: "string",
+            name: "image",
+            label: "Image",
+            required: false,
+          },
           {
             type: "rich-text",
             name: "description",
@@ -62,4 +74,13 @@ export default defineConfig({
       },
     ],
   },
+
+  search: {
+    tina: {
+      indexerToken: '3ad8991708087bb81af5aa2bd79586afd6d847fb',
+      stopwordLanguages: ['eng']
+    },
+    indexBatchSize: 100,
+    maxSearchIndexFieldLength: 100
+  },
 });