adobe / adobe/commerce-events

ES6 import of mse does work in React applications

Open
#198 0 comments 0 reactions 0 assignees View on GitHub
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 (



Products Recommendations

Check Network tab in devtool and filter for tp2



);
}

export default App;

```

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.