commercetools Connector module

Magnolia's commercetools Connector module allows users to connect a commercetools project to Magnolia. commercetools is a Java-based eCommerce solution for retailers of all sizes.

The Magnolia commercetools bundle consists of three submodules:

Integration: Connects Magnolia to the commercetools eCommerce server.
Templates: Contains unstyled templates with all functionality included.
Demo: Contains a reference website and configuration examples.

The commercetools Connector module exposes the content of a commercetools project by using standard Magnolia components that can be displayed on the website. The users (shoppers) can manage their accounts and complete the checkout process. The module installs the Products Browser app, which allows browsing the stores.

This documentation page is based on commercetools JVM SDK 1.0, which is compatible with Magnolia 5.4+.

Installing

commercetools Connector requires Java 1.8

Maven is the easiest way to install the module. Add the following dependency to your bundle:

<dependency>
  <groupId>info.magnolia.commercetools</groupId>
  <artifactId>magnolia-commercetools-integration</artifactId>
  <version>1.3</version>
</dependency>

<dependency>
  <groupId>info.magnolia.commercetools</groupId>
  <artifactId>magnolia-commercetools-templates</artifactId>
  <version>1.3</version>
</dependency>

<dependency>
  <groupId>info.magnolia.commercetools</groupId>
  <artifactId>magnolia-commercetools-demo</artifactId>
  <version>1.3</version>
</dependency>

Pre-built jars are also available for download. See Installing a module for help.

You can also download the modules as a WAR file:

magnolia-commercetools-webapp.war

Configuration

In Magnolia, go to Configuration > /modules/commercetools-integration and create the following structure:

Node name	Value
modules
commercetools-integration
config
projects
projectName
clientId	<your client id>
clientSecret	<your client secret>
projectKey	<your client project key>

`projects`	required Project mapping as used in the Products Browser app.
`projectName`	required Project node. `projectName` is displayed in the project switcher if `<name>` property is not specified.
`<clientId>`	required Your client id.
`<clientSecret>`	required Your client secret.
`<projectKey>`	required Your client project key.
`<authUrl>`	optional URLs depending on the region the project is hosted in.
`<apiUrl>`	optional URLs depending on the region the project is hosted in.
`<name>`	optional Project name displayed in project switcher.

Magnolia site setup

The commercetools Connector module installs a Setup app that allows you to configure site-project parameters. The configuration is saved under the site's parameters, which allows you to have a one-project-per-site configuration.

Products Browser app

The commercetools Connector module installs the Products Browser app that allows store administrators to browse all projects, categories, and products. The product information is read-only.

Templates

The commercetools Connector module templates have dependencies to templates from MTE, Form, and Rest modules.

Pages

The commercetools demo home page template is the default page template. It displays the complete store.

The commercetools demo standard page is a simple page displaying one or more components.

The commercetools demo authentication page is a page for demo-styled authentication components (commercetools login and commercetools signUp).

The commercetools product landing page is a simple page with Travel demo components and the commercetools product teaser component from the commercetools connector.

Components

name	description
cart link	A link to the page with the shopping cart component that is showing the number of item types in the cart.
shopping cart	A form-based component with `CommercetoolsCartProcessor`. One of the two following actions must be stored in the hidden field `ctAction`: `order` (Process the cart and create an order in commercetools project from it.) `setShipping` (Add a shipping method stored in the field called `ctShippingMethod` to the cart.)
shopping cart table	A table showing cart items.
change password form	A form-based component with `CommercetoolsPasswordResetProcessor`. One of the two following actions must be stored in the hidden field `ctAction:` `sendPwdResetEmail` (The form must contain an input field with name `ctCustomerEmail`. Mail body must contain a mark {resetLink} that is substituted in the email with a reset password link created from `passwordResetPage`.) `resetPwd` (The form must contain a hidden field with the name `token`.)
checkout step	A form step with `commercetools-templates:components/formGroupFields`.
login link	A link to the login page.
login	A login component.
signup	A signup component.
menu	A menu created from project categories.
products	A list of product teasers from the category and its subcategories with pagination and filtering.
product detail	A detail of the product with variant selection.
product teaser	A teaser for the selected product.
search input field	An input field for search.
search result	A search result page with pagination and filtering.
shipping method selection	A selection of the shipping method.
form group fields	A fieldset component with two available components, `ctShippingMethodsSelection` and `ctShoppingCartTable`.

commercetools templating functions

The CommercetoolsTemplatingFunctions can be used for obtaining product or category IDs, product and category beans etc. See the API for all available functions. Templating functions are available in all templates by default under the ctfn abbreviation.

commercetools Java API

The commercetools Connector provides a full commercetools Java API.

Performance

Caching

Caching is enabled in the Products Browser app to reduce the number of calls and to make the Products Browser app and its selector dialog as responsive as possible. The cache is cleared when the user closes the app or changes the store.

Lazy loading

The categories and products in the Products Browser app are loaded lazily, for example when expanding a category, to make the Products Browser more responsive.

Related pages

Page tree