Updated product page, trying to fix tina vars

.gitlab-ci.yml

@@ -9,8 +9,10 @@ variables:
   # Major - Shouldn't change often, Big changes to the site
   # Minor - starts from 0 when Major is incremented +1 for each version that goes public
   # Release - For each time a development milestone is reached
-  VERSION: 1.1.0
+  VERSION: 1.1.1
   IMAGE_TAG: $CI_REGISTRY_IMAGE:$VERSION
+  # Grab Variables for TINA CMS
+  TINA_CID: $TINA_CID
   TINA_TOKEN: $TINA_TOKEN
 
 services:
@@ -21,6 +23,6 @@ build:
   script:
     - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
     - docker buildx create --use
-    - docker buildx build --no-cache --platform linux/arm64,linux/amd64 -t $IMAGE_TAG --push .
+    - docker buildx build --build-arg TINA_CID=${TINA_CID} --build-arg TINA_TOKEN={$TINA_TOKEN} --no-cache --platform linux/arm64,linux/amd64 -t $IMAGE_TAG --push .
   rules:
     - if: $CI_PIPELINE_SOURCE == "push" && ($CI_COMMIT_BRANCH == "main" || $CI_COMMIT_BRANCH == "staging") && $BUILD == "1"

Dockerfile

@@ -13,9 +13,9 @@ RUN git clone --recurse-submodules https://gitlab.com/AHMZA/blog.git
 # set blog (the folder we just cloned) as the current DIR
 WORKDIR blog
 
-# set tina_token
+# set tina_cid & tina_token
 ARG TINA_TOKEN
-RUN echo $TINA_TOKEN
+ARG TINA_CID
 
 RUN npm install @tinacms/cli
 

assets/css/extended/style.css

