Merge pull request #30 from adobe-rnd/add-variant-attributes-description

fix: add support for variant attributes and description

Author: dylandepass

src/content/queries/cs-product.js

@@ -110,7 +110,7 @@ export default ({ sku }) => gql`{
         url
         label
       }
-      attributes(roles: []) {
+      attributes(roles: ["visible_in_pdp"]) {
         name
         label
         value

src/content/queries/cs-variants.js

@@ -24,9 +24,11 @@ export const adapter = (variants) => variants.map(({ selections, product }) => {
   const variant = {
     name: product.name,
     sku: product.sku,
+    description: product.description,
     url: product.url,
     inStock: product.inStock,
     images: product.images ?? [],
+    attributes: product.attributes ?? [],
     prices: {
       regular: {
         // TODO: determine whether to use min or max
@@ -66,6 +68,12 @@ export default (sku) => gql`
           label
         }
         ... on SimpleProductView {
+          description
+          attributes(roles: ["visible_in_pdp"]) {
+            name
+            label
+            value
+          }
           price {
             regular {
               amount {

src/templates/html.js

@@ -141,6 +141,7 @@ ${variants?.map((v) => `\
             <div>
               <div>${v.sku}</div>
               <div>${v.name}</div>
+              <div>${v.description}</div>
               <div>${v.inStock ? 'inStock' : ''}</div>
               <div>Regular: ${v.prices?.regular?.amount} ${v.prices?.regular?.currency}${priceRange(v.prices?.regular?.minimumAmount, v.prices?.regular?.maximumAmount)}</div>
               <div>Final: ${v.prices?.final?.amount} ${v.prices?.final?.currency}${priceRange(v.prices?.final?.minimumAmount, v.prices?.final?.maximumAmount)}</div>
@@ -154,8 +155,24 @@ ${v.images?.map((img) => `\
                 </picture>`).join('\n')}
               </div>
               <div>${v.selections?.join(', ')}</div>
-            </div>`).join('\n')}
-        </div>
+            </div>`).join('\n')};
+          </div>
+        <div class="variant-attributes">
+          ${variants?.map((v) => `\
+            <div>
+              <div>sku</div>
+              <div>${v.sku}</div>
+              <div></div>
+              <div></div>
+            </div>
+            ${v.attributes?.map((attribute) => `\
+              <div>
+                <div>attribute</div>
+                <div>${attribute.name}</div>
+                <div>${attribute.label}</div>
+                <div>${attribute.value}</div>
+              </div>`).join('\n')}`).join('\n')}
+          </div>
       </main>
       <footer></footer>
     </body>

src/types.d.ts

@@ -79,11 +79,13 @@ declare global {
   export interface Variant {
     sku: string;
     name: string;
+    description?: string;
     url: string;
     inStock: boolean;
     images: Image[];
     prices: Pick<Prices, 'regular' | 'final'>;
     selections: string[];
+    attributes: Attribute[];
   }
 
   interface Image {