Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Product
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Product

Add Product

The <salla-add-product-button> web component allows controllability over button text labels and behaviours based on the product-status and product-type properties. It consists of Product Availability component and Button component.
Note
Available API Endpoints for the Add Product component are:
Product Availability

Example#

Add Product Example

Usage#

HTML
JS
SASS

Properties#

PropertyAttributeDescriptionTypeDefault
ChannelschannelsAvailable notification channelsstringnull
Donating Amountdonating-amountDonation amount valuenumber'0'
Notify Options Availabilitynotify-options-availabilityListen to Product Options availability.boolean
Product IDproduct-idProduct ID under which the merchant can sign up for an availability noticeanyundefined
Product Statusproduct-statusProduct status based on the allowed type values."out" | "out-and-notify" | "sale"'sale'
Product Typeproduct-typeProduct type based on the allowed type values."codes" | "digital" | "donating" | "food" | "group_products" | "product" | "service"'product'
QuantityquantityPassing custom quantity number to be injected within the component, which affects sale product statuses as the Quantity Input component will be customized with the number passed.number'0'
Quick Buyquick-buySupport for the Quick Pay Buttonbooleanundefined
Subscribed Optionssubscribed-optionsShows the Subscribed Options ex: "[[139487,2394739],[1212,1544]]"stringundefined
Support Sticky Barsupport-sticky-barSupport for themes that have a sticky barbooleanundefined
Note
The Product Status out refers to the product being out of sale where a disabled button is labeled as "Sold Out". The out-and-notify type is where the Product Availbility component takes place as Merchants are allowed to subscribe when the specific product becomes available.
The Product Status sale is where the specified product is currently under sale which will allow for a Button component to appear and be labeled as "Add to Cart".
Each Product Type customizes how certain button labels appearance. For instance, if product-type is set to donating, then the label Donate will appear when product-status is set to sale.

Events#

EventDescriptionType
failedThis event will be fired when the Add Product to the cart failsCustomEvent<any>
successThis event will be fired when the Add Product to the cart succeedsCustomEvent<any>
Fast Checkout Feature
Salla has made buying easier by adding several payment options directly to the product details page.
Now, customers can complete their transactions using most common payment methods without needing to go to a different page. This approach aims to provide a seamless and convenient shopping experience in Salla Merchants’ stores for their customers.
The payment interface is displayed in a pop-up modal, enabling customers to:
View cart summary, price details, including discounts, shipping costs, and more.
Apply / remove discount coupons.
Select an existing delivery address or add a new one.
Choose a preferred shipping company.
Pay using one of four different payment methods, which are:
• Apple Pay
• Credit cards (Visa, MasterCard, or Mada)
• Installment plans (Tabby and Tamara)
• Cash on delivery
Alert
This component is not allowed to be customized by the developer and can only be called to the Theme. Only three properties can be customized using their CSS variables, height, width, border-radius:
salla-mini-checkout-widget {  
--salla-fast-checkout-button-height: 2.5rem;
  --salla-fast-checkout-button-width: 100%;
  --salla-fast-checkout-button-border-radius: 0.375rem;
}
Modified at 2025-03-04 12:54:02
Previous
Product
Next
Advertisement