Banners - ToolStation - Internal Docs

We can incorporate banners similar to other components. The process for adding a banner involves several steps, outlined below:

Define your Banner Component

To use your banner components in the Builder Visual Editor, you need to take a couple of minimal steps in your codebase.

1) Create Banner Component

Create your component in components directory.

2) Register your component to the Builder

First import your component in components/index.js file and export.
Then import your component in utils/init-builder-banners.ts

import { BannerComponent } from "../components";

// file: utils/init-builder-banners.ts

export const bannerComponents = [
  {
    component: BannerComponent,
    name: 'BannerComponent',
    inputs: [
      // input options
    ]
  }
]

3) Common input options for Banners

Colors

// file: utils/init-builder-banners.ts

// brands colors for banners
const brand_colors = [
  {label: 'Primary', value: '#065CAB'},
  {label: 'Primary Yellow', value: '#FEE200'},
  {label: 'Secondary', value: '#E52228'},
  {label: 'Secondary Black', value: '#000000'}
]

// atomic design colors for banners
const atomic_design_colors = [
  {label: 'Success', value: '#238826'},
  {label: 'Success Light', value: '#99DFB5'},
  {label: 'Info', value: '#145FE1'},
  {label: 'Info Light', value: '#BCE2FF'},
  {label: 'Warning', value: '#B57E00'},
  {label: 'Warning Light', value: '#FFE999'},
  {label: 'Danger', value: '#E23314'},
  {label: 'Danger Light', value: '#FAC7AE'}
]

Font Sizes

// file: utils/init-builder-banners.ts

// font sizes
const font_sizes = [
  {label: 'default', value: ''},
  {label: 'Extra Large', value: '36px'},
  {label: 'Large', value: '22px'},
  {label: 'Medium', value: '20px'},
  {label: 'Small', value: '14px'},
  {label: 'Extra Small', value: '12px'},
]

Common Input Options of Banners

// file: utils/init-builder-banners.ts

// color field for banners using brand & atomic colors
const colors = {
  name: 'color',
  type: 'string',
  friendlyName: 'Color',
  helperText: 'Choose color from Design System',
  enum: [
    {label: '--- Brand Colors ---', value: ''},
    ...brand_colors,
    {label: '--- Atomic Design Colors ---', value: ''},
    ...atomic_design_colors
  ]
}

// color fields for banners using brand, atomic & custom colors
const color_fields = [
  colors,
  {
    name: 'custom',
    friendlyName: 'Custom Color',
    helperText: 'Choose the any color of your choice',
    type: 'color',
  }
]

// text fields for banners
const text_fields = [
  {
    name: 'text',
    type: 'richText'
  },
  {
    name: 'fontSize',
    friendlyName: 'Font Size',
    helperText: 'Choose predefined font sizes',
    type: 'string',
    enum: font_sizes
  },
  colors
]

// common tag fields
const tag_fields = [
  {
    name: 'label',
    friendlyName: 'Label',
    type: 'object',
    defaultValue: {
      text: 'New'
    },
    subFields: [
      {
        name: 'text',
        type: 'string',
        helperText: 'Enter tag label',
        defaultValue: 'New'
      },
      {
        name: 'fontSize',
        friendlyName: 'Font Size',
        helperText: 'Choose predefined font sizes',
        type: 'string',
        enum: font_sizes
      },
      ...color_fields
    ]
  },
  {
    name: 'borderColor',
    friendlyName: 'Border Color',
    type: 'object',
    subFields: color_fields
  },
  {
    name: 'marginBottom',
    type: 'number'
  }
]

// subfields for banners
const banner_subfields = {
  src: {
    name: 'src',
    friendlyName: 'Src',
    type: 'file',
    helperText: 'Upload an image'
  },
  text: {
    name: 'text',
    type: 'string',
    helperText: 'Enter text value',
    defaultValue: 'Text'
  },
  borderColor: {
    name: 'borderColor',
    type: 'object',
    subFields: color_fields
  },
  marginTop: {
    name: 'marginTop',
    type: 'number'
  },
  background: {
    name: 'background',
    friendlyName: 'Background',
    type: 'object',
    subFields: color_fields
  },
  label: {
    name: 'label',
    friendlyName: 'Label',
    type: 'object',
    defaultValue: {
      text: 'Button'
    },
    subFields: [
      {
        name: 'text',
        type: 'string',
        helperText: 'Enter button label',
        defaultValue: 'Button'
      },
      {
        name: 'fontSize',
        friendlyName: 'Font Size',
        helperText: 'Choose predefined font sizes',
        type: 'string',
        enum: font_sizes
      },
      ...color_fields
    ]
  }
}

