Magnolia 6.1 reached extended end of life on June 2, 2020. Support for this branch is limited, see End-of-life policy.

Page tree
Skip to end of metadata
Go to start of metadata

The E-commerce app enables editors and marketers to view content retrieved from your external e-commerce solution. The content can then be used in e-commerce-dedicated components in the Pages app.

Not MVP:

Editors can then enrich or override properties directly in Magnolia to create compelling website content.  For example, you could enrich your product with images from the Magnolia DAM or add a personalized description for a teaser. This fine-tuned content can then be used in e-commerce-dedicated components in the Pages app.

Viewing your e-commerce content

To view products from your external e-commerce solution in Magnolia:

  1. Open the E-commerce app.

    Search for apps or for content across all your apps using the Find Bar. Open an app directly from the Find Bar using the command open <app-name> app, for example, type "open pages app".

  2. In the E-commerce tab, select the catalog containing the content you want to view. Your administrator is generally responsible for configuring the connection to your external e-commerce solution
    The content displayed in the app is refreshed every 5 minutes by default so you always see an up-to-date list of what your external e-commerce solution contains. Your administrator can adjust the refresh frequency. 
  3. Drill down into the catalog tree structure to select the category of products you want to view.
  4. Select the category you want and click View products.
    The selected category tab opens listing the subset of products.
  5. Select the product you want and click View detail.
    A new tab opens in the app with information about the product you selected. 


Enriching your e-commerce content

To augment a product from your external e-commerce solution in Magnolia:

  1. Open the product you want to edit as described above.

What can be added to a product and how?

No actions in MVP:

Adding an image to your product

Adding text to your product

Note: changes made here are not sent to your external e-commerce solution.

Using your e-commerce content

The E-commerce add-on provides a basic page template definition and some sample component definitions to show how you can leverage your external e-commerce content in the Pages app. The samples are delivered as YAML files by the ecommerce-templating module. You can view or edit them under /ecommerce-templating/templates/components in the Resource Files app.

The following default components are provided and can be used as a basis to develop your own: 

  • Category list – Lists all the categories in a given catalog.
  • Product detail – Shows detailed information for a specific product.
  • Product list – Lists all the products in a given catalog.
  • Product teaser – Shows a given product image with text.

For example, this page uses the Product detail component:

When choosing which product you want to display in the Product detail and Product teaser components, you enter the following information:

Note that for the Product id field:

  • commercetools requires a product id, which is displayed in the path.
    For example: commercetools/connection/`7305670a-9f9a-4114-a4de-c5d6cbeb592c`
  • Magento requires an SKU, which is displayed in the product detail page.
    For example: 24-WB02