Skip to main content

CMS

The new Ceres online store

As of now, online store projects are based on the new online store plugin Ceres. The Ceres store uses the latest and future-proof plugin technology. Ceres can be customised easily and extended by additional plugins from the plentyMarketplace.

Online stores that have been created on the basis of the old CMS will be maintained during the transition period. However, no new features will be developed for the old CMS. We recommend to use the new Ceres online store for all future online store projects.

1. Content of this chapter

This chapter teaches you how to arrange your online store and customize its design to meet your needs. For further information, refer to the Web design section.
The CMS chapter also includes information about working with the image gallery. Use the image gallery to upload images that should be displayed in your online store. Images can be grouped together there and managed in folders.

Use the Webspace tool to save elements for your design, e.g. images, logos or JavaScript files. Elements are managed there on the file level.

The Documents page shows you another way to make files available to your customers. Here you will learn how to upload documents and link them to emails.

The Blog page teaches you how to set up a blog in your online store.

The FAQ page shows you how to set up a list of Frequently Asked Questions in your online store.

This chapter also teaches you how to configure newsletters that are sent automatically and that help you reach a wide range of potential customers.

2. Web design in plentymarkets

This section teaches you how to work with the integrated Content Management System. It shows you how to edit templates and thus customize the design for your online store. Furthermore, you will learn how to use wildcard characters to insert content into your online store. Wildcard characters make it possible to edit the content dynamically. For example, you can use wildcard characters to display item prices and availabilities. Use if queries to make case-by-case decisions. Procedures will then be carried out on an if-then basis.

Format your online store with CSS and make changes to the design with only a few clicks of the mouse.

For further information, refer to the Web design page of the manual.

4. Settings

Settings > CMS

4.1. Content of this chapter

In this chapter you will learn about the basic settings for categories as well as for the newsletter, forum or blog.

4.2. Forms

System » CMS » Forms

4.2.1. General information about forms

Create and edit forms in this menu. One example of a form is the contact form displayed in your online store. In this area, store visitors can enter their contact information along with a question or comment. After the visitor clicks on the submit button, the entries will be sent to the email address that was saved in the System » Client » Select client » Email » Access data menu. The template variable {% Form(X) %} is used to insert a form into your online store.

4.2.2. Creating a form

You can create a new form directly after opening up the menu. If you have clicked on one of the existing forms listed under the heading FORMS in the upper left corner, then you will not be able to create a new form until you have reloaded the menu. By reloading the menu, you change the screen back to its original appearance.

ENG Settings CMS Forms 01
Figure 1. creating a new form

Creating a new form:

  1. Go to System » CMS » Forms.

  2. Carry out the settings as desired. Pay attention to the information given in Table 1.

  3. Save the settings.
    → The new form is not listed in the overview of FORMS until you have reloaded the menu.

Table 1. creating a new form
Setting Explanation

ID

The form ID is assigned by the system and can not be changed. The ID is used to insert a form into the online store.

Form name

Enter a name for the form.

Email subject

Enter an email subject. The text will be displayed in the subject line of all emails that are sent with the form. If you work with several different forms, then the subject can help you to recognize which form this email refers to.
*Important:* If you want the form to be imported into the ticket system, then you are required to enter a subject. If there is no subject, then the customer’s email address will not be saved. This means that emails may be sent to your own address with an event procedure.

CC email address

Enter an email address. The entries made in the form will also be sent to this address (=CC).

Ticket type

Select a type if you want to import the form into the system as a ticket.

Ticket status

Select a status if you want to import the form into the system as a ticket.

Field name

Enter the field names for the form, e.g. Company, Last name, First name, email etc.

Type

Select the data type for the data field. On the one hand, the type determines how the entry field will be displayed in the form, e.g. as a single-line entry field, as a multi-line text field or as a check box. On the other hand, the system uses the type to recognize which information is entered by the customer, e.g. an email address, first name, last name or telephone number. This is important so that the information is assigned to the correct data field.

Width (pixels)

Enter the width of the data field (in pixels).

Mandatory field

Select the setting YES to indicate that a data field is mandatory. Mandatory fields will be displayed on the form in bold font.

Email address in forms

If you enter an Email address field into a form, then be sure to select Text field email address as the type. This is especially important so that the form is correctly assigned in the ticket system.

4.2.3. Changing a form

Proceed as follows in order to change the settings of a previously saved form.

Changing a form:

  1. Go to System » CMS » Forms.

  2. Select the form that you want to change from the overview of FORMS.

  3. Pay attention to the explanations given in Table 1 and make the changes as desired.

  4. Save the settings.

Save the category after changes were made

If you use the changed form in a category, then you have to save the category once in order for changes to go into effect.

4.2.4. Inserting a form in a category

Forms are inserted into a category in two steps. First, determine the ID of the desired form. Second, insert the correct wildcard character and code into the category. To do so, proceed as follows.

Determining the form’s ID

The template variable {% Form(X) %} is used to insert a form into a category. Replace the X with the form’s ID.

Determining the form’s ID:

  1. Go to System » CMS » Forms.

  2. Select the form that you want to change from the overview of FORMS.

  3. The ID is listed in the ID line.

Inserting the template variable and code

You can use an IF/ELSE query to respond to a form being submitted, e.g. by displaying the words *Thank you for your message*. The following is an example code, which contains this message:

<p>
{% if !$ActionPositivResult %}</p>
<h1>
Contact</h1>
<p>
Please get in touch. We will promptly process your inquiry.</p>
<p>
<span>{</span>% Form(X) %}</p>
<p>
{% else %}</p>
<h1>
Thank you for your message.</h1>
<p>
{% endif %}</p>

Inserting the form and code:

  1. Go to Item » Categories.

  2. Select the desired language from the Language drop-down list, e.g. English.

  3. Open the desired category.

  4. Copy the code shown above and insert it at the location where you would like it to be.

  5. Search for the template variable {% Form(X) %} and replace the X with the form’s ID.

  6. Save the settings.

4.2.5. Creating and linking forms in other languages

Create forms for every language in your online store. Link the forms to the correct language version of the category.

Creating a form in another language:

  1. Go to System » CMS » Forms.

  2. Pay attention to the explanations given in Table 1 and carry out the settings as desired.
    → Enter the field names in the desired language, e.g. German.
    → Enter a name into the Form name field. Select a name that allows you to recognize which language the form was saved in.

  3. Save the settings.

Inserting a form in another language:

  1. Go to Item » Categories.

  2. Select the desired language from the Language drop-down list, e.g. German.

  3. Open the desired category.

  4. Copy the code and insert it at the location where you would like it to be.
    → Translate the text into the desired language.

  5. Search for the template variable {% Form(X) %} and replace the X with the form’s ID.

  6. Save the settings.

4.3. RSS

System » CMS » RSS

4.3.1. RSS

RSS (Really Simple Syndication) is an electronic news format. It enables the user to subscribe to the content of a website in the form of so-called RSS feeds. RSS is a service, similar to a news ticker, providing the headlines with a short excerpt of the text and a link to the original page. For further information about RSS technology, refer to Wikipedia.

RSS feeds can be created with the help of plentymarkets. This way, you can offer the latest items, special offers and revised content pages in the form of RSS feeds (subscriptions) to your store visitors. In addition, RSS feeds are processed well by search engines and the content is analysed.

4.3.2. Creating an RSS feed

Go to System » CMS » RSS to create an RSS feed. When accessed, they are updated automatically and remain valid for one hour. After that, they will be updated again the next time that they are accessed.

EN Settings CMS RSS 01 SI
Figure 2. creating a new RSS feed

Creating a new RSS feed:

  1. Go to System » CMS » RSS.

  2. Click on the New RSS feed tab.

  3. Pay attention to the example given in Figure 2 and carry out the settings as desired.

  4. Save the settings.

EN Settings CMS RSS 02 SI
Figure 3. editing an RSS feed

The following table explains the settings in the System » CMS » RSS menu:

Table 2. options for RSS feeds
Setting Explanation

Content

Select which items and category pages are to be offered as RSS feeds on a daily basis.

Client

Select the corresponding online store or client (store).

Title

Enter a title. This will also be used as the name of the bookmark in the browser.

Short description

Enter a short description of the offer or the page in general.

Title prefix

Will be placed in front of the item name or the name of the category page.

Number

Select the number of items, category pages or blog entries to be made available as RSS feeds. You can select 5, 10, 15 or 20 feeds.

Language

Select the appropriate language.

Absolute URL

The RSS feed’s absolute URL. It will only appear after you have saved a new RSS feed.

Relative URL

The RSS feed’s relative URL. It will only appear after you have saved a new RSS feed.

4.3.3. Integrating an RSS feed in the website

After an RSS feed has been created in the tab New RSS feed, it exists with a static URL. This URL will be displayed in the options of this RSS feed in the tab RSS feeds.

+ An RSS feed can be integrated into a website in two ways. You can either insert a link with the RSS feed’s URL as the target, e.g. into a category. Alternatively, you can communicate to the browser that an RSS feed is available for this website.

+ In order to directly communicate to the browser that an RSS feed exists for this website, a change has to be made within the page layout of the website.

Integrating an RSS feed into the website:

  1. Go to CMS » Web design.

  2. Click on Layout on the left and open the PageDesign folder. Then click on the PageDesignContent template.

  3. Add the following HTML code at the bottom of the PageDesignContentMainFrame editing window. Then change the code’s title and URL to match your online store.

<span<</span>link href="//www.your-store.co.uk/?ActionCall=WebActionRSS&rss_id=1" rel="alternate" title="RSS feed" type="application/rss+xml" /><span<</span>link href="//www.your-store.co.uk/?ActionCall=WebActionRSS&rss_id=1" rel="alternate" title="RSS feed" type="application/rss+xml" />

Visitors will be able to subscribe to and read the RSS feed as soon as the HTML command was entered and saved.

4.3.4. Inserting the RSS feed icon into the layout

Proceed as described below to insert an icon for your RSS feed into your online store.

Inserting the RSS feed icon into the layout:

  1. Go to CMS » Webspace » layout » Your active layout » images.

  2. Click on the Upload files button and find where you saved the icon on your computer.

  3. Select the desired icon images and click on Open. Alternatively, you can also drag and drop the images into the folder.
    → The image will be uploaded.

  4. Open the image that you uploaded.

  5. Write down the image’s URL, e.g. /layout/test_design/images/RSS-Icon.png.

  6. Go to CMS » Web design.

  7. In the Language drop-down list, select the language of the layout that you want to edit, e.g. English.

  8. Click on Layout, open the PageDesign folder and click on the PageDesignContent template.
    → The template will be opened in the language you selected.

  9. Insert the wildcard character link for the desired icon into an appropriate place in the layout (see example below).

  10. Save the settings.
    → The icon will appear in the English store.

Example:

<span<</span>a href="/?ActionCall=WebActionRSS&rss_id=2" title="Subscribe to our RSS feed"><span<</span>img alt="Open RSS" class="pmManScreenshot" src="/layout/machart_studios/images/RSS-Icon.png" />

Figure 4 shows an example of how the RSS icon might look in your online store:

EN Settings CMS RSS 03 SI
Figure 4. RSS icon in the online store

The System » CMS » Item gallery menu allows you to create item galleries. Item galleries are used to present items in a gallery view in your online store. Your customers will then see specific items, e.g. your latest or top items. They can open an item by clicking on it. Item images are slightly enlarged when customers point their cursor at it. If more than one item image exists for an item, the image with the highest priority is displayed.

No gallery view for locked stores

Gallery views will not be loaded if your online store is locked.

Proceed as described below to create an item gallery.

Creating a new item gallery:

  1. Go to System » CMS » Item gallery.

  2. Click on the New item gallery tab.

  3. Pay attention to the explanations given in Table 3 and carry out the settings as desired.

  4. Save the settings.

Time lag

Due to caching, any updated or new item images will only be displayed in your item gallery after about 1 hour.

You configure the settings of a flash gallery in the New flash gallery tab of the item gallery menu. You must have created at least one item gallery before creating a flash gallery. This is because a data source is required from which the item images can be loaded (Table 4).

Creating a new flash gallery:

  1. Go to System » CMS » Item gallery.

  2. Click on the new flash gallery tab.

  3. Pay attention to the explanations given in Table 4 and carry out the settings as desired.

  4. Save the settings.

Now add the item gallery to the online store via the CMS constant that you selected for the option Source text constant. You can insert CMS constants into categories or templates. Proceed as described below to insert the CMS constant into your homepage category.

Inserting an item gallery into your online store’s design:

  1. Go to Item » Categories.

  2. Open the category of your homepage.

  3. Insert the CMS constant into the category at an appropriate position.

  4. If desired, insert a header for the CMS constant and format it.

  5. Save the settings.

5. Web design

CMS » Web design

5.1. Video tutorials

5.2. User interface

This page provides you with an overview of the elements that you can use to manage and edit the design of your online store under CMS » Web design. The chapters of this page provide further information about the individual elements and areas within the menu.

5.2.1. Overview of the user interface

This chapter provides you with an overview of the elements that can be used to edit your design in the CMS » Web design menu. This chapter is a good source of reference to help you find your way around the menu. Individual elements and areas are described in detail on various pages within this chapter.

EN CMS Web Design User Interface 01
Figure 5. web design menu

The following table explains the elements and areas within the CMS » Web design menu:

Table 5. overview: configuring the web design
No. Function Explanation

1

Select design

Select the design from the drop-down list. Click on the gear-wheel icon and select the desired client (store) to activate the design in the online store. You can tell that a design is activated because the design name is written in green. If a design is activated, then a tooltip will show which client the design is linked to.

2

Language

Select the language for the design from the drop-down list.

3

Save selection

If a check mark is placed, then the system will remember which design and language the user selected last. This combination will automatically be selected the next time the user logs in or reloads the menu. This is useful if users regularly work with a different design and language combination than is activated in the system.

4

Management functions

The following information provides a quick overview of the management functions. These functions are explained in more detail on the Editing the web design page of the manual.
The following functions can be configured:
Settings = Select the client (store) and the image folder.
Preview = Allows you to view the online store with the selected design. You do not have to activate the design to see the preview. This allows you to check the changes that were made to your design. In order to use the preview, you must have selected a client (store) in the settings.
Inline edit preview = Allows you to edit the code of the particular template directly in the frontend of your online store.
Publish design = Activates a selected design or updates the files for the design after changes were made.
Create new design = Uses an existing design as the basis for creating a new design.
Apply design = Creates a copy of the design. This is recommended before carrying out changes. This is especially important if you want to modify the standard design.
Export design = Exports a design or specific characteristics of a design.
Import design = Imports a standard design. The design will then be displayed in the drop-down list.
Dropbox: export/import design = Export or import design to or from Dropbox. You can export one or several design sections or a whole design in one or more languages. You can import all templates or only edited templates of a design from Dropbox to plentymarkets.
Delete design = Deletes a design that was selected in the drop-down list. Use the Delete design option to delete the design and all of its language variants. Use the Delete selected language option to delete the design for the selected language only. If the particular design is available in another language, then you would have to delete this language variant separately if you decide that you no longer want to use it.

5

Search function

Finds templates with the search function.

6

Folder

The template structure. Folders are represented with a folder icon. Templates are represented with a page icon.

7

Reminder to save

The red marking in the corner of the tab indicates that changes were made to the template and that these changes were not yet saved.
Important: Save the template so that your changes are not lost.

8

Edit template

The following functions are available for displaying and editing the template:
Save = Saves the template after changes were made.
Template variables and functions = Opens an overview of template variables and template functions.
Apply template = Applies the content of the particular template to a different language.
Enlarge editor = Opens a larger version of the template’s editing window. Simply close the window once you have finished making changes. Then click on the save icon in the normal editing window to save the changes.

9

Editor settings

The following settings can be activated for the syntax editor; check mark = activated:
Show control characters = Control characters will be displayed in the source code of the syntax editor.
Spaces instead of tabs = Several spaces will be displayed instead of tabs in the syntax editor. Previously existing formatting will not be changed.

10

Editor

The following options are available:
Syntax editor = Code will be highlighted in color in the syntax structure.
Text field = Code will be displayed as pure text.

11

Unused

Blank templates are sorted into the Unused folder. The system does this automatically.

5.2.2. Important functions in detail

This chapter provides detailed descriptions of a few design management functions.

Search function

The search function helps you find templates quickly. Enter the name of the template that you are searching for into the text field (Figure 6, red arrow). Search results will appear while you are entering the name.

EN CMS Web Design User Interface 02
Figure 6. search function
Variable search

There is also a search function for template variables and template functions.

Apply template

Every template can be applied to a different language version for the design. The code will be copied and will appear in the template for the selected language. The example in Figure 7 shows that the content of the PageDesignContent template will be applied to the German version of the testtest_green design.

EN CMS Web Design User Interface 03
Figure 7. applying a template

Applying a template:

  1. Go to CMS » Web design.

  2. Open the template that should be applied to a different language version.

  3. Click on Apply template (Figure 7, number 1).
    → An editing window will open.

  4. Make sure that the correct design is selected.

  5. Select which language the template should be applied to (Figure 7, number 2). It is possible to select multiple languages.

  6. Click on Apply template (Figure 7, number 3).

Display the template in a different language by selecting the design and then the language to which the template was applied (Figure 5, number 2).

5.3. Syntax

CMS » Web design

5.3.1. Content of this chapter

The following pages provide you with basic information about the structure, coding and syntax of content in your online store. You will learn how various elements are structured and how they can be customized. Most of the structures are already included and configured in the plentymarkets standard design, i.e. the default configuration when you first start your online store. The information on these pages helps you understand and edit these structures. You will need to have a basic understanding of web design to do so. If you are not already familiar with web design, then you should hire an agency to make changes for you.

Pay attention to the following explanations of pages within this chapter and refer to the Editing the web design page, which includes additional information about designing your online store.

You need to have in-depth knowledge of HTML and CSS in order to edit the web design. You can also find a wealth of information about HTML and CSS online. For example, at http://html.net/.

5.3.2. CMS syntax

There is a unique scripting language used for creating a web design in plentymarkets CMS.

5.3.3. jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. For further information, refer to the jQuery page of the manual.

5.3.4. Displaying lists

CMS » Web design

Content of this page

Online stores use templates to display various lists, e.g. a list of items within a category. This page provides basic information about the structure and composition of lists in the online store.

Item lists

Whenever a customer clicks on a category, the items included in that category should be displayed in an overview. Lists are used for this. In this case, an item list is used. An item list can be generated with the template ItemViewCategoriesList. The items will be displayed whenever a category is clicked on. The item list contains layouts for the individual items. These individual item layouts are generated with the template ItemView. They include larger item images and the complete item description, among other things. Finally, every online store should also include an item search. This is also displayed in list format with the template ItemViewSearchResultsList.

The following image shows you how the template ItemViewCategoriesList works. This template displays the categories in the online store.

EN CMS Web Design Syntax Displaying Lists01 SI
Figure 8. structure of the template ItemViewCategoriesList

The template is structured in rows - in Figure 8 ItemViewCategoriesListRow - and items - in Figure 8 ItemViewCategoriesListItem. The number of items per row can be configured in the template’s Settings tab. Use the option ItemViewCategoriesList_EachRow to do so.

Additional configurations in the code

Carry out additional configurations in the code to specify how the items per row should be displayed. For further information, refer to the example in section 2.1 below.

There are multiple template variants available for many of the item layouts. As such, it is possible to display an item list differently in various areas of the online store. You can tell the variants apart by the way they are numbered at the end of the name. Example: ItemViewCategoriesList, ItemViewCategoriesList2, ItemViewCategoriesList3 etc.

Example: ItemViewCategoriesList

The template ItemViewCategoriesList generates an item list whenever a category is selected in the online store. The result is displayed as an item list. The number of items displayed per row and page is specified in the template’s Settings tab.

EN CMS Web Design Syntax Displaying Lists02 SI
Figure 9. ItemViewCategoriesList template code

As described above and shown in Figure 8, the structure is composed of rows - here in the example with the code ItemViewCategoriesListRow - and items - here ItemViewCategoriesListItem. The number of items per row can be configured in the template’s Settings tab. Use the option ItemViewCategoriesList_EachRow to do so. The number of items per page is specified with the option ItemViewCategoriesList_Page.

5.3.5. Page structure

CMS » Web design

Content of this page

This page provides important and basic information about the page structure in the plentymarkets CMS. An example will be used to illustrate the basic composition of the templates and the page structure.

Structure overview

The following image illustrates the basic structure of your online store:

EN CMS Web Design Syntax Page Structure01 SI
Figure 10. basic template structure

The image shows the template structure. You can see how the templates are arranged and which elements belong to each template. This structure is used in several different templates in the plentymarkets CMS. Smaller units are inserted into templates with containers. The template PageDesignContentMainFrame is inserted into PageDesignContentHtmlStructure with a template variable. The MainFrame template variable is used to insert the …​MainFrame content into PageDesignContentMainFrame.

Figure 11 shows how the templates are arranged in the Web design menu and where the $MainFrame template variable is located.

EN CMS Web Design Syntax Page Structure02 SI
Figure 11. template arrangement in the Web design menu
PageDesignContentHtmlStructure

A template with the ending HtmlStructure contains the entire content of the particular page and gives the page the desired structure. The code for our example is located in the PageDesign folder. There it is located in the PageDesignContent template and then in the PageDesignContentHtmlStructure tab (Figure 11). The simplified code looks like this:

PageDesignContentHtmlStructure

$HtmlStartTag
<head>
<title>$HtmlMetaTitle</title>
$HtmlHeadLinkCSSTags
$HtmlHeadJavaScriptTags
$HtmlHeadMetaTags
</head>
<body>
$PageDesignContentMainFrame

$HtmlBodyOverlays
</body>
</html>

The following table explains the functions of the code elements in this template:

Table 6. elements of the tab PageDesignContentHtmlStructure
Element Explanation

$HtmlStartTag

The template variable includes the opening HTML tag and specifies the DOCTYPE.

$HtmlMetaTitle

The page title is displayed with this template variable. It is displayed in the title bar and as the tab title in most browsers. The page title is very important for the search function and for the ranking in search engines. Therefore, it should be short and it should be chosen appropriately.

$HtmlHeadLinkCSSTags

Implements the CSS. The corresponding CSS templates will be implemented here. For example, CSSBase and CSSContent are used to display categories or items. The order process is displayed with CSSBase and CSSOrder.

$HtmlHeadJavaScriptTags

Implements the JavaScript frameworks that are included in plentymarkets by default: jQuery, jQuery UI, jQuery UI Widget, jQuery UI Mouse, jquery.event.drag, jQuery Tools.

$HtmlHeadMetaTags

This template variable implements meta tags, e.g. keywords that are important for search engine indexing.

$PageDesignContentMainFrame

This template variable inserts the content of the template PageDesignContentMainFrame. This template includes the template variable $MainFrame. Therefore, this will also be explained below.

$HtmlBodyOverlays

Overlays are implemented here, e.g. a special layout for the shopping cart.

PageDesignContentMainFrame

Most of the content on the sides of the page and in the header is static content. It will neither change its form nor its size and will always be displayed at the same place. This content provides orientation for your customers and allows them to access any desired area of your online store.

A template with the ending MainFrame includes the visible content for the particular page. The code for our example is located in the PageDesign folder. There it is located in the PageDesignContent template (Figure 11). The simplified code looks like this:

PageDesignContentMainFrame

<div class="page">
<!-- The header and menu can be added here -->

<!-- Main content area -->
<section class="mainContent">
$MainFrame
</section>
<!-- End of the main content area -->

<!-- The footer can be added here -->
</div>

A complete description of every element would go beyond the reasonable limits of this page. Therefore, we will concentrate on explaining the most important elements only.

The following table includes explanations of the important content in the PageDesignContentMainFrame example above.

Table 7. elements of the tab PageDesignContentMainFrame
Element Explanation

$MainFrame

Creates the dynamic main content of a page, e.g. a detailed list of items. For further information, refer to the section below.

// txt

Comments that are inserted to help users find their way around in the code. These comments will not be displayed. They are used, e.g. to segment iterations in lists.

Do not delete important content from the template!

The $MainFrame template variable is a necessary element of a template and may not be removed. Otherwise the dynamic main content will not be displayed. Comments should not be deleted from the template either.

Template variable MainFrame

The template variable $MainFrame displays the dynamic content, e.g. the detailed view of an item with the template ItemViewSingleItem or the category view with the template ItemViewCategoriesList. The template variable is used in every PageDesign.

EN CMS Web Design Syntax Page Structure03 SI
Figure 12. possible content for MainFrame

When a visitor clicks on a category, for example, the template variable $MainFrame will display the template ItemViewCategoriesList. When a customer clicks on an item, the detailed view of this item will be displayed with the template ItemViewSingleItem.

5.3.6. jQuery

CMS » Web design

Content of this page

This page provides information about jQuery.

Important information about jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It is automatically available in your online store and can be used anywhere in your layout. We also offer you the additional libraries, jQuery UI and jQuery Tools.

Check before implementing jQuery!

Compatibility

If you intend to work with other JavaScript libraries, such as Prototype, be sure to find out about the compatibility of both libraries beforehand and take any potential conflicts into consideration.

Libraries

The libraries mentioned should not be included into your layout a second time. This could have unforeseen consequences for the library’s function.

Tutorial

You can find a jQuery tutorial at the link http://learn.jquery.com/about-jquery/how-jquery-works/.

5.4. Tools

CMS » Web design

5.4.1. Content of this page

This chapter explains important tools that you need for working with the CMS and other menus in order to design your online strore.

5.4.2. Editor

plentymarkets comes with an integrated WYSIWYG editor. You can use it to directly edit text and tables in content pages or to apply formatting such as headings, numbering or lists. You see the result immediately when working with this editor. You can also edit the content in the source code. For further information, refer to the Editor page of the manual.

5.4.3. Syntax editor

Apart from the familiar editor and the conventional text field, plentymarkets also provides the new syntax editor to edit html content such as item descriptions, templates and email templates. Broadly speaking, the syntax editor is a professional alternative to the text field because it not only includes syntax highlighting but also further functions that increase your level of comfort and efficiency when editing HTML. For further information, refer to the Syntax editor page of the manual.

5.4.4. Editor

CMS » Web design

CMS editors

Various editors for editing content are integrated in plentymarkets. You can use the editor to directly edit text and tables in categories or to apply formatting such as headings, numbering or lists. You see the result immediately when working with this editor (WYSIWYG). You can also edit the content with this editor in the source code. Alternatively, you are also provided with an HTML editor Text field. This editor only allows you to work with the HTML code. In addition, the Syntax editor was integrated. With this editor, contents are clearly displayed in a structured way.

Select the editor

We recommend that you choose one of the editors. When switching the editor, undesired HTML elements may be inserted into your pages or your item descriptions. This effect may occur when e.g. editing a text first with the text field editor and then switching to the CKEditor. If you want to be on the safe side, go to *System » Settings » Editors and deactivate the editor.

The editors can be used in the following areas:

  • Item description

  • Listing description

  • Categories

  • Newsletter

Editor availability

Go to System » Settings » Editors if you want to deactivate the editor for specific areas. If the editor is deactivated, then it will not be included in the drop-down list in these areas.

The editor

The CKEditor is used in plentymarkets. It is a widely-used and professional web editor. It allows users to work with a wide range of functions. You can use it to edit category pages like you would in a word processing program. No programming and HTML skills are required. However, it is certainly beneficial to have these skills because you can also use this editor to work directly with the source code. You can correct formatting errors in the source code or you can insert formatting that is not available with the editor functions.

EN CMS Web Design Tools Editor 01
Figure 13. editor user interface

For further information about creating and configuring categories, refer to the Categories page of the manual

HTML editor

Select Text area if you want to work with the HTML editor. The content will then be displayed as HTML code and CSS formatting.

EN CMS Web Design Tools Editor 02
Figure 14. the Text area HTML editor
System requirements

The operating system does not necessarily influence how well the editor functions. Rather, the web browser influences this.

System requirements

For further information about the system requirements, refer to the website for the editor.

Functions

The most important functions are explained below. These are the functions that you will frequently use. Many functions are the same as in word processing programs and do not require additional explanations. Please note that you can point your cursor over a button and see the name of the function.

Some functions may work differently depending on which browser you use. Some functions may also be limited with certain browsers or undesired effects may occur. For example, the formatting may be changed when you insert text into some browsers. Undesired formatting may also be inserted along with the text. This page provides you with tips for working with these functions.

Overview of the functions

Below, you will find basic information about the editor’s functions.

EN CMS Web Design Tools Editor 03
Figure 15. overview of the editor’s functions

The following table explains the functions of the editor in detail.

Table 8. the functions of the editor in detail
No. Setting Explanation

1

Editor

Select the desired editor from the drop-down list:
Editor = The WYSIWYG editor, CKEditor
Text field = The HTML editor, Text field or the
Syntax editor = For further information, refer to section 1 on this page of the manual.

2

Format

Select a format for a headline or the body text by placing the cursor in a line and selecting the desired format.
Arrange your headings in a logical order. This is especially important if your headings are numbered automatically.
For the sake of clarity, it is best to work with one standard font size for the body text and to simply format headings etc. by selecting the corresponding paragraph formatting (heading 1-4).

3

Font style

Changes the style, color and alignment of the text.

4

Insert unformatted text

This button causes a text window to open. Use this window to insert unformatted text into the page. Then make changes to the text as needed. Click on OK to insert the text.

5

List

Formats a text or line as a list. This means that a bullet point is inserted and the line is indented.

6

Numbering

Formats a text or line as a numbered list. The list is automatically numbered. However, you can change the starting value and the number formatting if needed.
Right-click on the particular line and then select the option Numbered List Properties.

7

Indent

Use these icons to increase or decrease how far a paragraph is indented.

8

Insert link

Opens the Link window, which you can use to insert links. For example, you can insert a template function ([image-inserting-link-as-template-function]) or a URL that links to a particular target.

.inserting a link as a template function image::omni-channel/online-store/setting-up-clients/_cms/web-design/tools/assets/DE-CMS-Webdesign-Werkzeuge-Editor-04-SI.png[]

Configuration:
Link Type = Choose which type of link you want to insert, e.g. URL. Select URL for a template function as well. See number 13 for an example of an anchor.
Protocol = If you want to link the URL of an encoded website, then select the setting https://. If you want to link a template function, then select the setting other.
URL = Enter the corresponding URL or template function.
Important: If you insert the URL of an encoded website and select the setting https:// as the protocol, then this prefix will automatically be removed from the URL.

9

Insert anchor

Inserts an anchor into the text with a number or a name. Use the Insert link button to create a link to this anchor. For example, you could link a heading at the top of the page to this anchor farther down in the text.

.selecting an anchor as the target of a link image::omni-channel/online-store/setting-up-clients/_cms/web-design/tools/assets/DE-CMS-Webdesign-Werkzeuge-Editor-05-SI.png[]

Configuration:
Link Type = Select Link to anchor in the text.
Select an Anchor = Select the corresponding anchor. You can either select it by its name or its ID.

10

Table

Inserts a table. You can specify the number of lines and columns and select additional formatting.
Tip: Alternatively, use HTML code to insert a table into the source code or the syntax editor.

11

Image

This icon is used to configure images as described below and insert them into the page.
Insert a new image by placing the cursor where the image should appear and clicking on this icon.
Edit an already existing image by first clicking on the image and then on this icon. Alternatively, right-click on the image and select the option Image Properties.
Important: If you want to include an image, then this image has to be uploaded onto the server, in the image gallery or in a category’s Documents tab. This allows you to access the image with a URL. There are several ways to upload images. You can go to CMS » Image gallery, you can click on the icon in the CMS or you can use your FTP access to upload images onto the server.

.configuring image properties image::omni-channel/online-store/setting-up-clients/_cms/web-design/tools/assets/DE-CMS-Webdesign-Werkzeuge-Editor-06-SI.png[]

Configuration:
URL = Insert an image URL. You should use the relative URL to link images. For example, if you use an absolute URL (complete path) and you change your domain name, then the image will no longer be available. You can copy the URL from the image gallery or the Documents tab and paste it here.
Lock icon = If the lock is open, then the image data was not updated and the image may be displayed incorrectly (distorted). In this case, click on the reload icon and then on the lock icon. The image is displayed correctly if the lock remains closed.
Additional parameters = The lock will open again if you change the width and height of the image. This is because the real data will no longer match the changed data. You can leave the lock open if needed. However, you should not click on the open lock because this will reset the original image ratio when saving.

12

Special characters

Here you are provided with a list of special characters. Click on a special character to insert it wherever your cursor is currently positioned in the text.

13

Source code

Click on this button to edit the content in the source code.

14

Spell check

Switches the spell check on or off.

Shortcut keys for copy & paste

The following table explains the possibilities for the copy & paste functions:

Table 9. copy & paste functions
Function Procedure

Copy

Ctrl (cmd) + C
Copies the highlighted text to the clipboard.

Cut

Ctrl (cmd) + X
Removes the highlighted text from the page and copies it to the clipboard.

Paste

Ctrl (cmd) + V
The text from the clipboard is inserted wherever the cursor is currently located.

Inserting unformatted text

If you want to insert unformatted text, then use the following command when inserting text from the clipboard:

Table 10. shortcut key for inserting unformatted text
Function Procedure

Insert unformatted text

Shift + Ctrl (cmd) + V

Line feed / New line

If you are using the text editor and you press enter to jump to the next line, then the editor will start a new paragraph. Depending on the page layout, the distance between the two paragraphs may be larger than the one between two lines.
If you only want to add a new line, simply press Shift + Enter (= soft return).

If you press enter to start a new paragraph, then a p-tag will be inserted into the source code:

EN CMS Web Design Tools Editor 07
Figure 16. the p-tag designates a new paragraph

5.4.5. Syntax editor

CMS » Web design

CMS editors

A new editor is available starting with plentymarkets version 5.1. Apart from the familiar editor (CKEditor) and the conventional text field, plentymarkets also provides the new syntax editor to edit html content such as item descriptions, templates, categories of the type content and email templates. Broadly speaking, the syntax editor is a professional alternative to the text field because it not only includes syntax highlighting but also further functions that increase your level of comfort and efficiency when editing HTML.

Syntax editor availability

Go to System » Settings » Editors if you want to deactivate the syntax editor for specific areas. If the syntax editor is deactivated, then it will not be included in the drop-down list in these areas.

Who should use the syntax editor and why?

The syntax editor is the ideal tool for users who place great value on cleanly structured HTML. The normal editor can sometimes cause unintended changes to occur when editing HTML content and inserting template variables and functions. Formatting can occasionally be lost or altered. However, the editor is a good tool to help users generate valid HTML if they do not have in-depth knowledge of HTML structure. The editor is intended to be used in situations where the HTML structure is not especially important or by users who do not have experience with HTML or are not interested in working with complex HTML structures.

Previously, users who valued having their HTML content displayed precisely had no other choice but to work with the Text field in plentymarkets 5.0. These were usually agencies, web designers, web developers and users who have in-depth knowledge of HTML. These users can now work with the new syntax editor as well.

Functions

An overview of the most important functions is listed below. These functions are then explained in further detail on this page.

Overview

The syntax editor includes the following features:

  • Syntax highlighting

  • Simple structure

  • Undo and repeat functions

  • Search and replace

  • Copy / duplicate lines and blocks of code

  • Move lines and blocks of code

  • Simply hide blocks of code and display them again

  • Multi-cursor (simultaneously write in multiple lines)

  • Code generation with Emmet

  • Many helpful shortcut keys

Syntax highlighting

HTML becomes harder to read as you write increasingly more of it. Syntax highlighting helps you find elements easily by displaying tags and attributes in different colours.

EN CMS Web Design Tools Syntax Editor01 SI
Figure 17. syntax highlighting with the syntax editor
Structure

It is easier to recognise and edit the code structure when you can indent code with the tab key. It is possible to select several lines and then indent them all simultaneously.

Table 11. indenting code or removing the indent
Function Procedure

Indent

Tab key

Remove the indent

Shift + tab key

Setting: Spaces instead of tabs

Click on the gear-wheel icon (Figure 17, upper left) and place a check mark if you would like to use 4 spaces instead of tabs for indentations.

Undo and repeat functions

Every action can be undone or repeated - even after you have saved the changes.

Table 12. undoing or repeating an action
Function Procedure

Undo

Ctrl (cmd) + Z

Repeat

Shift + Ctrl (cmd) + Z

Do not switch the editor

This function can only be used if you work exclusively with the syntax editor. Saved information and changes will be lost if you switch to a different editor.

The search function allows you to search for specific text passages. The results are highlighted in color. If a search term does not return any results, then a red frame will be displayed around the search field.

EN CMS Web Design Tools Syntax Editor02 SI
Figure 18. search function in the syntax editor

The following table explains the search functions of the syntax editor:

Table 13. search, next search result or close search
Function Procedure

Search

Ctrl (cmd) + F

Next search result

Press the Enter key or click on the arrow down in the search window.

Previous search result

Press Shift + Enter or click on the arrow up in the search window.

Close search

Esc key or click on the x in the search window

Search and replace

The syntax editor also includes a replace function. You can search for a specific word, text passage or formatting and replace it with something else. The replace function is found within the search window.

EN CMS Web Design Tools Syntax Editor03 SI
Figure 19. searching and replacing with the syntax editor

The following table contains an overview of the functions. The last three functions refer to the icons found in the lower right portion of the search window:

Table 14. searching and replacing with the syntax editor
Function Procedure

Accessing the replace function

Ctrl (cmd) + F
Once the search window has opened, press Ctrl (cmd) + F a second time.

Search for

Enter the word, text passage or element that you are searching for.

Replace with

Enter the word, text passage or element that should replace what was searched for. The example in Figure 19 shows that strong formatting was searched for and that it will be replaced with b (= bold).

Replace

Click on this button to replace the highlighted element only.

All

Click on this button to replace all elements on the page.

.*

Search with a regular expression. This will search for a regular expression. Regular expressions are helpful when searching for and replacing complicated expressions or large quantities of text. They are not suitable for normal usage.

Aa

Capital and lower case letters will be taken into consideration. Terms will only be found if they have the same capitalisation.

\b

Entire words will be searched for rather than parts of words.

Copying lines and blocks

The current line or the selected lines can either be duplicated or they can be copied and inserted above or below.

Table 15. duplicate, insert above or insert below
Function Procedure

Duplicate

Shift + Ctrl (cmd) + D

Insert above

Alt + Ctrl (cmd) + arrow down

Insert below

Alt + Ctrl (cmd) + arrow up

Moving lines and blocks

The current line or the selected lines can be moved up or down.

Table 16. moving up or moving down
Function Procedure

Move up

Alt + arrow up

Move down

Alt + arrow down

Hide or display selected text

You can hide text or display it again.

Table 17. hiding or displaying text
Function Procedure

Hide text

Shift + Ctrl (cmd) + 7

Display text

Shift + Ctrl (cmd) + 7

Multi-cursor

Text can simultaneously be written, edited or deleted in multiple lines.

Emmet plugin

Emmet translates syntax similar to CSS into HTML code. You can use it to quickly generate simple or complex HTML structures. You may need to learn the syntax first. Users who are familiar with CSS or jQuery should not have any trouble learning Emmet. If you regularly write large quantities of HTML, then it is worthwhile to consider using Emmet.

Emmet functionality

Enter an Emmet operator directly into the syntax editor and press the tab key. The HTML code will be generated.

Practical examples

The following table shows a few practical examples for how the Emmet plugin can be used in the syntax editor:

Table 18. practical examples for Emmet
Input Result

div>ul>li

<div>
<ul>
<li></li>
</ul>
</div>

div>ul>li>*5

<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

div>ul#myList>li.myCSSClass$*5

<div>
<ul id="myList">
<li class="myCSSClass1"></li>
<li class="myCSSClass2"></li>
<li class="myCSSClass3"></li>
<li class="myCSSClass4"></li>
<li class="myCSSClass5"></li>
</ul>
</div>

Syntax documentation

For further examples, refer to the following website: http://docs.emmet.io/abbreviations/syntax/

Shortcut keys

Along with the shortcut keys listed here, plentymarkets also offers other useful shortcut keys that can be set up for each user. For further information, refer to the Managing user accounts page of the manual.

5.4.6. Inline editor

CMS » Web design

General information

The inline editor allows you to directly edit your store’s design without having to work in the CMS menu. You can open the template that you want to edit directly from within your online store. Furthermore, you can directly open the editing menu of a category or an item.

Areas that can be directly edited with the inline editor:

  • Overall design

  • Design language

  • Page design

  • Category navigation

  • Single item templates

  • Shopping cart preview

  • Category details

  • Item details

Editing functions

The following section explains the functions of the inline editor.

Opening the inline editor

You can use the inline editor to directly open and edit items, categories and blogs in your plentymarkets backend.

EN CMS Web design Tools Inline editor 01 SI
Figure 20. opening the online store for editing

Opening the homepage for editing:

  1. Click on Website (Figure 20, globe) in the plentymarkets backend.

  2. Select the option Open online store for editing.
    → The homepage of your store opens and several options to edit items, categories or blogs (Figure 21) are provided.

Opening a section using the icon:

  1. Click on the following icon while editing a category or a design in the backend: image::omni-channel/online-store/setting-up-clients/_cms/web-design/tools/assets/DE-Inline-Editor-Icon-SI.png[]

    → The category or the template opens for editing in the online store.

Figure 21 shows an example of what the inline editor looks like in the online store.

EN CMS Web design Tools Inline editor 02 SI
Figure 21. inline editor in the online store

The following table explains the buttons provided with the inline editor:

Table 19. inline editor; buttons
Setting Explanation

Design:

The selected design is shown. To edit a different design simply select the design from the drop-down list.

Language

The language is displayed here and can be changed.

Save selection

Place a check mark = The selected settings for design and language are memorized for the next editing session.
No check mark = The standard design will be loaded in the next editing session.
Important: Placing a check mark does not change the design permanently. For further information about changing the standard design, refer to the Editing the web design page of the manual.

Reload page

Reloads the page and displays any changes that were made in the backend.
Important: Do not use the browser reload function to reload your online store while the inline editor is open. This would reload the plentymarkets backend. It would also close all tabs and the online store.

Edit category

Opens the current page or category for editing in the backend.

Link

Displays the template function for the current page or category (Figure 21, blue arrow). Use this function to link to the current content from any other category page. The template function can be copied here.

SetCategoryId

Displays the content of the open category within a different section of the online store. For further information, refer to the SetCategoryId page of the manual.

plentymarkets backend

Switches back to the plentymarkets backend (Figure 21, green arrow).

Editing content in the store

The inline editor allows you to edit content such as items, categories, blogs etc. directly in your online store. The possibilities are explained below with an example for editing an item.

EN CMS Web design Tools Inline editor 03 SI
Figure 22. opening the editing window of an item in the store

Opening the editing window of an item in the store:

  1. Open the online store for editing (Figure 20).

  2. Select the item that you want to edit in the online store.
    Point your cursor over the item.
    → A pencil is displayed in the upper left corner (Figure 22).

  3. Click on the pencil (Figure 22, red arrow).
    → The inline editor will open the template in an overlay for editing the item.

EN CMS Web design Tools Inline editor 04 SI
Figure 23. editing window of an item in the store; ItemViewSingleItem template

Because you have opened a single item the ItemViewSingleItem template opens. You can now edit the template as usual. Changes are directly shown when you save.

The following table explains the buttons provided with the inline editor:

Table 20. inline editor; buttons in the editing window
Setting Explanation

Save

Saves template changes. This button is not activated until changes have been made.

Template variables and template functions

Opens a list of all the template variables and template functions that are available in the system. They can be found by the menus and can then be copied into the template.

Apply template

Applies the template to another language. For further information, refer to the User interface page of the manual.

Set up editor

Opens a window to set up the editor. Place check marks to choose whether control characters should be displayed and whether spaces should be displayed instead of tabs.

Opening the item editing window from the online store

If you do not want to edit the item or category directly in the online store, then you can also open the editing window in your plentymarkets system.

EN CMS Web design Tools Inline editor 05 SI
Figure 24. opening the back end editing window from the online store

Opening the backend editing window from the store:

  1. Open the store and find the item that you want to edit.

  2. Click on the button that shows the name of the item (Figure 24, blue arrow) or on the button that shows the name of the category (Figure 24, green arrow).
    → The item or category will be opened in your plentymarkets system and can be edited.

5.5. Edit

CMS » Web design

5.5.1. How the design is structured

The design in plentymarkets is based on a template system. The word template is used here to describe an HTML template, which determines the appearance of a particular area. There are templates for displaying items, search results and categories. The content is displayed by using HTML and CSS, as well as by embedding template variables and template functions.

A template can consist of one individual or several HTML fragments. Several HTML fragments are necessary if the content should be displayed in a loop, e.g. in the form of a list. Loops are used, for example, when displaying item lists. In doing so, the same HTML fragment is displayed repeatedly.

5.5.2. Web design menu

The CMS » Web design » Layout menu contains various templates for customising your item and category views, page design and navigation. These templates are sorted into different folders. This page teaches you how the templates are structured, where you can find the code and how you can edit it. Furthermore, you will learn how to find available template variables and template functions and insert them into the code. You will also find information about working with CSS formats and will learn how to add if queries to your templates.

The word template is used here to describe an HTML template, which determines the appearance of a particular area. For example, there are templates for the item layout and for defining the item search results.
The template PageDesignContentMainFrame is the graphic layout framework of your online store. This template includes template variables and template functions that refer to other templates. The content of the corresponding template will be displayed in place of the variables or function.

5.5.3. Hints for web developers

For further information about editing your store’s design, refer to the following pages of the manual:

5.5.4. Design management functions

This chapter provides detailed descriptions of design management functions.

Number of designs

You can manage up to 30 designs in your plentymarkets system under CMS » Web design. The number increases by another 5 designs per additional client (store).

Linking a design to clients

Carry out the following steps to link a design to one or more online stores.

EN CMS WebDesign Edit 01
Figure 25. linking a design to clients

Linking a design to one or more clients:

  1. Go to CMS » Web design.

  2. Select the desired design from the drop-down list (Figure 25, number 1).

  3. Select the desired language from the drop-down list (Figure 25, number 2).

  4. Click on the blue gear-wheel icon to open the settings (Figure 25, number 3).
    → The Design settings window will appear.

  5. Select which online store the design should apply to. The selection is made in the Settings tab (Figure 25) under Client (store). You can also select multiple clients or ALL.

  6. If you want to save images for the design in a specific folder, then select the folder under Image gallery.

  7. Save the settings.

Green font = active design

You can tell that a design is activated from the design name written in green font (Figure 25, number 1).

Linking category pages

Now link the category pages. The pages listed here have to be included in nearly every online store. Legal information is an example. Link the pages for every client and for each design separately. All pages have to linked to a category. To do so, proceed as follows.

Design specific category links take priority.

You can also go to System » Client » Select client » Online store » Pages to link category pages. The links carried out there apply to all designs of a client. If you link category pages to a design as described below, then the design specific links take priority.

EN CMS WebDesign Edit 02
Figure 26. assigning the online store’s categories

Assigning category pages:

  1. Go to CMS » Web design.

  2. Select the desired design from the drop-down list.

  3. Select the desired language from the drop-down list.

  4. Click on the blue gear-wheel icon to open the settings.
    → The Design settings window will appear (Figure 26).

  5. Click on the Clients tab.

  6. Select the client on the left-hand side for which you want to assign category pages.

  7. Click on the magnifying glass next to the page that you want to link to a category page.
    → The list of available category pages will be displayed.

  8. Select the category that you want to assign to the page. Pay attention to the information given in Table 21.

  9. Repeat the steps described for all remaining pages.

  10. Save the settings.

The following table explains the category pages that can be linked:

Table 21. assigning the category pages
Settings Explanation

Homepage

Select a category page that will be displayed as the homepage when the online store is accessed.

Terms and conditions

Select a category page for the general terms and conditions.

Privacy policy

Select a category page for the privacy policy.

Cancellation rights

Select a category page for the cancellation rights.

Help

Select a category page for the help information in the online store.

404

Select a category page that should be displayed instead of the standard 404 page.
The standard 404 page contains a note that lets visitors know the page is not available or was moved.

Shipping costs

Select a category page for information about the shipping costs.

Item not found

Select a category page that should be displayed instead of the standard message when an item was not found.

Payment methods

Select a category page for information about payments and payment methods.

Contact

Select a category page that displays the company’s contact information.
It also makes sense to use this page as the 404 page so that a store visitor can contact you directly if an error occurs.

Legal disclosure (required by law in some countries)

Select a category page for the legal disclosure.
You are required to have a legal disclosure in many countries. It should be given a logical name and customers should be able to find this page easily. You can find further information about the German laws that require you to have a legal disclosure here (information provided in German).

Bank details

Select a category page for bank details.
The information on this page is required for the payment methods cash in advance and invoice. This page should include your account name and number as well as information about the transaction’s designated use.

For the export and import, a design’s category links will be taken into consideration. When importing a design, missing categories will be newly created in a folder with the design’s name. This process is carried out automatically. Customise the content of the categories accordingly.

Publish design

The Publish design function updates a design after it was created or imported. Use this function to publish the design any time you make changes. This will prevent the design from being displayed incorrectly.

Creating a new design

New designs are created on the basis of an existing design. This gives you a backup copy of the design as well. You can make changes to the newly created design. If an error occurs, then you will still have the original design and you can use it to create a new design.

Backup copy

If you want to make comprehensive changes to the design, then it is a good idea to create a new design on the basis of the current design. Then simply edit the new design.

Give the new design a name that allows you to tell it apart from the current design.

Tip: Naming new designs

It is a good idea to give your designs names that include ascending numbers or a date. This will help you keep track of your designs, especially if you make changes on a regular basis.

Example:

*StoreDesign_01*

*StoreDesign_02*

or

*StoreDesign_2014-05-07*

*StoreDesign_2014-05-12*

Applying a design

The Apply design function transfers individual characteristics or all characteristics of one design to another design. You can choose which individual areas should be transferred.

The following areas can be selected:

  • PageDesign (page layouts)

  • Navigation

  • CategoryView (category layouts)

  • ItemView (item layouts)

  • Misc (miscellaneous)

  • BlogDesign

  • CSS

  • Order process

  • My account

  • Buttons

Proceed as described below to transfer the design’s characteristics..

EN CMS WebDesign Edit 03
Figure 27. applying a design

Transferring a design’s characteristics:

  1. Go to CMS » Web design.

  2. Click on Apply design (Figure 27, red arrow).

  3. Use the Source drop-down list to select which design and language the characteristics should be transferred from.

  4. Use the Destination drop-down list to select which design and language the characteristics should be applied to.

  5. Select which areas should be transferred from the source to the destination (place check marks).

  6. Click on Apply design.

Exporting a design

Use the Export design function to export a ZIP file of a design or parts of a design. You can then save this file on your computer. Proceed as described below to export a design.

Exporting a design:

  1. Go to CMS » Web design.

  2. Click on the Export design symbol.
    → The Export design window will be displayed.

  3. Select the Design that you wish to export.

  4. Select the Language that you wish to export.

  5. Select the sections that you wish to export by placing check marks.

  6. Click on Export design.

  7. Save the file on your computer.

Importing a design

Use the Import design function to import a ZIP file of a design that is saved on your computer.

Before importing, check if a design of this name already exists!

A design with the same name will not be overwritten. If there is already a design with the same name, then change the name of the new design before you import it.

Dropbox: export/import design

When you click on the Dropbox: export/import design option (Figure 28, red arrow), a pop-up window will open. Using the options in this pop-up window, you can export designs from plentymarkets to a Dropbox folder or import templates from a Dropbox folder to plentymarkets. To do so, proceed as follows.

EN CMS WebDesign Edit 04
Figure 28. Dropbox export/import

The Status shows you which exports or imports are in progress, completed and/or have failed.

Linking a Dropbox account and setting a base folder

To be able to exchange data between Dropbox and plentymarkets, your Dropbox account needs to be linked to plentymarkets in the System » Client » Settings » Services » Dropbox menu.

Exporting a design to the Dropbox folder

Use the Export design function to export a design or individual templates to a folder in your Dropbox account. This folder is the one you set as the base folder in the System » Client » Settings » Services » Dropbox menu. Proceed as described below to export designs to the base folder.

Exporting a design to the Dropbox folder:

  1. Go to CMS » Web design.

  2. Use the drop-down list to select which design should be exported from plentymarkets to the Dropbox folder.

  3. Click on Dropbox: export/import design (Figure 28, red arrow).
    → The Dropbox window will open.

  4. Click on Export design.
    → The Export design window will be displayed.

  5. Select the Language that you wish to export.

  6. Select the sections that you wish to export by placing check marks.

  7. Click on Export design.
    → The design sections will be saved in the base folder of your Dropbox account separated by language. The export may take several minutes depending on the volume of data to be exported.

Importing templates from the Dropbox folder

Use the Import templates function to import templates from the folder in your Dropbox account. This folder is the one you set as the base folder in the System » Client » Settings » Services » Dropbox menu. You can import templates that were edited only or you can import all templates from the Dropbox folder to plentymarkets. Proceed as described below to import templates from the base folder to plentymarkets.

Importing templates from the Dropbox folder:

  1. Go to CMS » Web design.

  2. Use the drop-down list to select which design you want to import templates to.

  3. Click on Dropbox: export/import design (Figure 28, red arrow).
    → The Dropbox window will open.

  4. Click on Import design.
    → The Dropbox window will be displayed.

  5. Select Only import edited templates or Import all templates.
    → The files will be imported from the base folder of your Dropbox account to plentymarkets. The import may take several minutes depending on the volume of data to be imported.

Deleting a design

Designs that are linked to at least one client (store) can not be deleted. If you want to delete such a design, then you will first have to open the Design settings and delete the link to the clients (stores).

Deleting a design:

  1. Select the desired design from the drop-down list.

  2. Select the desired language from the drop-down list.

  3. Click on Delete.

  4. Confirm your decision.
    → The design will be deleted from the system.

5.5.5. Editing templates

For further information about editing templates, refer to the other pages within this chapter. For further information about applying a template to a different language version, refer to the User interface page of the manual. Specifically, refer to the Apply template section.

5.5.6. CSS

CSS (Cascading Style Sheets) denotes a markup language for structured documents. While HTML lets you create the pure content, CSS allows you to influence the overall format and structure of this content, as well as to influence the design of a website. One advantage is that you can specify formatting in CSS and it will apply to all areas of the website. Then any necessary changes to the CSS are also made in one central location. This saves you a lot of time, minimises the risk of errors and gives your website a consistent design. For more information, refer to the CSS page of the manual.

5.5.7. PageDesign

CMS » Web design » Layout » PageDesign

Content of this page

The following chapters describe the PageDesign in plentymarkets, i.e. the page structure that is controlled with the templates under PageDesign. This chapter provides you with basic information about using the templates as well as information about the HTML structure. The practical examples also provide more detailed information.

Basic structures in the plentymarkets CMS

You will need to have basic knowledge of HTML and CSS in order to edit the templates in the plentymarkets CMS. Furthermore, we recommend that you first read and understand the information given in the Web design chapter. Pay special attention to the chapter Basic information about syntax before you make changes to the templates. The Page structure chapter gives you an overview of the template structure in plentymarkets.

General information about the page layout

The templates under CMS » Web design » Layout » PageDesign control the page structure and the design of various areas within the online store. We understand the page design to be your store’s design frame including the complete content. Individual templates are used to display content such as the items, categories, images, category pages (type: content) or the order process. The templates already contain default content for displaying the different areas of the online store. However, this default content can be customized to meet your needs.

The layout is typically structured as follows: The area in the center is dynamic which means that the content changes depending on which links or objects are clicked on. Items and category pages are displayed here, i.e. the different information pages such as the terms and conditions, legal disclosure or contact information. The item search and categories are dynamic pages as well. Clicking on a button will open the corresponding submenus. For example, clicking on a category will display its subcategories.

Most of the content on the sides of the page is static content which will neither change its form nor its size and will always be displayed at the same place. This content provides orientation for your customers and allows them to access any desired area of your online store.

Page layout: Templates

The templates described below are used to customize your page design.

PageDesignContent

This page layout is used for displaying categories and items. You can select a different page layout for each category. This is configured in the Settings tab of each individual category. It is also possible to use this template for the checkout and my account areas.

PageDesignCheckout

The template is automatically loaded when the checkout area is accessed. We recommend that you design the template so that the main area spans the entire width of the online store. This means that no other elements will be displayed, as would be the case with a PageDesign that is composed of several columns. If no other elements are displayed, then the customer’s attention will be focused exclusively on one area. This is especially important during the order process as it can help reduce the risk of customers deciding not to place an order at the last minute.

PageDesignMyAccount

The template is automatically loaded when the my account area is accessed. We recommend that you design the template so that the main area spans the entire width of the online store. This means that no other elements will be displayed, as would be the case with a PageDesign that is composed of several columns. If no other elements are displayed, then the customer’s attention will be focused exclusively on one area.

PageDesignCustom

This page layout offers three templates that can be used as an alternative for displaying categories and items. The templates can be selected in the category settings as an alternative to PageDesignContent.

PageDesignBlog

The template is automatically loaded when the blog area is accessed.

PageDesignForum

The template is automatically loaded when the forum area is accessed.

PageDesignPrepareMainColumn

Designs the main portion of the page layout.

HTML structure

You can view and edit the HTML structure for every page layout. This is done in the tab with the ending HtmlStructure.

Please note that the wildcard characters in the following example should not be deleted as they are relevant for the function of plentymarkets.

The template contains the entire content of the particular page and gives the page the desired structure. The code is located in the PageDesignContent template and then in the PageDesignContentHtmlStructure tab. The simplified code looks like this:

PageDesignContentHtmlStructure

$HtmlStartTag
<head>
<title>$HtmlMetaTitle</title>
$HtmlHeadLinkCSSTags
$HtmlHeadJavaScriptTags
$HtmlHeadMetaTags
</head>
<body>
$PageDesignContentMainFrame

$HtmlBodyOverlays
</body>
</html>

The following table explains the functions of the code elements in the PageDesignContent template:

Table 22. elements of the tab PageDesignContentHtmlStructure
Element Explanation

$HtmlStartTag

The wildcard character includes the opening HTML tag and specifies the DOCTYPE.

$HtmlMetaTitle

The page title is displayed with this wildcard character. It is displayed in the title bar and as the tab title in most browsers. The page title is very important for the search function and for the ranking in search engines. Therefore, it should be short and it should be chosen appropriately.

$HtmlHeadLinkCSSTags

Implements the CSS specifications for the header.

$HtmlHeadJavaScriptTags

Implements the JavaScript content in the header.

$HtmlHeadMetaTags

This wildcard character implements meta tags, e.g. keywords that are important for search engine indexing.

$PageDesignContentMainFrame

This wildcard character inserts the content of the template PageDesignContentMainFrame. This template includes the wildcard character MainFrame. Therefore, this will also be explained below.

$HtmlBodyOverlays

Overlays are implemented here, e.g. a special layout for the shopping cart.

5.5.8. ItemView

CMS » Web design » Layout » ItemView

Content of this page

The following chapters describe the item layouts in plentymarkets, i.e. the page structure that is controlled with the templates under ItemView. This chapter provides you with basic information about using the templates as well as information about the HTML structure. The practical examples also provide more detailed information.

Basic structures in the plentymarkets CMS

You will need to have basic knowledge of HTML and CSS in order to edit the templates in the plentymarkets CMS. Furthermore, we recommend that you first read and understand the information given in the Web design chapter. Pay special attention to the chapter Basic information about syntax before you make changes to the templates. The Page structure chapter gives you an overview of the template structure in plentymarkets.

General information about item layouts

ItemViewSingleItem is the basic template for displaying items. Moreover, the ItemView folder contains a variety of templates to design item lists, e.g. item search results in the online store or the display of items after using filters. There are also special templates for cross-selling items or special offers.

The following example shows an excerpt of the ItemViewSingleItem template’s code including an item detail view.

Example item characteristics

Following is a simple example of how you can design item characteristics such as Name, Price with a CurrencySign, VATHint and VAT and a link to the Shipping costs page in the code.

<h1>$Name[1]</h1>

<span class="price">$Price$CurrencySign</span>
<span class="smallText">$VATHint$VAT% <a href="{&#037; Link_ShippingCosts()  &#037;}" title="Versandkosten">Versandkosten</a>

The different parameters of an item, such as Name or Price are implemented using their corresponding template variables.

Item layouts: Templates

The menu provides you with a variety of templates that you can use to design your item layouts. The most important templates are listed below as examples. You can find more detailed information in the CMS syntax chapter, especially on the ItemView page of the manual.

ItemViewSingleItem

Displays the Detailed item layout in the online store.

ItemViewSearchResultsList

Displays the item search results in the online store as a list.

ItemViewFilterResultsList

Displays a list of items that were found by using a filter. One example is the property filter.

ItemViewCategoriesList

Displays a list of items found in the selected category.

ItemViewCrossSellingItemsList

Displays a list of Cross-selling items.

ItemViewTopSellersList

Displays a list of Top selling items.

ItemViewSpecialOffersList

Displays a list of Special offers.

ItemViewLatestItemsList

Displays a list of the latest items added to the online store.

ItemViewItemsByPositionList

Displays a list of the top selling items. Will be updated over night.

ItemViewLastSeenList

Displays a list of the customer’s last seen items.

ItemViewRandomList

Displays a list of random items selected by the system.

ItemViewItemImagesList

Displays a list of item images.

Dimension input

System » Item » Free text fields

General information about dimensions

The purchaser has the possibility of entering the length and width in the item layout $ItemViewSingleItem, and as such of ordering two-dimensional items with precisely the square millimetre dimensions desired. In doing so, the price will be calculated automatically.

Tip

The particular item has to be visible in the online store.

Configuring items for the input of dimensions

The configuration takes place in three steps. These steps are described in further detail below.

Creating a free text field

First, create a new free text field. To do so, proceed as follows.

EN Web Design Edit Dimensions 01
Figure 29. parameters for the free text field Dimension input

Creating a free text field:

  1. Go to System » Item » Free text fields.

  2. Enter the name Dimension input into one of the free text fields.

  3. Select Small number (-127 to 127) under Data type.

  4. Enter the number 1 under Characters.

  5. Save the settings.

The steps above will generate a free text field. Later, open up each of the items that the purchaser should be allowed to enter dimensions for and enter a number into the free text field (see section 2.3 Entering the number).

Entries go into effect the next day

The free text field will not be available in the corresponding area for editing items until the next day.

Entering dimensions

Now, configure the dimensions of the item. These options are necessary for the dimension input.

EN Web Design Edit Dimensions 02
Figure 30. parameters within the editing window of an item

Configuring dimensions for an item:

  1. Open the editing window of an item and click on the Base tab.
    → There you will find the fields Width, Length and Height (Figure 30).

  2. Pay attention to the explanations given in Table 23 and enter the maximum values for calculating the price as well as for the dimensions of the item.
    → The example image shows that the unit is square centimeters and that the maximum values that can be entered are a width of 500 cm and a length of 200 cm.

The following table explains the dimension parameters in an item’s Base tab:

Table 23. entering the dimensions of items
Entry Explanation

Unit

Enter the unit. In the example, this is square centimeters. Pay attention to the important note below the table.

Content

Enter the quantity that the price calculation should be based upon. In the example, this is per 100 square centimeters.

Length

Enter the maximum length that can be ordered.

Width

Enter the maximum width that can be ordered.

Precision of entries: Only integers accepted!

Only whole numbers can be entered into both fields (width and length). Therefore, the unit that you select for the items will determine how precisely the customer can enter measurements. If the unit is square meters, then it would not be possible to order fabric that is 2.5 m wide and 4.3 m long! In this case, the unit would have to be saved as square centimeters and the value for the content would have to be adjusted in relation to the price that is saved. Then the purchaser could enter the width as 250 and the length as 430. Accordingly, you would have to change the unit to square millimeters if even smaller dimensions are necessary.

Entering the number

Enter a number into the free text field to determine what will be displayed during the order process in your online store.

Entering a number for the entry field:

  1. Click on the Fields tab within the area for editing items.
    → The Dimensions input free text field is displayed here (see free text field).

  2. Enter a number into this free text field in order to control the way that the entry field will be displayed in the layout.
    The following definition applies to our example configuration:
    1: Only the field for entering the width will be displayed.
    2: Only the field for entering the length will be displayed.
    3: Both fields will be displayed.

  3. Save the settings.

Tip

Use a group function if you want to enter the number for the free text field for several items at once.

Data exchange

Entries for the width, length and height can be imported into the system with the dynamic import (data formats Item and ItemPrice), as well as with the plentymarkets API and the format ArticleBasicXML.

Configuring the design for the input of dimensions

Now enter the HTML code into an appropriate location in the CMS, e.g. under the code for the quantity entry field.

Entering the HTML code:

  1. Go to CMS » Web design » Folder: Layout » Folder: ItemView.

  2. Select the ItemViewSingleItem template.

  3. Enter the following HTML code.

  4. Save the settings.

{% if $Free[10]>0 %}

{% if $Free[10]==1 %}

{% endif %}
{% if $Free[10]==2 %}

{% endif %}
{% if $Free[10]==3 %}

{% endif %}
<table>
<tbody><tr>
<th>Width (only)</th>
<td>$InputWidth $InputMeasureUnit <input id="input_length" name="input_length" value="$Length" class="PlentyOrder_InputLength" type="hidden" /></td>
</tr><tr>
<th>Length (only)</th>
<td>$InputLength $InputMeasureUnit <input id="input_width" name="input_width" value="$Width" class="PlentyOrder_InputWidth" type="hidden" /></td>
</tr><tr>
<th>Width</th>
<td>$InputWidth $InputMeasureUnit</td>
</tr>
<tr>
<th>Length</th>
<td>$InputLength $InputMeasureUnit</td>
</tr></tbody>
</table>
{% endif %}
Replace the number

Find each of the $Free[10] template variables in the code above and replace the number 10 with the number that your free text field has in your configuration.

The following template variables are used here. They only exist in the ItemViewSingleItem layout:

  • $InputWidth: Generates the entry form for the width with the CSS class PlentyOrder_InputWidth

  • $InputLength: Generates the entry form for the length with the CSS class PlentyOrder_InputLength

  • $InputMeasureUnit: Provides the unit for the input. The values can be 'm', 'cm' or 'mm' depending on the unit that was defined for the item price (in the example above, the unit for the item price is square centimeters so the$InputMeasureUnitdisplays 'cm').

The template variables $Width and $Length are also used here. They represent the values entered for the item’s width and length.

If you entered the number 3 into the free text field, then the HTML code would look like this in the browser:

<table>
<tbody>
<tr>
<th>Width</th>
<td><input class="PlentyOrder_InputWidth" id="input_width" name="input_width" type="text" value="0" /> cm</td>
</tr>
<tr>
<th>Length</th>
<td><input class="PlentyOrder_InputLength" id="input_length" name="input_length" type="text" value="0" /> cm</td>
</tr>
</tbody>
</table>

This code generates a box in the online store that looks like this:

EN Web Design Edit Dimensions 03
Figure 31. entry field for specifying dimensions in the online store
Hiding an entry field
Important for hidden fields

If you only want to use one entry field (only width or only length), then you still have to specify the other dimension so that the surface areas and consequently the prices can be calculated correctly. Saving the hidden fields as displayed in the following example code will suffice (cf. Figure 31, code for numbers 1 and 2).

For example, if only the width should be entered because your product has a fixed length that can not or should not vary, then the length has to be hidden as follows:

<input class="PlentyOrder_InputLength" id="input_length" name="input_length" type="hidden" value="$Length" />
Function of the variable

The template variable $Length automatically displays the length that was saved in the item data.
The template variable $Width works similarly. In this case, the width is fixed and only the length should be entered.

5.5.9. Misc

CMS » Web design » Layout » Misc

General information

These templates control how deadlines, FAQs and customer registration are designed in your online store. Configuration is carried out in two steps. First decide which information the template variables should return and carry out the corresponding settings. Then decide where this information should be displayed in the online store and insert the template variable at this location in the category page or layout template. The following sections show you how to configure deadlines, FAQs and the customer registration.

Basic structures in the plentymarkets CMS

You will need to have basic knowledge of HTML and CSS in order to edit the templates in the plentymarkets CMS. Furthermore, we recommend that you first read and understand the information given in the Web design chapter. Pay special attention to the Syntax chapter before you make changes to the templates. The Page structure chapter gives you an overview of the template structure in plentymarkets.

Misc: Templates

The templates described below are used to customise the design of deadlines, FAQs and the customer registration.

Tip

Our system’s standard templates already include the most important template variables, template functions and configurations. The settings that were saved can vary according to the template. Customise these for your online store accordingly.

MiscDatesList

Do you want to provide current dates and deadlines on your homepage? Go to CMS » Deadlines to create new deadlines and edit existing ones. The template is displayed with the template variable $Container_MiscDatesList.

Formatting the deadlines

Proceed as described below to format your deadlines in CMS.

Formatting the deadlines:

  1. Go to CMS » Web design » Layout » Misc.

  2. Open the MiscDatesList template.
    → The code will be displayed in the editing window.

  3. Customise the code to meet your needs. For example, insert additional template variables as described below (Table 24).

  4. Save the settings.

Template variables

Click on the Template variables and template functions icon above the template’s editing window to access and copy the relevant template variables for this template.

The following table explains the template variables for the MiscDatesList template:

Table 24. template variables for the MiscDatesList template
Template variable Explanation

$MiscDatesListRow

Determines the layout frames for each deadline.

$MiscDatesListItem

The way a deadline is displayed.

$City

City that corresponds to the deadline.

$Date

Displays the date of the deadline.

$DateEnd

Displays the end date of the deadline if it takes place over several days.

$Lang

The language that was saved for the deadline.

$Preview

Preview of the text. The text will be displayed up until the point where the template variable $PreviewBreak is located in the code.

$Text

Displays the text of the news entry.

$Time

Time of the deadline.

$TimeEnd

Displays the time of the end time of the deadline.

$Title

Title or heading of the deadline.

$URL

URL of the deadline.

Inserting a template variable

Use the $Container_MiscDatesList template variable to insert your deadlines in the online store. You can either insert this template variable into a category or into a template. To do so, proceed as follows:

Inserting a template variable in a category:

  1. Go to Item » Categories.

  2. Open the desired category.

  3. Insert the template variable $Container_MiscDatesList into the desired location in the category.

  4. Click on the save icon to save the changes.

  5. Alternatively, insert the template variable into a template, e.g. into PageDesignContent.

Inserting a template variable in a template:

  1. Go to CMS » Web design » Layout.

  2. Open the desired template, e.g. PageDesignContent.

  3. Insert the template variable $Container_MiscDatesList into the desired location in the template.

  4. Click on the save icon to save the changes.

MiscFAQsList

Use this template to display a list of FAQs in your online store. Go to CMS » FAQs to create and edit the FAQ entries. The template is displayed with the template variable $Container_MiscFAQsList.

EN CMS Web Design Editing Misc01 SI
Figure 32. example FAQ in the online store
Formatting the FAQs

Proceed as described below to format your FAQs in CMS.

Formatting the FAQs:

  1. Go to CMS » Web design » Layout » Misc.

  2. Open the MiscFAQsList template.
    → The code will be displayed in the editing window.

  3. Customise the code to meet your needs. For example, insert additional template variables as described below (Table 25).

  4. Save the settings.

Template variables

Click on the Template variables and template functions icon above the template’s editing window to access and copy the relevant template variables for this template.

The following table explains the template variables for the MiscFAQsList template:

Table 25. template variables for the MiscFAQsList template
Template variable Explanation

$MiscFAQsListRow

Determines the layout frames for each FAQ.

$MiscFAQsListItem

The way a FAQ entry is displayed.

$Answer

The answer to a FAQ.

$FaqID

FAQ ID.

$FaqNum

FAQ name.

$FolderID

ID of the folder for a FAQ.

$FolderName

Name of the folder for a FAQ.

$Question

The question for a FAQ.

Inserting a template variable

Use the $Container_MiscFAQsList template variable to insert your FAQs in the online store. You can either insert this template variable into a category or into a template. To do so, proceed as follows:

Inserting a template variable in a category:

  1. Go to Item » Categories.

  2. Open the desired category.

  3. Insert the template variable $Container_MiscFAQsList into the desired location in the category.

  4. Click on the save icon to save the changes.

  5. Alternatively, insert the template variable into a template, e.g. into PageDesignContent.

Inserting a template variable in a template:

  1. Go to CMS » Web design » Layout.

  2. Open the desired template, e.g. PageDesignContent.

  3. Insert the template variable $Container_MiscFAQsList into the desired location in the template.

  4. Click on the save icon to save the changes.

MiscCustomerRegistrationForm

The MiscCustomerRegistrationForm template is an individual customer registration form that can be inserted into the online store with template variable $Container_MiscCustomerRegistrationForm.

Formatting the customer registration form

First insert the code into the CMS and carry out additional settings. For example, specify which page should be displayed as a landing page after the registration. These options are found in the Settings tab of the MiscCustomerRegistrationForm template.

Configuring the customer registration:

  1. Go to CMS » Web design » Layout » Misc » MiscCustomerRegistrationForm.

  2. Click on the MiscCustomerRegistrationFormContent tab.

  3. Insert the desired code.
    → You can use the example code displayed below or you can write your own code.

  4. Pay attention to the explanations given in Table 26 and carry out the configuration in the Settings tab as desired.

  5. Save the settings.

  6. Check the result in the online store and make changes to the code or settings as needed.

The following table explains the settings of the MiscCustomerRegistrationForm template:

Table 26. settings for the MiscCustomerRegistrationForm template
Setting Explanation

MiscCustomerRegistrationForm_ContentpageSelect

Select which page the customer should be forwarded to after the registration (regardless whether it was successful or unsuccessful). If no page is selected, then the homepage will be used by default.

MiscCustomerRegistrationForm_AutomaticLoginAfterRegistration

If you select Yes, then customers will automatically be logged in after they have registered. If you select No, then customers will have to log in separately after the registration.

ValidateName

Checks the customer’s name. Both the information entered and the spelling are checked.

ValidateAddress

Checks the customer’s address. Both the information entered and the spelling are checked.

ValidateEmail

Checks the customer’s email address. Both the information entered and the spelling are checked. Mandatory field for the registration.

ValidatePhoneNumber, ValidateMobileNumber, ValidateFaxNumber

Checks the customer’s telephone number, mobile number and fax number. The information entered, the spelling and the structure are all checked.

ValidateVatNumber

Checks the customer’s European value added tax identification number (VAT number).

ValidateFreeVars

If applicable, select the additional fields that should be checked (multiple selection using Ctrl or cmd + mouse click).

ValidatePostnumber

Checks the DHL PostNummer.

Following is an example of HTML code in the template MiscCustomerRegistrationForm:

{% if $CustomerID == 0 %} $FormOpen_CustomerRegistration {% if $ValidateName == 1 %}

