Skip to main content

How to inject a Sticky Footer block to all pages

​

Description​

​ This example shows how to inject a block to all pages. ​

Steps​

​

  1. Go to packages/<your-theme>/src/index.js.

  2. Add this import code: ​

import { appmaker } from "@appmaker-xyz/core";

​ 3. Add the following code to the activate function: ​

​
// my custom block to be added to all pages
const myCustomBlock = {
  name: "namespace/custom-footer-block",
  clientId: "my-custom-footer-block",
  attributes: {
    title: "Custom Title",
  },
};
​
appmaker.addFilter(
  "inapp-page-data-response",
  "your-theme-name",
  (data, { pageId }) => {
    const pageIds = []; // If you want to add it in some pages only add the pageIds of those pages. Keep empty to add to all pages.
    const exceptPageIds = []; // If you don't want to add it in some pages only add the pageIds of those pages.
    const all = !exceptPageIds || exceptPageIds.length === 0;
​
    const isPageId = pageIds && pageIds.includes(pageId);
    const isExceptPageId = exceptPageIds && !exceptPageIds.includes(pageId);
    if (all || isPageId || isExceptPageId) {
      data.stickyFooter.blocks = data?.stickyFooter?.blocks || [];
      const isBlockAdded = findBlockIndex(
        data.stickyFooter.blocks,
        myCustomBlock.clientId
      );
      if (isBlockAdded === -1) {
        data.stickyFooter.blocks.unshift(myCustomBlock); // add block to the top of the blocks array. You can use any array method to add the block to certain position.
      }
    }
    return data;
  }
);

​ 4. For above code to work you will need to register your custom block, or you can use an existing block also. For more information on how to register a custom block, please refer to this documentation.