AppmakerDeveloper

Loading a custom inapp-page inside Navigation drawer

This example shows how to load a custom inapp-page inside Navigation drawer.

Steps

  1. get pageID of the in-app page you created from dashboard. For example, in the URL https://v3.appmaker.xyz/apps/<project-id>/blockEditor/drawercategories it is drawercategories.
  2. Create a new page and register it as DrawerMenu.
  3. Add the following code in the page you created in step 2(DrawerMenu).

import { ToolBarIcons as ICONS } from '@appmaker-xyz/shopify';
import { appSettings } from '@appmaker-xyz/core';

const appmakerImages = appSettings.getOption('appmakerImages');

const home = {
  toolBarItems: [
    ICONS.SEARCH,
    ICONS.WISHLIST,
    ICONS.CART,
  ],
  attributes: {
    removeClippedSubviews: false,
    insideSafeAreaView: true,
    rootContainerStyle: {
      flex: 1,
      paddingHorizontal: 24,
    },
    contentContainerStyle: {
      flex: 1,
    },
  },
  blocks: [
    {
      name: 'appmaker/DrawerHeader',
      clientId: 'drawer-header',
      attributes: {
        viewSingle: true,
        bgImg: appmakerImages.drawerHeaderImage,
        showLoginRegister: !appSettings.getOptionAsBoolean('hide_login'),
        textColor: appSettings.getOption('drawer_header_title_color'),
        user: '{{appStorageState.user}}',
        userName: '{{appStorageState.user.displayName}}',
      },
      dependencies: {
        appStorageState: ['user'],
      },
    },
    {
      name: 'appmaker/in-app-page',
      attributes: {
        pageId: 'drawercategories', // here you need to add the pageId of the in-app page you created.
      },
    }
  ],
  stickyFooter: {
    blocks: [
    ],
  }
};

export default home;

On this page

Steps