diff --git a/scripts/commerce.js b/scripts/commerce.js index b88527107..0ae4d87a8 100644 --- a/scripts/commerce.js +++ b/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; } diff --git a/scripts/configs.js b/scripts/configs.js index 098a6e46c..022b3a9f8 100644 --- a/scripts/configs.js +++ b/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; diff --git a/scripts/initializers/pdp.js b/scripts/initializers/pdp.js index eee1a9c94..6476ecffd 100644 --- a/scripts/initializers/pdp.js +++ b/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();