{% else %} {% endif %}
<table>
<tbody>
<tr>
<th style="color:red;">First name</th>
<td>$Firstname</td>
</tr>
<tr>
<th style="color:red;">Surname</th>
<td>$Lastname</td>
</tr>
<tr>
<th>First name</th>
<td>$Firstname</td>
</tr>
<tr>
<th>Surname</th>
<td>$Lastname</td>
</tr>
<tr>
<th>email</th>
<td>$Email</td>
</tr>
<tr>
<th>Repeat email</th>
<td>$EmailRepeat</td>
</tr>
<tr>
<th>Password</th>
<td>$Password</td>
</tr>
<tr>
<th>Repeat password</th>
<td>$PasswordRepeat</td>
</tr>
<tr>
<th>Telephone</th>
<td>$PhoneNumber</td>
</tr>
<tr>
<th>Mobile</th>
<td>$MobileNumber</td>
</tr>
<tr>
<th>Fax</th>
<td>$FaxNumber</td>
</tr>
<tr>
<th>Country</th>
<td>$CountrySelect</td>
</tr>
<tr>
<thFree 1</th>
<td>$FreeText1</td>
</tr>
<tr>
<th>Free 2</th>
<td>$FreeText2</td>
</tr>
<tr>
<th>Free 3</th>
<td>$FreeText3</td>
</tr>
<tr>
<th>Free 4</th>
<td>$FreeText4</td>
</tr>
<tr>
<th>Free 5</th>
<td>$FreeText5</td>
</tr>
<tr
<thFree 6</th>
<td$FreeText6</td>
</tr>
<tr>
<th>Free 7</th>
<td>$FreeText7</td>
</tr>
<tr>
<th>Free 8</th>
<td>$FreeText8</td>
</tr>
<tr>
<th>PostIdent</th>
<td>$PostIdent</td>
</tr>
</tbody>
</table>
$Button_CustomerRegistration $FormClose_CustomerRegistration {% else %} You have already registered! {% endif %}

The following image shows a standard registration form with a drop-down list for selecting the country.

EN CMS Web Design Editing Misc02 SI
Figure 33. standard registration form
Template variables

Click on the Template variables and template functions icon above the template’s editing window to access and copy the relevant template variables for this template.

The following table explains the template variables for the MiscCustomerRegistrationForm template:

Table 27. template variables for the MiscCustomerRegistrationForm template
Template variable Explanation

$MiscCustomerRegistrationForm_AutomaticLoginAfterRegistration

Automatic login after registration

$MiscCustomerRegistrationForm_ContentpageSelect

Landing page

$MiscCustomerRegistrationFormContent

The content of the registration form

$IsValidAddressSaved

Checks whether a valid email address is saved

$FormOpen_CustomerRegistration

Opens the registration form

$FormClose_CustomerRegistration

Closes the registration form

$Button_CustomerRegistration

Button for registering

$SalutationSelect

Form of address

$Company

Company

$Firstname

First name

$Lastname

Surname

$Street, $HouseNo

Street, house number

$AddressAdditional

Additional address information

$ZIP, $City

ZIP, city

$CountrySelect

Drop-down list for selecting the country (Figure 33)

$Email, $EmailRepeat

email address, repeat email address

$Password, $PasswordRepeat

Password, repeat password

$PhoneNumber, $FaxNumber, $MobileNumber

Telephone number, fax number, mobile phone number

$BirthDay, $BirthMonth, $BirthYear

Date of birth: Day, month, year

$VATNumber

VAT number

$PostIdent

PostNummer

$FreeText1 to $FreeText8

Free text fields 1 to 8

$ValidateAddress

Check address

$ValidateEmail

Check email address

$ValidateFaxNumber

Check fax number

$ValidateFreeVars

Check free text fields

$ValidateMobileNumber

Check mobile phone number

$ValidateName

Check name

$ValidatePhoneNumber

Check telephone number

$ValidatePostnumber

Check PostNummer

$ValidateVatNumber

Check VAT number

Inserting a template variable

Proceed as described below to insert the template variable $Container_MiscCustomerRegistrationForm at the desired location within a category page or a layout template.

EN CMS Web Design Editing Misc03 SI
Figure 34. inserting a template variable in a category page

Inserting template variables in a category page:

  1. Go to Item » Categories.

  2. Open the category that you want to use for displaying the customer registration form.

  3. Insert the template variable $Container_MiscCustomerRegistrationForm into the desired location in the source code.

  4. Save the settings.

Inserting template variables in a template:

  1. Go to CMS » Web design.

  2. Open the template that you want to use for displaying the customer registration form.

  3. Insert the template variable $Container_MiscCustomerRegistrationForm into the desired location in the source code.

  4. Save the settings.

5.5.10. Order process

CMS » Web design » Order process

Content of this page

The following chapters provide you with general information about web design and highlight some important aspects of this area in the online store.

How the order process is structured

The order process refers to the process that a customer goes through when buying something in the online store. It begins the moment a customer puts an item in their shopping cart and it continues until the moment that the order is sent. This process is divided into 3 areas: first the shopping cart, then the checkout and finally the order confirmation. These areas are displayed in the layout section as well. In this chapter, we will describe the various possibilities that you have for making changes to the design.

Legal regulations

If your online store is run in Germany, then please make sure that you comply with the legal regulations for the order process that went into effect on August 1st, 2012. Further information can be found on the checkout page of the manual, listed within sections 2 and 3 as well as on the complying with the shopping cart solution page. Here you will also find information about the possibilities that plentymarkets provides you. For further information (in German), refer to our blog.

Basic settings

You can individually configure the order process. For example, you can decide which elements you would like to have displayed and which functions you would like to activate. Go to System » Client » Select client » Order process » Basic settings to carry out these settings. A standard configuration has already been saved by default.

jQuery

jQuery functions are integrated in this area. For further information about working with or expanding these functions, refer to the jQuery page of the manual.

Tracking functions

You can integrate tracking functions into your online store with the help of template variables and corresponding tracking service providers. Doing so will provide you with detailed statistics about the ways that visitors use your store and can help you make appropriate decisions about how your store’s design can be improved.

You can integrate these functions into your online store by making use of the services provided by Google Analytics or a different tracking service provider, such as etracker.

Shopping cart

CMS » Web design » Order process » Shopping cart

Content of this page

The shopping cart is the first step of the order process. This area already includes default entries and configurations. However, you can customize this area as desired. The corresponding settings are easy to carry out in the various submenus.

General information about the configuration

You can individually customize the following areas in the Shopping cart tab.

Tab: Shopping cart

Open the Shopping cart tab by going to CMS » Web design, clicking on the Order process folder and then clicking on Shopping cart.

CSS formatting

In plentymarkets versions 5.0 and lower, it was possible to save CSS formatting in the individual submenus of the order process. CSS is now saved in the new CSSOrder tab. In other words, CSS for the shopping cart can now be customized under CMS » Web design » Folder: Template » Folder: CSS » Template: CSSOrder. The CSS formatting is listed there in the same order as the shopping cart submenus.

Title
Use this area to design the upper portion of the shopping cart. The customer receives information about the shopping cart and about the order process. An example note is already entered under Text in front of. You can edit this text as desired. This first note appears above the Next button. This is generally the Go to checkout button, which you can customize in the Buttons tab. You can change the title and set whether or not the Next button should be displayed. If needed, a second note can be saved under Text behind. This note will appear at the end of this upper portion of the shopping cart.

Item
A list of items in the shopping cart. Two notes can be entered or edited. The first note is displayed above the list of items and the second one is displayed underneath the list of items, i.e. the information is displayed in the order that you see it here. You can decide which item details should be displayed in the shopping cart, whether customers should be able to directly place items from the shopping cart onto the watchlist and whether the Update shopping cart button should be displayed and how it should be positioned.

Selection of attributes
Attributes can only be selected for items that actually have different attributes. The attributes can be selected from drop-down lists, giving the customer a chance to change their mind and choose a different variant. The note that is entered here appears in the customer’s shopping cart above these drop-down lists.

Order property
Items can be configured in such a way that it is possible for customers to submit texts and files during the order process. For example, customers could submit a text giving specific details that are relevant to their order. They could also upload a photo that they want to have printed on an item. Properties have to be configured for this.

Delivery date
The link Change delivery date is displayed in the shopping cart. The customer can click on this link and enter a delivery date. If a delivery date was already entered, then the customer will see this date here. You can edit the default texts, Change delivery date and Delivery date as desired. You can also enter a note that will be displayed. Go to System » Client » Select client » Order process » Settings to configure the delivery date for the order process. For further information, refer to the Basic settings page of the manual. This page also includes the code that is inserted into the CMS in order to display the delivery date.

Subscription
This option allows you to offer subscriptions to items in your online store. In order to enable your customers to select the subscription function in the online store, you have to paste the corresponding template variables and template functions into your store’s layout. For further information, refer to the Scheduler page of the manual. In the scheduler area, you can determine the delivery intervals and number of deliveries that your customers should be allowed to choose from in the online store.

Country of delivery
The standard country of delivery is automatically selected. However, by choosing to show this area, you give customers the opportunity to change the selection. If you choose to show this area, then you can decide whether it should be directly visible to customers or only visible once a customer has clicked on the heading of the area.

Configure the error message

An error message will be displayed if no shipping profile is available for a selected country of delivery. In this case, the customer has to select a different country of delivery or cancel the purchase. Go to System » Client » Settings » Languages to find the error message. You can edit the text of the error message, e.g. if you want to add a note asking the customer to contact the online store. If you made a mistake by not linking this particular country of delivery to a shipping profile, then correct the error and create the corresponding shipping profile as needed.

Payment method
Displays the payment methods that can be selected. If any of the payment methods result in additional costs, then these costs will be displayed here. You can set whether the section should first open after clicking on the title. Pay attention to the note about the Country of delivery option. This also applies to the payment method.

Shipping method
Displays the shipping methods that can be selected. The shipping method that has the highest priority in your shipping profiles is set by default. You can set whether the section should first open after clicking on the title.

Totals
You can enter a note which will be displayed in the upper left corner of this section.

Coupon
The customer can enter a coupon code in this section. You can set whether or not this section should be displayed. You can also decide whether the section should first open after clicking on the title.

Footer
You can enter notes here. The notes will be displayed in the lower portion of the shopping cart. The first note is saved under Text in front of. It is displayed in the shopping cart above the Go to checkout (Next) button. You can set whether or not the Go to checkout button should be displayed. A second note is saved under Text behind. It is displayed in the shopping cart under the Go to checkout button.

Tool for identifying elements

We recommend using a tool such as Firebug, which lets you take a look at the elements that you would like to edit. This tool makes it relatively easy to identify elements if you are not exactly sure which name the particular element is assigned to in the code.

Example for customizing a section in the shopping cart

We will now describe the procedure based on the Title submenu. You will learn how to edit or hide the elements found within this section.

Orientation

The elements, which we will describe below, are numbered in Figure 35. Figure 36 shows you how these elements are displayed in the shopping cart. The same numbers are also used here and correspond to the settings made in Figure 35.

Options for customizing the submenu: Title

Figure 35 shows basic settings in this submenu:

EN CMS Web Design Editing Order Process Shopping Cart01
Figure 35. shopping cart; options in the submenu Title

The following table provides you with information about the options in the Title submenu:

Table 28. shopping cart; options in the submenu Title

No.

Setting

Explanation

1

Image gallery

The image gallery contains all of the images for your store’s design. You can use the image gallery to load an image into a particular section. Do so by inserting the image’s URL. Figure 35 shows an example for the HTML code (arrow). Result: Figure 36, number 1.
Create individual folders in the image gallery for the various areas of the design.

2

Template variables and template functions

Opens an overview of template variables and functions for the corresponding template. You can also view the variables and functions for other templates.

3

Editor

The following options are available:
WYSIWYG-Editor = An editor with a wide range of tools for creating content.
CK-Editor = An efficient editor that is also used in other areas.
Syntax editor = Code will be highlighted in color in the syntax structure.
Text field = Code will be displayed as pure text.

4

Text in front of

The note is used to give the store visitor important information about the order process. Text is already entered by default for some designs and templates. You can edit this text or add to it. It is also possible to save an image by inserting the corresponding HTML code along with the image’s URL (Figure 35, arrow).

5

Title

The title’s name is saved here. In this case, the name is shopping cart (Figure 35, number 5).

6

Next button

The Next button is used to transition from the shopping cart to the order process. To do so, the customer can click on this button or on a second (copy of the same) button at the end of the page. The button is set to Show by default (Figure 35, number 6). It can be hidden by selecting Do not show.
Tip:: You can hide the button by selecting the option Do not show. This should be done if you don’t want the customer to leave the shopping cart by clicking on the button at the top of the page, but rather to first check the entire page and then click on the button at the bottom of the page.
You can edit the buttons as well as the text of the buttons in the corresponding tab.

7

Text behind

Enter an additional note if needed here, which will be displayed at the bottom of the title field (Figure 35, number 7).

The settings displayed in the online store

The position numbers in Figure 35 and Table 28 correspond to the position numbers in Figure 36. This helps you recognize where the various elements will be displayed in the online store. The elements may look different depending on how the design is customized.

EN CMS Web Design Editing Order Process Shopping Cart02
Figure 36. shopping cart; implementation of the settings in the submenu Title
Template variables in the shopping cart area

Click on the icon Template variables and template functions to access an overview of all the template variables and functions that can be used in this area (Figure 35, number 2). If you copy a variable or function and paste it, e.g. into a note or the CSS, then the content will be displayed during the checkout process.

Example: Template variables and template functions for different separators

Template variables such as $ItemAmountNetDot are used for displaying numerical values (prices). The last part of the template variable, here dot, indicates the separator that is used, e.g. before the amount of cents. You can use these template variables to customize how prices, shipping costs etc. are displayed in a particular language. For example, you could use a comma as the separator for monetary amounts in a German layout and you could use a period as the separator for an English layout.

Dot template variables

If you would like to use these template variables elsewhere for transmitting data, then you have to use the dot variables as only those are suitable for the transfer of data.

The following table explains important template variables for the shopping cart:

Table 29. template variables in the shopping cart area
Variable name Explanation

$CompanyCEO

The company’s chief executive officer. Variable can be used globally.

$CompanyCity

City where the company is located. Variable can be used globally.

$CompanyCountry

Country where the company is located. Variable can be used globally.

$CompanyEmail

The company’s email address. Variable can be used globally.

$CompanyFon

The company’s phone number. Variable can be used globally.

$CompanyHotline

The company’s hotline. Variable can be used globally.

$CouponCampaign

Coupon campaign. Variable can be used globally.

$CouponCampaignID

Coupon campaign ID. Variable can be used globally.

$CouponCode

Coupon code. Variable can be used globally.

$Currency

Currency. Variable can be used globally.

$CustomerEmail

The customer’s email address. Variable can be used globally.

$CustomerID

Customer ID. Variable can be used globally.

$CustomerName

The customer’s name. Variable can be used globally.

$GtcTransAsync

Order and item parameters
Traditional tracking code from Google Analytics
The Google Analytics Asynchronous Tracking Code is an improved snippet of JavaScript that loads the ga.js tracking code in the background while other scripts and content continue loading on your website pages. The advantages include a faster overall page load time, among other things. Further information can be found directly on Google

$ItemAmountGrossDot

Gross item value; decimal places are separated by a dot.

$ItemAmountNetComma

Net item value; decimal places are separated by a comma.

$ItemAmountNetDot

Net item value; decimal places are separated by a dot.

$ItemIDListComma

List of item IDs; a comma separates the individual IDs.

$ItemIDListPipe

List of item IDs; a vertical bar separates the individual IDs.

$ItemQuantity

Number of items

$IsNet

This variable can be used globally. It returns the value TRUE if the content of the shopping cart becomes a net order (depending on the settings in the system), and FALSE if it becomes a gross order.

$MethodOfPayment

Payment method

$MethodOfPaymentID

Payment method ID

$ReferrerID

Referrer ID. Variable can be used globally.

$ReferrerName

Referrer name. Variable can be used globally.

$ShippingCostsGrossComma

Gross shopping costs; decimal places are separated by a comma.

$ShippingCostsGrossDot

Gross shipping costs; decimal places are separated by a dot.

$ShippingCostsNetComma

Net shipping costs; decimal places are separated by a comma.

$ShippingCostsNetDot

Net shipping costs; decimal places are separated by a dot.

$ShippingCountry

Country of delivery

$ShippingCountryID

Country of delivery ID

$ShippingProfile

Shipping profile

$ShippingProfileID

Shipping profile ID

$ShippingProvider

Shipping service provider

$ShippingProviderID

Shipping service provider ID

$TotalAmountGrossComma

Gross total amount; decimal places are separated by a comma.

$TotalAmountGrossDot

Gross total amount; decimal places are separated by a dot.

$TotalAmountNetComma

Net total amount; decimal places are separated by a comma.

$TotalAmountNetDot

Net total amount; decimal places are separated by a dot.

Tracking

Use tools like Google Analytics or etracker to track how many visitors your online store receives. Furthermore, you can save a tracking code within the shopping cart area. Doing so will provide you with detailed information about your customers' purchases, the orders and the items that they include.

For further information, refer to the Google Analytics page of the manual.

Individual order process

The order process refers to the process that a customer goes through when buying something in the online store. It begins the moment a customer puts an item in their shopping cart and it continues until the moment that the order is sent. The individual order process is selected by default in Callisto Light. The individual order process gives you total control over what the order process looks like, how many functions it includes and how customers are guided through this process. You can define up to ten steps, which determine how customers will be led through the personalised order process. Additionally, you can customise the steps Login, Logout, Customer registration, Forgot your password and Order confirmation.
This page of the manual teaches you how the individual order process is structured and which settings can be configured.
The settings are carried out separately for each design and client (store). The number and content of the individual steps of the order process are also set for each client individually.

Switching to the individual order process

Due to technical reasons, you will not be able to switch back to the default order process once you have already implemented the individual order process.

Components of the individual order process in Callisto Light

The chapters Categories, Order steps, The header "Purchase" and Additional pages describe how the individual order process is structured.

Categories

The individual order process relies heavily on categories of the type Container. This type of category can access all of the global template variables and functions that are used for the templates under CMS » Web design » Layout » Checkout. Conversely, global template variables and functions can be used to grant categories of the type Container access to template-specific variables and functions, i.e. non-global variables and functions. As such, the entire order process can be represented with categories. It is no longer absolutely necessary to use templates in the individual order process. The categories for Callisto Light are found in plentymarkets under Item » Categories. They are located in the web design’s folder. There you can customise the content of the order steps. Use link functions to create links from one category to another. You can use these previously defined functions:

Table 30. predefined template functions
Function call Returned link

Link_CustomerRegistration()

Customer registration

Link_LostPassword()

Forgot your password

Link_OrderConfirmation()

Order confirmation

Link_Checkout(1)

Log in

Link_Checkout(2)

Shopping cart

Link_Checkout(3)

Purchase

Link_Checkout(4)

Order details

Link_Checkout(5)

Address

Link_Checkout(x)

x: order step number in the order process

You can use anchor tags to link categories like Customer registration and Order confirmation anywhere in the order process.

# Creates an anchor tag that is designed as a button. Depending on the customer status, the button either leads to the order details or to the customer registration.
<a class="btn btn-primary btn-lg btn-block-xs" href="{% if ( $CustomerID ) { Link_CustomerRegistration() } else { Link_Checkout(3); } %}">
	<span class="glyphicon glyphicon-euro" aria-hidden="true"></span>Checkout
</a>

Code example 1: code for the Checkout button

Code example 1 is located in the Shopping cart category in Callisto Light. This code displays the Checkout button to customers (Figure 37). The code also checks whether the customer has already logged into the online store. If the customer is not logged in, then the function Link_CustomerRegistration() will be saved for the button’s href attribute. The customer will be forwarded to the registration page after clicking on the Checkout button. Here, the customer can either log into the online store or create a new customer account. If the customer is already logged into the online store, then the link will lead to the Order details step, i.e. the link will lead to the first step of the Purchase header. This is because the template function Link_Checkout(3) was saved in the code.

EN CMS Individual Order Process 01
Figure 37. the Checkout button that is displayed with code example 1
Order steps

Categories are linked to the eight order steps of the individual order process in Callisto Light. These links are saved in the design settings (Figure 38).

Eight steps are saved for the order process in Callisto Light:

  1. Shopping cart

  2. Log in

  3. Purchase

  4. Order details

  5. Address

  6. Payment & shipping

  7. Order overview & transaction

  8. Order process

These eight steps are displayed with categories of the type Container. The categories for Callisto Light are found in plentymarkets under Item » Categories. They are located in the web design’s folder. Two other order steps are also available (9th order process step and 10th order process step). It is possible to set up a total of ten order steps in the individual order process (Figure 38). It is also possible to create five additional pages (Figure 38).

EN CMS Individual Order Process 02
Figure 38. predefined order steps in Callisto Light

The following table lists the ten order steps that can be configured in the individual order process. Furthermore, the table explains the function of these steps in the front end, i.e. in the online store.

Table 31. order steps in the individual order process
No. Step in the back end Function in the front end

1

Shopping cart

An overview of all the items that the customer wants to buy.

2

Log in

The customer decides whether to proceed as a guest or as a registered user.

3

Purchase

Serves as the header for the following order steps (Figure 39): * Order details * Address * Payment & shipping * Overview & contract closure

4

Order details

Is displayed as the Order details tab in the front end. This tab is grouped under the heading Purchase.

5

Address

Is displayed as the Address tab in the front end. This tab is grouped under the heading Purchase.

6

Payment & shipping

Is displayed as the Payment & shipping tab in the front end. This tab is grouped under the heading Purchase.

7

Order overview & transaction

Is displayed as the Overview & contract closure tab in the front end. This tab is grouped under the heading Purchase.

8

Order process

Allows the customer to choose where to go next: * Shopping cart * Purchase * Log in

Note: This order step has the same name as the order process as a whole. The names are identical for technical reasons.

9

Free

Not in use. Can be configured.

10

Free

Not in use. Can be configured.

The header "Purchase"

The third order step is the category Purchase. This category is a special case as it includes the four order steps described in Table 32. The category Purchase displays each of these four steps in succession. The purchase category is used to display a header and progress bar in the individual order process of Callisto Light. The progress bar shows customers which part of the order process they are currently completing (Figure 39).

EN CMS Individual Order Process 03
Figure 39. order steps of the category Purchase
Table 32. order steps in the header Purchase
Order steps of the category Purchase Content

1. Order details

Entry fields: * Your reference * Notes & special requests * Coupon codes

2. Address

  • Invoice address

  • Entry field for a differing delivery address

Optional fields: * Fax * Mobile * PostNummer * VAT number

3. Payment & shipping

  • Selection of payment methods

  • Selection of shipping service providers

4. Overview & contract closure

  • Summary of the order

  • Acceptance of terms and conditions

  • Newsletter registration

Callisto Light uses JavaScript to dynamically show and hide steps of the order process. Customers enter data while they complete the four order steps in the "Purchase" header (Figure 39). REST calls are used in the background to exchange this data with the server and keep it up-to-date. The code for displaying the Purchase header is found in plentymarkets under Item » Categories when you open the folder for your design and click on the category Purchase.

The function CategoryContentBody($_id) loads the code for the four order steps in the category Purchase. It is easiest to find the order steps by searching for the HTML comments in the category.

Table 33. order steps in the category Purchase
Order process step HTML comment

Order details

STEP 1: Order details

Address

STEP 2: Addresses

Payment & shipping

STEP 3: Shipping & Payment

Overview & contract closure

STEP 4: Overview & Confirmation

Code example 2 shows how the content of the header Purchase is loaded in Callisto Light with the order steps Order details, Address, Payment & shipping and Overview & contract closure.

Code example 2 is located in the Purchase category and contains the order steps listed above. Line 7 of code example 2 includes the command $_id= CheckoutStepPageID(4). This command saves the ID of the Order details step in the variable $_id. The number in parentheses after CheckoutStepPageID is the order step number that was saved in the design settings (Figure 38). In this example, the variable $_id is given the category ID for the 4th order step. In Figure 38, this is the ID 17464. In line 8, the attribute data-plenty-checkout-content is given the value that is saved in $_id. The code data-plenty-checkout-content="$_id" changes to data-plenty-checkout-content="17464". The code CategoryContentBody($_id) in line 13 is used to access the content that was saved in the Order details category.

# Customizable code for displaying the purchase header in the design settings.
<div class="checkout checkout-content checkout-tabpanel" data-plenty-checkout="container">
   {% if GetGlobal("ShowTabDetails") %}
   <!-- STEP 1: Order details -->
   # Step 1 order details begin here.

   {% $_id = CheckoutStepPageID(4) %}
   # The function CheckoutStepPageID(4) saves the ID of the fourth order step in the variable $_id.

Code example 2: order steps of the category Purchase

Additional pages

You can customise the following fives pages of the individual order process in addition to the ten order steps. These pages are also designed with categories:

  • Login

  • Logout

  • Customer registration

  • Forgot your password

  • Order confirmation

Content of the order steps

Global template functions load the HTML structure for individual order steps within the individual order process. These template functions provide the basic framework for displaying order data. By using REST calls, you can continuously transmit order data between the Client and the server. This ensures that data is up-to-date and consistent within the order steps.

The template PageDesignPrepareMainColumn specifies which elements should be loaded in the order steps.

