---
title: "JS Modules"
description: "Self-contained feature scripts activated via the data-module attribute or imported directly."
---


Self-contained feature scripts activated via the `data-module` attribute or imported directly.

## accept_terms

Requires the customer to check a terms-and-conditions checkbox before the cart submit button is enabled.

| Option | Description |
|--------|-------------|
| `termsUrl` | URL to the terms page |
| `message` | Introductory label text |
| `linkText` | Anchor text for the terms link |
| `container` | CSS selector for the cart container |

## add_to_cart_button

Manages the dynamic add-to-cart button state, including quantity increase/decrease controls, stock limit enforcement, volume discount notices, and quote flow support.

| Option | Description |
|--------|-------------|
| `productId` | ID of the product to manage |
| `formSelector` | CSS selector for add_to_cart forms (default: `.add_to_cart`) |

## add_to_cart_loader

Scans the page for product forms marked with `data-add-to-cart` and initialises the appropriate add-to-cart component (button, dynamic variant selector, or options panel) based on each form's data attributes.

| Option | Description |
|--------|-------------|
| `container` | Root element to scan (default: `document.body`) |
| `productItemSelector` | CSS selector for individual product items |

## add_to_cart_with_options

Shows a slide-out drawer or inline panel for products that require variant selection before adding to cart (e.g. products with size or color options). Loads the product form dynamically and handles variant selection and quantity.

| Option | Description |
|--------|-------------|
| `productUrl` | URL to fetch the product options form from |
| `container` | CSS selector or element to render the options panel into |

## animate_number

Smoothly animates a numeric counter from its current value to a new target value with an easing effect. This module is called programmatically via `Bolder.call` rather than configured with options.

## cart_modal

Displays a cart preview modal or slide-out panel when a product is added to the cart. Renders the live cart contents including line items, totals, and a checkout link.

| Option | Description |
|--------|-------------|
| `showOnAdd` | Open the modal automatically after adding a product (default: true) |
| `triggerSelector` | CSS selector for elements that open the cart modal on click |

## cart_quote

Presents a contact form modal so a customer can request a formal quote for the current cart contents instead of placing a direct order.

| Option | Description |
|--------|-------------|
| `formUrl` | URL of the quote request endpoint |
| `triggerSelector` | CSS selector for the button that opens the quote form |

## cart_rules

