Documentation
Latest
Latest
  • Reactify Search
  • Getting Started
  • Guides
    • Upgrade workflow
    • Upgrade v4 to v5
    • Liquid Theme
    • SSR
  • Release Notes
  • Troubleshooting
    • Categorising Issues
    • Common Issues
    • Debugger
    • CodeSandbox
    • Further Troubleshooting
  • Security Overview
  • Components
    • Component Basics
    • ReactifySearchProvider
    • Sensors
    • Search
    • SortBy
    • ClearAll
    • FiltersSelected
    • Filters
    • Filter
    • Results
    • Stats
    • Suggestions
    • CustomComponent
  • Hooks
    • useSearch
    • useSortBy
    • useFilters
    • useResults
  • Classes
    • ReactifySearchLiquidFactory
Powered by GitBook
On this page
  • Purpose
  • Usage
  • Props

Was this helpful?

  1. Classes

ReactifySearchLiquidFactory

PrevioususeResults

Last updated 2 years ago

Was this helpful?

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 with examples on how to use these to render your React applications.

Props

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