Skip to main content

How to show search page results as grid?

If you want to show search results as grid, you can do this by replacing the search page.

Steps​

  1. Create a new file in the src/pages folder of your theme and name it searchPage.js.

  2. Add the following code to the searchPage.js file:

import z from 'zod';
const validQueryParamsSchema = z.string().min(1);
const searchPage = {
  title: 'Search',
  attributes: {
    ignoreScrollView: true,
    headerShown: false,
    insideSafeAreaView: true,
    rootContainerStyle: {
      flex: 1,
    },
    contentContainerStyle: {
      flex: 1,
    },
  },
  blocks: [
    {
      name: 'appmaker/SearchBar',
      attributes: {
        label: 'Search Product',
        topBarView: false,
        debounceInterval: 500,
        name: 'searchKey',
        appmakerAction: {
          action: 'LIST_PRODUCT',
          params: {
            replacePage: true,
            title: 'Result',
          },
        },
      },
    },
    {
      name: 'appmaker/recent-search-wrapper',
      attributes: {},
    },
    {
      name: 'appmaker/shopify-product-list',
      innerBlocks: [],
      clientId: 'product-list',
      isValid: true,
      attributes: {
        __display: '{{!lodash.isEmpty(pageState.searchKey)}}',
        hasPages: false,
        horizontal: false,
        gridViewListing: true,
        customDataSource: {
          source: 'shopify',
          responseType: 'replace',
          attributes: {
            mapping: {
              items: 'data.data.products.edges',
            },
            methodName: 'searchProduct',
            params: '{{pageState.searchKey}}',
            paramsValidations: {
              zodSchema: validQueryParamsSchema,
            },
          },
          repeatable: 'Yes',
          repeatItem: 'DataSource',
          dependencies: {
            pageState: ['searchKey'],
          },
        },
      },
      dependencies: {
        pageState: ['searchKey'],
      },
    },
  ],
};
export default searchPage;

  1. Import the searchPage.js file in the src/pages/index.js file and add it to the pages array.

     import searchPage from './searchPage';
      const pages = {
         // other pages
         searchPage,
     };
     export {pages};

  2. Now, when you search for a product, the search results will be displayed as a grid.