@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={{
        apiKey: "",
        instantSearchApiKey: "",
        userId: "",
        userEmail: "",
        userFullname: "",
        locale: ""
      }}
    >
      {/* Routes, Pages, etc */}
    </SledgeProvider>
  );
}

API reference


config.apiKey

Fill with your own key

  • Type: string

config.instantSearchApiKey

Fill with your own key

  • Type: string

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.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