Exposes shop-configured order requirements to other modules that need to look one up directly — currently just AddToCartButton, which caps a product's quantity stepper against a matching max_units_per_product requirement before it's ever added to the cart. Cart-page validation (disabling checkout, showing which requirements aren't met) is no longer done here: it's now declarative, computed by cart-decorator.js/cart-rules.js (the shared core module) inside cart-table-v3's beforeUpdate() and dynamic_cart_table.js's renderCart(), and rendered directly by the cart-table templates — see cart_action_buttons in cart-table-v3/template.qiq and cart-table/template.qiq.

| Option | Description |
|--------|-------------|
| `requirements` | Shop's configured order requirements (widgets.cart_requirements) |

## cart_slideout


## cart_tracking

Sends cart event data (add, remove, checkout) to the Bolder tracking endpoint for analytics and remarketing purposes. No user-facing options required.

## cart_units

Updates item quantities in the cart in real time via AJAX without a page reload. Attaches increment/decrement controls to quantity inputs and syncs with the cart API. Emits cart update events that other modules (CartModal, CartBadge) can listen to.

## dynamic_cart_buttons

Upgrades static add-to-cart forms to dynamic AJAX buttons that add items without a page reload, updating button state to reflect in-cart status.

| Option | Description |
|--------|-------------|
| `formSelector` | CSS selector for cart forms (default: `.add_to_cart`) |
| `requireDeliverySetup` | Prompt for delivery address before adding (default: false) |

## dynamic_cart_table

Renders and keeps the cart table in sync with live cart state. Handles quantity changes, item removal, promo codes, shipping estimates, and related product suggestions.

| Option | Description |
|--------|-------------|
| `containerId` | ID of the cart table wrapper (default: `dynamic-cart-table`) |
| `showRelated` | Show related product suggestions (default: false) |

## dynamic_prices

Updates displayed prices, comparison prices, and stock status in real time when variant or quantity selections change. Also handles volume discount tier displays.

| Option | Description |
|--------|-------------|
| `productContainer` | CSS selector wrapping each product (default: `.product`) |
| `showComparisonPrice` | Show strikethrough comparison price (default: true) |

## dynamic_quantity_buttons

Adds increase/decrease quantity controls to in-cart item rows, updating totals live via the Cart API without a page reload.

| Option | Description |
|--------|-------------|
| `formSelector` | CSS selector for cart item forms (default: `.add_to_cart`) |

## dynamic_variants

Updates price, availability status, and images in real time when a customer selects a product variant (size, color, etc.). Reads variant data from the product JSON endpoint and applies changes to the surrounding product form without a page reload.

| Option | Description |
|--------|-------------|
| `productId` | The product ID to load variant data for |
| `variantSelector` | CSS selector for the variant option inputs |
| `priceSelector` | CSS selector for the price display element |
| `updateImages` | Swap to the variant's image on selection (default: true) |

## favorites

Lets customers save products to a favourites list, storing them locally or server-side when logged in, and toggles heart/star icons on product cards accordingly. When a logged-in session starts, locally-stored favourites are synced to the server automatically.

| Option | Description |
|--------|-------------|
| `mainContainer` | Products wrapper selector whose children are scanned for product cards (default: `.products`) |
| `requireLogin` | Show a login prompt before saving a favourite when the customer is not logged in (default: true) |

## image_gallery

Initialises a touch-friendly image slideshow (powered by Siema) for product image lists. Supports auto-play, previous/next controls, optional dot navigation, and add-to-cart integration.

| Option | Description |
|--------|-------------|
| `container` | The gallery element to activate |
| `autoplay` | Auto-advance slides (default: false) |
| `autoplayInterval` | Milliseconds between auto-advance steps (default: 7000) |
| `minItems` | Minimum number of slides required before activating the gallery (default: 1) |
| `filter` | Predicate(el) run over selector matches; return false to exclude an element |
| `callback` | Called with the container once this call's galleries have finished loading |

## image_zoom

Adds a CSS zoom effect to a product image on hover or touch, loading a higher-resolution version. An optional magnifier mode (WebGL) can be enabled via the `mode` option.

| Option | Description |
|--------|-------------|
| `imageElement` | The img element to make zoomable |
| `bigImage` | URL of the high-resolution image to display when zooming (defaults to the parent anchor's href) |

## notify_restocked

Shows a modal form where customers can subscribe to receive an email notification when an out-of-stock product is restocked. Optionally fetches and displays the product's variant list in the form.

| Option | Description |
|--------|-------------|
| `linkSelector` | CSS selector for the trigger button(s) that open the modal (default: `[data-notify-restocked]`) |
| `includeVariants` | Fetch and display a variant selector inside the subscription form (default: false) |

## product_comparison_picker

Lets customers select 2–4 products to compare side by side, rendering a checkbox on each product card and navigating to the comparison page once enough products are chosen. Products of different types cannot be mixed in the same comparison.

| Option | Description |
|--------|-------------|
| `mainContainer` | Products wrapper selector (default: `.products`) |
| `maxComparable` | Maximum number of products that can be selected for comparison (default: 4) |

## product_filters

Handles faceted product filtering: listens for changes on filter form inputs and selects, then submits the form via AJAX and replaces the product list without a full page reload, optionally updating the browser URL.

| Option | Description |
|--------|-------------|
| `formSelector` | CSS selector for the filter form element |
| `resultsContainer` | CSS selector for the element where AJAX results are injected |

## product_images

Manages the main product image viewer: clicking a thumbnail swaps the main image with a fade/spinner transition, and optionally activates zoom on the displayed image.

| Option | Description |
|--------|-------------|
| `mainContainer` | Wrapper selector that contains both the main image and thumbnails (default: `.product-images`) |
| `bigImageContainer` | Selector for the main image anchor element (default: `.main-image`) |
| `thumbSelector` | Selector for thumbnail link elements (default: `.product-image`) |
| `enableZoom` | Enable image zoom; pass `'magnifier'` for WebGL magnifier mode (default: false) |

## product_modal

Opens a product detail page inside a modal overlay when a product link is clicked, keeping the customer on the listing page and setting a URL hash for shareability.

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for product links that trigger the modal (default: `.product-link`) |
| `container` | Parent selector used to scope link event delegation (default: document.body) |

## product_promotions

Fetches and displays active promotion details (discount conditions, savings amount, and related product groups) for the products currently in view, updating dynamically as the cart changes.

| Option | Description |
|--------|-------------|
| `container` | Element containing the promotion card markup to scan and initialise |

## products_lists_modal

Opens a modal listing products that qualify for a volume discount or matching bundle, letting customers browse and add items directly from the overlay.

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for the trigger elements |
| `matchMethod` | Method used to match products (required) |

## variant_images

Switches the displayed product images when the customer selects a different variant (size, colour, etc.), highlighting images tagged with the chosen variant's ID. Also triggers a click on the matching thumbnail so the main image viewer updates when ProductImages is active.

| Option | Description |
|--------|-------------|
| `container` | Root element to scan for variant inputs and images (default: document.body) |
| `variantsContainer` | CSS selector for the variant inputs wrapper (default: `.cart_variants`) |
| `imageSelector` | CSS selector for product image elements (default: `.product-image`) |

## address_autocomplete

Enhances an address text input with Google Places-powered autocomplete suggestions, auto-filling region and locality fields on selection.

| Option | Description |
|--------|-------------|
| `input` | The address input element |
| `country` | ISO country code to bias results, e.g. `"CL"` |
| `onChange` | Callback receiving the parsed address components |

## address_fields

Populates region and locality `<select>` fields from the delivery API based on the selected country code.

| Option | Description |
|--------|-------------|
| `regionSelect` | The region select element |
| `localitySelect` | The locality select element |
| `countryCode` | ISO country code (default: `"CL"`) |

## auth_delivery

Combines customer authentication and delivery address selection into a single unified flow component, mounting automatically into a managed container.

## choose_branch_modal

Shows a modal listing available store locations so the customer can select a branch for pickup or delivery.

| Option | Description |
|--------|-------------|
| `triggerSelector` | CSS selector for the trigger button |
| `changeBranchMessage` | Heading text inside the modal |

## country_code_inputs


## delivery_setup

Opens a modal that guides the customer through selecting their delivery method (shipping or pickup) and address before adding items to the cart.

| Option | Description |
|--------|-------------|
| `showAutomatically` | Open on first visit (default: false) |
| `triggerSelector` | CSS selector for manual trigger links |

## rut_formatter

Formats and validates Chilean RUT (tax ID) inputs in real time as the customer types, automatically applying dots and a dash in the correct positions.

| Option | Description |
|--------|-------------|
| `inputSelector` | CSS selector for RUT input fields (default: input[data-rut]) |

## shipping_costs

Opens the shipping calculator component in a modal so the customer can estimate shipping costs before checkout.

| Option | Description |
|--------|-------------|
| `triggerSelector` | CSS selector for the "calculate shipping" link |
| `country` | Default country code |

## live_search

Live product search with autocomplete and instant results. Displays matching products, collections, and tags as the user types. Can show product images, prices, SKUs, and inline add-to-cart buttons.

| Option | Description |
|--------|-------------|
| `withImages` | Show product thumbnail in results (default: false) |
| `withPrices` | Show product price in results (default: false) |
| `withSkus` | Show variant SKU in results (default: false) |
| `withAddToCart` | Show add-to-cart button in results (default: false) |
| `showAutocomplete` | Enable autocomplete suggestion above results (default: false) |
| `inputSelector` | CSS selector for the search input element |
| `container` | Where to render the results list |

## beta_mode

Manages beta user mode in the storefront. - Injects a dismissible "Beta" ribbon badge in the top-left corner when beta mode is active. - Wires `data-toggle-beta` elements for toggling beta mode on/off via AJAX. - Shows toast notifications confirming the change.

## bounce

Detects exit-intent behaviour (mouse leaving the viewport towards the top) and invokes a callback, useful for triggering a last-chance offer or modal.

| Option | Description |
|--------|-------------|
| `callback` | Function to call when exit intent is detected |
| `sensitivity` | Vertical pixel threshold for detection (default: 20) |
| `delay` | Milliseconds to wait before activating the listener (default: 0) |
| `cookieDays` | Days to suppress the callback after first trigger (default: 7) |

## countdown_timer

Displays a live countdown to a target date/time, updating days, hours, minutes, and seconds every second. Optionally shows a "finished" message when the countdown reaches zero.

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for countdown elements (default: `.countdown`) |
| `container` | Root element to scope selector |
| `time` | ISO date string for the target time, overrides `data-time` attribute |

## link_preview

Shows a floating product-card preview when the customer hovers over a product link, fetching and rendering the product component inline.

| Option | Description |
|--------|-------------|
| `container` | Root element to scan for links |
| `selector` | CSS selector for product links |

## lottie_animations

Loads and plays Lottie JSON animations on page elements, supporting event-triggered playback (hover, click, scroll).

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for animation containers (default: `[data-animation]`) |
| `animateOn` | Trigger event: `"hover"`, `"click"`, or `"scroll"` |

## map

Map integration — embed Leaflet or Google Maps for address input and delivery zone display. Access via: Bolder.call('Map', 'init', opts, callback)

## modal

Modal dialogs — create and manage overlay popups. Access via: Bolder.call('Modal', 'methodName', args, callback)

## notice

Top-of-page notification bar — display and listen for page-level notices. Access via: Bolder.call('Notice', 'methodName', args, callback)

## page_modal

Intercepts clicks on internal page links (collections, pages, tags) and loads the target page inside a modal overlay instead of navigating away.

| Option | Description |
|--------|-------------|
| `linkSelector` | CSS selector for intercepted links (default: `[data-page-modal]`) |

## promo_notice

Displays an inline promotion notice (applied discounts and free shipping status) in a designated banner element whenever the cart is updated.

| Option | Description |
|--------|-------------|
| `templateId` | ID of the Liquid template used to render the notice (default: bootic-top-promo-template) |

## promo_toasts

Shows toast notifications when promotions are applied to or removed from the cart, displaying the discount name and amount saved.

## range_slider

Renders a styled price-range slider input for filter forms.

| Option | Description |
|--------|-------------|
| `inputSelector` | CSS selector for the range input elements |
| `min` | Minimum value |
| `max` | Maximum value |

## section_menus

Auto-generates a sticky or inline navigation menu from page `<section>` elements, inserting anchor links into `.bootic-section-menu` placeholders.

| Option | Description |
|--------|-------------|
| `sectionSelector` | CSS selector for sections (default: `section`) |
| `sticky` | Make the menu sticky (default: false) |

## share_button

Activates the browser's native Web Share API on a designated share button, falling back gracefully if the API is unavailable.

| Option | Description |
|--------|-------------|
| `title` | Share title |
| `description` | Share description text |

## spin_wheel

Renders a spin-the-wheel prize game with configurable prize tiers, probabilities, and coupon code rewards.

| Option | Description |
|--------|-------------|
| `items` | Prize items, each with `label`, `probability`, and optional `coupon_code` and `coupon_label` |
| `triggerSelector` | CSS selector for the spin trigger button |

## ticker

Cycles through a list of text messages in a container, fading each in and out on a configurable interval.

| Option | Description |
|--------|-------------|
| `container` | CSS selector for the ticker element |
| `messages` | List of strings to cycle through |
| `wait` | Seconds between messages (default: 6) |
| `includeEmpty` | Include a pause with empty text (default: false) |

## toasts

Toast notifications — brief, auto-dismissing alerts in a corner of the page. Access via: Bolder.call('Toasts', 'show', opts)

## view_modal

Fetches an arbitrary internal URL and renders its content inside a modal overlay.

| Option | Description |
|--------|-------------|
| `linkSelector` | CSS selector for trigger links (default: `.show-promos-link`) |
| `url` | URL to load inside the modal |

## view_transitions


## welcome_modal

Shows a welcome pop-up modal on first visit (using a cookie to avoid repeat displays), optionally including a newsletter subscribe form or promotional image and message.

| Option | Description |
|--------|-------------|
| `show_subscribe_form` | Show a newsletter subscription form in the modal (default: false) |
| `subscribe_form_tag` | Liquid form tag name to render inside the modal |
| `delay` | Seconds to wait before showing the modal (default: 3) |
| `always_show` | Show on every visit regardless of cookie (default: false) |

## login_modal


## user_menu

Renders the customer account drop-down menu with links to orders, profile, and favourites when the customer is logged in, or a login prompt when logged out.

| Option | Description |
|--------|-------------|
| `triggerSelector` | CSS selector for the menu toggle button (default: `.user-menu-toggle`) |
| `menuContainer` | CSS selector for the menu target container (default: `.user-menu-container-target`) |

## user_signup

Renders a customer registration / sign-in form component inside a specified container, handling submission, validation errors, and post-login redirects.

| Option | Description |
|--------|-------------|
| `formContainer` | CSS selector for the container to render the form into |
| `formUrl` | URL to submit the registration form to |

## ajax_pagination

Loads the next page of products or blog posts via AJAX and appends them to the current page without a full reload. Works with both numbered pagination and "load more" style buttons.

| Option | Description |
|--------|-------------|
| `container` | CSS selector for the element to append results into |
| `paginationSelector` | CSS selector for the pagination links wrapper |

## async_partial

Fetches a Liquid template partial asynchronously via AJAX and injects its HTML into a target element, with optional timezone-aware scheduling and query-param forwarding.

| Option | Description |
|--------|-------------|
| `name` | Name of the partial template to fetch |
| `target` | CSS selector for the container to inject content into |
| `params` | Query parameters to pass to the partial endpoint |
| `currentParams` | Forward the current page's query string to the partial (default: false) |

## console_api

Provides a consolidated API for the Buyer/Customer Console UI

## contact_widget

Renders a floating contact widget with links to WhatsApp, email, phone, Telegram, Twitter, and other configured channels.

| Option | Description |
|--------|-------------|
| `twitter` | Twitter handle |
| `facebook` | Facebook page ID |
| `telegram` | Telegram username |
| `email` | Contact email address |
| `sms` | SMS phone number |
| `call` | Click-to-call phone number |

## feedback

Loads and displays customer comments and a feedback form for the current page, connecting to the Bolder comments service.

| Option | Description |
|--------|-------------|
| `container` | CSS selector for the feedback container |
| `templateId` | ID of the Liquid template used to render comments (default: `feedback-template`) |

## lazyload

Defers loading of images and iframes until they scroll near the viewport, replacing `data-src` with `src` using IntersectionObserver.

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for lazy elements (default: `.lazy`) |
| `container` | Root container (default: `document`) |
| `rootMargin` | IntersectionObserver root margin (default: `"0px"`) |

## link_tracking

Tracks link clicks (banner items, menu links) by firing a `link-click` event through the Bolder analytics pipeline. Reads tracking data from `br_*` params that LinkDrop appends to URLs when a parent collection (GalleryDrop, LinksDrop) sets tracking context, plus section context from the surrounding DOM (same approach as CartTracking). Loaded automatically by ShopVisits when `trackLinks: true` is passed.

## native_client

Bridges the web storefront with Bolder's native mobile app WebView by detecting the Capacitor runtime and adding platform-specific CSS classes to the body element.

## pdf_viewer

Embeds a PDF file viewer inside the page using a PDF.js-based renderer. Sets minimum dimensions on the container if needed.

| Option | Description |
|--------|-------------|
| `pdfUrl` | URL of the PDF file to display |
| `container` | CSS selector for the viewer container element |

## places_map

Renders an interactive Google Map with markers for each store branch location. Requires branches to have latitude/longitude coordinates set.

| Option | Description |
|--------|-------------|
| `container` | CSS selector for the map container element |
| `places` | Array of branch objects with address.latlong coordinates |

## shop_visits

Sends an anonymous shop-visit beacon to Bolder analytics on every page load. No configuration required.

## streaming_videos

Initialises embedded video players supporting direct video files and HLS (.m3u8) streams found in page content.

| Option | Description |
|--------|-------------|
| `selector` | CSS selector for video elements to initialise (default: 'video') |
| `container` | CSS selector or element scoping the search for video elements |