Skip to content

Commit 4d736e8

Browse files
sirughsirugh
authored
USF-1877: Headers from config (#267)
1 parent b97180d commit 4d736e8

File tree

17 files changed

+89
-59
lines changed

17 files changed

+89
-59
lines changed

‎blocks/header/searchbar.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ import { getConfigValue } from '../../scripts/configs.js';
66
await loadScript(widgetProd);
77

88
const storeDetails = {
9-
environmentId: await getConfigValue('commerce-environment-id'),
9+
environmentId: await getConfigValue('commerce.headers.cs.Magento-Environment-Id'),
1010
environmentType: (await getConfigValue('commerce-endpoint')).includes('sandbox') ? 'testing' : '',
11-
apiKey: await getConfigValue('commerce-x-api-key'),
11+
apiKey: await getConfigValue('commerce.headers.cs.x-api-key'),
1212
apiUrl: await getConfigValue('commerce-endpoint'),
13-
websiteCode: await getConfigValue('commerce-website-code'),
14-
storeCode: await getConfigValue('commerce-store-code'),
15-
storeViewCode: await getConfigValue('commerce-store-view-code'),
13+
websiteCode: await getConfigValue('commerce.headers.cs.Magento-Website-Code'),
14+
storeCode: await getConfigValue('commerce.headers.cs.Magento-Store-Code'),
15+
storeViewCode: await getConfigValue('commerce.headers.cs.Magento-Store-View-Code'),
1616
config: {
1717
pageSize: 8,
1818
perPageConfig: {
@@ -26,7 +26,7 @@ import { getConfigValue } from '../../scripts/configs.js';
2626
allowAllProducts: false,
2727
},
2828
context: {
29-
customerGroup: await getConfigValue('commerce-customer-group'),
29+
customerGroup: await getConfigValue('commerce.headers.cs.Magento-Customer-Group'),
3030
},
3131
route: ({ sku, urlKey }) => `/products/${urlKey}/${sku}`,
3232
searchRoute: {

‎blocks/product-list-page/product-list-page.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ export default async function decorate(block) {
99
block.textContent = '';
1010

1111
const storeDetails = {
12-
environmentId: await getConfigValue('commerce-environment-id'),
12+
environmentId: await getConfigValue('commerce.headers.cs.Magento-Environment-Id'),
1313
environmentType: (await getConfigValue('commerce-endpoint')).includes('sandbox') ? 'testing' : '',
14-
apiKey: await getConfigValue('commerce-x-api-key'),
14+
apiKey: await getConfigValue('commerce.headers.cs.x-api-key'),
1515
apiUrl: await getConfigValue('commerce-endpoint'),
16-
websiteCode: await getConfigValue('commerce-website-code'),
17-
storeCode: await getConfigValue('commerce-store-code'),
18-
storeViewCode: await getConfigValue('commerce-store-view-code'),
16+
websiteCode: await getConfigValue('commerce.headers.cs.Magento-Website-Code'),
17+
storeCode: await getConfigValue('commerce.headers.cs.Magento-Store-Code'),
18+
storeViewCode: await getConfigValue('commerce.headers.cs.Magento-Store-View-Code'),
1919
config: {
2020
pageSize: 8,
2121
perPageConfig: {
@@ -42,7 +42,7 @@ export default async function decorate(block) {
4242
},
4343
},
4444
context: {
45-
customerGroup: await getConfigValue('commerce-customer-group'),
45+
customerGroup: await getConfigValue('commerce.headers.cs.Magento-Customer-Group'),
4646
},
4747
route: ({ sku, urlKey }) => {
4848
const a = new URL(window.location.origin);

‎blocks/product-recommendations/product-recommendations.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ async function loadRecommendation(block, context, visibility, filters) {
196196
return;
197197
}
198198

199-
const storeViewCode = await getConfigValue('commerce-store-view-code');
199+
const storeViewCode = await getConfigValue('commerce.headers.cs.Magento-Store-View-Code');
200200

201201
if (unitsPromise) {
202202
return;

‎scripts/commerce.js

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/* eslint-disable import/prefer-default-export, import/no-cycle */
2-
import { getConfigValue, getCookie } from './configs.js';
2+
import {
3+
getConfigValue, getCookie, getHeaders,
4+
} from './configs.js';
35
import { getConsent } from './scripts.js';
46

57
/* Common query fragments */
@@ -20,22 +22,18 @@ export const priceFieldsFragment = `fragment priceFields on ProductViewPrice {
2022
}`;
2123

2224
export async function commerceEndpointWithQueryParams() {
23-
// Set Query Parameters so they can be appended to the endpoint
2425
const urlWithQueryParams = new URL(await getConfigValue('commerce-endpoint'));
25-
urlWithQueryParams.searchParams.append('Magento-Environment-Id', await getConfigValue('commerce-environment-id'));
26-
urlWithQueryParams.searchParams.append('Magento-Website-Code', await getConfigValue('commerce-website-code'));
27-
urlWithQueryParams.searchParams.append('Magento-Store-View-Code', await getConfigValue('commerce-store-view-code'));
28-
urlWithQueryParams.searchParams.append('Magento-Store-Code', await getConfigValue('commerce-store-code'));
29-
urlWithQueryParams.searchParams.append('Magento-Customer-Group', await getConfigValue('commerce-customer-group'));
26+
// Set some query parameters for use as a cache-buster. No other purpose.
27+
urlWithQueryParams.searchParams.append('ac-storecode', await getConfigValue('commerce.headers.cs.Magento-Store-Code'));
3028
return urlWithQueryParams;
3129
}
3230

3331
/* Common functionality */
3432

3533
export async function performCatalogServiceQuery(query, variables) {
3634
const headers = {
35+
...(await getHeaders('cs')),
3736
'Content-Type': 'application/json',
38-
'x-api-key': await getConfigValue('commerce-x-api-key'),
3937
};
4038

4139
const apiCall = await commerceEndpointWithQueryParams();
@@ -66,7 +64,7 @@ export async function performMonolithGraphQLQuery(query, variables, GET = true,
6664

6765
const headers = {
6866
'Content-Type': 'application/json',
69-
Store: await getConfigValue('commerce-store-view-code'),
67+
Store: await getConfigValue('commerce.headers.cs.Magento-Store-View-Code'),
7068
};
7169

7270
if (USE_TOKEN) {
@@ -161,7 +159,7 @@ export async function trackHistory() {
161159
return;
162160
}
163161
// Store product view history in session storage
164-
const storeViewCode = await getConfigValue('commerce-store-view-code');
162+
const storeViewCode = await getConfigValue('commerce.headers.cs.Magento-Store-View-Code');
165163
window.adobeDataLayer.push((dl) => {
166164
dl.addEventListener('adobeDataLayer:change', (event) => {
167165
if (!event.productContext) {

‎scripts/configs.js

+18
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,24 @@ export const getConfigValue = async (configParam, environment) => {
8080
return configElements.find((c) => c.key === configParam)?.value;
8181
};
8282

83+
/**
84+
* Retrieves headers from config entries like commerce.headers.pdp.my-header, etc and
85+
* returns as object of all headers like { my-header: value, ... }
86+
*/
87+
export const getHeaders = async (scope, environment) => {
88+
const env = environment || calcEnvironment();
89+
const config = await getConfigForEnvironment(env);
90+
const configElements = config.data.filter((el) => el?.key.includes(`headers.${scope}`));
91+
92+
return configElements.reduce((obj, item) => {
93+
let { key } = item;
94+
if (key.includes(`commerce.headers.${scope}.`)) {
95+
key = key.replace(`commerce.headers.${scope}.`, '');
96+
}
97+
return { ...obj, [key]: item.value };
98+
}, {});
99+
};
100+
83101
export const getCookie = (cookieName) => {
84102
const cookies = document.cookie.split(';');
85103
let foundValue;

‎scripts/delayed.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ async function initAnalytics() {
77
// Load Commerce events SDK and collector
88
if (getConsent('commerce-collection')) {
99
const config = {
10-
environmentId: await getConfigValue('commerce-environment-id'),
10+
environmentId: await getConfigValue('commerce.headers.cs.Magento-Environment-Id'),
1111
environment: await getConfigValue('commerce-environment'),
1212
storeUrl: await getConfigValue('commerce-store-url'),
1313
websiteId: parseInt(await getConfigValue('commerce-website-id'), 10),
14-
websiteCode: await getConfigValue('commerce-website-code'),
14+
websiteCode: await getConfigValue('commerce.headers.cs.Magento-Website-Code'),
1515
storeId: parseInt(await getConfigValue('commerce-store-id'), 10),
16-
storeCode: await getConfigValue('commerce-store-code'),
16+
storeCode: await getConfigValue('commerce.headers.cs.Magento-Store-Code'),
1717
storeViewId: parseInt(await getConfigValue('commerce-store-view-id'), 10),
18-
storeViewCode: await getConfigValue('commerce-store-view-code'),
18+
storeViewCode: await getConfigValue('commerce.headers.cs.Magento-Store-View-Code'),
1919
websiteName: await getConfigValue('commerce-website-name'),
2020
storeName: await getConfigValue('commerce-store-name'),
2121
storeViewName: await getConfigValue('commerce-store-view-name'),

‎scripts/initializers/account.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { initializers } from '@dropins/tools/initializer.js';
2-
import { initialize } from '@dropins/storefront-account/api.js';
2+
import { initialize, setFetchGraphQlHeaders } from '@dropins/storefront-account/api.js';
33
import { initializeDropin } from './index.js';
44
import { fetchPlaceholders } from '../aem.js';
5+
import { getHeaders } from '../configs.js';
56

67
await initializeDropin(async () => {
7-
const labels = await fetchPlaceholders();
8+
setFetchGraphQlHeaders(await getHeaders('account'));
89

10+
const labels = await fetchPlaceholders();
911
const langDefinitions = {
1012
default: {
1113
...labels,

‎scripts/initializers/auth.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
/* eslint-disable import/no-cycle */
22
import { initializers } from '@dropins/tools/initializer.js';
3-
import { initialize } from '@dropins/storefront-auth/api.js';
3+
import { initialize, setFetchGraphQlHeaders } from '@dropins/storefront-auth/api.js';
44
import { initializeDropin } from './index.js';
55
import { fetchPlaceholders } from '../aem.js';
6+
import { getHeaders } from '../configs.js';
67

78
await initializeDropin(async () => {
8-
const labels = await fetchPlaceholders();
9+
setFetchGraphQlHeaders(await getHeaders('auth'));
910

11+
const labels = await fetchPlaceholders();
1012
const langDefinitions = {
1113
default: {
1214
...labels,

‎scripts/initializers/cart.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
/* eslint-disable import/no-cycle */
22
import { initializers } from '@dropins/tools/initializer.js';
3-
import { initialize } from '@dropins/storefront-cart/api.js';
3+
import { initialize, setFetchGraphQlHeaders } from '@dropins/storefront-cart/api.js';
44
import { initializeDropin } from './index.js';
55
import { fetchPlaceholders } from '../aem.js';
6+
import { getHeaders } from '../configs.js';
67

78
await initializeDropin(async () => {
8-
const labels = await fetchPlaceholders();
9+
setFetchGraphQlHeaders(await getHeaders('cart'));
910

11+
const labels = await fetchPlaceholders();
1012
const langDefinitions = {
1113
default: {
1214
...labels,

‎scripts/initializers/checkout.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { initializers } from '@dropins/tools/initializer.js';
2-
import { initialize } from '@dropins/storefront-checkout/api.js';
2+
import { initialize, setFetchGraphQlHeaders } from '@dropins/storefront-checkout/api.js';
33
import { initializeDropin } from './index.js';
44
import { fetchPlaceholders } from '../aem.js';
5+
import { getHeaders } from '../configs.js';
56

67
await initializeDropin(async () => {
7-
const labels = await fetchPlaceholders();
8+
setFetchGraphQlHeaders(await getHeaders('checkout'));
89

10+
const labels = await fetchPlaceholders();
911
const langDefinitions = {
1012
default: {
1113
...labels,

‎scripts/initializers/order.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { events } from '@dropins/tools/event-bus.js';
22
import { initializers } from '@dropins/tools/initializer.js';
3-
import { initialize } from '@dropins/storefront-order/api.js';
4-
import { checkIsAuthenticated } from '../configs.js';
3+
import { initialize, setFetchGraphQlHeaders } from '@dropins/storefront-order/api.js';
4+
import { checkIsAuthenticated, getHeaders } from '../configs.js';
55
import { initializeDropin } from './index.js';
66
import { fetchPlaceholders } from '../aem.js';
77

@@ -19,22 +19,24 @@ import {
1919

2020
await initializeDropin(async () => {
2121
const { pathname, searchParams } = new URL(window.location.href);
22+
if (pathname.includes(CUSTOMER_ORDERS_PATH)) {
23+
return;
24+
}
2225
const isAccountPage = pathname.includes(CUSTOMER_PATH);
2326
const orderRef = searchParams.get('orderRef');
2427
const returnRef = searchParams.get('returnRef');
2528
const orderNumber = searchParams.get('orderNumber');
2629
const isTokenProvided = orderRef && orderRef.length > 20;
30+
31+
setFetchGraphQlHeaders(await getHeaders('order'));
32+
2733
const labels = await fetchPlaceholders();
2834
const langDefinitions = {
2935
default: {
3036
...labels,
3137
},
3238
};
3339

34-
if (pathname.includes(CUSTOMER_ORDERS_PATH)) {
35-
return;
36-
}
37-
3840
const pathsRequiringRedirects = [
3941
ORDER_DETAILS_PATH,
4042
CUSTOMER_ORDER_DETAILS_PATH,

‎scripts/initializers/pdp.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
getSkuFromUrl,
1717
loadErrorPage,
1818
} from '../commerce.js';
19-
import { getConfigValue } from '../configs.js';
19+
import { getHeaders } from '../configs.js';
2020
import { fetchPlaceholders } from '../aem.js';
2121

2222
export const IMAGES_SIZES = {
@@ -30,8 +30,8 @@ await initializeDropin(async () => {
3030

3131
// Set Fetch Headers (Service)
3232
setFetchGraphQlHeaders({
33+
...(await getHeaders('cs')),
3334
'Content-Type': 'application/json',
34-
'x-api-key': await getConfigValue('commerce-x-api-key'),
3535
});
3636

3737
const sku = getSkuFromUrl();

‎tools/pdp-metadata/pdp-metadata.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@ const configFile = `${basePath}/configs.json?sheet=prod`;
1111
async function performCatalogServiceQuery(config, query, variables) {
1212
const headers = {
1313
'Content-Type': 'application/json',
14-
'x-api-key': config['commerce-x-api-key'],
14+
'x-api-key': config['commerce.headers.cs.x-api-key'],
15+
'Magento-Customer-Group': config['commerce.headers.cs.Magento-Customer-Group'],
16+
'Magento-Environment-Id': config['commerce.headers.cs.Magento-Environment-Id'],
17+
'Magento-Store-Code': config['commerce.headers.cs.Magento-Store-Code'],
18+
'Magento-Store-View-Code': config['commerce.headers.cs.Magento-Store-View-Code'],
19+
'Magento-Website-Code': config['commerce.headers.cs.Magento-Website-Code'],
1520
};
1621

1722
const apiCall = await commerceEndpointWithQueryParams();
@@ -166,7 +171,7 @@ async function addVariantsToProducts(products, config) {
166171
item_${i}: variants(sku: "${product.productView.sku}") {
167172
...ProductVariant
168173
}
169-
`
174+
`
170175
}).join('\n')}
171176
}${variantsFragment}`;
172177

0 commit comments

Comments
 (0)