TYPO3 Module List Shop System Elements

The sg_shop TYPO3 extension provides all the necessary tools for a shop system within the TYPO3 instance. After installing and configuring the extension, the backend module Orders and a whole group of shop content elements are available to editors. The module and content elements are presented in more detail in the manuals on this page. The TYPO3 shop extension also provides you with additional list elements. Thus, in the Orders module you have an overview of all orders received, while with the content elements you can design the ordering process for customers and place products on your website. You create and edit the products and other necessary elements in the List module.

Backend Modul: Bestellungen

TYPO3 Module Orders Icon

The Orders module allows you to manage orders. All products that are ordered in the online shop are listed here.

The orders can be filtered and searched. For each individual order, the payment status and shipping status can be viewed or changed. The tool automatically generates an entry in the module and an order confirmation as soon as an order is received.  All in all, it offers a good overview of all orders, making it easy to manage a shop.

Overview

If you click on the module, you will probably not immediately see the list of orders. These are only displayed if you are on the page/folder for orders. This page will be suggested to you directly. If there are currently no orders, no page will be displayed.

The list shows all orders which have been made on the page. Additionally, orders can be created manually. The list can be filtered and searched by payment and shipping status. Each entry in the list can be edited and deleted individually. You can also display an overview with information about the order and undo changes.

TYPO3 Module Orders No Orders
TYPO3 Module Orders Order List

Edit Orders

Tab General & Chained Subscription Order

Tab General

The General tab contains most of the information about the order. If the chained subscription order is activated at the top of the tab, the corresponding tab is also available.

You can change the order status, see which user has ordered the products and which positions are booked (the product, payment and shipping method). Each individual position can be expanded and collapsed individually and can be easily adjusted. The invoice can be added. The order confirmation is automatically generated and added by the tool.

At the end of the tab you will see an order overview.

TYPO3 Module Orders Tab General Positions
TYPO3 Module Orders Tab General
Tab Chained Subscription Order
TYPO3 Module Orders Tab Chained Subscription Order

Tab Payment

The Payment tab contains all information related to the payment process. Here you can find the bank account details and other relevant data of the user.

The payment type can be adjusted, as can the payment status:

  • Uninitialized
  • Open
  • Pending
  • Successful
  • Failed

If there are any payment reminders, you can check or change in this tab how often this has already happened.

Finally, the invoice address can be found here, which can also be adjusted.

TYPO3 Module Orders Tab Payment Status
TYPO3 Module Order Tab Payment

Tab Shipping

The Shipping tab now only contains the shipping type, shipping address and shipping status:

  • Uninitialized
  • Open
  • Pending
  • Successful
  • Failed
TYPO3 Module Order Tab Shipping Status
TYPO3 Module Order Tab Shipping

TYPO3 Content elements: Shop

The Shop plugins allow you to build up shop elements in a simple way. To do this, you must create a separate page for each content element. In some cases, you have to adjust the settings in the page properties.

All shop content elements are plugins where the General tab always looks the same. Basically, you can only configure the heading there, as in the Header Only content element.

Product View

TYPO3 Content Element Shop Product View Backend Icon
TYPO3 Content Element Shop Plugin Backend Icon

The product view shows an article with its details. You can add this in the Plugin tab under the plugin options. You can also choose between the rendering full and slim. The slim version shows only the product information. The full version shows the product photos on the left side.

Tab Plugin

TYPO3 Content Element Shop Product View Backend Tab Plugin

Product View in Frontend

TYPO3 Content Element Shop Product View Frontend

Shopping Cart

TYPO3 Content Element Shop Shopping Cart Backend Icon
TYPO3 Content Element Shop Plugin Icon

The shopping cart provides the customer with an overview list showing what they want to buy and how much it costs in total. The content element is already functional when it is added and saved. You do not have to change or add anything. The customer can go to the cash register next, so it is best to install the cash register as the bottom of the shopping cart page.

Tab Plugin

TYPO3 Content Element Shop Shopping Card Backend Tab Plugin

Shopping Cart in Frontend

TYPO3 Content Element Shop Shopping Cart Frontend

First Step: Login

TYPO3 Content Element Shop First Step: Login Backend Icon
TYPO3 Content Element Shop Plugin Icon

With the login to the shop, users reach the customer area. It is the first decisive step in the ordering process besides the selection of products. When the content element is added, it is ready for use. In the front end, it automatically generates fields on the left for logging in and a way to register on the right.

Tab Plugin

TYPO3 Content Element Shop First Step: Login Backend Tab Plugin

First Step: Login in Frontend

TYPO3 Content Element Shop First Step: Login Frontend

Second Step: Address selection

