Futher Troubleshooting

Even with documentation available it’s common to run into issues during implementation that are unclear or confusing the first time around. 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 Provider component that's experiencing issues, set the necessary props, disable any custom code and insert the FilterStack, SensorStack and ResultList components within.

import React from "react";
import { Provider, SensorStack, FilterStack, ResultList } from "@usereactify/search";

export const CustomPage: React.FC = () => (
  // <CustomStuff ...>
    <Provider
      index="reactify-search"
      shopifyPermanentDomain="reactify-apps.myshopify.com"
    >
      <SensorStack />
      <FilterStack />
      <ResultList />
      // <CustomStuff ... />
    </Provider>
  // </CustomStuff>
);

If the default components do render correctly the issue is most likely somewhere deeper within the custom components. You can now start adding back those components 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 Provider component or alternatively there might be a configuration issue.