Merge pull request #38 from adobe-rnd/image-roles

fix: image roles config option

package.json

@@ -53,6 +53,7 @@
     "eslint-plugin-header": "3.1.1",
     "eslint-plugin-import": "2.29.1",
     "esmock": "^2.6.9",
+    "html-differ": "1.4.0",
     "husky": "9.1.4",
     "jsdom": "25.0.1",
     "lint-staged": "15.2.9",

src/content/adobe-commerce.js

@@ -22,7 +22,7 @@ import htmlTemplateFromContext from '../templates/html/index.js';
  */
 async function fetchProduct(sku, config) {
   const { catalogEndpoint = 'https://catalog-service.adobe.io/graphql' } = config;
-  const query = getProductQuery({ sku });
+  const query = getProductQuery({ sku, imageRoles: config.imageRoles });
   console.debug(query);
 
   const resp = await ffetch(`${catalogEndpoint}?query=${encodeURIComponent(query)}&view=${config.storeViewCode}`, {
@@ -68,7 +68,7 @@ async function fetchProduct(sku, config) {
  */
 async function fetchVariants(sku, config) {
   const { catalogEndpoint = 'https://catalog-service.adobe.io/graphql' } = config;
-  const query = getVariantsQuery(sku);
+  const query = getVariantsQuery({ sku, imageRoles: config.imageRoles });
   console.debug(query);
 
   const resp = await ffetch(`${catalogEndpoint}?query=${encodeURIComponent(query)}&view=${config.storeViewCode}`, {

src/content/queries/cs-product.js

@@ -99,7 +99,13 @@ export const adapter = (productData) => {
 };
 
 // @ts-ignore
-export default ({ sku }) => gql`{
+/**
+ * @param {{
+ *  sku: string;
+ *  imageRoles?: string[];
+ * }} opts
+ */
+export default ({ sku, imageRoles = [] }) => gql`{
     products(
       skus: ["${sku}"]
     ) {
@@ -117,7 +123,7 @@ export default ({ sku }) => gql`{
       addToCartAllowed
       inStock
       externalId
-      images(roles: []) { 
+      images(roles: [${imageRoles.map((s) => `"${s}"`).join(',')}]) { 
         url
         label
       }

src/content/queries/cs-variants.js

@@ -47,7 +47,7 @@ export const adapter = (config, variants) => variants.map(({ selections, product
         minimumAmount: minPrice.final.amount.value,
       },
     },
-    selections: selections ?? [],
+    selections: (selections ?? []).sort(),
   };
 
   const specialToDate = parseSpecialToDate(product);
@@ -65,10 +65,12 @@ export const adapter = (config, variants) => variants.map(({ selections, product
 });
 
 /**
- * @param {string} sku
+ * @param {{
+ *  sku: string;
+ *  imageRoles?: string[];
+ * }} opts
  */
-// @ts-ignore
-export default (sku) => gql`
+export default ({ sku, imageRoles = [] }) => gql`
 {
   variants(sku: "${sku}") {
     variants {
@@ -78,7 +80,7 @@ export default (sku) => gql`
         sku
         inStock
         externalId
-        images {
+        images(roles: [${imageRoles.map((s) => `"${s}"`).join(',')}]) {
           url
           label
         }