ReactifySearchLiquidFactory

Purpose

The ReactifySearchLiquidFactory class provides helper functions when implementing Reactify Search on a Shopify theme.

Usage

The ReactifySearchLiquidFactory class must be initialised with the mode prop and called before rendering your React application.

The class automatically sets the standard required props for ReactifySearchProvider: shopifyPermanentDomain and collectionHandle.

However, you can add more props, such as market. The list of available props can be found on ReactSearchProvider.

import { ReactifySearchLiquidFactory } from "@usereactify/search";

const ReactifySearchFactory = new ReactifySearchLiquidFactory({
  mode: "instant-search",
  market="12345" // optionally the ID of the Shopify market to use
});

Three functions are provided to return the configured provider, mount node, and data loaded from the "reactify-data" script tag.

const ReactifySearchProvider = ReactifySearchFactory.getProvider();

const ReactifySearchMountNode = ReactifySearchFactory.getMountNode();

const ReactifySearchData = ReactifySearchFactory.getData();

A theme installation guide can be found here with examples on how to use these to render your React applications.

Props

type ReactifySearchLiquidFactoryProps = Omit<
  ReactifySearchProviderProps,
  "shopifyPermanentDomain"
> & {
  shopifyPermanentDomain?: string;
  collectionHandle?: string;
}