AppmakerDeveloper

Adding Custom Toolbar Icons

You can add custom icons by importing them from the @appmaker-xyz/shopify/ToolBarIcons module and adding them to the toolBarItems array.

Steps

  1. create a registerToolBarIcons function in your-package/helpers/registerToolBarIcons.js
import { appmaker } from '@appmaker-xyz/core';
import { appSettings } from '@appmaker-xyz/core';

export default function registerToolBarIcons() {

}
  1. Now import the icon images you want to give to the toolbar. Here i have imported the file from the files/index.js.

files/index.js will look like this

export const images = {
  whatsapp: require('./images/whatsapp.png'),
  account: require('./images/account.png'),
  wishlist: require('./images/wishlist.png'),
  search: require('./images/search.png'),
  menu: require('./images/menu.png'),
  cart: require('./images/cart.png'),
  chat: require('./images/chat.png'),
  home: require('./images/home.png'),
};
  1. Now we need to register the toolbar icons to whichever pages we needed using registerToolBarIconForPage function.

Syntax

appmaker.toolBarIcons.registerToolBarIconForPage(pageId, icons, priority)

Example code is as follows

import { appmaker } from '@appmaker-xyz/core';
import { appSettings } from '@appmaker-xyz/core';
import { images } from '../files/index';

export default function registerToolBarIcons() {

  // For Home page Toolbar Icons
  appmaker.toolBarIcons.registerToolBarIconForPage(
    'DrawerMenu',
    {
      icons: [
        {
          name: 'appmaker/toolbar-icon',
          attributes: {
            __display: true,
            localImage: images.whatsapp,
            appmakerAction: {
              action: 'OPEN_URL',
              url: 'https://api.whatsapp.com/send?phone=+918879621003',
            },
          },
        },
        {
          name: 'appmaker/toolbar-icon',
          attributes: {
            __display: true,
            localImage: images.wishlist,
            activeColor: appSettings.getOption('primary_button_color'),
            activeTextColor: appSettings.getOption('primary_button_text_color'),
            itemCount:
              '<% try{echo(appStorageState.saved_items_count)}catch(e){echo(0)}%>',
            iconColor: appSettings.getOption('TOOLBAR_TEXT_COLOR'),
            appmakerAction: { action: 'OPEN_WISHLIST' },
          },
        },
        {
          name: 'appmaker/toolbar-icon',
          attributes: {
            __display: true,
            localImage: images.cart,
            iconColor: appSettings.getOption('toolbar_text_color'),
            appmakerAction: { action: 'OPEN_CART' },
            itemCount:
              '<% try{echo(appStorageState.checkout.lineItems.edges.length)}catch(e){echo(0)}%>',
            activeColor: appSettings.getOption('primary_button_color'),
            activeTextColor: appSettings.getOption('primary_button_text_color'),
          },
          dependencies: {
            appStorageState: ['checkout'],
          },
        },
      ],
    },
    20,
  );

  // For Product detail page Toolbar Icons
  appmaker.toolBarIcons.registerToolBarIconForPage(
    'productDetail',
    {
      icons: [
        {
          name: 'appmaker/toolbar-icon',
          attributes: {
            __display: true,
            localImage: images.search,
            iconColor: appSettings.getOption('TOOLBAR_TEXT_COLOR'),
            appmakerAction: { action: 'OPEN_SEARCH' },
          },
        },
        {
          name: 'appmaker/toolbar-icon',
          attributes: {
            __display: true,
            localImage: images.wishlist,
            activeColor: appSettings.getOption('primary_button_color'),
            activeTextColor: appSettings.getOption('primary_button_text_color'),
            itemCount:
              '<% try{echo(appStorageState.saved_items_count)}catch(e){echo(0)}%>',
            iconColor: appSettings.getOption('TOOLBAR_TEXT_COLOR'),
            appmakerAction: { action: 'OPEN_WISHLIST' },
          },
        },
        {
          name: 'appmaker/toolbar-icon',
          attributes: {
            __display: true,
            localImage: images.cart,
            iconColor: appSettings.getOption('toolbar_text_color'),
            appmakerAction: { action: 'OPEN_CART' },
            itemCount:
              '<% try{echo(appStorageState.checkout.lineItems.edges.length)}catch(e){echo(0)}%>',
            activeColor: appSettings.getOption('primary_button_color'),
            activeTextColor: appSettings.getOption('primary_button_text_color'),
          },
          dependencies: {
            appStorageState: ['checkout'],
          },
        },
      ],
    },
    20,
  );

}
  1. Using the above code you will be able to add custom icons to the toolbar to Home page and Product detail page. You can add the icons to any page by changing the pageId in the above code. WishList, productList are the pageIds for wishlist page and product list page respectively. To see the icons on all the pages you can use * as the pageId.

This will entirely override the default toolbar icons. So if you need to add the default icons also you need to add them in the above code.

On this page

Steps