Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ekolabs/eko-gallery-react

Package Overview
Dependencies
Maintainers
0
Versions
258
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ekolabs/eko-gallery-react

eko gallery for react framework

  • 1.0.11
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
622
decreased by-8.26%
Maintainers
0
Weekly downloads
 
Created
Source

A library for integrating the eko gallery into your react based site.

Installation

npm install @ekolabs/eko-gallery-react

OR

yarn add @ekolabs/eko-gallery-react

Usage

EkoGallery Component

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:

PropTypeDescription
classNameStringOptional. class names to add to the EkoGallery component, for styling purposes for example
itemsArrayArray of gallery items that will be rendered by order
configObjectThe eko gallery configuration. This object will be published via the eko platform and exposed via an api endpoint (see below)
variantIdStringOptional. The selected variant (if applicable). It is used to switch to the relevant variant gallery assets when the product variant changes
onEventFunctionOptional. Handler for events occurred in the eko gallery, for third party tools tracking for example

When passing the onEvent prop, make sure to use the useCallback() hook to avoid unnecessary re-renders.

Config data fetching

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());

Analytics setup

Our 1st party tracking tool should be added in order to track events on the site.

The eko analytics snippet

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>
    );
}
ekoWebPixel

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', { ... });

Report on route changes:

import { ekoWebPixel } from '@ekolabs/eko-gallery-react';

ekoWebPixel.onRouteChanged();

Keywords

FAQs

Package last updated on 01 Dec 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc