Skip to content

Banner and Slider Module

Overview

The banner module manages promotional banners and image sliders for the storefront. Banners can be placed on brand/category pages, within CMS blocks, or embedded via HTML code on external sites. Sliders are ordered collections of slides displayed as carousels.

Models

Field Type Description
id BigInteger PK
name String(255) Internal name
image_url String(500) Desktop image
mobile_image_url String(500), nullable Responsive mobile image
alt_text String(255), nullable Accessibility text
destination_type String(50) url, page, product, brand, category
destination_value String(500) URL or entity slug
placement_type String(50) manual, brand_page, category_page, cms_block
placement_config JSONB, nullable Placement-specific config (e.g., {"brand_slug": "acme"})
is_active Boolean Active toggle
start_date / end_date DateTime, nullable Schedule window
channel_id BigInteger, nullable Channel scope
embed_code Text, nullable Auto-generated HTML snippet

Slider (sliders table)

Field Type Description
id BigInteger PK
name String(255)
is_active Boolean
auto_play Boolean Auto-advance slides
interval_ms Integer Delay between slides (default 5000)
show_arrows / show_dots Boolean Navigation controls
transition String(20) slide or fade

Slide (slides table)

Field Type Description
id BigInteger PK
slider_id FK → sliders
position Integer Sort order
image_url, mobile_image_url, alt_text Same as Banner
heading, subheading Optional overlay text
destination_type, destination_value Same as Banner

Services

  • BannerService: CRUD, list_banners(), get_banners_by_placement(), embed code generation
  • SliderService: CRUD, add_slide(), update_slide(), remove_slide(), reorder_slides()

GraphQL API

Queries

  • banners(activeOnly: Boolean) → [BannerType]
  • banner(id: ID!) → BannerType
  • bannersByPlacement(placementType: String!, entitySlug: String) → [BannerType]
  • sliders(activeOnly: Boolean) → [SliderType]
  • slider(id: ID!) → SliderType

Mutations

  • createBanner, updateBanner, deleteBanner
  • createSlider, updateSlider, deleteSlider
  • addSlide, updateSlide, removeSlide, reorderSlides

Storefront Integration

  • BlockBanner.svelte — responsive <picture> with tracking data attributes
  • BlockSlider.svelte — CSS scroll-snap carousel with autoplay, arrows, dots
  • Both registered in BlockRenderer.svelte as banner and slider block types
  • Automated placement: /products route loads banners matching brand/category slug