Development
Add a new banner

Adding a new banner type

This document will guide you through the process on how to create a new banner type in the shophub project.

Type Package

  1. Extend the BannerTypename Enum
  • Begin by expanding the BannerTypename enum with your desired new banner name.

  1. Add a ShopHub Type for Your Banner
  • Navigate to shophub/components and add the corresponding ShopHub type for your new banner.
  • Ensure you import the type in the top-level index.ts barrel file and re-export it under the shophub namespace.
  1. Update the merge type
  • Update the merging banner type called anyBanner, which can be found inside the shophub/components folder.
💡
After making these changes, rebuild your types to ensure they are available throughout the project.
To rebuild types execute this command in your project root: yarn types:init

Backend Package

  1. Add a New Schema
  • Create a new schema for your banner in the backend under src/db/schema/builder.
  • Don’t forget to export the created schema from the index.ts barrel export file!

  1. Generate Controller and Service Files
  • Use the following NestJS CLI command to generate your controller:
nest g controller cms/banner/<your-banner-name> --no-spec
💡
Following the naming convention, the name of the banner should be in kebab-case.
  • To generate the service file, replace controller with service in the command above. Both the controller and service files will be placed in the appropriate directory and automatically registered in the module file.

  1. Create DTOs
  • Inside your newly created banner folder, create a dto directory and add the necessary DTO (Data Transfer Object) files.
  • Export these DTOs from a barrel export for ease of use.

  1. Define CRUD Functions
  • Implement the following standard CRUD operations in the service file:
  • create()
  • getById()
  • getAll()
  • updateById()
  • deleteById()

  1. Link Service and Controller
  • Connect the CRUD operations in your service file to the appropriate controller functions.

  1. Update the getReferencedBanner function
  • Update the function that fetches the banners for a webpage within it's switch statement. The file can be found in cms/referenced-banner/referenced-banner.service.ts.

Frontend Package

  1. Create a New Banner Component
  • Create a folder for your new banner component under the shophub directory.

  1. Update the Banner Switch Statement
  • In the shophub/BannerElem.tsx file, add your banner component to the switch statement.
  • Make sure it is wrapped inside a bannerWrapper component, similar to the existing banners.
  1. Update the LCP evaluator
  • The hook found in hooks/useLcpEvaluator.ts contains a function called determineNewBannerLCPValue, which returns a priority value based on the banner type. The number is determined based on if the banner contains any media that potentially has to be loaded eager as it could be considered the largest contentful paint of the website and the size of the banner as banner with a lot of height takes a way a lot of space that could potentially contain a largest contentful paint. So banners with media and a lot of height should get a high number, while banners that are text based or very small in height, should have a low priority number.
  1. (Optional) Update the Media checker function
  • If the added banner type contains media, please also update the checkGridWrapperForMedia function, found in the same file.
Git hooksMake a banner nestable