TYPO3 4.2 E-Commerce: Design, build, and profit from a sophisticated feature-rich online store using TYPO3

For TYPO3, you can use templates in the same way as for all web pages and for more well-known content management systems. There are several kinds of templates already developed that you can use, or you can develop your own template.

It is an important fact that for making an HTML template for your TYPO3 web page, you need to have a basic knowledge of HTML and TYPO3-specific configuration—TypoScript. However, you don't have to know PHP.

We are using the more well-known method: developing HTML templates (HTML documents) with TypoScript configuration.

Starting work with this method, you need to create a new folder for the HTML template file, for the CSS (Cascading Style Sheets) file, and for images that will be used in the developing design. We recommend creating a new folder in: [your-typo3-installation]/fileadmin/templates/

You need to create a new folder in the fileadmin folder:

For our new online shop, we'll create one more folder (child folder) named berriesshop. If you are planning to create several templates or you feel that data arrangement and sorting will help with looking through the web page structure, you can split templates—for example, "berriesshop", "berriesshop-intranet", or "berriesshop-new-template".

As mentioned, you can set up templates in the same way as for statistical HTML web pages that you probably developed before starting to use the advantages of the content...

TypoScript is the scripting language that is used to tell TYPO3 how to create the web pages and is composed of two types of information as we mentioned before: constants and setup code.

Usually, the constants field is filled with extension configuration or values for repeatable use and setup—with the main setup to parse the HTML template.

To start editing TypoScript you need to create a page that will store the template TypoScript configuration. Usually, it is the parent page in the site tree. So let's create one:

Click on the + icon and choose the position of the newly created page:

We just created our own template and placed the markers. So, the next important step is to add that content from the TYPO3 backend.

You need to choose the section Template, and in the site tree, choose the page where you created the template. Click on the pencil icon near the Setup to open and to edit the TypoScript and to add our template:

Here we will place the markers that we specified in the template. Let's insert the following code. First you have to start with the template configuration that specifies to TYPO3 what should be displayed in the code, and which charset and languages should be be used:

# LANGUAGE setup, here we enter the uID of language (default # language has the value "0"), charset utf-8, the page # language, and the html tag configuration
#-----------------------------------------------------------
config.linkVars = L
config.sys_language_uid = 0
config.metaCharset = utf-8
config.language = en
config.uniqueLinkVars = 1
config.htmlTag_setParams...

We added the template and entered the TypoScript configuration. We have to insert new pages for the correct work test now.

TYPO3 has great functions for creating several pages at the same time. Choose the section Functions from the left menu for creating new pages. You will see a page template in this section. You need to add page titles and click on Create pages.

In the page created previously in our example, we only stored root template information. If we don't want that to be shown to the web page visitors, we need to do the following: click on the created page Home icon. Then, from the menu choose Edit Page Settings.

You can now edit the page setting. You need to change the page setting to Shortcut. On the General tab of the page settings, you can set the page type to Shortcut. The page will refresh and there will now be a Shortcut tab. On this tab, you specify the page to which this page should be linked.

Choose one of the pages in the Page section. Add some...

Templates are used for adding design in TYPO3 like in all web pages and content management systems. You don't have to know PHP for adding templates to TYPO3. Usually, you can set up templates in the same way as for statistical HTML web pages. It is necessary to remember that in TYPO3 there is a difference between the two types of templates—TypoScript configuration templates and HTML layout templates.

TypoScript configuration at the TYPO3 backend is stored in two separate fields—setup and constants. You can use cObjects in your template. TYPO3 has great functions for creating several pages at the same time.

In the next chapter, we will describe TYPO3 e-Commerce plugins you can use to provide payment possibility in your online shop. Also, we will describe the most popular payments, such as online and offline payments using a card and the PayPal system, which is the most popular form of payment at the moment.