Typo3 is a Content Management System that provides alot of functionality out of the box, as well as a vast catalogue of both user contributed and commercial extensions. It’s templating system makes it very easy to integrate legacy sites. This is a tutorial documenting the installation and setup of tt_products, an ‘Ecommerce’ extension to typo3.
After purchasing tt_products from http://www.ttproducts.de/ I downloaded the t3x file and installed it onto the server using the ‘Import Modules’ feature of the typo3 Extension Manager. It asks to create a new table in the typo3 database, and install a few extensions that it needs, and others which are recommended. Knowing that I wanted a fully featured ecommerce shop, I installed them all.
Once that was done, the next step was to download the addons_tt_products extension from the typo3 Extension Manager. As tt_products has grown over the years, it was necessary to maintain the templates outside of the main tree. These are available in this new extension, so install that to get your templates.
Once that is downloaded, I copied the products_template.tmpl to the fileadmin/template/ directory (your location may be different). I then had to setup a new template for the Shop plugin to use.
To create a new page (essentially the ‘root’ of your shop,) you must create a new page in your navigation structure in the typo3 backend. Once the page has been created, give it a sensible name, unhide it then ‘save&close’ it.
Create a new template on the new page, by right-clicking on the page in the navigation, and selecting ‘template.’ Enter a sensible template title, and under Constants: enter the following (exchanging the path for the path of your template file):
plugin.tt_products.file.templateFile = fileadmin/template/products_template.tmpl
Save the template and then Clear the Cache.
Once that has been completed, select ‘Template’ from the Web Module list, and click on the Shop ‘root’ page. This should provide you with the ‘Template Information’ page. At the bottom of this page, it says ‘Click here to edit whole template record.’ – DO IT.
On the ‘Includes’ tab – there is an option for ‘Include static (from extensions): on the right hand side, clikc ‘Shop System CSS Styled (tt_products). This should move it to the ‘Selected Box’. Once this is done, you can save&close and Rebuild the Cache.
THIS IS AN IMPORTANT STEP THAT WILL BREAK THE SITE IF NOT COMPLETED
To create the Shop, you have to now insert the Shop Plugin into the ‘Page Content’ of your page. As a start I’ll show you how to create a simple shop.
Select the ‘Page’ view in the web module list, and click on your Shop ‘root’ page to edit it.
Create a ‘content element’ on the page, and on the second tab, select the ‘Shop Plugin’ as the plugin you’d like to insert. If you’ve got the FlexForms plugin enabled, then you should be able to select ‘Product: List’ from the list of views on the right hand side. Leave the other fields blank.
At the bottom of the Page is a ‘StartingPoint’ – this is essentially the ‘root’ folder for all your products. However, we haven’t created any products or categories yet – so filling this is going to have to wait. Save&Close the page.
For a simple shop, there are only going to be a few products and categories, so that is all I intend to cover here.
To add your Products and Categories, you need to create a folder to put them in. I added mine by creating a SysFolder underneath my Shop ‘root’ called Products. Once you’ve created the SysFolder, select ‘List’ view from the Web Modules, and select the Products folder you’ve created. On the right hand side of your view it will be empty.
Create new content on the Right Hand side by clicking the small ‘add’ icon. Select ‘Product category’ from the list of Content Types, then fill in the relevant fields on the first tab. Don’t bother with theother tabs for now.
Do the same but for ‘Products’ instead of ‘Product categories’ to create the products you want. Just create a few for now, to get the gist of how the System works.
To create a simple site structure, you’ll need to add three more pages underneath your Shop ‘root’ page. These are:
- Shopping Cart
- Order Status
These are just standard pages – simple to setup.
To make these pages function properly, you’ll need to add the Shop Plugin to their page content. If you’re using the FlexForms extension, then instead of a CODE box, you’ll be able to select what you want to display for each page.
- For Shopping Cart, you’ll display BASKET (FlexForms = Basket: Shopping Cart)
- For Checkout you’ll display PAYMENT,FINALIZE,INFO (FlexForms = Basket: Order Review & Payment)
- for Order Status you’ll display TRACKING (FlexForms = Orders: Tracking)
You can now edit your root page, and under the Plugin Tab, set your Startingpoint to the Products folder.
The site will now work, but you’ll need to enable Order Tracking by editing your template. Add the following information to the template file:
There you have it. A tt_products site all setup and working.