You need to create product records for displaying products in the online shop pages. These records will contain the product description, the name of the product, property, and the image of the product.
So now you need to create a new product record in the child SysFolder, Black currant. Create a new record and add the necessary information, as you can see in the following screenshot:
You can fill in the following:
- Name—name of the product
- Identifier—if you have a large number of products or you need to follow up the product with a waybill
- Category—we are using only pages instead of categories
- Price—currency will be configured separately, so you don't need to input a currency type like USD or EUR.
- Weight—product weight; this can be for delivery cost calculations, for example
- Image—image of the product
Also, you can provide extra information about the product, such as various kinds of weight packing and various sizes (for example, you could display S, M, L, and XL sizes of one cloth model).
When you add all products pages, it will look like the following:
Note
We used the Banana shop template that is incorporated with the tt_products extension and modified this template from a<table> tag-based template to a<div> tag template with two columns.
For creating your own template, you can choose some already prepared templates that can be found in the extension tt_products folder. Relative to the site root, the default templates are in the folder: /typo3conf/ext/tt_products/template/.
You should remember that the template is divided into subparts, for example:
- ###ITEM_LIST_TEMPLATE### is used to show the product list in the frontend. Also, this subpart is used for showing the search results.
- ###ITEM_SINGLE_DISPLAY### is used for product singleview.
- ###BASKET_TEMPLATE### is used to see the basket content.
These subparts are numerous, so for template configuration you should have a basic knowledge of xHTML/CSS and the visual xHTML modeling software. Also, you should know template development well. As an alternative, you can use the default template to manage the minimal required changes to configure the template for your web page.
If you use a default template, copy it from the tt_products template folder and add to the /fileadmin/ folder where the base template of your web page is located. To use the copied template, you should specify the location using TypoScript.
Open the backend module, Template, choose the site root page where all the template configurations are stored, and manage changes by adding the field product template's relative location with respect to the root page in Setup. Also, add the template name:
plugin.tt_products.templateFile = fileadmin/templates/bs/products_en.html tt_products don't offer multilingual templates. So if you make configuration for multilanguage page you should add options using TypoScript like you did with language configuration: config.linkVars = L config.sys_language_uid = 0 [...] config.language = en plugin.tt_products.templateFile = fileadmin/templates/bs/products_en.html [globalVar = GP:L = 1] config.sys_language_uid = 1 [...] config.language = de plugin.tt_products.templateFile = fileadmin/templates/bs/products_de.html [global]