HTML framework

The checkout templates display order data in the order steps. These templates are composed of HTML code, which structures the content of the order steps. The templates are found under CMS » Web design » Layout » Checkout. Table 34 lists order steps along with the checkout templates that are used. For example, the order step Shopping cart uses the command Container_CheckoutBasketItemsList() to load the HTML framework for the item overview in the shopping cart. The template is found under CMS » Web design » Layout » Checkout » CheckoutBasketItemsList.

Table 34. available checkout templates
Category Container

Shopping cart

Container_CheckoutBasketItemsList()
Container_CheckoutTotals()
Container_CheckoutCoupon()

Order details

Container_CheckoutCoupon()

Address

Container_CheckoutCustomerInvoiceAddress()
Container_CheckoutCustomerShippingAddress()

Payment & shipping

Container_CheckoutMethodsOfPaymentList()
Container_CheckoutShippingProfilesList()

Order overview & transaction

Container_CheckoutMethodsOfPaymentList()
Container_CheckoutShippingProfilesList()

Loading individual elements

Global variables are defined in the template PageDesignPrepareMainColumn under CMS » Web design » Layout » PageDesign. These global variables are defined with the help of the template function setGlobal. This allows you to influence the visibility of elements, e.g. the entry fields for forms. Use the information under the comment # CHECKOUT VALIDATION & APPEARANCE to specify how elements should be displayed in the individual order process (Table 35).

Table 35. template functions for the order details
Function Default value Explanation

SetGlobal("ShowTabDetails", true);

true

Displays the tab Order details in the header Purchase.

SetGlobal("ShowCustomerSign", true);

true

Displays the entry field Your reference.

SetGlobal("ValidateCustomerSign", false);

false

Validates the entry field Your reference.

SetGlobal("ShowCustomerNotice", true);

true

Displays the entry field Your notes & special requests.

SetGlobal("ShowCouponInDetails", true);

true

Displays the entry field Coupon code.

Displaying the payment methods

The global function Container_CheckoutMethodsOfPaymentList is found under Item » Categories when you open the folder for your design (e.g. callisto_light_3) and click on the category Payment & shipping. This global function accesses the template CheckoutMethodsOfPaymentList under CMS » Web design » Layout » Checkout, which displays all of the available payment methods. It generates an HTML list with radio buttons, which customers can use to select a payment method (code example 3).

# The for loop generates a list with radio buttons, which customers can use to select a payment method.
{% for $_payment in GetCheckoutMethodsOfPaymentList() %}
	{% if $_payment->MethodOfPaymentID > 0 %}

		{% $_pID = $_payment->MethodOfPaymentID %}
			<li class="radio clearfix">
				<label>
					<input type="radio" name="MethodOfPaymentID" value="$_pID"{% if $CheckoutMethodOfPaymentID == $_pID %} checked="checked"{% endif %}>
					$_payment->MethodOfPaymentName

					{% if $_payment->MethodOfPaymentExternalInfo %}
						<span class="payment-information">
							$_payment->MethodOfPaymentExternalInfo
							{% Link_MethodOfPaymentInfoPage($_payment->MethodOfPaymentID) %}
						</span>
					{% endif %}
				</label>


				<span class="pull-right">{% FormatMonetaryValue($_payment->MethodOfPaymentPrice, false, false) %} $CurrencySign</span>
								{% if $_payment->MethodOfPaymentID == 3 %}
					<div class="muted" data-plenty-is="edit-bank-account"{% if ! ( $_bankDetails->BankDetailsBankName && ( $_bankDetails->BankDetailsIBAN || $_bankDetails->BankDetailsAccountNumber ) ) %} style="display: none;"{% endif %}>
						<span data-plenty-is="bank-account-wrapper">
							<span data-plenty-is="bank-name">$_bankDetails->BankDetailsBankName</span>,
							{% if $_bankDetails->BankDetailsIBAN %}
								{% $_bank = substr($_bankDetails->BankDetailsIBAN, 0, 4) %}
								{% $_kto = substr($_bankDetails->BankDetailsIBAN, -4) %}
								<span data-plenty-is="iban-anonymized">$_bank&nbsp;XXXX&nbsp;XXXX&nbsp;XXXX&nbsp;$_kto</span>
							{% elseif $_bankDetails->BankDetailsAccountNumber %}
								{% $_kto = substr($_bankDetails->BankDetailsAccountNumber, -4) %}
								<span data-plenty-is="account-number-anonymized">XXX&nbsp;XXX&nbsp;$_kto</span>
							{% endif %}
						</span>
						<br>
						<a class="btn btn-default btn-xxs{% if $CheckoutMethodOfPaymentID != $_pID %} disabled{% endif %}" href="javascript:plenty.CheckoutService.editBankDetails();"><span class="glyphicon glyphicon-pencil"></span> edit</a>
					</div>
				{% endif %}

	</li>
	{% endif %}
{% endfor %}

Code example 3: the template *CheckoutMethodsOfPaymentList*

A change event is triggered when the payment method is selected. This event communicates with the server. The event uses the function call plenty.CheckoutService.setMethodOfPayment to transmit the payment method that was selected by the customer. The function is part of the plentymarketsCMStools and carries out the REST calls for the change event. The following code is part of the template CheckoutMethodsOfPayment. It displays the change event with the function call plenty.CheckoutService.setMethodOfPayment.

# Change event that triggers the function setMethodOfPayment().
<script>
	$('input[name="MethodOfPaymentID"]').change(function() {
		plenty.CheckoutService.setMethodOfPayment();
		$('[data-plenty-checkout-form="methodOfPayment"] .radio .btn').addClass('disabled');
		$('[data-plenty-checkout-form="methodOfPayment"] input[type="radio"]:checked').parents('.radio').find('.btn').removeClass('disabled');
	});
</script>

Code example 4: change event in the template *CheckoutMethodsOfPayment*

Validating the order data

The plentymarkets CMS validators make sure that your customers entered valid information during the order process. The server validates all of the data that customers entered before saving this data in the database. For example, it makes sure that email addresses have the correct format. It also makes sure that entry fields such as the street and house number use meaningful combinations of letters and numbers. The validators are found in your plentymarkets system under CMS » Web design » Layout » Validator. The following validators are relevant to the order process:

Table 36. validators for the order process
Validator template Explanation

ValidatorCustomerInvoiceAddress

Validates the entries for the invoice address.

ValidatorCustomerShippingAddress

Validates the entries for the delivery address.

ValidatorPlaceOrder

Validates the entries for the last order step Overview & contract closure.

The template ValidatorPlaceOrder checks whether customers placed check marks next to the general terms and conditions, privacy policy or newsletter. The validator templates can be customised to specify which data should be checked and which messages should be displayed if errors occur. The following code checks whether the customer accepted the general terms and conditions by placing a check mark. If a check mark is placed, then the boolean $TermsAndConditionsCheck is set to the value 1. The call AddError(16) displays error code 16 if an error occurs, i.e. $TermsAndConditionsCheck!= 1.

# Checks whether the user accepted the terms and conditions by placing a check mark.
# If this is not the case, the function AddError(16) will show the user an error message.
{%
	if ( GetGlobal("ValidateTermsAndConditionsCheck") == true ) {
		if ( $TermsAndConditionsCheck != 1 )
		{
			AddError(16);
		}
	}
%}

Code example 5: the template *ValidatorPlaceOrder*

Setting up Google reCAPTCHA for the customer registration

Set up Google reCAPTCHA for the customer registration in your online store. First, register your online store to use Google reCAPTCHA. Then, enter the website key and the secret key for your online store.

Setting up Google reCAPTCHA:

  1. Go to System » Client » Select client » Online store » Settings.

  2. Select Yes under Request Google reCAPTCHA in registration.

  3. Enter the Google reCAPTCHA Website key ein.

  4. Enter the Google reCAPTCHA Secret key.

  5. Save the settings.

Editing the Registration category

Next add the template function GetCaptcha() as well as the following code example in the Registration category.

Parameters for the GetCaptcha() function

The following parameters are available for the GetCaptcha() function:

  • GetCaptcha('normal'): Default value for the normal Google reCAPTCHA.

  • GetCaptcha('compact'): Parameter for the compact Google reCAPTCHA.

  • GetCaptcha('invisible'): Parameter for the invisible Google reCAPTCHA.

Editing the Registration category for normal or compact Google reCAPTCHA:

  1. Go to Item » Categories.

  2. Open the design’s folder, e.g. the folder for Callisto Light 3.

  3. Open the Registration category.

  4. Click on the Description 1 tab.

  5. Insert the {% GetCaptcha('normal') %} or {% GetCaptcha('compact') %} template function above the Register button.

  6. Search for the code plenty.AuthenticationService.registerCustomer();.

  7. Replace the code with registration();.

  8. Search for <script>.

  9. Insert the following code example within the script area.

  10. Save the settings.

function registration(){
    var res = plenty.AuthenticationService.registerCustomer();

    if(typeof res !== 'undefined'){

        if(res.status == 400 && typeof grecaptcha !== 'undefined'){
            grecaptcha.reset();
        }

    }
    return false;
}

Editing the Registration category for invisible Google reCAPTCHA:

  1. Go to Item » Categories.

  2. Open the design’s folder, e.g. the folder for Callisto Light 3.

  3. Open the Registration category.

  4. Click on the Description 1 tab.

  5. Insert the {% GetCaptcha('invisible') %} template function above the Register button.

  6. Search for the code plenty.AuthenticationService.registerCustomer();.

  7. Replace the code with grecaptcha.execute();.

  8. Search for <script>.

  9. Insert the following code example within the script area.

  10. Save the settings.

function registration(){
    var res = plenty.AuthenticationService.registerCustomer();

    if(typeof res !== 'undefined'){

        if(res.status == 400 && typeof grecaptcha !== 'undefined'){
            grecaptcha.reset();
        }

    }
    return false;
}
Setting up Google reCAPTCHA for guest orders

You can also set up Google reCAPTCHA for guest orders in your online store.

Editing CheckoutCustomerInvoiceAddress

Carry out the following changes in the CheckoutCustomerInvoiceAddress template first.

Editing CheckoutCustomerInvoiceAddress for normal or compact Google reCAPTCHA:

  1. Go to CMS » Web design » Layout » Checkout » CheckoutCustomerInvoiceAddress.

  2. Search for </form>.

  3. Insert the {% GetCaptcha('normal') %} or {% GetCaptcha('compact') %} template function above the </form> tag.

  4. Save the settings.

Editing CheckoutCustomerInvoiceAddress for invisible Google reCAPTCHA:

  1. Go to CMS » Web design » Layout » Checkout » CheckoutCustomerInvoiceAddress.

  2. Search for </form>.

  3. Insert the {% GetCaptcha('invisible') %} template function above the </form> tag.

  4. Save the settings.

Editing the Address category

Next, edit the Address category.

Editing the Address category for normal or compact Google reCAPTCHA:

  1. Go to Item » Categories.

  2. Open the design’s folder, e.g. the folder for Callisto Light 3.

  3. Open the Address category.

  4. Click on the Description 1 tab.

  5. Search for the code plenty.CheckoutService.registerGuest().done(function().

  6. Replace the four lines of code with the following code example.

  7. Save the settings.

plenty.CheckoutService.registerGuest().done(function() {
    // change tab if success
    plenty.NavigatorService.continueChange( targetContainer );

    }).fail(function(){

    if(typeof grecaptcha !== 'undefined'){
        grecaptcha.reset();
    }

});

Editing the Address category for invisible Google reCAPTCHA:

  1. Go to Item » Categories.

  2. Open the design’s folder, e.g. the folder for Callisto Light 3.

  3. Open the Address category.

  4. Click on the Description 1 tab.

  5. Search for the code plenty.CheckoutService.registerGuest().done(function().

  6. Replace the code with grecaptcha.execute();.

  7. Search for <script>.

  8. Insert the following code example within the script area.

  9. Save the settings.

function registration() {

    plenty.CheckoutService.registerGuest().done(function() {
    // change tab if success

        var targetContainer = {id:"shipping-payment", index:2};

        plenty.NavigatorService.continueChange(targetContainer);


    }).fail(function(){

        if(typeof grecaptcha !== 'undefined'){
            grecaptcha.reset();
        }

    });

}
Checkout

CMS » Web design » Order process » Checkout

Checkout

The checkout is the second step of the order process. The customer lands in the checkout by clicking on the go to checkout button.

Legal regulations

If your online store is run in Germany, then please make sure that you comply with the legal regulations for the order process that went into effect on August 1st, 2012. Further information can be found in sections 2 and 3. Here you will also find information about the possibilities that plentymarkets provides for you. For further information (in German), refer to our blog.

Checkout: Editing the design

This section has already been preconfigured. However, you have a wide range of possibilities for changing it.

You can customize the following areas in the Checkout menu:

  • Customer registration
    Here you can select which fields a customer should be required to fill out during the registration process, which fields should be optional and which fields should not be displayed at all. The customer registration is intended e.g. for B2B customers. Use a template function to display the registration.

  • Login
    Customers land in this area after clicking on the Go to checkout button. The customer can then choose to go through the checkout process as a guest, to register with the online store or to log in to the store if they has already registered in the past. You can use notes to inform the customer about these options.

  • Forgot your password
    Customers land in this area if they click on the forgot your password link within the login area (how would you like to proceed to the checkout?).

  • Invoice address
    Customers land in this area after clicking on next within the login area. Different fields will be displayed depending on whether the customer decided to register with your online store or go through the order process as a guest. You can either decide to have the street and house number displayed in 2 lines, i.e. one under the other, or you can decide to have them displayed in one line, i.e. one next to the other. You can also select whether you want to have the ZIP code and city be displayed in one or two lines. Furthermore, you can use CSS to determine e.g. which order the street and house number should be displayed in. For example, you could create an English layout with the house number to the left of the street and a German layout with the house number to the right of the street. Do so by locating the corresponding line in the CSS and replacing float: left; with float: right;. Be sure to enter the words house number + street into the corresponding field so that your customer knows which information to enter. Note the information given further below about additional address information.

  • Delivery address
    The same fields are displayed as in the invoice address area. The fields Packstation, PostIdent No. and Packstation No. will only be displayed if you allow customers to use a Packstation as their delivery address and if the customer selects a shipping method that allows for this. Note the information given further below about additional address information.

  • DHL Postfinder
    In this submenu, you can configure the settings for DHL Postfinder.

  • Payment method
    The customer was already given the opportunity to select a payment method in the shopping cart area. As such, you can decide to skip the selection of payment methods in this area. However, be sure to then change how the rest of the headlines are numbered. If you select the option do not show and the customer makes so many changes to previous entries that the payment method they selected in the shopping cart is no longer available, then your decision to not show the payment method will be overruled. The customer will automatically land at this step of the checkout process.
    The same is true for the options bank information, MPay 24 credit card, MPay 24 Maestro and MPay 24 mobile since they require the customer to enter additional information.

  • Shipping method
    The customer was already given the opportunity to select a shipping method in the shopping cart area. As such, you can decide to skip the selection of shipping methods in this area. However, be sure to then change how the rest of the headlines are numbered. If you select the option do not show and the customer makes enough changes to previous entries that the shipping method they selected in the shopping cart is no longer available, then your decision to not show the shipping method will be overruled. The customer will automatically land at this step of the checkout process.

  • Order overview
    Here the customer is once again presented with a summary of the information that they entered. The customer can then submit their order by clicking on the place order button. The order will be created in your system. The order overview area includes the option position. You can use this option to determine which information you want to have displayed first, second, third, etc.

Additional address information can not be applied to all shopping service providers

This field is intended for additional address entries, e.g. apartment 12 a. These entries can be entered by the customer himself during the order process or in the My account area. Some shipping service providers do not process this field. This means that it will not appear on the label. This can also result in undeliverable shipment.

Additional address information is not transmitted to the following shipping service providers at the moment:

DHL Freight
DHL Supply Chain
Swiss Post

You can save or show a note in the areas mentioned in order to inform your customers about this. Or you can hide the field by using e.g. JavaScript.

Tip: Item details

Use the Item section to determine which information should be given about items. For example, this is important in Germany in light of regulations for consumer protection in e-commerce. Not only can you control the exact wording of item information, but you can also decide which information should be displayed or not (Figure 40, number 10).

Button: Place order

Please make sure that the button you are using complies with current legal regulations in your country. In Germany e.g. the button text of the place order button has to be formulated in such a way that it becomes clear that the customer has to pay. This means that place order is not specific enough. The law requires a formulation that could be literally translated as Order with liability to pay or something similar in meaning. The German standard text for the place_order button was changed in plentymarkets accordingly. Make sure that you stay up-to-date on this topic and ask a legal adviser if you have any questions.

Example: menu settings and their appearance in the online store

We will now describe the procedure based on the order overview submenu. You will learn how to edit or delete the elements found within this section.

The elements, which we will describe below, are numbered in Figure 40. Figure 41 shows you how these elements are displayed in the store’s order overview. The same numbers are also used here and correspond to the settings made in Figure 40.

EN CMS Web Design Order Process Checkout 01
Figure 40. checkout; options in the submenu order overview
Settings in the Order overview submenu

The blue numbers used in Figure 40 are also used in Figure 41. This allows you to compare the finished store layout with the entries made in the backend. However, numbers 9 is not shown again in Figure 41. This is because the items shown in Figure 41 are not things that customers can subscribe to. Numbers 12 and 13 are also missing. If they were used here, then they would be displayed under number 11.

Table 37. checkout; options in the submenu order overview
No. Setting Explanation

1

Title

The title that you enter here will appear as the heading of the area.

2 - 10

Position

The position numbers determine in which order the elements are displayed. If you don’t want one of the elements to be displayed in the order overview, then you can hide it by going to the CSS section. Enter {display:none;} at the appropriate area within the code.
Tip: Conversely, if a particular element is not displayed, then find this element within the code and remove the text {display:none;}.
Important: Choose position 9 for the Items section (or whichever number will cause the items to be displayed directly above the "place order" button at the end of the order overview). This is a legal requirement in some countries. For example, this requirement is part of the so-called "shopping cart solution" in Germany.
If you made individual changes to the online store’s design, then make sure that you assign the position numbers accordingly.

10

Item

The title that will be displayed for the item overview within the order overview.

10

Item headlines

The titles that will be displayed for the different areas of the item overview.
Change the headlines by simply overwriting the entries in the text fields.

10

Item details

Place check marks next to the item details that you want to have displayed in the order overview.
All of the item details are selected by default.
You can also use properties to provide information about items.

11

Text after totals

The text that you enter will be displayed directly below the order total.
You can also enter general notes, e.g. regarding additional costs or other important information. If you enter text, then the information will always be displayed regardless of which country the items are being sent to.

12

Note for EU deliveries

The text that you enter will be displayed directly below the order total. If you entered information for text after totals, then the note for EU deliveries will appear below it.
You can also enter general notes, e.g. regarding additional costs or other important information. This field will only be displayed if the country of delivery is an EU member state. Please keep this in mind when writing the note.

13

Note for export shipments

The text that you enter will be displayed below the order total. If you entered information for Text after totals, then the note for EU deliveries will appear below it.
You can also enter general notes, e.g. regarding additional costs or other important information. This field will only be displayed if the country of delivery is not an EU member state. Please keep this in mind when writing the note.

14

Text above/in front of button

Enter a note here e.g. to remind customers to check all of the entries that they made.

15

Text behind

The text that you enter will be displayed below the order overview.

The settings displayed in the online store
EN CMS Web Design Order Process Checkout 02
Figure 41. checkout; implementation of the settings in the submenu order overview
Setting up customer registration (B2B)

Seller registration is of particular interest for B2B stores. The seller fills out a form. This creates a customer account. Later on, the shop owner still has to manually assign a customer class to the account so that the seller can make purchases with the desired discount.

The registration can be accessed in the online store by a URL, which is displayed by the template variable $BaseURL4Links-OrderShowQQCustomerRegistration/ Insert this template variable, instead of a URL, into a link.

<a href="{% Link_CustomerRegistration() %}" title="Registration">REGISTER HERE</a>

You can configure the design of the registration page by going to CMS » Web design » Order process » Checkout and clicking on the Customer registration submenu.

Tip: Use the template function

Alternatively, you can insert the template function % Link_CustomerRegistration() %} into the template to open the customer registration. You can find this function by clicking on the Template variables and template functions icon (Figure 43, green arrow), clicking on the General folder and then on the PageDesignFunctions folder.

EN CMS Web Design Order Process Checkout 03
Figure 42. checkout; customer registration submenu

In this submenu, you can determine which fields should be mandatory for customers to fill out.

Telephone number as a mandatory field

It is useful to have a telephone number where you can contact customers in case of questions. If a telephone number is not listed, then you will receive an error message for shipments to other countries when transferring data to DHL Intraship. This is because DHL has made the telephone number a mandatory field for foreign shipments.

EN CMS Web Design Order Process Checkout 04
Figure 43. checkout; template variables and template functions
Image gallery

Click on the Image gallery link (Figure 43, blue arrow) to open the image gallery. Here you can select the images that you want to save in the area.

For further information about inserting images from the image gallery, refer to the table in the Shopping cart page of the manual.

Template variables and template functions

Click on the icon to access an overview of all the template variables and functions that can be used in this area (Figure 43, green arrow). If you copy the desired template variable or function and paste it, e.g. into a note or the CSS, then the content will be displayed during the checkout process.

Example: Displaying prices

Template variables such as $ItemAmountNetDot are used for displaying numerical values (prices). The last part of the variable, here dot, indicates the separator that is used, e.g. before the amount of cents. You can use these template variables to customize how prices, shipping costs etc. are displayed in a particular language. For example, you could use a comma as the separator for monetary amounts in a German design and you could use a period as the separator for an English design.

Dot variables

If you would like to use these template variables elsewhere for transmitting data, then you have to use the dot variables as only those are suitable for the transfer of data.

The template variables and template functions are found under CMS » Web design. Click on the icon Template variables and template functions. The Basket folder contains several other folders. They correspond to the different sections within the checkout area. The available functions and variables are listed.

Design example

Here you can find a design example and the corresponding CSS code that can be used for your store’s checkout area.

Displaying the checkout area in tabs

The following CSS code can be used to display different parts of the checkout in tabs rather than in submenus - how they are displayed by default (Figure 44).

EN CMS Web Design Order Process Checkout 05
Figure 44. checkout; displayed in tabs

The width of the tabs is not saved in the default layout. Rather, it is determined by the following CSS code. Because of this, there is a maximum character length that can be used when creating titles for the tabs. You may need to shorten some of the titles accordingly. The names of the tabs are saved in the submenus under CMS » Web design » Order process » Checkout. They can be changed as desired. Make changes to the Title fields as necessary (see Figure 44).

Inserting CSS code for displaying the checkout area in tabs:

  1. Copy the following code.

  2. Go to CMS » Web design.

  3. Open the Layout » CSS » CSSOrder submenu.

  4. Insert the code underneath any existing code.

  5. Save the settings.

Code for displaying the checkout area in tabs:

/* TAB CHECKOUT */

/* parent container */
#PlentyOrderCheckoutAccordion {
position: relative;
padding-top: 1px;
}
/* anchors */
#PlentyOrderCheckoutAccordion > a {
position: absolute;
top: 0;
left: 0;
}
/* tabs */
.AccordionTitle {
position: absolute;
top: 0;
white-space: nowrap;
overflow: hidden;
background: #ffffff !important;
border: 1px solid #eeeeee;
border-bottom: 2px solid #CCCCCC;
font-size: 12px;
line-height: 26px;
padding: 5px 10px;
/*text-align: center;*/
}
/* tabs hover */
.AccordionTitle:hover {
background: #f9f9f9 !important;
}
/* individual tabs */
#PlentyOrderWebLoginTitle { left: 0; width: 138px; }
#PlentyOrderWebInvoiceDetailsTitle { left: 140px; width: 158px; }
#PlentyOrderWebShippingDetailsTitle { left: 290px; width: 118px; }
#PlentyOrderWebPaymentMethodTitle { left: 420px; width: 108px; }
#PlentyOrderWebShippingMethodTitle { left: 530px; width: 98px; }
#PlentyOrderWebOrderOverviewTitle { left: 630px; width: 78px; }
/* current tab */
.CurrentAccordionTitle {
background: #cccccc !important;
border: 1px solid #CCCCCC !important;
border-bottom: 2px solid #CCCCCC !important;
}
/* tabs hover */
.CurrentAccordionTitle:hover {
background: #CCCCCC !important;
}
/* content */
#PlentyOrderCheckoutAccordion > .AccordionPane {
margin-top: 43px;
} <font face="Times"<span style="white-space: normal;"
</span></font>
DHL Postfinder

CMS » Web design » Order process » Checkout » Submenu: DHL Postfinder

General information about DHL Postfinder

DHL Postfinder offers a convenient search function. This feature shows your customer a list of post offices and Packstations nearby. The list is displayed when your customer enters their zip code in the My account area or during the checkout process. Customers can then use the desired post office or Packstation as their delivery address.

Configuration

The following steps are required to configure DHL Postfinder.

CSS Order process

Below is the CSS for an optimised DHL Postfinder layout.

