You are using Internet Explorer 11 or earlier, this browser is no longer supported by this website. We suggest to use a modern browser.

UCP Pattern Library
UCP Pattern Library
UCP Pattern LibraryUCP Pattern LibraryUCP Pattern Library
English arrow-down
  • Deutsch
Search search tk-menu tk-close menu
  • Pattern Library
  • flexible
    English arrow-down
    • Deutsch
  • Home
  • Patterns by type
  • E-Commerce
  • Shopping Cart Overview

Shopping Cart Overview

The "Shopping Cart Overview" module is used to display products which are added in the cart. The displayed articles can be added to the shopping cart or bookmarked. The configuration can be used to display articles, also the labels of the columns can be customized.

Example page view

The module is marked in orange

Shopping Cart Overview module (with Product list layout)

zoom

Shopping Cart Overview module (with table layout)

zoom

The module consists of the following 3 tabs:

TabDescription
GeneralContains the title of the overview, the choice of content source.
LayoutHere you can store the table from which the data for the overview emerge. In addition, the filter, as well as the representation of the items can be adapted here by selecting layout.
LabelsLabeling of various elements

General

This tab consists of the following:

Content areaDescription
TitleTitle for the cart overview component
Content sourceYou can select either 'Cart' or 'Quotation' for the content source
Checkout pageYou can add a page URL/link, where it should be redirected after click on checkout button
InteractionsOne can hide the checkout button by checking the checkbox

Layout

This tab consists of the following:

Content areaDescription
LayoutYou can choose 'Simple table' to present cart data in tabular structure or 'Product list' which presents cart data in some specific layout.
Prevent Quantity UpdateYou can choose 'No' to disable the quantity from being updated.
Datadriven Template PagePage where product details is displayed
Table nameName of the database table from where data will be pulled to display the specific products .
'Image' columnSelect the column of data table for the 'Image' column
'Title' columnSelect the column of data table for the 'Title' column
'Description' columnSelect the column of data table for the 'Description' column
'Additional details' columnSelect the column of data table for the 'Additional details' column
'Amount' columnSelect the column of data table for the 'Amount' column
'Unit' columnSelect the column of data table for the 'Unit' column
'Price per unit' columnSelect the column of data table for the 'Price per unit' column
'Base unit' columnSelect the column of data table for the 'Base price unit' column
'Price per base unit' columnSelect the column of data table for the 'Price per base unit' column
Additional label for unit (prefix)Specific label to be used before unit
'Customization enabled' columnOption to allow customization
'Customization placeholder' columnPlaceholder text if customization is allowed
Hidden columnsAdd columns that you do not want to be displayed in the table.
Name of Price ColumnSelect the column of data table for the 'Price' column
Selling Unit ColumnSelect the column of data table for the 'Selling unit' column
Maximum Amount ColumnSelect the column of data table for the 'Maximum Amount' column
ImageLabel for 'Image' column
DetailsLabel for 'Details'
AmountLabel for 'Amount' column
Price Per UnitLabel for 'Price Per Unit' column
Total PriceLabel for 'Image' column
CustomizationLabel for 'Customization' column
ActionsLabel for 'Actions'
Total netLabel for 'Total net'
VATLabel for 'VAT'
Total GrossLabel for 'Total Gross'

Labels

This tab consists of the following:

Label 'Checkout' buttonLabel for checkout button
Label for Empty CartLabel for Empty cart
Delete button titleLabel for delete button
Select field label “Standard”Label to display standard
Select field label “Custom”Label to display custom
Custom configuration error messageError message to be displayed on improper entry in custom field
Error message for invalid entriesError message to be displayed on invalid entries in selling unit field. For example, if the number cannot be divided by the sales unit or the maximum number has been exceeded."

The module can be used in the following site areas and templates:

Startpage
stage
content
Content Page
stage
main content
right
bottom
Flexible Layout
full-width
default
default with sidebar right
sidebar
sidebar
default with sidebar left
The blue area indicates that the module is applicable in this content area.

This module can be used in the following themes:

  • Internet
  • Intranet
  • Suite
The blue area indicates that the module is applicable in this theme.

Example page “Shopping Cart Overview”

Example page
up to top arrow-up

arrow-down UCP Pattern Library

  • brandfactory
  • media pool - das Digital Asset Management System für thyssenkrupp
  • CMS Login

Follow us

  • Global Corporate Website
© thyssenkrupp AG 2023
  • Sitemap
  • Imprint
  • Legal Notes
  • Share tk-share
    FacebookTwitter Email LinkedIn