Further Troubleshooting

Even with documentation available it’s common to run into issues during implementation that are unclear or confusing. A quick process for debugging any issue that is causing confusion is to remove all custom code and simply let the Reactify Search package render out the default components.

To do this find the ReactifySearchProvider component that's experiencing issues, set the necessary props, disable any custom code and insert the Sensors, Filters and Results components within.

import React from "react";
import { ReactifySearchProvider, Sensors, Filters, Results } from "@usereactify/search";

export const CustomPage: React.FC = () => (
  // <CustomStuff ...>
    <ReactifySearchProvider
      mode="search"
      shopifyPermanentDomain="usereactify-demo.myshopify.com"
    >
      <Sensors />
      <Filters />
      <Results />
      // <CustomStuff ... />
    </ReactifySearchProvider>
  // </CustomStuff>
);

If the default components do render correctly the issue is most likely somewhere deeper within the custom components. You can now start adding those components back one-by-one until the issue reappears, at the very least this should help locate the problematic components.

If the default components do not render correctly it’s possible there is an issue with the props provided to the ReactifySearchProvider component or alternatively there might be a configuration issue.