本文档由 Apifox 自动生成，推荐使用 Apifox - API 文档、API 调试、API Mock、API 自动化测试！
Single product
single product page template is designated to view product details such as the title, description, type, color, size, price, and quantity. Each product will have its own details displayed on this page.Example
Variables
SingleProductPage
Components
breadcrumbs component. The {% component breadcrumbs %} line returns the current navigation for the user:product.offer component:comments:product.similar-products. This will make it more and more reachable for the customers:JS Web Components
<salla-add-product><salla-button><salla-gifting><salla-installment><salla-products-slider><salla-quick-order><salla-quantity-input><salla-rating-stars><salla-slider><salla-social-share>Hooks
In some cases, the product may include "extra" services related, for example, to the payment services. Using hook
{% hook 'product:single.description.start' %} in the single product code shows these extra services, as we see in the following example:single product page template may call the following hooks in order to inject extra information:Usage
product object, such as product title and id. Using this. object, the developer has the ability to perform many tasks related to the product page, as we will see in the following parts.Product description
product.promotion_title, product.brand, product.name, product.rating, product.subtitle, product.description, and product.tags, can be used by the developer to display multiple pieces of information about a single product.Product images
product.images contains the product's several images, which can be displayed using a for-loop statement.Add product to the cart form (Options and Quantity)
<form> basically consists of two main sections. The first section is to show the product's options, and the product price and quantity.product.options uses a for-loop statement in order to show each available option for the product. Both hooks {% hook 'product:single.form.start' %} and {% hook 'product:single.form.end' %} are enclosing this part.product.is_on_sale returns the boolean value true. The developer can use the if statement to check that and then display product.price, product.sale_price, product.regular_price, or any other value as needed.product.sold_quantity and product.can_show_remained_quantity reflect the available quantity of the product. The developer may display the product's price along with its available quantity after checking if product.is_available is true. It is worth mentioning here that the variable product.notify_availability can be checked in order to give the user the option of being notified about receiving a new quantity of that product.Product Meta Data
<salla-metadata> JS Web Component in the following manner:Educational Clip
扫码加入交流群Modified at 2025-02-20 07:53:20