fix: image roles config option

adobe-rnd · Nov 5, 2024 · b299039 · b299039
1 parent e4b2dfb
commit b299039
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 11 deletions.
diff --git a/src/content/adobe-commerce.js b/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}`, {

diff --git a/src/content/queries/cs-product.js b/src/content/queries/cs-product.js
@@ -94,7 +94,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}"]
     ) {
@@ -112,7 +118,7 @@ export default ({ sku }) => gql`{
       addToCartAllowed
       inStock
       externalId
-      images(roles: []) { 
+      images(roles: [${imageRoles.map((s) => `"${s}"`).join(',')}]) { 
         url
         label
       }

diff --git a/src/content/queries/cs-variants.js b/src/content/queries/cs-variants.js
@@ -59,10 +59,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 {
@@ -72,7 +74,7 @@ export default (sku) => gql`
         sku
         inStock
         externalId
-        images {
+        images(roles: [${imageRoles.map((s) => `"${s}"`).join(',')}]) {
           url
           label
         }

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -34,14 +34,13 @@ declare global {
     catalogEndpoint?: string;
     sku?: string;
     matchedPatterns: string[];
+    imageRoles?: string[];
 
     confMap: ConfigMap;
     params: Record<string, string>;
     headers: Record<string, string>;
     host: string;
     offerVariantURLTemplate: string;
-    // matchedPath: string;
-    // matchedPathConfig: Config;
     attributeOverrides: AttributeOverrides;
     siteOverrides: Record<string, Record<string, unknown>>;
   }

diff --git a/src/utils/product.js b/src/utils/product.js
@@ -15,7 +15,7 @@ export const hasUppercase = (str) => /[A-Z]/.test(str);
 /**
  * This function combines an array of strings with interpolated
  * parameters to create a GraphQL query string.
- * @param {string[]} strs - The string array representing parts of the GraphQL query.
+ * @param {TemplateStringsArray} strs - The string array representing parts of the GraphQL query.
  * @param {...string} params - The parameters to be interpolated into the query.
  * @returns {string} - The resulting GraphQL query string.
  */