diff --git a/scripts/commerce.js b/scripts/commerce.js index 4a5a3c869..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, getHeaders } from './configs.js'; +import { + getConfigValue, getCookie, getQueryParams, +} from './configs.js'; import { getConsent } from './scripts.js'; /* Common query fragments */ @@ -22,10 +24,9 @@ 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')); - await getHeaders('pdp').then((headers) => { - Object.keys(headers).forEach((key) => { - // TODO: is it OK to apply all headers as query param even if they include things like api-key and content-type which was not previously a query param? - urlWithQueryParams.searchParams.append(key, headers[key]); + 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 3deddd743..022b3a9f8 100644 --- a/scripts/configs.js +++ b/scripts/configs.js @@ -80,7 +80,8 @@ 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 +/** + * 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) => { @@ -97,6 +98,24 @@ export const getHeaders = async (scope, environment) => { }, {}); }; +/** + * 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 8664c7f5e..6476ecffd 100644 --- a/scripts/initializers/pdp.js +++ b/scripts/initializers/pdp.js @@ -29,7 +29,6 @@ await initializeDropin(async () => { setEndpoint(await commerceEndpointWithQueryParams()); // Set Fetch Headers (Service) - // TODO: is it OK to apply all headers even though the commerceEndpointWithQueryParams also applies them? setFetchGraphQlHeaders(await getHeaders('pdp')); const sku = getSkuFromUrl();