/* WEBSHOP OVERLAY */
.PlentyWebshopOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #000;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: 0.5;
}

/* POSTFINDER TRIGGER */
a.PostfinderTrigger {
position: relative;
display: block;
margin-top: 10px;
padding: 25px 10px 0;
border: 1px solid #999;
background: #FFCD00;
color: #666;
text-decoration: none;
cursor: pointer;
}
/* in checkout */
#PlentyWebShippingDetailsForm a.PostfinderTrigger {
}
/* in myaccount */
.PlentyWebMyAccountPopupContainer .PostfinderTrigger {
}
.PostfinderTriggerImgLabel1,
.PostfinderTriggerImgLabel2 {
position: absolute;
display: block;
top: 6px;
background-image: url("/tpl/global/images/dhl_packstation_postfiliale-direkt_sprite.png");
background-repeat: no-repeat;
}
.PostfinderTriggerImgLabel1 {
left: 10px;
width: 97px;
height: 11px;
background-position: -4px -4px;
}
.PostfinderTriggerImgLabel2 {
left: 130px;
width: 89px;
height: 18px;
background-position: -4px -20px;
}
.PostfinderTriggerTextLabel {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
clear: both;
height: 34px;
margin: 4px 0;
padding: 3px 5px;
border-color: #c00;
background-color: #c00;
text-decoration: none;
line-height: 26px;
color: #fff;
}
a.PostfinderTrigger:hover > .PostfinderTriggerTextLabel,
a.PostfinderTrigger:focus > .PostfinderTriggerTextLabel {
color: #e0e0e0;
}

/* POSTFINDER POPUP */
.WebPostfinderGetPackstationsPopup {
position: absolute;
width: 600px;
left: 50%;
margin-left: -304px;
border: 4px solid #EEE;
padding: 0 10px;
background: #FFF;

-moz-box-shadow: 1px 2px 6px 1px rgba(38, 43, 55, 0.3);
-webkit-box-shadow: 1px 2px 6px 1px rgba(38, 43, 55, 0.3);
box-shadow: 1px 2px 6px 1px rgba(38, 43, 55, 0.3);
}
.WebPostfinderGetPackstationsPopup .PlentyWebshopPopupBottomButtonContainer {
padding: none;
}
.WebPostfinderGetPackstationsPopup .PlentyWebshopPopupBottomButtonContainer:after {
content: "";
display: table;
clear: both;
}
.PlentyWebshopPopupButtonRightContainer:first-child {
text-align: right;
}

/* header */
.PlentyWebshopPopupHeader {
color: #444444;
font-size: 18px;
font-weight: 400;
line-height: 26px;
border-bottom: 1px solid #000000;
padding: 7px 1px 3px;
}
/* content */
.WebPostfinderGetPackstationsPopup .PlentyWebshopPopupContent {
padding-top: 10px;
}

/* text */
.WebPostfinderTextBefore {
margin-bottom: 10px;
}

/* table */
.PlentyWebshopTable {
display: table;
}
.PlentyWebshopTableRow {
display: table-row;
}
.PlentyWebshopTableCell {
display: table-cell;
}
.WebPostfinderGetPackstationsPopup .PlentyWebshopTableCell {
border-bottom: 1px solid #eee;
padding: 3px 5px;
}
.PlentyWebshopTableHeaderRow > .PlentyWebshopTableCell {
background: #eee;
border-color: #000;
}
.PlentyWebshopTableCell:first-child {
vertical-align: middle;
}

/* scroll */
.PlentyWebshopTableWrapper {
max-height: 450px;
overflow-y: auto;
}

/* buttons */
.PlentyWebshopPopupButtonLeftContainer {
float: left;
width: 50%;
text-align: right;
}
.PlentyWebshopPopupButtonRightContainer {
float: right;
width: 50%;
}
.PlentyWebshopPopupButtonLeftContainer,
.PlentyWebshopPopupButtonRightContainer {
padding: 10px 0;
}
.PlentyWebshopPopupButtonLeftContainer > *,
.PlentyWebshopPopupButtonRightContainer > * {
margin: 0 5px;
}

Configuring CSS for the order process:

  1. Go to CMS » Web design » Layout » CSS » CSSOrder.

  2. Add the CSS code at the bottom of the editing window in the CSSOrder tab.

  3. Save the CSS.

CSS My account

For display in the My account area, the z index of the CSS needs to be customised.

EN CMS Web Design Editing Order Process DHL Postfinder 01 SI
Figure 45. customising the z index

Configuring the CSS for My account:

  1. Go to CMS » Web design » Layout » CSS » CSSMyAccount.

  2. Search for the line (search function of your browser): "z-index: 400010;".
    Important: Select the editor setting Text field in the upper right corner of the toolbar.

  3. Change the line to "z-index: 40010;".

  4. Save the CSS.

Texts

Customise the texts to display in the online store and the my account area.

EN CMS Web Design Editing Order Process DHL Postfinder 02 SI
Figure 46. customising texts, e.g. My Account » Submenu: Change delivery address

Configuring texts:

  1. Go to CMS » Web design » Order process » Checkout » Submenu: Delivery address.

  2. Customise the following texts:
    PostNummer: Enter PostNummer.
    Search Packstation / post office: Enter Search Packstation or post office.

  3. Save the settings.

  4. Go to CMS » Web design » My account » Submenu: Change delivery address.

  5. Customise the following texts:
    Additional address information: Enter Additional address information.
    PostNummer: Enter PostNummer.
    Search Packstation / post office: Enter Search Packstation or post office.

  6. Save the settings.

Error messages

Customise the error messages in the language packages.

EN CMS Web Design Editing Order Process DHL Postfinder 03 SI
Figure 47. customising error messages

Configuring error messages:

  1. Go to System » Client » Settings » Languages.

  2. Select the language (default: de) and the section Error messages.

  3. Click on the magnifying glass.
    → The error messages are displayed.

  4. Change the error messages no. 89 and no. 93 by changing PostIdent number to: PostNummer.

  5. Save the settings.

Menu: DHL Packstation

You now have to activate the function in the menu.

EN CMS Web Design Editing Order Process DHL Postfinder 04 SI
Figure 48. menu DHL Packstation

Activating DHL Packstation:

  1. Go to System » Client » Select client » Order process » DHL Packstation.

  2. Select Yes for the option Permit Packstation as the delivery address.

  3. Save the settings.

Function

If a customer wants to chose a Packstation or post office as the delivery address, they can now click on Send to a different address during the Invoice information step of the order process.

An empty address field with the Postfinder function is displayed:

EN CMS Web Design Editing Order Process DHL Postfinder 05 SI
Figure 49. DHL Postfinder during checkout

Here, enter the desired ZIP code or city.
It is possible to enter the first three or four digits of the zip code or a few letters of the city’s name only. If there are too many Packstations and/or post offices, a DHL error message is displayed and a more precise search entry is necessary (e.g. the full zip code).

EN CMS Web Design Editing Order Process DHL Postfinder 06 SI
Figure 50. display of the post offices and Packstations found

When the customer enters a zip code and clicks on Search Packstation or post office, the post offices and Packstations close to this zip code and information about the distance is displayed. The customer selects an option and clicks on Save. The post office or station selected is inserted as delivery address.

Tip: Title of pop-up window

You can customise the text for the title in the submenu DHL Postfinder. In the example, this title is Packstations and post offices in your area (Figure 50, top).

Order confirmation

CMS » Web design » Order process » Order confirmation

General information

The order confirmation is the last step of the order process.

Order confirmation: Editing the design

This section has already been preconfigured. However, you have a wide range of possibilities for changing it. The newly designed menu makes it easier than ever to carry out the corresponding settings. Furthermore, the newly designed menus give you the option to customize the CSS, among other things. Preconfigured CSS rules are already saved in some of the menus.

You can individually customize the following areas in the order confirmation tab:

Tracking

The tracking submenu contains the fields head and body. The information that you enter here makes up the head and body area of the order confirmation as well as the head and body area of all order confirmations that are specific to individual payment methods (of the following submenus).

Order confirmation

You can select a time for the order confirmation. The customer will automatically be forwarded to the My account area after this amount of time has elapsed. The option is found under Forwarding to my account. The value Never is selected by default. This means that the customer is only able to access the my account area by clicking on the link to it. You can select the time: 5, 10 or 20 seconds.

Payment methods

The same three fields are used for all of the following payment methods. These fields are Text in front of, Text behind and CSS. The field Text in front of should be used for entering text that you want to have displayed in front of the content of the payment method interface. Similarly, the text behind field should be used for entering notes that you want to have displayed behind the content of the payment method interface.

  • Order confirmation

  • PayPal Express
    Set JavaScript as the forwarding method for PayPal Express to ensure correct tracking. To do so, open the PayPal Express submenu. Here you will find the Forwarding method option.

  • PayPal

  • Sofortbanking

  • Moneybookers

  • Klarna

  • ClickAndBuy

  • Paymorrow

  • iclear

  • Heidelpay

  • ExperCash

  • EOS

  • Santander Consumer Bank (formerly CCBank)
    The Santander Consumer Bank submenu includes 3 fields that are not found for the other payment methods. These are the fields seller number, link content and error text. Since no interface to the Santander Consumer Bank is initially set up under System » Orders » Payment » Methods, you have to enter your seller number here instead. Enter the link text that you want to have displayed for the order confirmation in the Link content field. In the Error text field, enter a message that you want customers to see if the payment method is not available.
    For further information, refer to the Santander Consumer Bank page of the manual.

  • SixCardSaferpay

  • QPAY

  • MasterPayment

Template variables and template functions in the order confirmation

Click on Template variables and template functions to access an overview of all the template variables and functions that can be used in this area. If you copy a particular template variable or template function and paste it, e.g. into a note or the CSS, then the corresponding content will be displayed in the order confirmation.

Tip

Template variables such as $ItemAmountNetDot are used for displaying numerical values (prices). The last part of the template variable, here dot, indicates the separator that is used, e.g. before the amount of cents. You can use these template variables to customize how prices, shipping costs etc. are displayed in a particular language. For example, you could use a comma as the separator for monetary amounts in a German layout and you could use a period as the separator for an English layout.
However, if you would like to transmit data, then you have to use the dot variable as only these are suitable for the transfer of data.

Template variable for order referrer

The template variables $LastOrderReferrerID and $LastOrderReferrerName have been available since plentymarkets version 4.4. If a customer accesses your online store to e.g. complete their data, because they order something via an external market and this order has the parameter ReferrerID, their referrer will have the value from the original ReferrerID. This value is also saved in the template variable$ReferrerID. This referrer will also be used to generate the order. But then, once the order has been placed, the referrer will automatically be set to "Online store" ($ReferrerID= 1). If you would like to know the original referrer (before the order referrer was reset), then$ReferrerIDwill give you the wrong value because it was reset to 1. This is why the template variables $LastOrderReferrerID and $LastOrderReferrerName are available in the order confirmation templates. They have the value of the referrer from when the order was first placed.

List of all template variables in the order confirmation area

The following table explains the template variables for the order confirmation:

Table 38. template variables in the order confirmation
Template variable Explanation

{% Container_ItemViewBasketItemsList() %} to {% Container_ItemViewBasketItemsList2() %}

Displays the items that are in the shopping cart.

{% Container_ItemViewCrossSellingItemsList2() %} and {% Container_ItemViewCrossSellingItemsList3() %}

Show cross-selling items of the items that are in the shopping cart. You need to select an additional setting for this. Open the item layout$ArticleListCrossSelling2or$ArticleListCrossSelling3. Make sure that you selected the setting YES for $ArticleListCrossSelling2Item_FromBasket or $ArticleListCrossSelling3Item_FromBasket.

$Currency

Currency

$CustomerEmail

The customer’s email address

$CustomerID

Customer ID

$CustomerName

The customer’s name

$GtcTransSync

Order and item parameters
Traditional tracking code from Google Analytics

$GtcTransAsync

Order and item parameters, asynchronous code
The Google Analytics Asynchronous Tracking Code is an improved snippet of JavaScript that loads the ga.js tracking code in the background while other scripts and content continue loading on your website pages. The advantages include a faster overall page load time, among other things.

$ItemAmountGrossComma

Gross item value; decimal places are separated by a comma.

$ItemAmountGrossDot

Gross item value; decimal places are separated by a dot.

$ItemAmountNetComma

Net item value; decimal places are separated by a comma.

$ItemAmountNetDot

Net item value; decimal places are separated by a dot.

$ItemIDListComma

List of item IDs; a comma separates the individual IDs.

$ItemIDListPipe

List of item IDs; a vertical bar separates the individual IDs.

$ItemQuantity

Number of items

$IsNet

This template variable returns the value TRUE if the content of the shopping cart becomes a net order (depending on the settings in the system), and FALSE if it becomes a gross order.

$LastOrderReferrerID

The ID of the previous or original referrer

$LastOrderReferrerName

The name of the previous or original referrer

$OrderID

Order ID

$MethodOfPayment

Payment method

$MethodOfPaymentID

Payment method ID

$ReferrerID

Referrer ID

$ReferrerName

Referrer name

$ShippingCostsGrossComma

Gross shopping costs; decimal places are separated by a comma.

$ShippingCostsGrossDot

Gross shipping costs; decimal places are separated by a dot.

$ShippingCostsNetComma

Net shipping costs; decimal places are separated by a comma.

$ShippingCostsNetDot

Net shipping costs; decimal places are separated by a dot.

$ShippingCountry

Country of delivery

$ShippingCountryID

Country of delivery ID

$ShippingProfile

Shipping profile

$ShippingProfileID

Shipping profile ID

$ShippingProvider

Shipping service provider

$ShippingProviderID

Shipping service provider ID

$TotalAmountGrossComma

Gross total amount; decimal places are separated by a comma.

$TotalAmountGrossDot

Gross total amount; decimal places are separated by a dot.

$TotalAmountNetComma

Net total amount; decimal places are separated by a comma.

$TotalAmountNetDot

Net total amount; decimal places are separated by a dot.

5.5.11. My account

CMS » Web design » My account

Content of this chapter

This chapter provides you with detailed information about customizing the My account area of the online store.

The my account area is only accessible to registered store customers. Here, customers can view all of the purchases that they made and all of the information that they entered, e.g. their contact information.

Go to CMS » Web design » My account to design the frontend. Various submenus allow you to precisely configure each area.

Basic settings

The System » Client » Select client » My Account » Settings menu contains several basic settings that are relevant to the my account area of your online store. For example, you can activate or deactivate a few optional account areas.

My account: Editing the design

This section has already been preconfigured. However, you have a wide range of possibilities for changing it.

CSS modifications

You can modify the CSS. However, preconfigured CSS rules are already saved in plentymarkets. You can find them by going to CMS » Web design, opening the Template folder and then opening the CSS folder. The CSS rules for the My account area are saved under CSSMyAccount.

You can individually customize the following submenus within the My account tab:

  • Login

  • My account

  • Customer data

  • Personal data

  • Contact information

  • Bank information

  • Change password

  • Newsletter

  • Order history

  • Order overview

  • Change the delivery address

  • Change shipping method

  • Change payment method

  • Change item

  • Return

  • Subscription history

  • Subscription overview

  • Change subscription

  • Change item

  • Watchlist

  • Wish list

  • Tickets

  • Coupons

  • Time account

  • Documents

  • Data export

Some fields and settings appear in several of the menus and submenus listed above. These recurring fields and settings will be explained below. Individual functions are found in the explanations of the corresponding menu.

Recurring settings

Settings that appear in several of the my account submenus will be explained here. You may already be familiar with some of these settings, as they also appear in the Order process area.

Table 39. explanations of the recurring settings in the submenus
Setting Explanation

Title

The menu heading as it should be displayed to customers in the online store.

Text in front of & text behind

Enter notes or welcome texts that are appropriate for the menu.
These two fields appear before and after all of the other menu items. In other words, Text in front of appears directly below the title and Text behind appears after all of the other menu items.

Position (main menu item)

Determine which order the main menus (first level menus) should be displayed in by selecting the position number from the drop-down list.

Position (submenu)

Container 1: Is displayed on the left in the order overview.
Container 2: Is displayed on the right in the order overview.
Use position numbers to specify the order.
For example, if Container 1 was selected for all elements and consecutive numbers were used, then the elements will appear one underneath the other on the left side. They will be displayed in the order specified by the position number.
Use both containers to position the elements next to each other.

Position (item submenu)

Position the item submenu on the bottom or top.
Top = Above the rest of the submenus in this area
Bottom = Below these submenus

Display

Directly show = The entire content of a menu item will be displayed in the online store. The menu is already expanded.
Show after click = Only the title of the menu will be displayed. All of the information will be displayed after the customer clicks on the title.

Show details

The text that you enter here is linked in the online store and directs the customers to a detailed layout.

No item found

The note that you enter here will be displayed to the customer, e.g. if there are no items on their watchlist or wish list.

Individual settings of my account submenus

The settings in the submenus were given self-explanatory names. The text that you enter into the text fields will be displayed to your customers in the online store.

Table 40. explanations of the settings for the submenus
Menu item Explanation

CSS My account

In this section, you can use CSS to design the layout of customer accounts. Standard CSS formatting can be used to set up general CSS rules for customer accounts. The entire CSS code for the My account area can also be entered here. Alternatively, only enter the portion of the code that is valid for all areas. Then you will have to enter information that is specific to individual areas in the CSS field for that area.

Login

Customers will see the information that you enter here when they access the online store and click on the My account tab. CSS formatting is entered by default. CSS can be used to change the way that information is arranged in this menu.
Password strength
6 characters are sufficient for the store password. The security level in the store is lower than in the admin area. This also means that a simple combination of letters and numbers is sufficient for the login password. For further information, refer to the Creating a user page of the manual.

My account

The customer lands here after entering their login details and clicking on Log in. CSS formatting is entered by default. You can save a note above this button (Text in front of). Below that, the customer will see different submenus relating to their account. These are the first level submenus of the my account area, e.g. the customer data and order history. CSS can be used to change the way that information is arranged.

Customer data

CSS formatting is entered by default. The data that is entered here comes e.g. from the information that the customer entered during previous purchases. The customer data is grouped in several submenus. Under personal data, the customer sees the invoice address that they entered. Under contact information, the customer sees the email address that they used to log in. Customers can make changes to this data by clicking on Change.
A new window opens up when a customer clicks on the Change button. This window is edited in the customer data submenus. The Delivery address window is edited in the corresponding order history submenu.

Newsletter

The title for the Newsletter area, the position and the way the newsletter area should be displayed.

Order history

Customers can use the fields Order ID and Select time period to search for an order within their own account. The fields Order date, Recipient, Show details, Status and Estimated shipping will be individually displayed in the history of each order. * Order overview
The order overview is the detailed layout of a specific order with all of the data that belongs to it. * Delivery address
In this submenu, configure and name the entry fields that the customer will see. These entry fields will also be used for the customer data. * Shipping method
In this submenu, configure and name the entry fields that the customer will see regarding the shipping method. * Payment method
In this submenu, configure and name the entry fields that the customer will see regarding the payment method. * Item
In this submenu, configure and name the entry fields that the customer will see regarding the items.

  • Return
    Once the customer has paid for an order, it has been shipped and is in status 7, then the button send back item will appear in the customer account. If the customer clicks on this button, then a menu will open up. This menu is configured here. The reason for return field is a drop-down list. Save the reasons that are available for the customer to select by going to System » Orders » Order types » Return.

Subscription history

Customers can use the fields Order number and Select time period to search for a subscription within their own account. The fields Recipient, First shipment etc. will be displayed for every subscription. By clicking on Show details, the customer will see all of the information about a specific subscription.
Subscription overview
The subscription overview is the detailed layout of a specific subscription. The position and title of the individual submenus can be changed here, as well as the shipping method and items of this area. The actual entry fields are configured in the submenus of the order overview.

Watchlist

The watchlist function is activated by going to System » Client » Select client » My Account » Settings. The watchlist function allows those customers who have an account to save a list of items in the store that they want to remember or buy at a later point in time. An item is only removed from the watchlist if it is deleted or moved to the shopping cart.
Watchlist button
If the watchlist function is not activated, then the watchlist button should also be removed from the store layout. Go to CMS » Web design » Folder: Layout and select ItemViewSingleItem from the ItemView templates. Delete the corresponding code.

Wish list

The wish list function is activated by going to System » Client » Select client » My Account » Settings. The wish list function allows those customers who have an account to save a list of items in the store that they may want to buy at a later point in time, ask for as gifts or remember for another reason. A wish list is usually created in order to be shown to other people. An item is only removed from the wish list if it is deleted or moved to the shopping cart.
Wish list button
If the wish list function is not activated, then the wish list button should also be removed from the store layout. Go to CMS » Web design » Folder: Layout and select ItemViewSingleItem from the ItemView templates. Delete the corresponding code.

Tickets

This menu item is only displayed if the ticket system was booked as an add-on. The plentymarkets module "Ticket system STARTER" can be ordered free of charge.
In the menu, configure and name the entry fields that are visible to your customers in the Tickets area.

Coupons

The coupon function is activated by going to System » Client » Select client » My Account » Settings.

Documents

If documents were uploaded under CMS » Documents and customers were given the right to view these documents, then customers will be able to see these documents here.

Data export

This function is used, e.g. in order to provide a list of items to corporate customers. Go to Data » Dynamic export and configure a new data format. Click on the data format’s Filter tab and place a check mark in front of the words Export for customer class. This will activate the filter. Under value, select the customer class that the data format should be available for. If a customer belongs to the customer class that the data was made available for, then they will see the corresponding data in the data export menu of their customer account.

jQuery

jQuery functions are integrated in this area. For further information about working with or expanding these functions, refer to the jQuery page of the manual.

5.5.12. Buttons

CMS » Web design » Buttons

General information about buttons

You have 3 possibilities to configure your store buttons. The first option is to use the Button editor and choose from a wide variety of button backgrounds. A text for the button is already available or you can enter your own text. Another option is to create an individual button. If you choose this option, then you will need to upload a button. The third option is to use the HTML button. This option allows you to style your button directly in the CSS.

The options Button editor and Individual button are described in further detail below. If you want to use the option HTML button, you will need to select it here and you will need HTML skills to adjust the CSS.

Configuring buttons with the button editor

In this menu, basic button settings are specified when working with the button editor. Here you configure the characteristics of the text and the background.

EN CMS Web design Edit design Buttons 01 SI
Figure 51. configuration of the add to shopping cart button

Configuring buttons:

  1. Go to CMS » Web design » Buttons » Tab: Settings.

  2. Click on the plus icon in front of the button that you would like to configure.

  3. Pay attention to the explanations given in Table 41 and carry out the settings in the Configuration tab as desired.

  4. Save the settings.

The following table explains the settings in the Configuration tab for the Button editor:

Table 41. settings in the Configuration tab
Setting Explanation

Button layout

Choose between the following options:
Button editor = preconfigured backgrounds and button texts.
HTML button = possibility to use HTML code to configure a button in the CSS.
The rest of the settings described in this table are only visible if you choose the Button editor.

Preview

A preview of the button as it will later be seen in the online store.

Use default name

Check mark = The default name will be used. You can not enter your own button text.

Text

Enter your own button text. In this case no check mark may be placed for the option Use default name.

Text alignment

Select Left, Centered or Right to align the text in the button.

Font size

Select a size between 8 and 18 pixels.

Font color

Enter a hexadecimal value or a color.

Font color mouseover

Enter a hexadecimal value or a color that the text should be seen in when the mouse pointer is on the button.

Page margins

How far the text is away from the edge of the button. The setting only goes into effect for the alignments Left and Right.

Button size

Select between S, M, L and XL.

Button background

Select a background for the button from one of the tabs. In the uploaded tab you will see the button backgrounds that you uploaded.

Reset

Resets all settings to default settings.

Setting a font color:

  1. Click into the Font color or Font color mouseover field.
    → A color selection will open up.

  2. Select a color from the outer circle.

  3. Click into the color square inside the circle and choose a color.
    → The color is shown in the field above the circle.

  4. Click once outside the circle to apply the color.
    → The color selection will close.

  5. Save the settings.

Button texts and legal aspects

Pay attention to legal aspects when choosing a name for a button. According to German law e.g. the order button needs to include a text that clearly states that the customer is purchasing something that is subject to charge. The German requirement is met in plentymarkets. Therefore the German default text is Zahlungspflichtig bestellen.

Make sure you comply with the legal requirements of the country you are based in.

Template functions and template variables

By default, each plentymarkets system includes the basic buttons that are necessary for an online store. You need to use template functions to insert some of the buttons into the design. The template functions (Table 42) are found in the CMS » Web design menu. General examples and descriptions about template functions and template variables can be found in the CMS syntax section of the manual.

The following table lists the template functions that are available for buttons:

Table 42. available template functions for buttons in the CMS menu

Button

Template function

Template functions
and template variables section

Add to shopping cart

ButtonAddBasket1(string$_buttonValue) : string

Global » ItemView (miscellaneous)

Add to shopping cart (popup)

ButtonAddBasketOverlay(string$_buttonValue) : string

Global » ItemView (miscellaneous)

Delete (shopping cart)

ButtonDeleteBasketItem(string$_buttonValue) : void

Global » ItemView » ItemViewBasketPreviewList
Basket » BasketItemsList

