Setting up the online store

In the new online store for PlentyONE. design and logic are separated from each other. Two plugins are required to integrate the online store into your PlentyONE system. The Ceres plugin contains the new standard design of the online store and can be customised to meet your needs. The Io plugin contains the logic part of the online store, is a general basis for all design plugins and can also be used by other plugins.

1. Adding plugins

Plugins are saved in the Inbox of your PlentyONE system. To add the required plugins Io and Ceres to your PlentyONE system, proceed as follows.

Adding plugins

Go to Start » Plugins.
→ The plugin overview will open.
Click on New plugin.
→ The New plugin window will open.
Click on Git.
→ The Settings window will open.
Enter the login details of the Git repository. Pay attention to the information given in table 1.
Click on Test connection.
→ The connection to the Git repository is verified and established.
Select the branch of the repository you want to copy.
Save the settings.
→ The plugin repository is copied to the PlentyONE Inbox.

Table 1. adding plugins
Setting	Explanation
Remote URL	Enter the URL of the Git repository. Ceres = The URL is: https://github.com/plentymarkets/callisto-4.git Io = The URL is: https://github.com/plentymarkets/layout-core-4.git
User name	Enter user name. The user name is part of the user data of the hosting provider (e.g. GitHub) of your Git repository.
Password	Enter password. The password is part of the user data of the hosting provider (e.g. GitHub) of your Git repository.
Test connection	Verify and establish connection to Git repository.
Branch	Becomes selectable after the connection to the Git repository is established by clicking on Test connection. Select the branch to be copied to the PlentyONE Inbox. *Note: In order to function without limitations, the same branches must be selected for the plugins Io and Ceres. The stable* branch contains the current stable version of the plugin.
Auto fetch	Activate to retrieve changes pushed to the Git repository automatically. The changes are retrieved and shown in the commit list, but not merged. *Note*: The autofetch function can reduce performance slightly.

2. Deploying plugins

After adding the plugins Ceres and Io to your PlentyONE Inbox, deploy both plugins in order to display the design in the online store. The settings that are available in the menu bar, are explained in table 2.

Deploying plugins in Productive:

Go to Start » Plugins.
→ The plugin overview will open.
Activate the plugins in the Productive column.
Click on Select clients in the line of the activated plugins.
→ A window will open.
Activate the clients.
Save the settings.
→ The plugins will be assigned to the clients.
Click on Deploy plugins in Productive in the menu bar.
→ The activated plugins are checked and deploy process is started.
→ The colour of the icon of deployed plugins changes to blue.

Table 2. options in the menu bar for deploying plugins
Setting	Explanation
Refresh deploy status	The plugin list is updated every 5 minutes, i.e. successfully deployed plugins may not be visible in the plugin list immediately. Click to update the view of the plugin status manually.
Deploying plugins in Stage	Checks all activated plugins and deploys them in the preview mode Stage. In this mode, a preview of the active plugins is deployed to allow you to test their functionality. *Note*: All plugins marked as active are compiled sequentially during deployment of plugins in Stage. This may take several minutes. If an error occurs, none of the plugins are deployed.
Stage: Show errors	Number of errors that occurred during the last deployment of plugins in Stage. Click on the button to view a list of the errors.
Deploy plugins in Productive	Checks all plugins and deploys them in the productive mode Productive. In this mode, active plugins are run and published. *Note*: All plugins marked as active are compiled sequentially during deployment of plugins in Productive. This may take several minutes. If an error occurs, none of the plugins are deployed.
Productive: Show errors	Number of errors that occurred during the last deployment of plugins in Productive. Click on the button to view a list of the errors.
Change to Stage; Change to Productive	Change to Stage = Change the mode of all plugins deployed in Productive to the preview mode Stage. The mode will be set back to Productive automatically after 20 minutes. *Important:* The mode of deployed plugins will be changed to the preview mode, the data base, however, will not be changed. With the respective permissions, these plugins can access, change or even delete data in the data base of your productive system. Change to Productive = Change the mode from Stage back to Productive.

3. Setting up content pages

When installing Ceres, categories of the Content type for static content will be generated. Static content pages are the home page, legal disclosure or terms and conditions, for example. These categories can be found in the ceres folder in the menu Item » Categories. Edit the content of the home page in this menu as described below. The other content pages can be edited in the same way. Next, link the categories with your design.

Editing the content of the home page:

Go to Item » Categories.
Expand the main category ceres.
Click on the category Home page.
→ The category will open in a new tab.
Click on the Template tab.
Make changes to the code. Note that you have to use HTML and Twig syntax.
Save the settings.
→ The content will be saved in the CategoryTemplates plugin.
→ The CategoryTemplates plugin will be displayed in the menu Start » Plugins.

Linking the home page:

Go to Start » Plugins.
→ The plugin overview will open.
Click on Ceres.
→ The plugin will open in a new tab.
Click on Search in the Home page row of the Categories tab.
→ The Select category window will open.
Expand the main category ceres.
Select the Home page category.
Click on Select.
→ The category is linked to the design.
Save the settings.

Link all other pages in the same way. Then, activate the CategoryTemplates plugin and deploy your activated plugins in Productive.

Deploying CategoryTemplates:

Go to Start » Plugins.
→ The plugin overview will open.
Activate the CategoryTemplates plugin in the Productive column.
Click on Select clients in the line of the activated plugin.
→ A window will open.
Activate the clients.
Save the settings.
→ The plugins will be assigned to the clients.
Click on Deploy plugins in Productive in the menu bar.
→ The activated plugins are checked and deploy process is started.
→ The colour of the icon of deployed plugins changes to blue.

4. Carrying out design settings

You can make changes to your design by carrying out the design settings. No programming experience is required. To carry out the design settings, proceed as follows.

4.1. Customising the header and footer

Customise the header and the footer of your design. Display your own logo and design the footer content according to your requirements. The store features, for example, are a great way to highlight the features of your online store, such as free shipping.

Customising the header and footer:

Go to Start » Plugins.
→ The plugin overview will open.
Click on Ceres.
→ The plugin will open in a new tab.
Open the Header or the Footer tab.
Carry out the settings as desired. Pay attention to the information given in table 3.
Save the settings.

Table 3. Customising the header and footer
Setting	Explanation
Tab: Header
URL to your company logo	Enter the URL to your company logo. The company logo can be uploaded in the Documents tab of a category, for example.
Fix the navigation bar at the top of the page	Activate to fix the navigation bar at the top in your online store.
Tab: Footer
Number of store features	Select the number of features to be displayed in the footer of the online store. 0 = Do not display any store features. 1 = Only display the first store feature in the footer. 2 = Display the first and the second store feature in the footer. 3 = Display all three store features in the footer.
Text of first store feature; Text of second store feature; Text of third store feature	Enter the text for the store feature. The text will be displayed next to a green check mark in the footer.
Number of columns	Select the number of columns to be displayed in the footer of the online store. 1 = Only display the first column in the footer. 2 = Display the first and the second column in the footer. 3 = Display all three columns in the footer.
Title of first column	Enter the title of the first column to be displayed in the footer of the online store.
List of category IDs to display in first column	Enter the IDs of categories of the Content type to be displayed in the first footer column of the online store. *Note*: Multiple IDs must be separated by commas.
Title of second column	Enter the title of the second column to be displayed in the footer of the online store.
List of category IDs to display in second column	Enter the IDs of categories of the Content type to be displayed in the second footer column of the online store. *Note*: Multiple IDs must be separated by commas.
Title of third column	Enter the title of the third column to be displayed in the footer of the online store.
List of category IDs to display in third column	Enter the IDs of categories of the Content type to be displayed in the third footer column of the online store. *Note*: Multiple IDs must be separated by commas.
Show newsletter registration column	Activate to show an additional column for the newsletter registration.

4.2. Customising the item view

Customise the design of the item view in the Item view tab. Select the item name and item information to be displayed in the online store. Furthermore, select which item variations should be displayed in the item overview.

Customising the item view:

Go to Start » Plugins.
→ The plugin overview will open.
Click on Ceres.
→ The plugin will open in a new tab.
Click on the Item view tab.
Carry out the settings as desired. Pay attention to the information given in table 4.
Save the settings.

Table 4. Customising the item view
Setting	Explanation
Item name	Select Name 1, Name 2 or Name 3. Texts for these fields are saved in the Texts tab of the item. If Name 2 or Name 3 is selected, but no name was saved in the text field, Name 1 will be used as the item name.
Show item information	Select one, multiple or ALL item information options to be displayed in the item view in the online store. Condition = Activate to display the item condition. Manufacturer = Activate to display the item manufacturer. Manufacturing country = Activate to display the manufacturing country of the item. Age rating = Activate to display the item’s age rating. Item ID = Activate to display the item’s ID. Technical data = Activate to display the Technical data tab. If you activate the display of the Technical data without saving a text in the Technical data field in the Texts tab of an item, the tab will not be displayed. Description = Activate to display the Description tab. If you activate the display of the Description without saving a text in the Description field in the Texts tab of an item, the tab will not be displayed. Preview text = Activate to display the preview text for the item. Strikethrough price = Activate to show the strikethrough price next to the item price. Variation name = Activate to display the variation name. External variation ID = Activate to display the external variation ID. Model = Activate to display the model. Dimensions = Activate to display the item’s dimensions. Customs tariff number = Activate to display the customs tariff number. Net weight = Activate to display the net weight. Gross weight = Activate to display the gross weight. Content = Activate to display the content.
Store specials: Number of decimal places for discounts	Select the number of decimal places for discounts to be displayed for an item in the item list.
Show variations in the category item list	Display variations in the item overview of a category. All = Select to display main variations and variations of items. Only main variations = Select to display only main variations. Only child variations = Select to display only variations. Main variations will not be displayed.

4.3. Customising the shopping cart

Customise the display options of the shopping cart in the Shopping cart tab. Select item and price information to be displayed in the shopping cart and customise the shopping cart preview.

Customising the shopping cart:

Go to Start » Plugins.
→ The plugin overview will open.
Click on Ceres.
→ The plugin will open in a new tab.
Click on the Shopping cart tab.
Carry out the settings as desired. Pay attention to the information given in table 5.
Save the settings.

Table 5. Customising the shopping cart
Setting	Explanation
Show item information	Select one, multiple or ALL item information options to be displayed in the item overview of the shopping cart. Item ID = Activate to display the item’s ID. Description = Activate to display the item description. If you activate the display of the Description without saving a text in the Description field in the Texts tab of an item, the item description will not be displayed. Availability = Activate to display the item availability. Variation number = Activate to display the variation number. Condition = Activate to display the item condition.
Show price information	Select one, multiple or ALL price information options to be displayed in the shopping cart. Value of items (Gross) = Activate to display the gross value of items. Value of items (Net) = Activate to display the net value of items. Shipping (Gross) = Activate to display the gross shipping costs. Shipping (Net) = Activate to display the net shipping costs. VAT = Activate to display the VAT. Total (Gross) = Activate to display the gross total sum. Total (Net) = Activate to display the net total sum.
Show basket preview information	Select one, multiple or ALL price information options to be displayed in the shopping cart preview. Value of items (Gross) = Activate to display the gross value of items. Value of items (Net) = Activate to display the net value of items. Shipping (Gross) = Activate to display the gross shipping costs. Shipping (Net) = Activate to display the net shipping costs. VAT = Activate to display the VAT. Total (Gross) = Activate to display the gross total sum. Total (Net) = Activate to display the net total sum.
Show Change variation button	Activate to display the Change variation button in the item overview in the shopping cart. By clicking on Change variation, customers can change an item’s variation in the shopping cart. If you activate the Change variation button, but the item has no variations, the button will not be displayed.
Add to shopping cart: Show overlay	Activate to show the overlay of the shopping cart after clicking on the Add to shopping cart button.

4.4. Customising the pagination and sorting

Customise the pagination of the item overview and the online store’s item sorting in the Pagination and sorting tab.

Customising the pagination and sorting:

Go to Start » Plugins.
→ The plugin overview will open.
Click on Ceres.
→ The plugin will open in a new tab.
Open the Pagination and sorting tab.
Carry out the settings as desired. Pay attention to the information given in table 6.
Save the settings.

