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.
Viewing your e-commerce content
To view products from your external e-commerce solution in Magnolia:
- 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".
- 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.
- Drill down into the catalog tree structure to select the category of products you want to view.
- Select the category you want and click View products.
The selected category tab opens listing the subset of products.
- Select the product you want and click View detail.
A new tab opens in the app with information about the product you selected.
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.
- Magento requires an SKU, which is displayed in the product detail page.