The most important part of every web shop is the product detail page. It should inform the visitors about the product and convince them to buy it. The detail component of Aimeos consists of a whole bunch of sections that provide various types of information about the product which are described in this article.
In the detail component implementation there's a configuration option named client/html/catalog/detail/domains that is used by several subparts. It lists the domain names whose items should be available in the product detail view template.
Other components such as the catalog list need to know at which URL the product details will be displayed. The generated URL can be configured via these settings:
Used templates for the detail component are:
Furthermore, the detail component consists of two subparts (service and last seen) that can be controlled via the detail subpart configuration. These are described in more detail below.
The image section displays the product's images and provides features such as a thumbnail list of all images and a lightbox, allowing the user to zoom-in and toggle the photo to fullscreen. This is implemented as a partial that is included in the body template.
Inside the basket related section is all of the necessary information for choosing the product that is displayed and the required hidden data for adding the product to the basket. It's also responsible for displaying the price of the product (or of the selected sub-product) and the stock level information too. The selection of the product variant and optional attributes is outsourced in reusable partials.
The parameters and their format to add a product into the basket is described in the parameters section of the basket standard component
How customers can select the attributes for both types can be configured with the
client/html/catalog/selection/type/... = select|radio
client/html/catalog/attribute/type/... = select|radio
configuration options. You only have to replace the three dots (...) with the attribute code used for the attribute types (length, width, color, size, etc.). Using "select" will display a HTML select box while "radio" will show a HTML radio checkbox for each option. The value "select" is the default for all attribute types if nothing else is configured.
You can also enforce if there's an option pre-selected or not using
client/html/catalog/selection/preselect/... = 1 client/html/catalog/attribute/preselect/... = 1
The delivery option listing is implemented as subpart because it has to fetch additional, non-product related information from the database. More service subparts can be added to the service implementation if necessary.
Only the body template is used by the service section:
If the shown product is of type "bundle", the bundled products are displayed as well. For this, the product partial is used.
The user actions are links to features where customers can add a product to one of their lists of pinned, favorite or watched products. Which user actions are shown is controlled by the client/html/catalog/actions/list setting. They, as well as the social media buttons are both included by using partials.
There are several social platforms that can help to boost the sales of web shops, namely Pinterest, Facebook, Google+ and Twitter. They enable visitors to add products to their time line or social media profile
Via the configuration option for the displayed list of social links, you can choose which ones are available for your visitors. You can also add new social media links without changing the code. With the social list setting it's possible to add new or remove existing social links, which are then defined by the
client/html/catalog/social/url/... = https://...
settings. Replace the three dots (...) by the name you've used in the social list configuration and insert the link for sharing your product links as value. Links to these social media platforms are available by default:
Another big block in the catalog detail component is the additional content. Here you can add all product content you might show your visitors for your products. This contains:
The difference between product attributes and properties is in the way they are managed. Product attributes are shared and can be associated to many products while properties are only stored for one product. If you change an attribute, all products referencing the same will show the new content immediately while for properties this isn't the case.
For each product, shop owners can offer a list of suggested products that are shown in their own section,. It can contain an arbitrary number of products (if zero, the section won't be displayed) but should only contain the few most important ones.
When the job controller for generating the list of products bought together with the one displayed in the detail view runs regularly, this section will contain the appropriate products.
This part is a little bit special because it generates no visible output in the detail view. Instead, it creates the HTML for the the last seen product that is added to the session of the visitor. It's all done by the seen section implementation and even here, more data sections can be added by the seen subparts setting.
Like in the list or details component you also have the possibility to define which domain items for the list of last seen products (e.g. texts, media, prices, etc.) are fetched from the database.
Only the body template is used by the "last seen" section: