global intialization vs initialize from block

blocks/commerce-cart/commerce-cart.js

@@ -8,6 +8,8 @@ import { render as provider } from '@dropins/storefront-cart/render.js';
 import Cart from '@dropins/storefront-cart/containers/Cart.js';
 
 export default async function decorate(block) {
+  // Initialize Drop-ins – already initialized in scripts/dropins.js
+
   // Temporary link to Checkout
   const goToCheckoutLink = document.createElement('a');
   goToCheckoutLink.href = '/checkout';

blocks/commerce-checkout/commerce-checkout.js

@@ -2,15 +2,22 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
 // Drop-in Tools
+import { initializers } from '@dropins/elsie/initializer.js';
 import { events } from '@dropins/elsie/event-bus.js';
 
+// Drop-in APIs
+import * as checkout from '@dropins/storefront-checkout/api.js';
+
 // Drop-in Providers
 import { render as provider } from '@dropins/storefront-checkout/render.js';
 
 // Drop-in Containers
 import Checkout from '@dropins/storefront-checkout/containers/Checkout.js';
 
 export default async function decorate(block) {
+  // Initialize Drop-ins
+  initializers.register(checkout.initialize, {});
+
   // Listen for order confirmation and redirect to order confirmation page
   events.on('checkout/order', (data) => {
     window.location.replace(`/order-confirmation?orderRef=${data.masked_order_id}`);

blocks/commerce-order-confirmation/commerce-order-confirmation.js

@@ -1,13 +1,22 @@
 /* eslint-disable import/no-unresolved */
 /* eslint-disable import/no-extraneous-dependencies */
 
+// Drop-in Tools
+import { initializers } from '@dropins/elsie/initializer.js';
+
+// Drop-in APIs
+import * as orderConfirmation from '@dropins/storefront-order-confirmation/api.js';
+
 // Drop-in Providers
 import { render as provider } from '@dropins/storefront-order-confirmation/render.js';
 
 // Drop-in Containers
 import OrderConfirmation from '@dropins/storefront-order-confirmation/containers/OrderConfirmation.js';
 
 export default async function decorate(block) {
+  // Initialize Drop-ins
+  initializers.register(orderConfirmation.initialize, {});
+
   const params = new URLSearchParams(window.location.search);
   const orderRef = params.get('orderRef');
 

blocks/product-details/product-details.js

@@ -1,6 +1,9 @@
 /* eslint-disable import/no-unresolved */
 /* eslint-disable import/no-extraneous-dependencies */
 
+// Drop-in Tools
+import { initializers } from '@dropins/elsie/initializer.js';
+
 // Drop-in APIs
 import * as product from '@dropins/storefront-pdp/api.js';
 import { addProductsToCart } from '@dropins/storefront-cart/api.js';
@@ -16,10 +19,13 @@ import { getConfigValue } from '../../scripts/configs.js';
 import { getSkuFromUrl } from '../../scripts/commerce.js';
 
 export default async function decorate(block) {
-  // Set Data Service Endpoint (optional if not using Commerce Mesh)
+  // Initialize Drop-ins
+  initializers.register(product.initialize, {});
+
+  // Set Fetch Endpoint (Service)
   product.setEndpoint(await getConfigValue('commerce-endpoint'));
 
-  // Set Fetch Headers
+  // Set Fetch Headers (Service)
   product.setFetchGraphQlHeaders({
     'Content-Type': 'application/json',
     'Magento-Environment-Id': await getConfigValue('commerce-environment-id'),

scripts/dropins.js

@@ -1,28 +1,22 @@
 // Drop-in Tools
 import { events } from '@dropins/elsie/event-bus.js';
-import * as mesh from '@dropins/elsie/fetch-graphql.js';
+import { setEndpoint } from '@dropins/elsie/fetch-graphql.js';
 import { initializers } from '@dropins/elsie/initializer.js';
 
 // Drop-ins
 import * as cart from '@dropins/storefront-cart/api.js';
-import * as product from '@dropins/storefront-pdp/api.js';
-import * as checkout from '@dropins/storefront-checkout/api.js';
-import * as orderConfirmation from '@dropins/storefront-order-confirmation/api.js';
 
 // Libs
 import { getConfigValue } from './configs.js';
 
 export default async function initializeDropins() {
-  // Set Commerce Mesh endpoint
-  mesh.setEndpoint(await getConfigValue('commerce-core-endpoint'));
+  // Set Fetch Endpoint (Global)
+  setEndpoint(await getConfigValue('commerce-core-endpoint'));
 
-  // Initializers
-  initializers.register(product.initialize, {});
+  // Initializers (Global)
   initializers.register(cart.initialize, {});
-  initializers.register(checkout.initialize, {});
-  initializers.register(orderConfirmation.initialize, {});
 
-  // Mount Drop-ins
+  // Mount all registered drop-ins
   if (document.readyState === 'complete') {
     initializers.mount();
   } else {