TYPO3 Content Element Shop Second Step: Address selection Backend Icon
TYPO3 Content Element Shop Plugin Icon

After logging in, customers will be taken to the address selection page. It is therefore useful to create the address selection as a subpage of the login page. This plugin is also fully configured once it has been added and saved. In the front end, all fields for a delivery and billing address are then visible, whereby customers can use the delivery address as the billing address with a check mark.

Tab Plugin

TYPO3 Content Element Shop Second Step Address selection Tab Plugin

Second Step: Address selection in Frontend

TYPO3 Content Element Shop Second Step Address selection Frontend

Third Step: Payment & Shipping selection

TYPO3 Content Element Third Step: Payment & Shipping selection Backend Icon
TYPO3 Content Element Shop Plugin Icon

Nach der Adresse wählen Kunden die Bezahlart und Versandmethode. Legen Sie die Seite mit diesem Inhaltselement also am besten als Unterseite der Adresseingabe an. Das Plug-In ist ohne weitere Änderungen einsatzbereit. Automatisch zeigt das Plug-In im Frontend alle von Ihnen angelegten Versandmethoden und Bezahloptionen.

Tab Plugin

TYPO3 Content Element Shop Third Step: Payment & Shipping selection Backend Tab Plugin

Third Step: Payment & Shipping selection in Frontend

TYPO3 Content Element Shop Third Step: Payment & Shipping selection
 Frontend

Fourth Step: Overview

TYPO3 Content Element Shop Fourth Step: Overview Backend Icon
TYPO3 Content Element Shop Plugin Backend Icon

The order overview summarizes all the information entered on one page. Since this step follows the selection of shipping method and payment method, it is best to insert the page with this content element after it. This plugin is also completely configured when you insert it into the intended page.

Tab Plugin

TYPO3 Content Element Shop Fourth Step: Overview Backend Tab Plugin

Fourth Step: Overview in Frontend

TYPO3 Content Element Shop Fourth Step: Overview Frontend

Product List

TYPO3 Content Element Shop Product List Backend Icon
TYPO3 Content Element Shop Plugin Backend Icon

With the product list you generate a list of selected articles. To do this, add either individual articles or product categories in the Plugin tab to configure article teasers in the frontend.

To be able to click on the individual articles and view them in detail, the detail page must be specified. It is best to create this page as a subpage and insert the content element product list single view there.

Finally, you set the product limit per site. By default, 12 articles are set, you can adjust this to your requirements and ideas.

Product List in Frontend

TYPO3 Content Element Shop Product List Frontend

Tab Plugin

TYPO3 Content Element Shop Product List Backend Tab Plugin

Product List Single View

TYPO3 Content Element Shop Product List Single View Backend Icon
TYPO3 Content Element Shop Plugin Backend Icon

The single view of the product list is inserted in a separate page, preferably as a subpage of the product list. In the page properties on the Access tab, the 'Enable in menus' option must be disabled. The page will then not be displayed in the menu, but will allow the detailed view in the product list.

Tab Plugin

TYPO3 Content Element Shop Product List Single View Backend Tab Plugin

Product List Single View in Frontend

TYPO3 Content Element Shop Product List Single View Frontend

Order Payment: Handling

TYPO3 Content Element Shop Order Payment: Handling Backend Icon
TYPO3 Content Element Shop Plugin Backend Icon

The content element Order Payment: Handling enables payment processing for orders. You do not have to change any settings in the content element.

Tab Plugin

TYPO3 Content Element Shop Order Payment: Handling Backend Tab Plugin

Order Payment: Confirmation

TYPO3 Content Element Shop Order Payment: Confirmation Backend Icon
TYPO3 Content Element Shop Plugin Backend Icon

The content element Order Payment: Confirmation generates a confirmation for processed payments. You do not need to make any changes in the content element settings.

Tab Plugin

TYPO3 Content Element Shop Order Payment: Confirmation Backend Tab Plugin

Order Payment: Cancellation

TYPO3 Content Element Shop Order Payment: Cancellation Backend Icon
TYPO3 Content Element Shop Plugin Backend Icon

The content element Order Payment: Cancellation allows you to cancel outstanding payments. You do not need to adjust anything in the content element settings.

Tab Plugin

TYPO3 Content Element Shop Order Payment: Cancellation Backend Tab Plugin

You would like to know more?

All information about the available offers can be found on the pages of our website base. You have the option of having a website created at a fixed price or opt for a Website as a Service package with which no further hosting costs or security and function updates will be due to you.

Website-Base at a Fixed Price
Website as a Service

Technical Documentation of the sg_shop Extension

In the technical documentation for sg_shop you can find more information about the TYPO3 extension.

To the technical Documentation