@ekolabs/eko-gallery-react
Advanced tools
A library for integrating the eko gallery into your react based site.
npm install @ekolabs/eko-gallery-react
OR
yarn add @ekolabs/eko-gallery-react
The EkoGallery component is used to render the eko gallery on your site. It should replace your existing product gallery component.
import { EkoGallery } from '@ekolabs/eko-gallery-react';
<EkoGallery
className="mb-4"
items={items}
config={config}
variantId={variantId}
onEvent={onEkoGalleryEvent}>
{/* Your existing product gallery component that will serve as a fallback */}
<CustomerGalley />
</EkoGallery>
This component accepts the following props:
| Prop | Type | Description |
|---|---|---|
| className | String | Optional. class names to add to the EkoGallery component, for styling purposes for example |
| items | Array | Array of gallery items that will be rendered by order |
| config | Object | The eko gallery configuration. This object will be published via the eko platform and exposed via an api endpoint (see below) |
| variantId | String | Optional. The selected variant (if applicable). It is used to switch to the relevant variant gallery assets when the product variant changes |
| onEvent | Function | Optional. Handler for events occurred in the eko gallery, for third party tools tracking for example |
When passing the
onEventprop, make sure to use theuseCallback()hook to avoid unnecessary re-renders.
To get the eko product configs, you should use the getEkoProductConfigUrl() function to get the url, fetch the data and pass it to the EkoGallery component.
The getEkoProductConfigUrl() receives the eko sales channel id and returns the url to fetch the eko product configs from.
import { getEkoProductConfigUrl } from '@ekolabs/eko-gallery-react';
const EKO_SALES_CHANNEL_ID = process.env.EKO_SALES_CHANNEL_ID;
const ekoProductConfigUrl = getEkoProductConfigUrl(EKO_SALES_CHANNEL_ID);
const ekoProductConfigs = await fetch(ekoProductConfigUrl).then(res => res.json());
Our 1st party tracking tool should be added in order to track events on the site.
The eko analytics snippet should be added to the site's head tag, here is an example in Next.js:
// _document.tsx
import Script from 'next/script';
import { getEkoAnalyticsSnippet } from '@ekolabs/eko-gallery-react';
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
render() {
return (
<Html lang="en">
<Head>
<Script id="eko-analytics-snippet" strategy="beforeInteractive">
{getEkoAnalyticsSnippet(IS_PRODUCTION)}
</Script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
The ekoWebPixel API is used to track the events on your site.
Init once via the init() method:
import { ekoWebPixel } from '@ekolabs/eko-gallery-react';
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
useEffect(() => {
ekoWebPixel.init(IS_PRODUCTION);
}, []);
Track events via the track() method:
import { ekoWebPixel } from '@ekolabs/eko-gallery-react';
ekoWebPixel.track('pixel.page_viewed');
ekoWebPixel.track('pixel.product_viewed', { ... });
ekoWebPixel.track('pixel.cart.add', { ... });
ekoWebPixel.track('pixel.cart.remove', { ... });
// For traffic allocation:
ekoWebPixel.track('trafficallocation.decision', { ... });
// For non shopify backend stores:
ekoWebPixel.track('pixel.checkout', { ... });
ekoWebPixel.track('pixel.order', { ... });
Report on route changes:
import { ekoWebPixel } from '@ekolabs/eko-gallery-react';
ekoWebPixel.onRouteChanged();
FAQs
eko gallery for react framework
The npm package @ekolabs/eko-gallery-react receives a total of 1,455 weekly downloads. As such, @ekolabs/eko-gallery-react popularity was classified as popular.
We found that @ekolabs/eko-gallery-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.
Security News
ESLint now supports HTML linting with 48 new rules, expanding its language plugin system to cover more of the modern web development stack.
Security News
CISA is discontinuing official RSS support for KEV and cybersecurity alerts, shifting updates to email and social media, disrupting automation workflows.