// button fields
const button_fields = [
  banner_subfields.label,
  banner_subfields.background,
  banner_subfields.marginTop
]

// Banner Inputs
const banner_inputs = {
  landingPageUrl: {
    name: 'landingPageUrl',
    friendlyName: 'Landing Page URL',
    type: 'url',
    helperText: 'Landing Page URL. Ex: /brands/dewalt'
  },
  product: {
    name: 'product',
    type: 'object',
    defaultValue: {
      id: '',
      enablePrice: false,
      enableTitle: false,
      enableDescription: false,
      enableRedirection: false
    },
    subFields: [
      {
        name: 'id',
        friendlyName: 'ID',
        type: 'string',
        defaultValue: '',
        helperText: 'Enter valid product id. Ex: 29688',
      },
      {
        name: 'enablePrice',
        friendlyName: 'Show product price',
        type: 'boolean',
        defaultValue: false
      },
      {
        name: 'enableTitle',
        friendlyName: 'Use product title',
        type: 'boolean',
        defaultValue: false
      },
      {
        name: 'enableDescription',
        friendlyName: 'Use product description',
        type: 'boolean',
        defaultValue: false
      },
      {
        name: 'enableRedirection',
        friendlyName: 'Use product detail page (PDP) as landing URL',
        type: 'boolean',
        defaultValue: false
      }
    ]
  },
  tag: {
    name: 'tag',
    type: 'object',
    defaultValue: {
      label: {
        text: 'New'
      }
    },
    subFields: tag_fields
  },
  text: {
    name: 'text',
    type: 'object',
    subFields: text_fields,
  },
  image: {
    name: 'image',
    type: 'object',
    subFields: [
      {
        name: 'src',
        friendlyName: 'Src',
        type: 'file',
        helperText: 'Upload an image'
      },
      {
        name: 'alt',
        friendlyName: 'Alt text',
        type: 'string',
        helperText: 'This text is visible if image is no loaded.'
      }
    ]
  },
  button: {
    name: 'button',
    type: 'object',
    defaultValue: {
      label: {
        text: 'Button'
      }
    },
    subFields: button_fields
  },
  background: {
    name: 'background',
    friendlyName: 'Background',
    type: 'object',
    subFields: [
      {
        name: 'type',
        type: 'string',
        enum: [
          {label: 'Image', value: 'image'},
          {label: 'Video', value: 'video'}
        ]
      },
      {
        name: 'src',
        type: 'file',
        allowedFileTypes: ['jpeg', 'png', 'gif', 'svg', 'mp4'],
        helperText: 'Allowed file types are: jpeg, png, gif, svg, mp4'
      },
      {
        name: 'poster',
        type: 'file',
        helperText: 'It is required in case of video'
      }
    ]
  },
  overlay: {
    name: 'overlay',
    type: 'color'
  },
  backgroundColor: {
    name: 'backgroundColor',
    type: 'object',
    subFields: color_fields
  },
  backgroundGradientColor: {
    name: 'backgroundGradientColor',
    friendlyName: 'Background Gradient Color',
    type: 'object',
    defaultValue: {
      lightColor: {
        color: '#2EB5CD'
      },
      darkColor: {
        color: '#0398B3'
      }
    },
    subFields: [
      {
        name: 'lightColor',
        friendlyName: 'Light Color',
        type: 'object',
        subFields: color_fields
      },
      {
        name: 'darkColor',
        friendlyName: 'Dark Color',
        type: 'object',
        subFields: color_fields
      }
    ]
  }
}

4) Add bannerComponents in `utils/init-builder.ts` file

import { bannerComponents } from "./init-builder-banners";

export const REGISTERED_COMPONENTS = [
    ...bannerComponents,
];

Atom Structure

TsBannerHomeDealsAndOffers