Login

Button_CustomerRegistration(string$_buttonValue) : void

Misc » MiscCustomerRegistrationForm

Open shopping cart

ButtonOpenBasket(string$_buttonValue) : string

Global » PageDesignFunctions

Go to checkout

ButtonProceedOrder(string$_buttonValue) : void

Global » BasketFunctions

Continue shopping

ButtonProceedShopping(string$_buttonValue) : void

Global » BasketFunctions

Individual shopping cart (individual buttons)

Save shopping cart (after changes)

ButtonBasketSave(string$_buttonValue) : void

Basket » BasketItemsList

Enter invoice address in the shopping cart

Button_SaveBasketCustomerInvoiceAddress(string$_buttonValue) : void

Basket » BasketCustomerInvoiceAddress

Individual button

In this section, you can upload the buttons that you created yourself. The file formats PNG, GIF or JPG are accepted. The individual buttons can not be edited further in plentymarkets. The text, colors etc. have to be included in the picture exactly the way you want them to be displayed.

Uploading individual buttons:

  1. Create a button or have someone create it for you and then save the file on your computer’s hard drive.

  2. Go to CMS » Web design » Buttons » Tab: Settings.

  3. Open the button’s submenu.

  4. Click on the Individual button tab.

  5. Click on Browse…​.

  6. Select the saved button file from your hard drive.

  7. Click on open.

  8. Click on the save icon to upload the button.

A button preview will be shown when you reload the menu. In addition, the note Individual button is active! will be shown in the Configuration tab.

Group functions

Use the Group functions menu to apply a particular layout to all of the buttons for a certain language. With this function, for example, you simultaneously change the text alignment, font size, font color, page margins and background graphic for all buttons of an online store design in one specific language. And you can do this with just a few clicks of the mouse.

  1. Go to CMS » Web design » Buttons » Tab: Settings » Group functions.

  2. Pay attention to the explanations given in Table 41 and select the settings as desired.

  3. Save the settings.

EN CMS Web design Edit design Buttons 02 SI
Figure 52. group functions
Buttons with customized backgrounds

Upload your own background graphics for buttons in the Individual background tab. These will then be displayed under Background list.

Afterwards, select the background in a button’s Configuration tab.

Make sure that both the background image and the individual button fields have the correct dimensions.

EN CMS Web design Edit design Buttons 03 SI
Figure 53. individual background menu

Figure 54 shows an example for a background image and has the dimensions 634 x 63 pixels. The graphic’s individual button fields correspond to the possibilities for settings under Button size in the editing window (Figure 51). The arrangement in Figure 54, however, is exactly the opposite of the selection in the menu. The top line of buttons defines the normal color of the button. The lower line of buttons defines the mouseover color of the button. This is the color that will be shown when you hover your mouse over the button. PNG is the data format that is best suited for creating buttons. JPG and GIF are also possible.

The button fields have the following dimensions:

Table 43. size of the button fields
Button field Width Height

XL

245 pixels

31 pixels

L

172 pixels

31 pixels

M

134 pixels

31 pixels

S

80 pixels

31 pixels

The distance between each field is 1 pixel.

XL                                                                    L                                                M                                  S

DE Layout Buttons 04
Figure 54. example for a background graphic

If you want to use a button with a customised background, then upload the background as described below.

Uploading a background graphic:

  1. Create a background graphic or have someone create it for you and then save the file on your computer’s hard drive.

  2. Go to CMS » Web design » Buttons » Tab: Individual background.

  3. Click on Browse…​.

  4. Select the saved background file from your hard drive.

  5. Click on open.

  6. Click on the save icon to upload the background.
    → The button background will be displayed as a preview in the uploaded tab.

Once you have uploaded a background, you need to select it in the button. To do so, proceed as follows.

Configuring buttons that have an uploaded background graphic:

  1. Go to CMS » Web design » Buttons.

  2. Open the button’s submenu.

  3. Click on the Configuration tab and select the background from the Button background option. The background is listed in the uploaded tab.

  4. Pay attention to the explanations given in Table 41 and carry out further settings as desired.

  5. Save the settings.

Complying with the shopping cart solution

CMS » Web design » Order process » Checkout » Submenu: Order overview

Shopping cart solution

New laws in Germany require online stores to have a certain order and structure. Compliance with these requirements is referred to as the so called shopping cart solution (or in Germany often referred to as the button solution). The main aim of these regulations is to protect consumers from unclear contracts (relating to subscriptions and costs). This results in new requirements for the online store layout. This is especially true for the layout of the order overview at the end of the entire checkout process. Businesses now have to show customers all essential elements of a contract directly before the order is placed. This information has to be presented in a clear and understandable fashion. The essential elements are the product or the service itself, the total price including all taxes and further price elements, the delivery or shipping costs and if necessary the duration of the contract. In Germany, § 312 g BGB and Article 246 EGBGB form the legal basis of the shopping cart solution. (BGB = German Civil Code and EGBGB = Introductory Act to the Civil Code (IACC))

Which information has to be additionally displayed now?

You have to give the following information to your customers:

  • The essential characteristics of the product or service

  • The minimum duration of the contract, assuming that it includes permanent or recurring goods and services

  • The total price of the goods and or services including all additional price elements as well as all taxes that are paid by the enterprise. If no specific price is displayed, then the basis for calculating the price has to be shown. This way the consumer can check the price.

  • If applicable, delivery and shipping costs as well as a note indicating possible additional taxes or costs that are not paid by the enterprise or are not indicated on the invoice. (requirements translated by plentymarkets)

How and when does this information have to be displayed?

You have to present your customers with the information mentioned above directly before they place the actual order. In this case, "directly before" refers both to the temporal aspect of shopping as well as to the spatial aspect. The information has to be given in a clear and understandable way and it has to be emphasized.

In other words, a distinction has to be made between this information and the other text and layout elements of the online store.

Further information in German can be found here: Händlerbund.

Adapting existing systems

This section describes how the plentymarkets standard template can be adapted so that it complies with the new legal requirements. The first image gives a visual overview of the old and new order overview.

EN alt+neu SI
Figure 55. comparison of the old (left) and the new (right) order overview

The letters refer to the same elements in both the old and new order overview. The information that was previously entered by the customer is now found above the item overview. The item overview itself is highlighted in gray. Furthermore, the item overview is directly connected to the purchase button. The button itself is highlighted in a different color (here red).

Field: Text after totals

In the Text after totals field, you can enter information that is important for the contract (any additional costs that are not part of the invoice). The text will be displayed below the total. If you use the payment method cash on delivery, then you should save the following note within this field. Such a note is necessary since customers will have to pay an additional fee if they choose this payment method. Here is the IF/ELSE query, which you may still need to customize further:

{% if $PaymentMethodID==1 %}
<div><b>The shipping service provider will collect an additional fee of 2.00 EUR when the package is delivered.</b></div>
{% endif %}
Additional fields

The fields Note for EU deliveries and Note for export shipments allow you to notify the consumer about possible additional costs. The texts saved in these fields are only displayed if the condition (EU or not) applies to the delivery country. They are displayed below the order total.

Adapting the order overview:

  1. Go to CMS » Web design » Editing the web design » Order process » Checkout » Submenu: Order overview.

  2. Use the position field to structure the elements of the order overview, such as the terms and conditions, the invoice address, items etc., in the order you wish. Make sure that the item container is displayed last (position 9). You can also simply number the containers in ascending order from 1 to 9. (This is the order that has been used in the image above and for the CSS that is displayed below.)

  3. Next click into the CSS field of the order overview and add the following CSS code at the end of the already existing CSS code.

  4. Save the settings.

CSS modifications necessary?

You may have to customize the CSS depending on your individual settings and your online store’s design.

/* FIX SUM BOX */

#PlentyWebOrderOverviewOrderSumBox {
display: table;
}
#PlentyWebOrderOverviewOrderSumBox > div {
display: table-row;
}
#PlentyWebOrderOverviewOrderSumBox > div > span {
display: table-cell;
vertical-align: top;
padding: 5px 0;
border-bottom: 1px solid #CCCCCC;
}
#PlentyWebOrderOverviewOrderSumBox > div > span.PlentyCurrencyContainer {
padding-left: 30px;
}

/* SHOPPING CART SOLUTION */

/* general */
.PlentyWebClear {
clear: both;
}

/* therms/conditions & privacy */
#PlentyWebOrderOverviewAGBPrivacyContainer {
margin-bottom: 0;
}

/* SHIPPING DETAILS */

/* containers */
#PlentyWebOrderOverviewInvoiceContainer,
#PlentyWebOrderOverviewShippingContainer,
#PlentyWebOrderOverviewShippingMethodContainer,
#PlentyWebOrderOverviewPaymentMethodContainer,
#PlentyWebOrderOverviewSchedulerContainer,
#PlentyWebOrderOverviewAGBPrivacyContainer,
#PlentyWebOrderOverviewReferenceContainer,
#PlentyWebOrderOverviewNotesContainer {
border: 1px solid;
border-color: #EEEEEE !important;
margin: 16px 0 0;
min-height: 140px;
}
#PlentyWebOrderOverviewReferenceContainer,
#PlentyWebOrderOverviewNotesContainer {
min-height: 1px;
height: auto;
}
#PlentyWebOrderOverviewAGBPrivacyContainer {
height: auto;
min-height: 0;
}
/* containers half width */
#PlentyWebOrderOverviewInvoiceContainer,
#PlentyWebOrderOverviewShippingContainer,
#PlentyWebOrderOverviewShippingMethodContainer,
#PlentyWebOrderOverviewPaymentMethodContainer,
#PlentyWebOrderOverviewSchedulerContainer {
width: 46%;
}
/* containers right */
#PlentyWebOrderOverviewShippingContainer,
#PlentyWebOrderOverviewShippingMethodContainer {
float: right;
clear: right;
}
/* individual style */
#PlentyWebOrderOverviewPaymentMethodContainer {
margin-bottom: 16px;
}
#PlentyWebOrderOverviewAGBPrivacyContainer > span > h3 {
font-size: 14px;
font-weight: bold;
}
/* header */
#PlentyWebOrderOverviewInvoiceContainer > span,
#PlentyWebOrderOverviewShippingContainer > span,
#PlentyWebOrderOverviewShippingMethodContainer > span,
#PlentyWebOrderOverviewPaymentMethodContainer > span,
#PlentyWebOrderOverviewSchedulerContainer > span,
#PlentyWebOrderOverviewAGBPrivacyContainer > span,
.PlentyWebItemContainerHeader {
display: block;
background: #F3F3F3;
border-bottom: 1px solid #888888;
color: #444444;
font-size: 14px;
line-height: 17px;
padding: 0;
}
/* header label */
.PlentyWebItemContainerHeaderTitle,
#PlentyWebOrderOverviewAGBandWithdrawal > h3 {
display: inline-block;
padding: 10px 10px 7px;
font-size: 16px;
font-weight: 400;
line-height: 18px;
}
/* button */
.PlentyWebButtonsRightContainer {
display: block !important; /*to overwrite element style*/
float: right;
margin-right: 5px;
padding-bottom: 5px;
position: relative;
top: 1px;
}
/* hide old button */
.PlentyWebOrderOverviewChangeContainerBottom {
display: none;
}
/* content container */
#PlentyWebOrderOverviewInvoiceDataContainer,
#PlentyWebOrderOverviewShippingDataContainer,
#PlentyWebOrderOverviewShippingMethodDataContainer,
#PlentyWebOrderOverviewPaymentMethodDataContainer,
#PlentyWebOrderOverviewSchedulerDataContainer {
margin-top: 20px;
}
/* textarea / input */
#PlentyWebOrderOverviewNotesTextareaBox,
#PlentyWebOrderOverviewReferenceInputBox {
padding: 5px 10px;
}
#PlentyWebOrderOverviewNotesTextareaContainer,
#PlentyWebOrderOverviewReferenceInputContainer {
display: block;
margin: 3px 4px;
}
#PlentyWebOrderOverviewNotesTextareaContainer > textarea,
#PlentyWebOrderOverviewReferenceInputContainer > input {
height: 100px;
width: 100%;
margin-left: -4px;
padding: 2px 3px;
font-family: inherit;
font-size: inherit;
line-height: 16px;
}
#PlentyWebOrderOverviewNotesTextareaContainer > textarea {
height: 100px;
resize: vertical !important;
}

/* ITEMS CONTAINER */

/* background color all container */
#PlentyWebOrderOverviewItemsContainer {
background: #F4F4F4;
}

/* items container */
#PlentyWebOrderOverviewItemsContainer {
min-height: 0;
width: auto;
float: none;
clear: both;
border: 1px solid #CCCCCC;
margin-top: 16px;
padding: 0 10px 10px;
}
/* header */
#PlentyWebOrderOverviewItemsTop {
border: none;
border-bottom: 1px solid #444444;
background: #CCCCCC;
margin: 0 -10px 10px;
padding: 0;
}
/* header label */
#PlentyWebOrderOverviewItems {
display: inline-block;
padding: 10px 10px 7px;
margin-top: 0;
font-size: 16px;
font-weight: bold;
line-height: 18px;
}
/* header button */
#PlentyWebOrderOverviewItemsTop > #PlentyWebOrderOverviewItemsChangeContainer {
display: block;
float: right;
margin-right: 5px;
padding-bottom: 5px;
position: relative;
top: 1px;
}
/* items container */
#PlentyWebOrderOverviewItemsBox {
margin-bottom: 0;
}
/* sum box */
#PlentyWebOrderOverviewOrderSumBox {
margin: 0 0 0 50%;
width: 50%;
padding-bottom: 1px;
text-align: left;
}
/* text after sum */
#PlentyWebOrderOverviewNoticeTotals,
#PlentyWebOrderOverviewNoticeNonEUDelivery,
#PlentyWebOrderOverviewNoticeEUDelivery {
margin: 0 0 0 50%;
}
/* button container */
#PlentyWebOrderOverviewSubmitContainer {
border: none;
background: none;
margin-top: 0;
padding: 8px 0 0;
}

/* ITEMS LIST */

/* main */
#PlentyWebOrderOverviewItemsBox {
border: none;
border-bottom: 1px solid #cccccc;
}
/* header */
#PlentyWebOrderOverviewItemsHeader {
background-color: transparent;
}
/* header cells */
.ItemsHeadline {
border-bottom-color: #888888;
}
/* list container */
#PlentyWebOrderOverviewItemsMain .ItemsRow > div {
border-bottom-color: #cccccc;
}

/* SUM BOX */

/* container */
#PlentyWebOrderOverviewOrderSumBox {
}
/* column width */
#PlentyWebOrderOverviewOrderSumBox > div > span:first-child {
width: 70%;
}
/* price sum */
#PlentyWebOrderTotalAmount {
font-size: 19px;
}
/* note vat */
#PlentyWebOrderOverviewOrderSumBox .PlentyDataAdditional {
font-size: 0.48em; /*.7*/
font-weight: normal;
}
/* note vat scheduler */
#PlentyTotalAmountSubscriptionTitle .PlentyDataAdditional {
font-size: 0.7em;
}
/* line */
#PlentyWebOrderOverviewOrderSumBox > div > span {
border-bottom-color: #E4E4E4;
}
/* no line */
#PlentyWebOrderOverviewOrderSumBox > div#PlentyWebOrderOverviewGoodsValueGross > span,
#PlentyWebOrderOverviewOrderSumBox > div#PlentyWebOrderOverviewShippingCostsGross > span {
border-bottom: none;
}
/* main line */
#PlentyWebOrderOverviewOrderSumBox > div#PlentyWebOrderTotalAmount > span {
border-color: #000000;
}

/* TEXT AFTER SUM BOX */

#PlentyWebOrderOverviewNoticeTotals > div,
#PlentyWebOrderOverviewNoticeNonEUDelivery > div,
#PlentyWebOrderOverviewNoticeEUDelivery > div {
font-size: 0.7em;
line-height: 1.6em;
}
#PlentyWebOrderOverviewNoticeTotals > div:first-child,
#PlentyWebOrderOverviewNoticeNonEUDelivery > div:first-child,
#PlentyWebOrderOverviewNoticeEUDelivery > div:first-child {
margin-top: 8px;
}

5.5.13. CSS

CMS » Web design » Layout » CSS

General information

These chapters provide you with basic information about CSS. You will learn what CSS means and how to use CSS to design your online store. Furthermore, you will learn how CSS is structured in plentymarkets and where the specifications are saved for the different areas.

CSS (Cascading Style Sheets) denotes a markup language for structured documents. While HTML lets you create the pure content, CSS offers you more possibilities to influence the format and structure of this content, as well as to influence the design of a website.

CSS in plentymarkets

General CSS specifications are saved in plentymarkets within CSSBase. These general specifications apply to every area of the CSS. The menu items below CSSBase only contain exceptions or additions to the specifications saved in CSSBase. You can save CSS rules for each area of the online store, e.g. for the order process or the My account area. You can also use template functions to include other areas in the CSS (section 4). The particular combination generates one CSS file for each area, i.e. there is only one URL per area.

Areas in the CMS

Go to CMS » Web design » Layout » CSS to find the CSS formatting. The CSS is saved in several different menu items, which are described below.

EN CMS Web Design Editing CSS01 SI
Figure 56. folder structure within the CSS menu
Unused

The Unused folder contains CSS areas that were not configured or that were left blank for a different reason. If the CSS is completely deleted from a menu item, then it will be moved into this folder.

CSSBase

The CSSBase contains the general CSS specifications for the entire online store. These specifications are always loaded.

CSSContent

CSS formatting for categories with the template PageDesignContent as well as for the item layouts and the item search in the online store.

CSSOrder

CSS formatting for the order process.

CSSMyAccount

CSS formatting for the My account area.

CSSForum

CSS formatting for the forum.

CSSBlog

CSS formatting for the blog.

Application

Use the CSS() template function to insert the CSS into a page design. By default, both the CSSBase and the CSS for the particular area are loaded into one CSS file. Use the following function to add further areas to the CSS file:

{% CSS([Content, Forum]) %}

In this example, the Content area is expanded to also include the CSS specifications for the Forum. The specifications that were saved for both areas will be used. The CSS area that should be expanded needs to be listed in such a template function. In this example, this is the CSSContent area. The obligatory CSSBase area does not need to be included in the code since it is always loaded automatically.

CMS » Image gallery

6.1. General information

Use the image gallery to upload images that should be displayed in your online store. These can be saved there in folders. In order to manage your images in a structured way, you can create as many folders as you would like along with the initial (default) folder.

An image has to be available as an Internet resource before it can be displayed in the store’s layout, e.g. as a logo. Additionally, the corresponding image has to be uploaded via FTP or it has to be uploaded into the image gallery.

6.2. Managing images

The following section explains how you can upload, edit or delete images in the image gallery.

CMS BilderGalerie 01 SI
Figure 57. image gallery menu

Uploading an image:

  1. Go to CMS » Image gallery.

  2. Click on the blue folder that you want to upload the image into or use the new folder button to create a new folder.

  3. Click on the upload files icon and select the images from where you saved them on your computer.

  4. Select the desired images and click on Open. As an alternative, you can also drag & drop the images into the folder.
    → The images will be uploaded.

Editing images:

  1. Use your mouse to right-click on the desired image.

  2. Click on the preview icon to see the image’s characteristics, e.g. the URL.
    Click on the delete icon to delete the image from the gallery.
    Click on the open icon to view a larger version of the image.

  3. Save the settings.

CMS BilderGalerie 03 SI
Figure 58. editing images

6.3. Managing folders

Proceed as follows to create new folders and manage existing ones. Select the names and the structure of your folders carefully. This will help you keep track of your images, even if there are a lot of them.

Creating a new folder:

  1. Go to CMS » Image gallery.

  2. Click on the New folder button in the lower left corner.
    → A new window will open.

  3. If you want the new folder to be a subfolder that is located within an existing folder, then select the existing folder. If you want to create a new main folder, then simply enter the name of the new folder without clicking on any of the existing folders.

  4. Enter a name for the new folder into the text field and then click on OK to create the folder.
    → After you have created the new folder, it will immediately become available in the overview of folders. If the folder was not sorted correctly, then update the image gallery (reload the page).

Synchronizing folders:

  1. Go to CMS » Image gallery.

  2. Select the folder in question from the folder overview.

  3. Click on the synchronize folders button and update the image gallery afterwards (reload).

This option serves to synchronize the images that were loaded into already existing folders via FTP. In order for these folders to be available in your image gallery, you have to carry out the following function. Furthermore, synchronization is necessary if the images are not correctly displayed, i.e. if they are shown without a preview image. If there are several images in the folder, then you may have to carry out this process multiple times in order to synchronize all of the images.

Deleting a folder:

  1. Use your mouse to right-click on the desired folder.

  2. Click on the delete icon to delete the folder.

CMS BilderGalerie 02 SI
Figure 59. deleting a folder

7. Social bookmarks

Social bookmarks are an interesting tool for promoting your online store. There are various Internet applications that can be used to save personal favourites (bookmarks). These favourites are then available for other visitors. Visitors can view favourites and call up the corresponding links.

7.1. Integrating social bookmarks into your online store

Proceed as described below to insert links to important social bookmark pages into your online store.

Integrating social bookmarks into your online store:

  1. Go to CMS » Web design » Layout.

  2. Open the desired template, e.g. ItemViewSingleItem.

  3. Copy the HTML code below.

  4. Paste the HTML code into the template.

  5. Save the settings.

<a href="http://www.webnews.com" onclick="bookThis('webnews'); return false;"><img class="pmManScreenshot qkfbpwxuohrijmdybyar" onmouseout="showBookTarget('')" onmouseover="showBookTarget('Webnews')" src="/images/icons/social_bookmarking/book_webnews.gif" title="Webnews" height="18" border="0" width="18"></a>
<a href="http://www.folkd.com" onclick="bookThis('folkd'); return false;"><img class="pmManScreenshot qkfbpwxuohrijmdybyar" onmouseout="showBookTarget('')" onmouseover="showBookTarget('Folkd')" src="/images/icons/social_bookmarking/book_folkd.gif" title="Folkd" height="18" border="0" width="18"></a>
<a href="http://delicious.com" onclick="bookThis('delicious'); return false;"><img class="pmManScreenshot qkfbpwxuohrijmdybyar" onmouseout="showBookTarget('')" onmouseover="showBookTarget('delicious')" src="/images/icons/social_bookmarking/book_delicious.gif" title="del.icio.us" height="18" border="0" width="18"></a>
<a href="http://linkarena.com" onclick="bookThis('linkarena'); return false;"><img class="pmManScreenshot qkfbpwxuohrijmdybyar" onmouseout="showBookTarget('')" onmouseover="showBookTarget('Linkarena')" src="/images/icons/social_bookmarking/book_linkarena.gif" title="Linkarena" height="18" border="0" width="18"></a>
<a href="http://www.google.com" onclick="bookThis('google'); return false;"><img class="pmManScreenshot qkfbpwxuohrijmdybyar" onmouseout="showBookTarget('')" onmouseover="showBookTarget('Google')" src="/images/icons/social_bookmarking/book_google.gif" title="Google" height="18" border="0" width="18"></a>

8. Best practice

8.1. Content of this chapter

This chapter describes important processes that take place within the CMS menu. You will learn what to pay attention to when configuring this area and where connections to other menus can be found. This will give you a better understanding of the entire system as a whole, since you will know what to pay attention to in order to achieve the best results. This chapter supplements the basic descriptions of settings and functions that can be found elsewhere.

Workflows

The procedures described in this chapter are useful, tried and true possibilities for working with plentymarkets. However, there are generally alternatives to the described processes. The individual configuration depends on additional factors, such as the size of your online store and the tools that you use.

8.2. SSL encryption

plentymarkets » Layout

8.2.1. The benefits of SSL encryption

If having a secure connection is important to you, then you will surely be interested in using SSL encryption for your website. Pay attention to the following information and carry out the steps completely. Make sure that your entire website is correctly encrypted to avoid causing confusion among visitors to your website or online store.

This page teaches you how to correctly save content such as images, CSS files or JavaScript files in your design.

Preparing the design for SSL

We recommend that you prepare your design for SSL, even if you have not ordered an SSL certificate yet or you have not started working with SSL.

8.2.2. Configuration

The following examples show you what to pay attention to when configuring the content of your online store and contain useful tips.

Images

Insert images into the design with relative URLs. Avoid using absolute URLs.

Example images

Recommended:
<img src="/images/gallery/Bild_01.png" />

CSS files

The same applies to inserting CSS files. Relative URLs should also be used here.

Example CSS file

*Not recommended*:
<link rel="stylesheet" type="text/css" href="https://www.meinshop.de/layout/style.css" />

*Recommended*:
<link rel="stylesheet" type="text/css" href="/layout/style.css" />

If you need to insert external CSS files, then leave out http or https. This will allow the browser to decide how the content should be loaded. The following example relates to the service Google Fonts.

Example external CSS file

*Not recommended*:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine" />

*Recommended*:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Tangerine" />

8.2.3. Redirect

In order to switch to SSL encryption, it must be possible for all old HTTP URLs to redirect to the new HTTPS equivalents via 301 redirect. It also has to be possible to consistently switch the canonical targets, internal links and sitemap to the new protocol. This means that customers who access an old URL - http://your-store.com/ - will automatically be forwarded to the new URL - https://your-store.com.

