Bundle List

The Bundle List control displays packages from the Arlo Storefront Packages API. Its bundled template renders each package's image, name, summary, description, pricing, and a link to a bundle detail page.

Getting Started

Follow the general getting started guide, then configure a Bundle List control.

                document.addEventListener("arlojscontrolsloaded", function () {
                    const bundleListControl = {
                        moduleType: "BundleList",
                        targetElement: "#bundle-list",
                        maxCount: 12,
                        regionCode: "default",
                        customUrls: {
                            bundletemplate: "/bundles"
                        }
                    };

                    new ArloWebControls().start({
                        platformID: "your-platform.arlo.co",
                        modules: [bundleListControl]
                    });
                });
            

With customUrls.bundletemplate configured, each bundle link is generated as the configured page URL with a package query parameter. For example: /bundles?package=42-first-aid-training-bundle.

Configuration

Bundle List supports the shared control configuration options and the following additional option.

Field	Type	Default	Description
regionCode	string	default	The Storefront region used to retrieve packages.
maxCount	number	20	The maximum number of packages to display.
customUrls.bundletemplate	string		The URL of the page that hosts a Bundle Template control.

Template Data

The bundled template provides name, code, availability, Summary, Description, ListImageUri, HeroImageUri, BestOffer, ComparativeOffer, and ViewUri. Custom templates can use formatOffer(offer, preferInclusive) and renderDescription(markdown).