The 5.7 branch of Magnolia reached End-of-Life on December 31, 2023, as specified in our End-of-life policy. This means the 5.7 branch is no longer maintained or supported. Please upgrade to the latest Magnolia release. By upgrading, you will get the latest release of Magnolia featuring significant improvements to the author and developer experience. For a successful upgrade, please consult our Magnolia 6.2 documentation. If you need help, please contact info@magnolia-cms.com.

This module is deprecated. See Deprecations.

DownloadMultiple submodules
EditionEE Std
License
MLA
IssuesCOMMERCETOOLS
Maven sitecommercetools
Latest version

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 or higher.

Maven is the easiest way to install the module. Add the following to your bundle. The parent POM of your webapp project should set the latest version of the module automatically. Should you need to use a specific module version, you can define it using the <version/> in the dependency.

commercetools Connector 1.3-SNAPSHOT is available for 5.6+


<dependency>
  <groupId>info.magnolia.commercetools</groupId>
  <artifactId>magnolia-commercetools-integration</artifactId>
</dependency>
<dependency>
  <groupId>info.magnolia.commercetools</groupId>
  <artifactId>magnolia-commercetools-templates</artifactId>
</dependency>
<dependency>
  <groupId>info.magnolia.commercetools</groupId>
  <artifactId>magnolia-commercetools-demo</artifactId>
</dependency>


Configuration

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

Node nameValue

 
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

namedescription
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 formA 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.

loginA login component.
signupA 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