ES6 import of mse does work in React applications
- Dominant language
- TypeScript
- Stars
- 10
- Forks
- 7
- PR merge metrics
- No merged PRs in 30d
Description
The following example shows the implementation of the mse events. I don't see it working as mentioned in the documentation.
https://experienceleague.adobe.com/en/docs/commerce/product-recommendations/getting-started/headless.
There is work around I have tried by adding magentoStorefrontEvents to window object. By adding this line I can see events are being emitted by the sdk. But does not seems to be reliable. Can you guys check if the implementation is correct. Else if there issue can you fix it. Please cross check it's implementation in next js as well.
Thanks
Code Snippet:
```
import React, { useEffect } from 'react';
import './App.css';
import { Page, Product } from "@adobe/magento-storefront-events-sdk/dist/types/types/schemas";
import { StorefrontInstance } from "@adobe/magento-storefront-events-sdk/dist/types/types/schemas/storefrontInstance";
import mse from "@adobe/magento-storefront-events-sdk";
import "@adobe/magento-storefront-event-collector";
declare global {
interface Window {
magentoStorefrontEvents: any;
}
}
// window.magentoStorefrontEvents = mse;
function App() {
useEffect(() => {
const pageContext: Page = {
pageType: "Home",
pageName: "Home Page",
maxXOffset: 0,
maxYOffset: 0,
minXOffset: 0,
minYOffset: 0,
ping_interval: 0,
pings: 0,
};
const productContext: Product = {
productId: 123,
name: "Example Product",
sku: "example-sku",
};
const storefrontInstance: StorefrontInstance = {
environmentId: "abc",
environment: "Testing",
instanceId: "abc",
websiteId: 1,
storeId: 1,
storeViewId: 1,
storeUrl: "https://abc.com.au",
websiteCode: "1",
storeCode: "1",
storeViewCode: "abc",
websiteName: "abc",
storeName: "abc",
storeViewName: "abc",
baseCurrencyCode: "AUD",
storeViewCurrencyCode: "AUD",
storefrontTemplate: "Other"
};
mse.context.setStorefrontInstance(storefrontInstance);
console.log("after set",mse.context.getContext());
// // Publish the event
mse.context.setPage(pageContext);
mse.context.setProduct(productContext);
mse.publish.pageView();
mse.publish.productPageView();
}, []);
return (
);
}
export default App;
```
Contributor guide
Research direction
Start by reproducing the React example using the documented @adobe/magento-storefront-events-sdk and @adobe/magento-storefront-event-collector imports, then compare its behavior with the linked headless documentation and a Next.js implementation. Check the mse.context and mse.publish entry points, and consider the work complete when page and product events are emitted reliably without assigning mse to window.magentoStorefrontEvents.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100