@sledge-app/core

You can use our React-built widget by using the @sledge-app/core package.

@sledge-app/core provides several components you can use to integrate it with your store.

Available components :

`SledgeProvider`

SledgeProvider is a required component for sharing global user session and settings throughout the hierarchy of all sledge applications.

See example:

Anatomy

app/root.tsx

import { SledgeProvider } from "@sledge-app/core";
 
export default function App() {
  return (
    <SledgeProvider
      config={{
        userId: "",
        userEmail: "",
        userFullname: "",
        domain: "",
        locale: ""
      }}
    >
      {/* Routes, Pages, etc */}
    </SledgeProvider>
  );
}

API reference

`config.userId`

Fill with your own user logined data

Type: string

`config.userEmail`

Fill with your own user logined data

Type: string

`config.userFullname`

Fill with your own user logined data

Type: string

`config.domain`

Fill with your shop's .myshopify.com domain name

Type: string

`config.locale`

Fill with your locale language

Type: string

`CustomComponents`

Sledge provides default layout and components like product cards, instant search results, etc. With CustomComponents you can build your own layout based on your store branding or design, navigate through link example below to see how flexible CustomComponents is or read through its API reference below.

See example:

Anatomy

import { CustomComponents } from "@sledge-app/core";
 
<CustomComponents
  otherIndexList={({ name, items, setShowPopupComponent }) => {
    // Your custom component
  }}
  productCard={({ product, showPopupComponent, setShowPopupComponent, sourceApp }) => {
    // Your custom component
  }}
  searchViewMoreResult={({ keyword, setShowPopupComponent, setRenderSearchResult, redirectObjectDirection }) => {
    // Your custom component
  }}
  suggestionKeywordList={({ keywords, setShowPopupComponent, setRenderSearchResult }) => {
    // Your custom component
  }}
  wishlistWidgetAlert={() => {
    // Your custom component
  }}
  collectionCard={({ data }) => {
    // Your custom component
  }}
  pageCard={({ data }) => {
    // Your custom component
  }}
  blogCard={({ data }) => {
    // Your custom component
  }}
  articleCard={({ data }) => {
    // Your custom component
  }}
/>;

API reference

`otherIndexList({ name, items, setShowPopupComponent })`

Render your own custom component in the app

This attribute works in these packages:
@sledge-app/react-instant-search

Type: ReactNode
Default: null

`productCard({ product, showPopupComponent, setShowPopupComponent, sourceApp })`

Render your own custom component in the app

This attribute works in these packages:
@sledge-app/react-wishlist
@sledge-app/react-instant-search

Type: ReactNode
Default: null

`searchViewMoreResult({ keyword, setShowPopupComponent, setRenderSearchResult, redirectObjectDirection })`

Render your own custom component in the app

This attribute works in these packages:
@sledge-app/react-instant-search

Type: ReactNode
Default: null

`suggestionKeywordList({ keywords, setShowPopupComponent, setRenderSearchResult })`

Render your own custom component in the app

This attribute works in these packages:
@sledge-app/react-instant-search

Type: ReactNode
Default: null

`wishlistWidgetAlert()`

Render your own custom component in the app

This attribute works in these packages:
@sledge-app/react-wishlist

Type: ReactNode
Default: null

`collectionCard({ data })`

Render your own custom component in the app

This attribute works in these packages:
@sledge-app/react-instant-search

Type: ReactNode
Default: null

`pageCard({ data })`

Render your own custom component in the app

This attribute works in these packages:
@sledge-app/react-instant-search

Type: ReactNode
Default: null

`blogCard({ data })`

Render your own custom component in the app

This attribute works in these packages:
@sledge-app/react-instant-search

Type: ReactNode
Default: null

`articleCard({ data })`

Render your own custom component in the app

This attribute works in these packages:
@sledge-app/react-instant-search

Type: ReactNode
Default: null

Learn more

Congratulations! Now that you've learned the @sledge-app/core API references, you can start integrating Sledge to your store. Useful resources about integrating Sledge :

@sledge-app/api @sledge-app/react-wishlist