salla-products-slider
Fetches a set of products (by category, brand, tag, latest, offers, related, a fixed list of ids, or your own JSON) and shows them as product cards in a carousel (salla-slider).
Fetches a set of products (by category, brand, tag, latest, offers, related, a fixed list of ids, or your own JSON)
and shows them as product cards in a carousel (salla-slider). Use it for home-page product blocks and
"related products" sections on a product page. It renders nothing until the products are loaded, and logs a warning
and renders nothing when the source needs a source-value and none is given.
Fires the global salla-products-slider::products.fetched event with the loaded products array after an API fetch.
Products can be filtered or changed before rendering with the beforeAppendItems hook
(salla.hooks.registerHook('salla-products-slider', 'beforeAppendItems', ctx => { ctx.items = ... })).
Use it
In HTML or JSX, use the tag <salla-products-slider> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
This component has a native React version. Use it instead of the raw tag:
import { SallaProductsSlider } from '@salla.sa/twilight-components-react';Example
import { SallaProductsSlider } from '@salla.sa/twilight-components-react';
export function Example() {
return (
<SallaProductsSlider
blockTitle="Related products"
source="related"
sourceValue="123456"
limit={10}
displayAllUrl="/products" />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
autoplay | autoplay | When true, the slider advances automatically (passed to the inner salla-slider as auto-play). | boolean | |
blockTitle | block-title | Heading shown above the slider (passed to the inner salla-slider as its block title). | string | |
displayAllUrl | display-all-url | URL of the "display all" link shown by the inner salla-slider, usually a listing page for the same products. | string | |
includes | includes | Extra data to include in each fetched product. The value can be an array of strings or a JSON string; anything that does not parse to an array is ignored. Example: - As an array: includes=["options"] - As a JSON string: includes='["options"]' The array or JSON string can include: - "options": Include product options in the response. - "images": Include product images in the response. | string[] | |
limit | limit | Maximum number of products to fetch (a count). Sent to the products API; it is not applied when source is json. | number | |
productCardComponent | product-card-component | Tag name of the custom element used to render each product card, defaulting to custom-salla-product-card. If no element with that tag is registered, the built-in salla-product-card is used. A custom element receives the product as its product attribute (JSON), plus source and source-value. | string | 'custom-salla-product-card' |
sliderConfig | slider-config | Swiper options object for the inner slider (see https://swiperjs.com/swiper-api#parameters). Set it as a JS property with the entire config object. | any | |
sliderId | slider-id | The id given to the inner salla-slider. If not provided, a random s-products-slider-xxxx id is generated on each render. | string | |
sliderProps | slider-props | Additional props to pass through to the inner salla-slider component. Use this to set any salla-slider props (e.g. loop, pagination, showControls, enableSingleSlideMode). | { autoPlay?: boolean; loop?: boolean; type?: "" | "default" | "blog" | "carousel" | "fullscreen" | "thumbs" | "hero" | "testimonials" | "fullwidth"; direction?: string; autoHeight?: boolean; showControls?: boolean; sliderConfig?: any; vertical?: boolean; blockTitle?: string; listenToThumbnailsOption?: boolean; blockSubtitle?: string; displayAllUrl?: string; arrowsCentered?: boolean; verticalThumbs?: boolean; gridThumbs?: boolean; controlsOuter?: boolean; showThumbsControls?: boolean; staticWhenSingle?: boolean; slidesPerView?: string; pagination?: boolean; centered?: boolean; thumbsConfig?: any; } | |
source | source | Where the products come from. json uses the products you pass in source-value without calling the API; every other value fetches products from the API (recently is fetched as selected). latest, offers and top-rated need no source-value; sales also needs none but is not in the type union. If omitted, the source is derived from the current page type, and falls back to latest. | "brands" | "categories" | "json" | "landing-page" | "latest" | "offers" | "recently" | "related" | "selected" | "tags" | "top-rated" | "wishlist" | |
sourceValue | source-value | The value that goes with source. A JSON string (or a plain value) in one of these shapes: - an array of ids, for example "[12, 34]", when source is categories, brands, tags or selected (for categories, brands and tags the current page id is used when it is empty) - an array of product objects when source is json - the product id when source is related | string | |
subTitle | sub-title | Sub heading shown under the block title (passed to the inner salla-slider). | string |
productCardComponent example
<salla-products-slider product-card-component="my-custom-card-style1" ...
<salla-products-slider product-card-component="my-custom-card-style2" ...sliderConfig example
let productsSlider = document.querySelector('salla-products-slider');
productsSlider.sliderConfig = {
slidesPerView: 1,
spaceBetween : 30,
lazy: true,
}sliderProps example
productsSlider.sliderProps = { loop: true, pagination: true };Related
Renders: <salla-product-card>, <salla-slider>.
Used inside: <salla-offer-modal>, <salla-reward-details>.