e-commerce

Introduction #

Here is what the main page of the ioi e-commerce usually looks like:

Several pages make up the e-commerce #

1. First, pages directly related to it:

• Shop: Here you can see your selection of products.
• Item: This is where the customer can display detailed information about an item. Products can be added to the cart, provided the user is logged in.
• Cart: Here the customer can view their cart and place an order. Only logged-in users can access this page.

1. Then, several document pages with direct access to them:

• Open orders: Displays the customer’s current purchase orders
• Closed orders: Displays the customer’s closed purchase orders
• Deliveries: Displays the customer’s deliveries
• Invoices: Displays the customer’s invoices

→ You can find all associated shortcuts in the Workspace:

How to set up your e-commerce (simplified version) #

1. Creating the category and the item

• Go to ioi E-commerce Category and create one.
• Go to ioi Item and create an item with these parameters:
  • A defined e-commerce category
  • Uncheck Not available for sale
  • Check Public
  • Enable the status Active (white)

1. Creating the manufacturer catalog

• Go to ioi Manufacturer Catalog and create a manufacturer catalog with these parameters:
  • A defined e-commerce category
  • Uncheck Shop unavailable
  • Check Enabled
• Go to ioi E-Commerce Settings and click Update shop: you now have a basic e-commerce.

Creating an e-commerce category #

First, you need to create (or import) the categories you want to display on your future websites in ioi E-commerce Category.

→ These categories will be the ones offered to your customers:

Treeview examples:

It is possible to customize categories much more extensively. For more information on category customization or their different fields, see this section {link to come}.

The next step will be to import the item information you want to sell on your site.

Creating Items and Manufacturer Catalog #

The items you have in stock (ioi Item) and the items you offer from a manufacturer catalog (ioi Manufacturer Catalog) will be displayed in your e-commerce.

You can create them manually, but we recommend using the built-in data import tool. You can import them in bulk from an Excel or CSV file.

To use this tool, first map the columns in your Excel file with the available fields in the manufacturer catalog and select the various options you want to use.

Then click this button to start the import:

For Items and Catalogs, the field related to tags is simply called tags and appears as Formatted Tags in the document. For the correct format, refer to the following section.

Unfortunately, in most cases, the categories and tags used by the manufacturer will not match the ones you use in your own databases.

