Twilight comes with a ready-designed and styled set of web components for Salla stores. For example, ready components to display the login form, product availability section, search bar, localization menu, and many more.Twilight JS Web Components are a collection of high-level building blocks and reusable web components that can be built together to swiftly develop the UI for custom Salla Themes, governed by clear guidelines.JS Web Components are built from the ground up to be simple to learn and use, with various thoughtfully constructed user interface components. Its complete compatibility with the themes' structure and architecture makes it easy to customize, as the documentation explains.
📙 What you'll learn#
JS Web components#
Below is a list of the ready-made Twilight JS Web Components which can be used easily. Following, in this part of the document, each component is explained in detail.Every web component comes with a list of properties and events that make that component customizable. Besides, each web component uses methods from the Twilight JS SDK to fetch any needed data from the backend.
salla-advertisement
Shows all the details about product advertisements.
salla-apps-icons
Shows clickable labels of Google Play Store and Apple Store for the Store's application.
salla-add-product-button
Allows controllability over button text labels and behaviors based on the product-status and product-type
properties.
salla-breadcrumb
Helps users navigate by showing their path through pages, allowing them to easily go back by clicking on links.
salla-button
Shows a customizable button, in terms of size, color, style, status, position etc..
salla-cart-summary
Show the icon of the shopping cart with a small circle badge indicating the number of items in the cart.
salla-color-picker
Allows selection of a color using a variety of input methods.
salla-comments
Displays a comment form for specific products or pages.
salla-contacts
Shows the store's contact information details.
salla-conditional-fields
Allows for hiding / displaying certain features in a product, such as size.
salla-conditional-offer
Enables dynamic presentation of offers and discounts based on the customer's cart status.
salla-count-down
Shows the amount of time left until a given date.
salla-datetime-picker
Allows users to select both date and time with the same control.
salla-file-upload
Allows the user to allow uploading a file or a number of files.
salla-filters
Allows the user to filter the data in a variety of ways.
salla-gifting
Display items as gifts, which can be used after the customer has completed a purchase.
salla-infinite-scroll
Allows for infinite scrolling to load content continuously as the user scrolls down a page.
salla-installment
Shows a block area for the available installment payment options provided for a specific product.
salla-list-tile
Used to display listing items in a tile form.
salla-loading
Used to convey that some data is currently loading to the user.
salla-localization-modal
Shows the menu for the store's available languages and currencies.
salla-login-modal
Displays the login form, which prompts a user for their credentials in order to authenticate their access.
salla-loyalty
Display a popup that represents the Loyalty program.
salla-map
Displays geographical maps from various sources with multiple layers, and interaction through events.
salla-menu
Shows nested list items that either appear on the header section or footer section.
salla-metadata
Shows detailed specifications for a product. It can display one or multiple sections of information, like links, and
text etc.
salla-modal
Displays a dialog box or pop-up window on top of the current page.
salla-offer
Displays offers, categories, products, banks, and discount information.
salla-offer-modal
Shows a list of products with an offer given by the store admin.
salla-orders
Shows a table with order details, such as order ID, product total, order status, and more.
salla-payments
Shows the available payment options as labeled footer items.
salla-placeholder
Reserves space for content that soon will appear in a layout.
salla-product-availability
Show the "Notify availability" option as a button for the registered customer.
salla-product-card
Contains content and actions about a single subject in a card display mode.
salla-products-list
Displays a group of related products with some of information, such as products' names, prices, and other relevant
information in an organized way.
salla-product-options
Shows customizable product fields before proceeding to ordering.
salla-product-size-guide
Enables the merchant to add product measurements of height, weight, depth and other metrics.
salla-products-slider
Navigates horizontally through a group of related products.
salla-progress-bar
Displays a progress bar indicating that data processing is underway.
salla-quantity-input
Allows the customer to use a counter to specify the needed quantity of a specific product.
salla-quick-buy
Allows for placing the Quick Buy button for a quickly checkout and pay for products.
salla-quick-order
Allows the customer to quickly checkout and pay for products.
salla-rating-stars
Displays a form of rating scale using a star glyph.
salla-rating-modal
Displays the rating scale for a store, product, or shipping company.
salla-reviews
Displays a vertically scrollable reviews, which can its data source can be customized.
salla-reviews-summary
Allows users to display the general rating out of 5 stars on the product details page.
salla-scopes
Shows a list of scopes (branches) owned by the store.
salla-search
Shows a search box, field, or bar.
salla-sheet
Baseline layout foundation for other components to be set on.
salla-skeleton
Displays an indication to the user that something is coming but not yet available.
salla-slider
Gathers numerical user data by reflecting a range of values along a bar.
salla-social
Displays a list of the store's social media account.
salla-social-share
Displays a menu with social media platforms.
salla-swiper
Modern touch slider to display a list of items.
salla-tabs
Makes it possible to have several panes inside a single view.
salla-tel-input
Shows a field for entering a telephone number, with country key/code prefix.
salla-user-menu
Shows a navigation menu list with links.
salla-userprofile
Displays user profile detailed information.
salla-user-settings
Allows the user to manage their account settings.
salla-verify
Shows fields for verifying email/mobile of users by sending OTP verification code.Benefits#
| |
|---|
| Clean, simple, and standardized | Developers will follow standards and let users fall in love with the user experience with ready-made components and beautiful (yet changeable) themes. Developers can use a stylistic guideline and functional designs to create huge Themes with UI Component modules. |
| |
| Using Twilight JS SDK | Twilight Web Components are using the Twilight JS SDK, which allows communication between the frontend and backend using specific REST API. |
| |
| Ecosystem | Twilight Web Components are maintained by a full-time core team and a large community of developers and contributors. This is because Twilight helps developers collaborate. |
| |
