Product Card

The <salla-product-card> web component is used to contain content and actions about a single product in a card display mode. The component incorporates options for displaying images, hovering over buttons, product information, and more.

Example

Usage

HTML

SASS

Properties

Property	Attribute	Description	Type	Default
Full Image	`full-image`	Whether or not to show the full image on the card.	`boolean`	`undefined`
Hide Add Button	`hide-add-btn`	Whether or not to hide the "add to cart" button.	`boolean`	`undefined`
Horizontal	`horizontal`	Whether or not to show the product card as Horizontal card.	`boolean`	`undefined`
Special	`special`	Whether or not to show the product card as Special card.	`boolean`	`undefined`
Minimal	`minimal`	Whether or not to show the product card as Minimal card.	`boolean`	`undefined`
Product	`product`	The product's data.	`string`	`undefined`
Shadow On Hover	`shadow-on-hover`	Whether or not to support the effect of shadow on hover.	`boolean`	`undefined`
Show Quantity	`show-quantity`	Whether or not to show quantity.	`boolean`	`undefined`

Slots

Theslots makes it customizable to modify certain labels, such as add-to-cart-label.

Slot	Description
`"add-to-cart-label"`	The add to cart text label

Custom Salla Product Card Component

Note

The above mentioned content represents the default salla-product-card component. If you want to further customize the component and build your own product card component, please read further in this section

The developer can fully customize cards which comes within the Product Lists when calling the component, by utilizing the custom-salla-product-card phrase. That allows developers to create their own custom product cards that is returned when the salla-products-list is called.

The following code is about defining a custom HTML element called custom-salla-product-card that extends the functionality of a standard HTML element.

The custom element is defined using the customElements object provided by the browser, and is given the name custom-salla-product-card that Salla has pre-deifned. This element is then assigned to the class variable, say ProductCard, which extends the HTMLElement class.

The ProductCard class has two methods: connectedCallback and render. The connectedCallback method is called automatically by the browser when the element is added to the DOM, and the render method is used to generate the content for the custom element.

Information

📚 Learn more about Custom Components Mozilla and Salla Developer Portal, as well as Theme Raed.

Structure

Example

Example#

Usage#

Properties#

Slots#

Custom Salla Product Card Component#

Example

Usage

Properties

Slots

Custom Salla Product Card Component