→ To solve this, you can use ioi Shop Tag Conversion [#Tag import and creation] and ioi Shop Category Conversion [#ioi Shop category conversion] to automatically convert any entry into the correct format.

Updating the e-commerce #

→ Go to ioi E-Commerce Settings and click Update e-commerce.

When a customer loads the e-commerce web page, only prices and translations are recalculated. Price may depend on customer-related benefits and discounts, and translations obviously depend on the selected language. Item-specific information will also be retrieved in real time, so no calculation is necessary for this.

The categories, tags, and references of displayed items are pre-calculated, so without any calculation, your shop will remain empty.

→ To start the calculation, you can either press the Update e-commerce button in ioi E-Commerce Settings to calculate the entire shop, or press Precalculate whole category in a specific ioi E-commerce Category to recalculate a particular category, typically when you have added or removed items in that category.

An additional pre-calculated data set is the search list in each language. It is calculated each time the main ioi E-commerce Category (All categories) is calculated, regardless of the button used.

Disabling the e-commerce #

By pressing the disable button in ioi E-Commerce Settings, each e-commerce page is redirected to the application itself (/login), preventing any use or visibility of the shop.

Customizing the e-commerce (HTML, CSS and JS) #

Each e-commerce web page can be found in the list of web pages, and their HTML, JS, and CSS are available so you can fully customize the online store. You can find them in the workspace or in the web pages section of the Website module.

However, to prevent your changes from being overwritten during updates, first check the stop syncing option in ioi E-Commerce Settings. You will no longer receive new features related to these pages from us, but your own changes will remain intact.

Translations #

Every word in the e-commerce can be translated.

The target language will be the language of the logged-in user and the language selected for the guest user.

They will use the built-in translation list in the database and in the application itself for miscellaneous words, thus translating most buttons correctly.

For items, catalogs, or category descriptions, they will use the translation provided for that specific element if available. Otherwise, they will fall back to the default English description if the selected language version is missing.

Mockup Img #

If you have published an item without an image, a mockup image will be used. This mockup image will, if possible, be your company logo and may come from several sources. If no image is set in the tested field, the system will look for an image in the following fields, in this order:

• ioi Company (main) / small logo
• ioi Company (main) / large logo
• Navbar Settings / Application logo
• Website Settings / Branding image
• The default image for ioi Manufacturer Catalog (as you can see in its list)

Public ID #

The item ID displayed to your customers is the one set in the Public ID field. If left empty, it will simply be filled with the main ID. This allows you to appropriately choose what you want to show to your customers.

Example: To remove information included in the main ID from the customer’s view.

→ Additionally, the Public ID is also the reference used to find similar items that only differ in a few characteristics, such as size or color.

Items with options (size, color) #

You can set up items or catalogs with options. Simply create or import an item for each available combination you can offer and use tags to specify their options.

For these items or catalogs to be linked together, they must share the same Template:

A Template is an ioi Item with the Template status:

→ By clicking on one of the options, the page will immediately update with the data of the item corresponding to that specific option.

Tags #

Tags are used to define your product, make it easier for customers to find, and differentiate variations of the same product. They consist of a tag subject and a tag value.

Example: Color and Blue. For items and catalogs, the associated field is simply tags and appears as Formatted Tags in the document. This field is the only one that matters.

The table found in ioi Item is only used to help manually add tags to an item. If left empty, it has no effect. If modified, the change will be transferred to the Formatted Tags field.

Example of creating a Tag #

Example of tags on an item page #

Also known as items with options.

Importing and creating tags #

When importing catalogs, the new reference disabled option in ioi Manufacturer must be checked to allow tag import.

Tags must be imported in the subject=value format, each successive tag being separated by a CAR(10), Excel line break, or equivalent.

By default, missing tags are automatically created.

ioi Shop Tag Conversion #

These conversions allow tags to be automatically converted.

Example:

You can see how a tag with the value BLEU NUIT/JAUNE FLUO and the subject Color will have its value converted to MidnightBlue-Yellow.

For the color tag, this is particularly useful because by using the CSS color format, such as MidnightBlue or Yellow, these specific tags will be displayed as colors rather than text. By separating the two colors with a dash, a two-color tag will be displayed.

The Tag subject field allows the target tag to be automatically created if missing when you create the tag conversion.

The Manufacturer field allows this tag conversion to be restricted to a specific manufacturer.

Customizing Categories #

Here we will cover the different fields and options available for an E-shop Category.

New category #

• The identification is only meant to define the ID of your category for your internal use. It will not be displayed to your customers (except sometimes in the URL). Feel free to use whatever you find most relevant.

• The is_group option defines whether a category is a group with one or more subcategories or if it is an “end category”.

• The parent category field allows you to create the hierarchy by defining which category is the child of which parent category.

• The displayed image is where you can choose the image for this category.

• The extended description is currently for internal use only and will not be displayed to your customers.
• The displayed image selection button will allow you to select an image for your category. This can be useful in some cases.
• The enabled and published options, if disabled, will respectively prevent an item from targeting this category as its own and remove this category and its contents from the customer’s view.

One of the last checks, only visible if the is_group option is checked, is the Do not display child items box.

→ This allows (if permitted in ioi E-Commerce Settings) to specifically display items from all subcategories of this category, rather than simply displaying the subcategories.

For “end categories” (non-grouped), an additional box and field are available: the tag category and its associated tag.

→ Tag categories are a special type of cross-category which, like group categories, cannot be targeted by items.They will display all items having the associated tags among all categories with the same parent.

Example: A mountain bike with the shop category Mountain Bikes and the tag Feature=High Visibility will be found both in the Mountain Bikes category and the High Visibility category. Another bike from a different category with the same tag will also be displayed in the High Visibility category.

• The Translation tab contains translations in the four additional languages you have selected.

• The Preloaded tab is for information and debugging purposes only. It contains the JSON data that defines what will be displayed to users searching the content of this specific category.This JSON data is automatically generated when you click the Precalculate whole category button.

ioi Shop Category Conversion #

These conversions allow categories matching the source to be automatically converted to the target to help you during import.

The Manufacturer field allows the conversion to be restricted to a specific manufacturer.

→ In addition, you can choose specific tags that will be automatically added to any item or catalog undergoing this specific conversion. If multiple tags need to be added in this way, simply separate them with a line break.

Customizing the Item Page #

You can configure additional information to be displayed on the item page just above the memo information.

In ioi E-Commerce Settings, Item Page tab, add the names of the fields (custom or standard) you want to display. You can also define the title and a default value if the field is empty.

Customizing the Cart Page #

You can configure additional information you want to collect when the customer places an order.

In ioi E-Commerce Settings, CartPage tab, add the names of the fields (custom or standard) you want to collect.→ These field names must belong to custom doctypes of the selected doctype. You can also define the title, default value, placeholder, and hide them (combined with the default value, this allows always sending a specific value).

The value provided by the customer will automatically be placed in the targeted field of the document linked to the customer and the order.

Customizing Tags #

Sometimes you may want to change the order of tags and their appearance to suit your needs.

This is available in the ioi Tag Subjects document.

Here you can change the order of subjects in the tree view (shop page) or in the options (item page). Subjects are ordered from smallest to largest order value, with the smallest at the top.The display option lets you choose how you want these tags displayed (currently only available on the item page).

You can also choose between standard list, drop-down list, squares, or colored squares (in this case, your values must be CSS colors. Example: LightGreen).