poc: headers from config

scripts/commerce.js

@@ -1,5 +1,7 @@
 /* eslint-disable import/prefer-default-export, import/no-cycle */
-import { getConfigValue, getCookie } from './configs.js';
+import {
+  getConfigValue, getCookie, getQueryParams,
+} from './configs.js';
 import { getConsent } from './scripts.js';
 
 /* Common query fragments */
@@ -22,11 +24,11 @@ export const priceFieldsFragment = `fragment priceFields on ProductViewPrice {
 export async function commerceEndpointWithQueryParams() {
   // Set Query Parameters so they can be appended to the endpoint
   const urlWithQueryParams = new URL(await getConfigValue('commerce-endpoint'));
-  urlWithQueryParams.searchParams.append('Magento-Environment-Id', await getConfigValue('commerce-environment-id'));
-  urlWithQueryParams.searchParams.append('Magento-Website-Code', await getConfigValue('commerce-website-code'));
-  urlWithQueryParams.searchParams.append('Magento-Store-View-Code', await getConfigValue('commerce-store-view-code'));
-  urlWithQueryParams.searchParams.append('Magento-Store-Code', await getConfigValue('commerce-store-code'));
-  urlWithQueryParams.searchParams.append('Magento-Customer-Group', await getConfigValue('commerce-customer-group'));
+  await getQueryParams('pdp').then((params) => {
+    Object.keys(params).forEach((key) => {
+      urlWithQueryParams.searchParams.append(key, params[key]);
+    });
+  });
   return urlWithQueryParams;
 }
 

scripts/configs.js

@@ -80,6 +80,42 @@ export const getConfigValue = async (configParam, environment) => {
   return configElements.find((c) => c.key === configParam)?.value;
 };
 
+/**
+ * Retrieves headers from config entries like commerce.headers.pdp.my-header, etc and
+ * returns as object of all headers like { my-header: value, ... }
+*/
+export const getHeaders = async (scope, environment) => {
+  const env = environment || calcEnvironment();
+  const config = await getConfigForEnvironment(env);
+  const configElements = config.data.filter((el) => el?.key.includes(`headers.${scope}`));
+
+  return configElements.reduce((obj, item) => {
+    let { key } = item;
+    if (key.includes(`commerce.headers.${scope}.`)) {
+      key = key.replace(`commerce.headers.${scope}.`, '');
+    }
+    return { ...obj, [key]: item.value };
+  }, {});
+};
+
+/**
+ * Retrieves query params from config entries like commerce.queryparams.pdp.my-param, etc and
+ * returns as object of all params like { my-query-param: value, ... }
+*/
+export const getQueryParams = async (scope, environment) => {
+  const env = environment || calcEnvironment();
+  const config = await getConfigForEnvironment(env);
+  const configElements = config.data.filter((el) => el?.key.includes(`queryparam.${scope}`));
+
+  return configElements.reduce((obj, item) => {
+    let { key } = item;
+    if (key.includes(`commerce.queryparam.${scope}.`)) {
+      key = key.replace(`commerce.queryparam.${scope}.`, '');
+    }
+    return { ...obj, [key]: item.value };
+  }, {});
+};
+
 export const getCookie = (cookieName) => {
   const cookies = document.cookie.split(';');
   let foundValue;

scripts/initializers/pdp.js

@@ -16,7 +16,7 @@ import {
   getSkuFromUrl,
   loadErrorPage,
 } from '../commerce.js';
-import { getConfigValue } from '../configs.js';
+import { getHeaders } from '../configs.js';
 import { fetchPlaceholders } from '../aem.js';
 
 export const IMAGES_SIZES = {
@@ -29,10 +29,7 @@ await initializeDropin(async () => {
   setEndpoint(await commerceEndpointWithQueryParams());
 
   // Set Fetch Headers (Service)
-  setFetchGraphQlHeaders({
-    'Content-Type': 'application/json',
-    'x-api-key': await getConfigValue('commerce-x-api-key'),
-  });
+  setFetchGraphQlHeaders(await getHeaders('pdp'));
 
   const sku = getSkuFromUrl();
   const optionsUIDs = getOptionsUIDsFromUrl();