The sitemap file of current plentymarkets online stores only contains the new HTTPS URLs. If your website works with absolute wildcard character links, then they will also be converted from http:// to https://.

Deleting the sitemap content

You need to delete your system’s sitemap file after installing the SSL certificate. This ensures that the sitemap file will be updated with the new encrypted URLs. The sitemap is updated daily in plentymarkets. This process takes place at night.

New indexing by search engines

Search engines need a bit of time to match the relevance of old URLs to the new URLs. How quickly this process is completed depends on the previous relevance of your website.

8.2.4. Deactivating the redirect

If you do not want to redirect to SSL, then you can deactivate this function in the service center. If you use this function, then customers who access an http URL will not automatically be redirected to an https URL. The internal links and the sitemap will still only contain https URLs to avoid jeopardising the new changes.

Talk to your SEO agency and decide whether to use the automatic SSL redirect.

Deactivating the SSL redirect:

  1. Go to Start » Service center.

  2. Select the desired plentymarkets system.

  3. Click on the Cache tab.

  4. Scroll down to the section Permanent SSL redirect.

  5. Select the option always inactive.

  6. Click on the Save permanent SSL redirect button.

The < IE 9 inactive option

This option relates to systems that run with Windows XP and Internet Explorer version 9 or lower. This option deactivates the permanent SSL redirect for these systems only.

The change will go into effect the next time the webserver is updated. Webserver settings are currently updated four times per day.

8.2.5. Saving the correct URL

Pay attention to the notes about SSL encryption that relate to other areas such as Google Analytics or Google Webmaster Tools.

9. Webspace

The webspace tool of the CMS » Webspace menu allows you to upload data to the plentymarkets server and make this data available to your customers. You can upload images, PDF documents and other files that are to be made available online for all visitors. Use this tool if you want to manage images for your design on the file level. For each design, create a subfolder of the layout/ folder.

9.1. Upload limitations

The following limitations apply to uploads:

  • You can not upload PHP file types.

  • You can only upload 10 MB at one time.

9.2. Creating a new folder

You can expand the available folder structure by creating additional folders. To do so, proceed as follows.

Creating a new folder:

  1. Select the desired target folder or the lowest level (= /).

  2. Click on New folder.

  3. Enter a name for the new folder.

  4. Save the settings.

9.3. Uploading files

Proceed as described below to upload files to a folder.

Uploading files:

  1. Select the target folder.

  2. Click on Upload files.

  3. Select the file(s) that you would like to upload.

  4. Click on Open.

9.4. Alternatives to the webspace upload

You can also manage individual images using the Image gallery menu. Alternatively, you can upload images and documents to the to the Documents tab of the category where they are to be used.

10. Blog (Weblog)

CMS » Blog

10.1. General information about blogs

Use the blog function to publish text and image articles in your online store. Blogs are a medium that allows you to communicate news, changes, problems and other interesting topics to your customers. Carry out the settings in the menu System » Client » Select client » Modules » Blog before you create and write your first blog entry.

10.2. Creating a new blog entry

Click on the New blog tab to create a new blog entry. After having initially saved the blog entry, you will find it listed in the Edit blog tab.

EN CMS Blog 01
Figure 60. tab: New blog

Creating a new blog entry:

  1. Go to CMS » Blog.

  2. Click on the New blog tab.

  3. Carry out the settings as desired. Pay attention to the information given in Table 44.

  4. Save the settings.

Table 44. settings for creating a new blog entry
Setting Explanation

Title

Enter a title. The title will be displayed as the heading of the blog entry and will be used for creating the URL.
Note: The title is mandatory. If you save your blog entry without having entered a title, your text will be lost.

Client (store)

Select a client to display the blog entry for this client.
The client is a mandatory entry and has to be selected before the language.

Language

Select the language for the blog entry.
The language is a mandatory entry and has to be selected before the category. Languages that can be selected are created under System » Client » Select client » Modules » Blog. Blog entries can also be filtered by language.

Category

Select a category for the blog entry.
The category is mandatory. Blog categories are created under System » Client » Select client » Modules » Blog.
It is a good idea to set up the categories before creating the blog entry. However, the assignment can also be changed later.

Tags

Enter keywords for the blog entry. Keywords classify the blog entries. When you search for a keyword, all entries that were tagged with this keyword will be found.

Author

The system user who logged in will automatically be entered as the author. The author can be changed.

Publication

Date and time are automatically entered when the blog entry is created. If the blog is to be published later on, do not forget to adjust the date and the time. These will not automatically be updated when the blog is published.

Public

This option is selected by default when creating a new blog entry. This means that the blog entry will be added to the public blog list as soon as the entry is saved. Remove the check mark if you do not want the blog entry to be published directly. The blog entry will then not be added to the index and can only be found via the blog URL. It is a good idea to initially remove the check mark and look at the blog entry before publication.

Translate template variables and template functions

Choose between Yes, No and Template variables and template functions for links only.
Yes = All template variables and template functions will be translated.
Template variables and template functions for links only = Only template variables and template functions for links will be translated.
No = No template variables and template functions will be translated.

Editor

Select an editor for editing the blog entry.

10.3. Blog preview text

The layout template BlogDesignArchiveList designs the frame for a list of blog entries. The function GetBlogDesignBlogArchivesList displays the elements of the list, i.e. your blog entries with a preview text. If you do not limit the preview text, the complete blog text will be displayed in the preview. In most cases, this is too much text for a preview list.

Defining the blog preview text using$PreviewBreak

Insert the variable $PreviewBreak into your text, e.g. after a full stop or the first paragraph. The text before this variable will be displayed as the preview text (Figure 60).

10.4. Searching blog entries

The Edit blog tab opens automatically when you open the CMS » Blog menu. In this tab, all blog entries are displayed sorted by ID. Each blog entry is displayed in its own line. You can delete a blog entry here or open a preview. Moreover you find several filters for searching blog entries in this tab.

Blog entries and their visibility in the online store

When you create a blog entry, it is a good idea to remove the check mark that is set by default next to Public. In doing so, you can take a look at the blog entry via the preview and check it once again before publication. The check mark has to be set next to Public in order to make a blog entry visible in your online store. You need to have posted at least one blog entry in order for the Blog area to be visible in the online store.

EN CMS Blog 02
Figure 61. overview of blog entries and search filters

10.4.1. Searching blog entries

Proceed as follows to search for blog entries. The search filters are visible in Figure 61.

Searching blog entries:

  1. Go to CMS » Blog.

  2. Carry out the filter settings as desired. Pay attention to the information given in Table 45.

  3. Click on the magnifying glass to start searching.

10.5. Editing blog entries

When you open a blog entry you will see 2 tabs, Blog and Upload. You can use these tabs to change a blog entry at any time. This is done by adding or removing content and elements, e.g. adding text, images or files.
In the Blog tab, you can edit the text and save the basic settings for the blog entry. These are the same settings that you carried out while creating a new blog entry (Table 44).

EN CMS Blog 03
Figure 62. editing a blog

10.5.1. Uploading a file

Upload files for your blog entry in the Upload tab. The files will automatically be saved within this tab after having been uploaded.

EN CMS Blog 04
Figure 63. Upload; absolute and relative URL of the file

Uploading a file:

  1. Go to CMS » Blog.

  2. Open a blog entry.

  3. Click on the Upload tab.

  4. Click on Browse (text may vary depending on your browser).
    → A new window for selecting a file will open.

  5. Select the files that you would like to upload and click on open.

  6. Click on the upload icon in the Upload tab.
    → The file will be uploaded. Wait until the process has been completed (a green check mark appears).

10.5.2. Integrating files into a blog entry

Proceed as follows to integrate a file into a blog entry.

Integrating files into a blog entry:

  1. Go to CMS » Blog.

  2. Open a blog entry.

  3. Click on the Upload tab.

  4. Copy the relative URL.

  5. Click on the Blog tab.

  6. Enter an img tag into the blog entry.

  7. Paste the relative URL into the tag.

  8. Save the settings.

You can decide whether to use the relative or the absolute URL. Refer to the URL info page of the manual for a description of the two types.

10.6. Tab: Publish blog

This function updates your blogs. In doing so, all blogs will automatically be saved again. Potential problems with the display or errors can be corrected in the process. As such, always carry out the procedure when such problems occur in the blog area.

Publishing a blog

Click on the gear-wheel icon to update the blog.

10.7. Integrating blog entries into the design

Use the function Link_Blog() to display the blog entry. The function will then be replaced by a link to the blog entry. You can define the design of the individual blog entries e.g. in the BlogDesignBlogEntry template. Use the BlogDesignPreviewList template to display a preview list of the blog entries. Insert the function Link_Blog() into these templates to generate links to the blog entries. Link_Blog() is a global function. You can use it in all templates intended to be used for the blog. If you add a particular blog ID to the function, it can also be used in all the other templates.

10.7.1. Creating a preview list of blog entries

Insert the Link_Blog() function in combination with other variables and functions into the template BlogDesignPreviewList. This generates a list with a link for the number of blog entries as specified in the template’s Settings tab. The following image shows an example of a preview list for blog entries.

EN CMS Blog 05
Figure 64. preview list for blog entries

10.7.2. Inserting the link to a specific blog entry

If you want to generate a link to a specific blog entry, e.g. within another blog entry or in a template that does not include the word "blog" in its name, then insert the Link_Blog() function with the corresponding ID. The example preview list in Figure 65 only consists of blog entry 16 because the ID 16 was added to the function.

EN CMS Blog 06
Figure 65. preview list with only one blog entry

11. FAQs

CMS » FAQs

11.1. FAQs

You can create an FAQ archive in this area. FAQ stands for Frequently Asked Questions and deals with those questions that are routinely asked about specific topics. We recommend that you create folders for the different topics that people often ask questions about.

11.2. Creating a folder structure

Create a folder structure with the topics that you want to save FAQs for.

EN CMS FAQ01 SI
Figure 66. FAQ folder structure

Creating a new folder:

  1. Go to CMS » FAQ » Tab: New folder.

  2. Pay attention to the explanations given in Table 46 and carry out the settings as desired.

  3. Save the settings.

  4. Reload the menu and check whether the folder was created correctly in the Folders tab.

  5. Follow the same pattern to create further folders or subfolders.

The following table explains the settings for FAQ folders:

Table 46. creating the FAQ folder structure
Setting Explanation

Name

Enter a name for the folder.
Tip: Select folder names according to the topics that you want to include in your FAQs.

public

Select the option visible if you want the folder to be visible, e.g. on a category page in the online store or on the website.

Ticket system

Select visible if you want this particular FAQ to be visible when writing a message or comment in a ticket.

Main folder

If you want the new folder to be a subfolder that is located within an existing folder, then select the existing folder from the drop-down list.

11.3. Creating FAQs

Now click on the New FAQ tab and create the FAQs, i.e. the individual questions and answers.

EN CMS FAQ02 SI
Figure 67. creating a new FAQ

Creating a new FAQ:

  1. Go to CMS » FAQ » Tab: New FAQ (Figure 67).

  2. Pay attention to the explanations given in Table 47 and carry out the settings as desired.

  3. Save the settings.

  4. Reload the menu and check whether the FAQ was created correctly.

  5. Follow the same pattern to create further FAQs.

The following table explains the settings for an FAQ entry:

Table 47. creating a new FAQ
Setting Explanation

Folder

Use the drop-down list to select the folder that you want the FAQ to appear in.

Public

Select the option visible if you want the FAQ to be visible, e.g. on a category page in the online store or on your website.
Important: If you select the option visible, then the folder or subfolder that contains the question also has to be visible.

Ticket system

Select visible if you want this particular FAQ to be visible when writing a message or comment in a ticket.

Question

Enter the question (Figure 67, number 1).

Answer

Enter the answer to the question (Figure 67, number 2).

11.4. Template variable

In order for the FAQs to be displayed, insert the $Container_MiscFAQsList template variable into the corresponding design template or e.g. into a category page.

12. Documents

Content > Documents

Don’t forget to check and save your settings or changes!

12.1. Documents

You can upload documents in this area. The documents can then, e.g. be sent to your customers as email attachments or they can be inserted into content pages with the help of wildcard characters.

12.2. Uploading a document

You can upload different data formats, e.g. images or PDFs. The procedure is the same in all cases. Please make sure that you have saved the documents to be uploaded on your computer beforehand. One example is the terms and conditions document. This document is often sent as an attachment to the order confirmation email. You can also upload instructions to your items, if you want to provide them to your customers as an email template.

Tip

If you want to upload a large number of documents, it might be useful to create folders.

EN ENG Content Dokumente01 SI
Figure 68. uploading documents

Uploading a document:

  1. Go to Content > Documents.

  2. Click on the Choose file button.

  3. Select the file that you would like to upload and click on open.

  4. Select one of the options in the line Rights.

  5. Enter a folder name (optional).

  6. Click on the save icon to save the settings.

Tip

The Rights option allows you to determine whether the document should be visible to customers only or to all visitors of your online store (=Public)

12.3. Attaching documents to email templates

You can automatically attach the documents that were uploaded to email templates. To do so, proceed as follows.

.

You can attach one document to each email template.

EN ENG Content Dokumente02 SI
Figure 69. attaching documents to email templates

Attaching a document to an email template:

  1. Go to Settings > Client (store) > Standard > email >Templates.

  2. Select the file that you want to use as an attachment from the drop-down list (see Figure 69, red arrow)

  3. Click on the save icon to save the file as an attachment.

The attachment is displayed in the line of the corresponding template (see Figure 69, blue arrow). This way you can already see the attachment in the overview.

12.4. Using wildcard characters

You need a wildcard character in order to insert a document into your online store. To do so, proceed as follows:

Inserting wildcard characters into the online store:

  1. Open the content page into which you want to insert the wildcard character.

  2. Click on the wildcard character icon.

  3. Open the folder pageLayoutPlaceholder in the wildcard character window.

  4. Open the folder pageLayoutGlobalPlaceholder.

  5. Copy the wildcard character $DisplayDocumentsCustomer to the clipboard.

  6. Insert the wildcard character into the desired location in the content page.

  7. Save the settings.

13. Deadlines

Content > Deadlines

Don’t forget to check and save your settings or changes!

13.1. Deadlines

In this menu, you can create various deadlines and save a description or additional information about each one of them. For example, you could display deadlines on a content page that provides news (see the example in section 3).

Deadlines menu
Figure 70. Deadlines menu

13.2. Editing deadlines

Creating a new deadline:

  1. Go to Deadlines (see path above).

  2. Click on the green plus icon to create a new deadline.
    → An editing window will open.

  3. Enter information about the deadline.

  4. Save the settings.
    → The deadline will be displayed in the preview tab.

Editing a deadline:

  1. Go to Deadlines and open the preview tab (see path above).

  2. Click on the pencil icon to edit a deadline.
    → The deadline’s editing window will open.

  3. Make changes/additions as desired.

  4. Save the settings.

Searching for a deadline:

  1. Go to Deadlines and open the search tab (see path above).

  2. Select the time period by entering a starting date in the field from and an ending date in the field to.

  3. Click on the magnifying glass.
    → The deadline(s) for this time period will be displayed.

.

Time period

When searching for deadlines, enter a time period that extends one day past the date that you are actually looking for. For example, if you are looking for a deadline that is on March 7th, then be sure to enter March 8th in the field to.

Deleting an appointment:

  1. Go to Deadlines and open the preview tab (see path above).

  2. Click on the delete icon corresponding to the deadline that you want to delete.
    → The deadline will be deleted.

13.3. Layout settings

The deadlines are displayed with the help of the [DateList] template. This template can be found within the other content drop-down list in the layout generator (see path above). You can customize the code in the layout as needed. For example, you could display the city as an additional parameter by using the wildcard character [City].

.

The wildcard character for retrieving the templates is [Container_DateList].

Displaying the deadlines
Figure 71. Displaying the deadlines

14. Constants

Use the text fields of the CMS » Constants menu to insert recurring content into several pages of your online store. 25 constants are available. Constants allow you to reuse content. Instead of editing each occurrence of a text, you can edit it in this menu once. The content may contain HTML code or e.g. JavaScript code. In addition, item galleries are linked using constants.

14.1. Defining constants

To define a constant, save a value for this constant first. To do so, proceed as follows. If you link a constant to an item gallery, code will automatically be inserted as the constant’s value. This is why you do not need to enter a value for constants that you want to link with an item gallery.

Defining constants:

  1. Go to CMS » Constants.

  2. Enter the content into the text field of the constant you want to use.

  3. Save the settings.
    &rarr; The content will be displayed in the online store when the constant is inserted into the design.

How to include PHP scripts

You can not save PHP scripts as constants. Save PHP scripts externally, e.g. on an FTP server. Then save a link to this script as the constant’s Value to retrieve it.

14.2. Inserting constants into design

Now insert the constant into your online store. To do so, proceed as follows.

Inserting a constant into design:

  1. Go to CMS » Web design » Layout.

  2. Open the desired template.

  3. Insert the constant into the template. Position it where you would like the content to be displayed.

  4. Save the settings.

Constants can also be inserted into categories.

15. Search and replace

Use the menu CMS » Search & replace to make global linguistic changes to categories and/or the design. For example, use this function if your company makes changes to some of its corporate terminology. This menu is a quicker alternative to manually searching for every instance of a word. Simply enter the old and new terms. The system will automatically replace the word in all categories and/or design templates.

15.1. Using the search and replace function

Proceed as described below to find and replace specific words.

Searching and replacing:

  1. Go to CMS » Search & replace.

  2. Enter the old term into the first free line in the Search column.

  3. Enter the new term into the matching line in the Replace column.

  4. Repeat this process for all of the desired terms.

  5. Decide whether the terms should be replaced in all categories, in all design templates or in both areas.

  6. Decide whether the categories and standard design should be published as well.

  7. Click on the gear-wheel icon to carry out the function.

16. Customer feedback

All of the ratings submitted in your online store are also listed in the menu CMS » Customer feedback. All different types of feedback are displayed in the overview by default. Use the search options to narrow down the results. For example, if you only want to display a specific type of feedback, feedback that was received during a specific time period or feedback that was submitted by a specific customer.

16.1. Setting up customer feedback

First, set up the module in the menu System » Client » Settings » Feedback and activate the desired types of feedback.

16.2. Editing customer feedback

When evaluations and comments are submitted in your online store, they are also listed in the menu CMS » Customer feedback. Here you can make feedback visible or invisible and you can edit comments if they do not meet your standards for netiquette.

Editing feedback:

  1. Go to CMS » Customer feedback.

  2. Click on an evaluation to edit it.

  3. Make the desired changes.

  4. Save the settings.

Changing the visibility

Click on the eye symbol in the overview to make a feedback visible or invisible in the online store. If a feedback is invisible, then the eye is crossed out by a red X. It is possible to open an individual feedback and then change the visibility with the Visibility drop-down list.

16.3. Example configuration in the CMS

Templates and template variables are used to display the feature in your online store. Go to CMS » Web design » Folder: Layout » Folder: Form to find the appropriate templates and template variables.

16.3.1. Setting up Google reCAPTCHA

Set up Google reCAPTCHA for a form for evaluating items in your online store. First, register your online store to use Google reCAPTCHA. Then, enter the website key and the secret key for your online store.

Setting up Google reCAPTCHA:

  1. Go to System » Client » Select client » Online store » Basic settings.

  2. Enter the Google reCAPTCHA Website key.

  3. Enter the Google reCAPTCHA Secret key.

  4. Save the settings.

16.3.2. Displaying the evaluation form

Use the following example code to display a form for evaluating items in your online store. Insert the code into the FormItemFeedback template. Then insert the container {% Container_FormItemFeedback($ID) %} into the appropriate template. For example, insert the container into the ItemViewSingleItem template in order to display the feedback form for individual items.

The CSS classes displayed in the following code are examples. Customize the code as desired.

<div class= "PlentyFormContainer ItemsDescriptionRating">
	<span class="PlentyFormContainer ItemsDescriptionRatingTitle">
		Evaluate item
	</span>
	<div class="PlentyFormContainer ItemsDescriptionRatingDetail">
		$FormOpenItemFeedback
		{% RatingValueSelect(3, "div") %}
		{% if $CustomerID <= 0 %}
			<span class="PlentyFormContainer ItemsDescriptionRatingDetailCommentTitle">
				Name
			</span>
			{% CommentAuthorInput() %}
		{% endif %}
		<span class="PlentyFormContainer ItemsDescriptionRatingDetailCommentTitle">
			Comment
		</span>
		<span class="PlentyFormContainer ItemsDescriptionRatingDetailCommentValue">
			{% CommentMessageInput() %}
		</span>
		<span class="PlentyFormContainer ItemsDescriptionRatingDetailCommentTitle">
			Security code
		</span>
		<span class="PlentyFormContainer ItemsDescriptionRatingDetailCommentValue">
			$FeedbackCaptchaSecret
		<span class="item_clear"></span>
		{% FeedbackSubmitButton("Submit feedback") %}
		$FormCloseItemFeedback
	</div>
</div>

16.3.3. Displaying evaluations as a list

You can also display existing evaluations as a list in the online store. This list is configured in the template MiscFeedbackList under Layout » Folder: Misc. The following example shows possible code. Insert the container {% Container_MiscFeedbacksList('item',$ID) %} into the template where the list should be displayed. For example, insert the container into the ItemViewSingleItem template.

<table class="article_rating_table" border="0">
    <tbody>
    {% for $_feedback in GetMiscFeedbacksList('item',$CurrentItemId) %}
        <tr>
            <td class="article_rating_column_left" valign="top" align="left">
                <span class="ItemRatingIconContainer ItemRatingContainer_$_feedback->RatingValue">
                    $_feedback->RatingIcon
                </span>
            </td>
            <td class="article_rating_column_right" valign="top" align="left">
                <span class="name">$_feedback->FeedbackAuthor</span>
                <span class="date">$_feedback->FeedbackDateTime</span><br>
                <span class="comment">$_feedback->FeedbackMessage</span>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

17. plentymarkets CMS library

The plentymarkets CMS library is an open source project developed by plentymarkets. The project moves the logical JavaScript elements of the plentymarkets CMS to GitHub repository files. As such, it facilitates a clearer separation of layout and logic. The project’s main goals were increased modularisation, testability, internationalisation and independence of JavaScript frameworks.
You can find the project files on GitHub.com. You can download the files for free and contribute at any time. This page describes how to update the version of the plentymarkets CMS library used in your plentymarkets CMS.

17.1. Updating the version of plentymarketsCMStools

All files of the plentymarkets CMS library are consolidated in the JavaScript file plentymarketsCMStools-x.x.x.js. You can find this file in the GitHub project folder /dist. x.x.x stands for the current file version. You can check which version you are currently using in the CMS » Webspace menu. Open the folder layout » Your design » js » plenty. Proceed as described below to update the version of the plentymarketsCMStools-x.x.x.js file in your plentymarkets CMS.

Compatibility

plentymarketsCMStools versions 0.9.x are not compatible with versions 1.x.x. If you already use a design in which the JavaScript file plentymarketsCMStools-x.x.x.js is embedded, you can not update from 0.9.x versions to any 1.x.x versions.

17.1.1. Downloading the new version

Proceed as described below to download the latest version of the plentymarketsCMStools-x.x.x.js file from the GitHub repository.

Downloading the new version:

  1. Open the GitHub repository plentymarkets CMS library.

  2. Open the folder dist.

  3. Click on the file plentymarketsCMStools-x.x.x.js.
    → The file’s content is displayed.

  4. Right click on Raw.

  5. Select the option Save target as…​.

  6. Save the file on your computer.

Download the file plentymarketsCMStools-x.x.x.min.js in the same way.

17.1.2. Uploading the new version

Proceed as described below to upload the new version of plentymarketsCMStools-x.x.x.js and plentymarketsCMStools-x.x.x.min.js into the webspace of your plentymarkets system.

Uploading the new version:

  1. Go to CMS » Webspace.

  2. Open the folder layout » Your design » js » plenty.
    → Expand the folders by clicking on the small plus sign on the left.

  3. Click on Upload files.

  4. Select the file plentymarketsCMStools-x.x.x.js, which you downloaded in the previous step.
    → The file will be uploaded and displayed.

Upload the file plentymarketsCMStools-x.x.x.min.js in the same way.

17.1.3. Editing the version number in the JSON file

The dependencies of the Callisto Light design are saved in a JSON file. This file is in the same folder as the file plentymarketsCMStools-x.x.x.js. To use the latest version of the plentymarkets CMS library, you need to update its version number saved in this file. This JSON file is usually named scripts-3.5.json. However, for older plentymarkets designs this file is named scripts.json or dependencies.json. The content of these files is identical. Proceed as described below to update the version number.

Editing the version number in the JSON file:

  1. Download the file scripts-3.5.json from your plentymarkets system.

  2. Open the file in a text editor.

  3. Edit the version number of plentymarketsCMStools-x.x.x.js to the version of the file you uploaded to the webspace.

  4. Save the edited file.

  5. Upload the updated file to the same folder of your plentymarkets system.
    → Due to caching, it might take up to an hour before the new file version is displayed in the webspace.

To top