Table 6. Customising the pagination and sorting
Setting	Explanation
Pagination position	Select the pagination position. Top = Display the pagination on top of the item list. Bottom = Display the pagination on the bottom of the item list. Top and bottom = Display the pagination on the top and bottom of the item list. Infinite scrolling = Select to hide the pagination and enable infinite scrolling to reload the item list by scrolling down.
Always show first page	Activate to always display the first page in the pagination.
Always show last page	Activate to always display the last page in the pagination.
Enable number of items per page	Activate one, multiple or all number values to display the selected values in the Items per page drop-down list in the item overview.
Default number of items per page	Select the default number of items in the item list.
Enable item sorting by	Activate one, several or ALL sorting options for item sorting. Top items = Display the top items. Item ID (ascending) = Sort items by item ID in ascending order. Item ID (descending) = Sort items by item ID in descending order. Item name (ascending) = Sort items in alphabetical order by item name (A-Z). Item name (descending) = Sort items in alphabetical order by item name (Z-A). Item position (ascending) = Display items with the highest position number first. Item position (descending) = Display items with the lowest position number first. *Important: In order for this function to work, a position number has to be saved for each of the item variations within the variation tab. Price (ascending)* = Display items with the lowest price first. Price (descending) = Display items with the highest price first. Customer feedback (ascending) = Display items with the lowest customer feedback first. Customer feedback (descending) = Display items with the highest customer feedback first. Newest variation = Display the newest item variations first. Oldest variation = Display the oldest item variations first. Variation ID (ascending) = Sort item variations by variation ID in ascending order. Variation ID (descending) = Sort item variations by variation ID in descending order. Variation number (ascending) = Sort item variations by variation number in ascending order. Variation number (descending) = Sort item variations by variation number in descending order. Last variation update = Display the last updated item variations first. First variation update = Display the first updated item variations first. Variation name (ascending) = Sort item variations in alphabetical order by variation name (A-Z). Variation name (descending) = Sort item variations in alphabetical order by variation name (Z-A). Variation position (ascending) = Display item variations with the highest position number first. Variation position (descending) = Display item variations with the lowest position number first. *Important: In order for this function to work, a position number has to be saved for each of the item variations within the variation tab. Active variation (ascending)* = Sort active item variations in ascending order. Active variation (descending) = Sort active item variations in descending order. Main variation (ascending) = Sort main item variations in ascending order. Main variation (descending) = Sort main item variations in descending order. Manufacturer (ascending) = Sort items in alphabetical order by manufacturer (A-Z). Manufacturer (descending) = Sort items in alphabetical order by manufacturer (Z-A). Random items = Display items in a different, randomly chosen order every time.
Default item sorting by	Select the entry that is selected by default for item sorting.

4.5. Customising the My account area

Carry out settings for the My account area of the online store in the My account tab.

Customising the My account area:

Go to Start » Plugins.
→ The plugin overview will open.
Click on Ceres.
→ The plugin will open in a new tab.
Click on the My account tab.
Enter the number of orders to be displayed per page in the order history.
Save the settings.

4.6. Settings for plugin developers

Settings specifically aimed at plugin developers are available in the Registration and Logging and performance tabs. Here, you can set the information to be logged during plugin development and the performance mode for the online store.

Carrying out settings for plugin development:

Go to Start » Plugins.
→ The plugin overview will open.
Click on Ceres.
→ The plugin will open in a new tab.
Click on the Registration or Logging and performance tab.
Carry out the settings as desired. Pay attention to the information given in table 7.
Save the settings.

Table 7. Carrying out settings for plugin development
Setting	Explanation
Tab: Registration
The RegEx used for the email	##
The RegEx used for the password	##
Tab: Logging and performance
Enable logging options	##
Performance level	##

5. Customising the design

The standard design Ceres is customisable to fit your needs. Note that customised changes of the design cannot be taken into consideration if support should be required. Therefore do not make changes to your active design and, before making changes to the design, make a backup copy so that you can restore the original state of the design. For a detailed guide for template plugins and for individualising designs, refer to plenty Developers. In order to customise the design, open the plugin Ceres first.

Opening the plugin:

Go to Start » Plugins.
→ The plugin overview will open.
Click on Ceres.
→ The plugin will open in a new tab.

In the new tab, the directory tree will be displayed on the left. The resources folder contains the following sub-folders:

css: contains CSS files generated from SCSS files. CSS files can be customised. However, the files will be overwritten, when changing SCSS files.
documents: contains documents, e.g. fonts
images: contains image files, e.g. the company logo or the slider images of the home page
js: contains JavaScript files
lang: contains files to make the online store available in different languages
scss: contains SCSS files, e.g. bootstrap
views: contains subfolders with twig templates for online store components. Templates are grouped by content:
Basket: contains templates required for the shopping cart
Category: contains templates required for displaying categories and item lists
Checkout: contains templates required for the checkout
Customer: contains templates for customer registration, login and guest accounts
Item: contains templates or snippets to display item data
MyAccount: contains templates required for the My account area
PageDesign: contains global templates for basic page design, e.g. header, footer, navigation bar etc.

Make the desired changes to the code. Note that you have to use HTML and Twig syntax. Alternatively, edit the template plugin in an external editor. For an overview of recommended editors, refer to Recommended IDEs.