Add option values (#62)

* Fix option value and expose type * Fix post deploy test
adobe-rnd · Dec 11, 2024 · 08566d0 · 08566d0
1 parent d3cc60b
commit 08566d0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/src/content/queries/cs-product.js b/src/content/queries/cs-product.js
@@ -85,6 +85,7 @@ export const adapter = (config, productData) => {
         label: value.title,
         inStock: value.inStock,
         type: value.type,
+        value: value.value,
         product: value.product
           ? {
             sku: value.product.sku,

diff --git a/src/templates/html/HTMLTemplate.js b/src/templates/html/HTMLTemplate.js
@@ -151,7 +151,7 @@ ${HTMLTemplate.metaProperty('product:price.currency', product.prices?.final?.cur
    */
   renderJSONLD() {
     return /* html */ `\
-<script type="application/ld+json">
+<script type="application/ld+json" data-name="product">
   ${this.jsonTemplate.render()}
 </script>`;
   }
@@ -228,6 +228,7 @@ ${attributes.map((attr) => /* html */`\
   <div>${item.value ?? ''}</div>
   <div>${item.selected ? 'selected' : ''}</div>
   <div>${item.inStock ? 'inStock' : ''}</div>
+  <div>${item.type}</div>
 </div>`).join('\n');
   }
 

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -285,6 +285,7 @@ declare global {
     inStock: boolean;
     value: string;
     selected: boolean;
+    type: string;
     product?: {
       name: string;
       sku: string;

diff --git a/test/fixtures/post-deploy/bella-tank.html b/test/fixtures/post-deploy/bella-tank.html
@@ -28,7 +28,7 @@
   <script src="/scripts/aem.js" type="module"></script>
   <script src="/scripts/scripts.js" type="module"></script>
   <link rel="stylesheet" href="/styles/styles.css">
-  <script type="application/ld+json">
+  <script type="application/ld+json" data-name="product">
       {
       "@context": "http://schema.org",
       "@type": "Product",
@@ -276,41 +276,46 @@ <h1>Bella Tank</h1>
           <div>option</div>
           <div>Y29uZmlndXJhYmxlLzU1Ni81MjM=</div>
           <div>XS</div>
-          <div></div>
+          <div>XS</div>
           <div></div>
           <div>inStock</div>
+          <div>TEXT</div>
         </div>
         <div>
           <div>option</div>
           <div>Y29uZmlndXJhYmxlLzU1Ni81MjY=</div>
           <div>S</div>
-          <div></div>
+          <div>S</div>
           <div></div>
           <div>inStock</div>
+          <div>TEXT</div>
         </div>
         <div>
           <div>option</div>
           <div>Y29uZmlndXJhYmxlLzU1Ni81Mjk=</div>
           <div>M</div>
-          <div></div>
+          <div>M</div>
           <div></div>
           <div>inStock</div>
+          <div>TEXT</div>
         </div>
         <div>
           <div>option</div>
           <div>Y29uZmlndXJhYmxlLzU1Ni81MzI=</div>
           <div>L</div>
-          <div></div>
+          <div>L</div>
           <div></div>
           <div>inStock</div>
+          <div>TEXT</div>
         </div>
         <div>
           <div>option</div>
           <div>Y29uZmlndXJhYmxlLzU1Ni81MzU=</div>
           <div>XL</div>
-          <div></div>
+          <div>XL</div>
           <div></div>
           <div>inStock</div>
+          <div>TEXT</div>
         </div>
         <div>
           <div>color</div>
@@ -324,25 +329,28 @@ <h1>Bella Tank</h1>
           <div>option</div>
           <div>Y29uZmlndXJhYmxlLzI3Ny8xNzI=</div>
           <div>Black</div>
-          <div></div>
+          <div>#000000</div>
           <div></div>
           <div>inStock</div>
+          <div>COLOR_HEX</div>
         </div>
         <div>
           <div>option</div>
           <div>Y29uZmlndXJhYmxlLzI3Ny8xNzU=</div>
           <div>Blue</div>
-          <div></div>
+          <div>#1857f7</div>
           <div></div>
           <div>inStock</div>
+          <div>COLOR_HEX</div>
         </div>
         <div>
           <div>option</div>
           <div>Y29uZmlndXJhYmxlLzI3Ny8xOTM=</div>
           <div>Orange</div>
-          <div></div>
+          <div>#eb6703</div>
           <div></div>
           <div>inStock</div>
+          <div>COLOR_HEX</div>
         </div>
       </div>
       <div class="product-variants">