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

Offer Modal

The <salla-offer-modal> web component shows a list of products with an offer given by the store admin. These offered products are related to a specific product. It consists of Button component to which Merchants can select offers related to product(s) they added to the cart, and that can be customized using the slots' parameters available.
note
Available API Endpoints for the Offer component is:
Product Offer Details

Example#

Offer Example

Usage#

HTML
SASS

Methods#

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, such as show a specific product or offer.
MethodDescriptionReturn Type
open(product_id: number)Opens the available offers for a specific productPromise<any>
showOffer(offer: any)Shows offer details for a specific productPromise<void>
Tip
To use a method, you can for instance open the component via the event:

Slots#

Theslots makes it customizable to modify certain labels, such as header.
SlotDescription
headerThe top of the popup, which has replaceable properties {name}, {message}.
categoryReplaces Category badge, which has replaceable properties {name}, {url}.
productReplaces product card, which has replaceable properties {name}, {url}, {image}, {price}.
Modified at 2025-03-04 12:54:02
Previous
Offer
Next
Orders