[lightMode]

Quantity Input

The <salla-quantity-input> web component is used to allow the customer to use a counter to specify the needed quantity of a specific product, which is framed by a Button component. The component extends the input number element. For more, read from Mozilla.

Example

Quantity Input Example

Usage

<!-- Basic Quantity Input component usage -->
<salla-quantity-input
 cart-item-id="12345"
 max="10"
 value="1"
 name="quantity">
</salla-quantity-input>

This JS web component can be targeted for styling by its .s-quantity-input class. Following is a complete source code for customizing this component:

.s-quantity-input{
  &-input{
    
  }
  &-button{

  }
}

Properties

Property	Attribute	Description	Type	Default
Cart Item ID	`cart-item-id`	Cart Item's ID.	`any`	`undefined`

Methods

The pre-defined methods allow for calling the function built by Salla which are increase to add up quantity by one, decrease to reduce quantity by one, and setValue which allows for a customizible manner of inputting numbers.

Method	Description	Return Type
`increase()`	Increases quantity by one.	`Promise<HTMLElement>`
`decrease()`	Decreases quantity by one.	`Promise<HTMLElement>`
`setValue(value: any)`	Sets quantity by custom value.	`Promise<HTMLElement>`

[updatedIn] 4 months ago