@@ -1,5 +1,6 @@
 :root{
-  --purple: rgb(145, 70, 255);
+  --purple: #9146ff;
+  --green: #B4FF46;
 }
 
 h1 {

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

@@ -1,9 +0,0 @@
----
-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/products/Skullstache-Holographic-Sticker.md

@@ -0,0 +1,17 @@
+---
+layout: products
+title: Skullstache Holographic Sticker
+code: SkullStacheHolographicSticker
+image: '/img/SkullstacheHolographicSticker.png'
+shortdesc: Set of 3 Holographic Skullstache stickers
+---
+
+Set of 3 Holographic Skullstache stickers to personalise any of your surfaces.
+
+--
+
+Size: 76mm x 76mm
+
+Count: 3
+
+--

layouts/page/products.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
+
+<head>
+    {{- partial "head.html" . }}
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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" />
+    <link href="/css/shop.css" rel="stylesheet" />
+    <link href="/css/product.css" rel="stylesheet"/>
+</head>
+
+<body class="
+{{- if eq site.Params.defaultTheme `dark` -}}
+{{- print " dark" }}
+{{- end -}}
+" id="top">
+    {{- partialCached "header.html" . .Page -}}
+    <main class="main">
+
+        {{- block "main" . }}{{ end }}
+
+        <!-- Hero Section -->
+        <section class="hero">
+            <img src="{{ .Params.image }}" alt="Product Image">
+            <h1>{{ .Title }}</h1>
+            <p>Description of the product.</p>
+            <button>Shop Now</button>
+        </section>
+
+        <!-- Product Details Section -->
+        <section class="product-details">
+            <h2>Product Details</h2>
+            <p>More detailed description of the product and its features.</p>
+            <ul>
+                <li>Specification 1: Value</li>
+                <li>Specification 2: Value</li>
+                <!-- Add more specifications as needed -->
+            </ul>
+            <p>Price: $XX.XX</p>
+            <button>Add to Cart</button>
+        </section>
+
+        <!-- Image Gallery Section -->
+        <section class="image-gallery">
+            <img src="{{ .Params.image }}" alt="Product Image 1">
+            <img src="{{ .Params.image }}" alt="Product Image 2">
+            <!-- Add more images as needed -->
+        </section>
+
+        <!-- Related Products Section -->
+        <section class="related-products">
+            <h2>Related Products</h2>
+            <!-- Display related products or accessories here -->
+        </section>
+
+    </main>
+    {{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
+</body>
+
+</html>

layouts/page/shop.html

@@ -6,6 +6,7 @@
     <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" />
+    <link href="/css/shop.css" rel="stylesheet" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
@@ -21,9 +22,9 @@
         <script>
           (function() {
             window.commercelayerConfig = {
-              clientId: 'FhOf27nCAGlzcFebyY1I5I_IERTt_9axJ9QTcID62Ao',
+              clientId: 'sU2jXv9bJKNyj8Li6bumfgnrGJTrRKHFmkcdtHlmrss',
               slug: 'ahmza',
-              scope: 'market:15644',
+              scope: 'market:15657',
               returnUrl: 'https://commercelayer.io/blog/composable-commerce-with-micro-frontends'
             }
           }());
@@ -74,10 +75,10 @@
               </div>
               <div class=prodStock>
                 <cl-availability code="{{ .Params.code }}">
-                  <cl-availability-status type="available" style="color: green;">
+                  <cl-availability-status type="available">
                     • in stock
                   </cl-availability-status>
-                  <cl-availability-status type="unavailable" style="color: red;">
+                  <cl-availability-status type="unavailable">
                     • out of stock
                   </cl-availability-status>
                 </cl-availability>
@@ -91,83 +92,6 @@
           {{ 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>

layouts/products/products.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="{{ site.Language }}" dir="{{ .Language.LanguageDirection | default "auto" }}">
+
+<head>
+    {{- partial "head.html" . }}
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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" />
+    <link href="/css/shop.css" rel="stylesheet" />
+    <link href="/css/product.css" rel="stylesheet"/>
+</head>
+
+<body class="
+{{- if eq site.Params.defaultTheme `dark` -}}
+{{- print " dark" }}
+{{- end -}}
+" id="top">
+    {{- partialCached "header.html" . .Page -}}
+    <main class="main">
+
+        <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>
+
+        <script>
+          (function() {
+            window.commercelayerConfig = {
+              clientId: 'sU2jXv9bJKNyj8Li6bumfgnrGJTrRKHFmkcdtHlmrss',
+              slug: 'ahmza',
+              scope: 'market:15657',
+              returnUrl: 'https://commercelayer.io/blog/composable-commerce-with-micro-frontends'
+            }
+          }());
+        </script>
+
+        <!-- Hero Section -->
+        <section class="hero">
+            <img src="{{ .Params.image }}" alt="Product Image">
+            <h1>{{ .Title }}</h1>
+            <p>{{ .Params.shortdesc }}</p>
+        </section>
+
+        <!-- Product Details Section -->
+        <section class="product-details">
+            {{ .Content }}
+            <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">
+                  • in stock
+                </cl-availability-status>
+                <cl-availability-status type="unavailable">
+                  • 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>
+        </section>
+
+        <!-- Related Products Section -->
+        <section class="related-products">
+            <h2>Related Products</h2>
+            <!-- Display related products or accessories here -->
+        </section>
+
+        <!-- Footer Section -->
+        <footer class="shopping-links">
+          <a href="/contact">contact</a>
+          <a href="/shipping">shipping policy</a>
+          <a href="/returns">returns policy</a>
+        </footer>
+
+    </main>
+    {{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
+</body>
+
+</html>

static/css/product.css

@@ -0,0 +1,38 @@
+.hero {
+    text-align: center;
+    padding: 50px;
+}
+
+.hero img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+}
+
+.product-details {
+    background-color: #333;
+    padding: 20px;
+    margin-top: 20px;
+}
+
+.prodStock {
+    padding: 20px 0 20px 0;
+}
+
+.related-products {
+    background-color: #333;
+    padding: 20px;
+    margin-top: 20px;
+}
+
+.shopping-links {
+    text-align: center;
+}
+
+.shopping-links a {
+    color: var(--secondary);
+    text-decoration: underline;
+    display: inline-block;
+    padding: 20px;
+    font-size: 14px;
+}

static/css/shop.css

@@ -0,0 +1,76 @@
+.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
+}
+.prodStock {
+  color: var(--green);
+}
+.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;
+  }
+}

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":"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}}}
+{"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 URL","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

@@ -60,7 +60,7 @@ var config_default = defineConfig({
           {
             type: "string",
             name: "image",
-            label: "Image",
+            label: "Image URL",
             required: false
           },
           {

tina/config.ts

@@ -5,8 +5,8 @@ const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";
 
 export default defineConfig({
   branch,
-  clientId: "f68869c9-46b7-4f70-bf52-46783f537a63", // Get this from tina.io
+  clientId: "TINA_CID", // Get this from tina.io
-  token: "e1040fd77966916ca7aa0b2480f9c6bbf865fe7d", // Get this from tina.io 
+  token: "TINA_TOKEN", // Get this from tina.io 
 
   build: {
     outputFolder: "admin",
@@ -61,7 +61,7 @@ export default defineConfig({
           {
             type: "string",
             name: "image",
-            label: "Image",
+            label: "Image URL",
             required: false,
           },
           {