Add custom blocks in product list view

This guide will help you add custom blocks in product list view. Let's say you want to add a banner after every 10 products in the listview. You can do that by using the shopify-custom-collection-response hook.

note

If you are handling the products in product list page, you need to use the same hook to inject the custom blocks. The hook is shopify-custom-products-response. Refer to Add custom blocks in product list page for more details.

Steps

Let's add a banner after every 10 products in the listview.

1. Modify the product data

First we need to modify the product data and inject the custom blocks in the response. Let's create a helper.js file and add the following code.

import { appmaker } from '@appmaker-xyz/core';
import { shopifyIdHelper } from '@appmaker-xyz/shopify';

export function activateBlocks() {
  appmaker.addFilter('shopify-custom-collection-response',
    `plp-blocks`, // namespace
    (response, params, dependencies) => {
      let ProductList = response?.data?.data?.collection?.products?.edges;
      if (!ProductList)
        return response;
      const collectionId = shopifyIdHelper(response?.data?.data?.collection?.id, true); // get the current collection id
      const addToCollection = '4105698563'; // set the collection id where you want to add the banner
      if (collectionId === addToCollection) {
        const block = {
          ___appmakercustomblock: {
            enabled: true,
            block: {
              name: 'appmaker/image',
              attributes: {
                title: 'Banner',
                description: 'This is a banner',
                url: 'https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-image_large.png?format=webp&v=1530129081',// image url
                width: 1440, // image width
                height: 593, // image height
                appmakerAction: { // action to be performed on click
                  action: 'OPEN_COLLECTION', // action type
                  params: {
                    collectionHandle: 'all', // collection handle
                  },
                },
              },
            }
          },
        };
        // inject the banner block after every 10 products
        list = ProductList.flatMap((product, index) => {
          if (index % 10 === 0) {
            return [product, block];
          }
          return product;
        });
        response.data.data.collection.products.edges = list;
      }
      return response;
    });
}

2. Activate the blocks

Activate the blocks by calling the activateBlocks function in the index.js file.

import { activateBlocks } from './helper';

export function activate() {
  activateBlocks();
}

3. Test the changes

Now, you can test the changes by running the app in the simulator.

Additional resources

Let's say you want to add a countdown timer in the product list view. Then you can replace the banner block with the following code.

const block = {
    ___appmakercustomblock: {                
        enabled: true,
        block: {
             name: 'appmaker/count-down-timer',
        attributes: {
          title: 'Countdown Timer',
          description: 'This is a countdown timer',
          date: '2023-03-29T12:43:15.708Z', 
          appmakerAction: {
            action: 'OPEN_COLLECTION', // action type
            params: {
              collectionHandle: 'all', // collection handle
            },
          },
        }
    },
  },
};