Latest

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 set's the standard required props on the ReactifySearchProvider for mode, shopifyPermanentDomain and collectionHandle.

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

const ReactifySearchFactory = new ReactifySearchLiquidFactory({
  mode: "instant-search",
});

Three functions are made available to return the configured provide, mount node and data loaded in 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;
}

Last updated