Administering generic eCommerce administering-generic-ecommerce
The Adobe Experience Manager (AEM) generic solution provides methods of managing the commerce information held within the repository (as opposed to using an external ecommerce engine). This includes:
Products and Product Variations products-and-product-variations
Before creating products, define a scaffold. This specifies the fields that you must define, the products, and how they are edited.
A scaffold is needed for each distinct product type. The appropriate scaffold is associated with the products by either:
- path
- the product can reference the scaffold
/etc/scaffolding/geometrixx-outdoors
/etc/commerce/products/geometrixx-outdoors
Importing Products importing-products
Importing Products - Touch-optimized UI importing-products-touch-optimized-ui
-
Navigate to the Products console, via Commerce.
-
Using the Products console navigate to the required location.
-
Use the Import Products icon to open the wizard.
-
Specify:
-
Importer
The importer for the specific commerce provider, by default
Geometrixx
. -
Source
The file that you want to import; you can use the browser to select a file.
-
Incremental Import
Indicate whether this is an incremental import (as opposed to full).
note note NOTE The incremental import (of the sample geometrixx-outdoor importer) operates at the product level. A customized importer can be defined to operate as required. -
-
Select Next to import the products, a log of the actions taken is shown.
note note NOTE The products are imported to, or relative to, the current location. note note NOTE Repeatedly using Next and Back repeatedly imports the product definitions. However, as they have the same SKUs, the information existing in the repository is overwritten. -
Select Done to close the wizard.
Importing Products - Classic UI importing-products-classic-ui
-
Using the Tools console open the Commerce folder.
-
Double-click to open the Product Importer:
-
Specify:
-
Store Name
Products are imported to:
/etc/commerce/products/<*store name*>/
-
Commerce Provider
The importer for your commerce provider; by default Geometrixx.
-
Source File
The location in the repository of the file you want imported.
-
Incremental Import
Indicate whether this is an incremental import (as opposed to full).
-
-
Click Import Products.
Creating Product Information creating-product-information
Creating Product Information - Touch-optimized UI creating-product-information-touch-optimized-ui
-
Using the Products console (via Commerce) navigate to the required location.
-
Use the Create icon to select either (depending on the structure and location):
- Create Product
- Create Product Variation
-
The wizard opens. Use the Basic and Product Tabs to enter the product attributes for the new product or product variant.
note note NOTE Title and SKU are the minimum required to create a product or variant. -
Select Create to save the information.
Editing Product Information editing-product-information
/etc/commerce/products/...
Editing Product Information - Touch-optimized UI editing-product-information-touch-optimized-ui
-
Using the Products console (via Commerce) navigate to your product information.
-
Using either:
Select the View Product Data icon:
-
The product attributes are shown. Use Edit and Done to make any changes.
Showing Product References showing-product-references
Showing Product References - Touch-optimized UI showing-product-references-touch-optimized-ui
-
Using the Products console (via Commerce) navigate to your product information.
-
Open the secondary rail for References with the icon:
-
Select your required product - the secondary rail updates, showing you the reference types available:
-
Click on the reference type (for example, Product Pages) to expand the list.
-
Select a specific reference so you can show the options:
- Navigate to Product Page
- Edit Product Page
Search for Products search-for-products
-
Navigate to the Products console, via Commerce.
-
Open the secondary rail for Search with the icon:
-
Several facets are available for you to search for products. You can use only one or several facets for a search. The products found appear:
-
Clicking/tapping a product opens it. You can also publish it or view the product data.
Extending Search extending-search
You can modify an existing facet or add new ones, using CRXDE Lite:
-
Navigate to:
http://localhost:4502/crx/de/index.jsp#/libs/commerce/gui/content/products/aside/items/search/items/searchpanel/facets
-
You can edit, for example, the sizes that appear on the product search page. Click the
sizegroup
node. -
Click
items
node, then clickpropertypredicate
node. -
You can edit the
propertyValues
. For example, you could add XS, or XXL, or remove a size. -
Click Save All and navigate to the products search page. Your changes should appear.
Multiple Assets multiple-assets
You can add multiple assets in the product component, then specify the asset that you want to have appear on the product page.
Adding Multiple Assets adding-multiple-assets
-
Navigate to the Products console, via Commerce.
-
Using the Products console, navigate to the required product.
note note NOTE You have to be at the product level, not at the variant level. -
Select the View Product Data icon with selection mode or quick actions.
-
Select the Edit icon.
-
Scroll to Add.
-
Select Add. A new asset placeholder appears.
-
Selecting Change opens a dialog box that lets you choose an asset.
-
Select the asset that you want to add.
note note NOTE The assets you can select are from Assets. -
Select the Done icon.
Two assets are now stored in your product component. You can configure which one appears on the product page. This works with a category system. First you must add a category to the individual assets:
-
Select View Product Data.
-
Type an Asset Category under the assets, for example,
cat1
andcat2
.note note NOTE You can also use tags for categories. -
Select the Done icon. You now have to rollout your changes.
Now your assets in the product component have a category. You can configure which category is displayed at three different levels:
The mechanism to select the image to be displayed is as follows:
- Verify if a category is set for the Product Page.
- If not, verify if a category is set for the Catalog.
- If not, verify if a category is set for the Products Console.
Product Page product-page
- Navigate to your product page.
- Edit the product component.
- Type the Image Category that you chose (
cat1
for example). - Select Done. The page refreshes and the correct asset should be displayed.
Catalog catalog
- Navigate to your catalog.
- Select View Properties.
- Select Edit.
- Select the Assets tab.
- Type the required Product Asset Category.
- Select Done.
- Rollout your changes.
Products Console products-console
- Using the Products console, navigate to the required Product.
- Select View Product Data.
- Select Edit.
- Type a Default Asset Category.
- Select Done.
- Rollout your changes.
Publishing/Unpublishing Product Information publishing-unpublishing-product-information
Publishing/Unpublishing Product Information - Touch-optimized UI publishing-unpublishing-product-information-touch-optimized-ui
-
Using the Products console (via Commerce) navigate to your product information.
-
Using either:
Select the Publish or Unpublish icon as required:
The product information is published or unpublished, as appropriate.
Event Handler for Product Updates event-handler-for-product-updates
There is an Event Handler which logs an event when a product is added, edited, or deleted and when a product page is added, edited, or deleted. There are the following OSGi events:
com/adobe/cq/commerce/pim/PRODUCT_ADDED
com/adobe/cq/commerce/pim/PRODUCT_MODIFIED
com/adobe/cq/commerce/pim/PRODUCT_DELETED
com/adobe/cq/commerce/pim/PRODUCT_PAGE_ADDED
com/adobe/cq/commerce/pim/PRODUCT_PAGE_MODIFIED
com/adobe/cq/commerce/pim/PRODUCT_PAGE_DELETED
For the PRODUCT_*
events, the path points to the base product in /etc/commerce/products
. For the PRODUCT_PAGE_*
events, the path points to the cq:Page
node.
You can look at them in the Web Console in OSGI events ( /system/console/events
), for example:
Image with Add to Cart Links image-with-add-to-cart-links
The Image with Add to Cart Links component lets you quickly add a product to the cart by creating a hotspot linked with a product on an image.
Clicking the hotspot opens a dialog which let you choose the size and quantity of the product.
-
Navigate to the page where you want to add the component.
-
Drag and drop the component in the page.
-
Drag and drop an image in the component from the assets browser.
-
You can either:
- click the component and then click the Edit icon
- make a slow double-click
-
Click the fullscreen icon.
-
Click the Launch Map icon.
-
Click one of the shape icons.
-
Modify and move the shape as required.
-
Click the shape.
-
Clicking the browse icon opens the Asset Picker.
note note NOTE Alternatively, you can type directly the product path which has to be at the product level, not the variant level. -
Click the confirm icon twice then click exit fullscreen.
-
Click somewhere on the page next to the component. The page should refresh and you should see the following symbol on your image:
-
Switch to preview mode.
-
Click the + hotspot. A dialog opens where you can choose the size and quantity of the product you entered in Path.
-
Enter a size and a quantity.
-
Click the Add to cart button. The dialog closes.
-
Navigate to your cart. The product should be here.
Configuration Options configuration-options
You can configure how the dialog looks like when you click the hotspot:
-
Click the component and click the configure icon.
-
Scroll down. There is an ADD TO CART tab.
-
Click ADD TO CART. There are three configuration options that you can use.
-
Click the Done icon.
Catalogs catalogs
Generating a Catalog generating-a-catalog
Generating a Catalog - Touch-optimized UI generating-a-catalog-touch-optimized-ui
To generate a Catalog:
-
Open the Sites console (for example, http://localhost:4502/sites.html/content).
-
Navigate to the location where you want to create the page.
-
To open the option list, use the Create icon:
-
From the list, select Create Catalog. The Create Catalog wizard opens.
-
Navigate to the required Catalog Blueprint.
-
Select the Select button and click the required Catalog Blueprint.
-
Select Next.
-
Type a Title and a Name.
-
Select the Create button. The catalog is created and a dialog opens.
-
Selecting the Done button brings you back to the Sites console where you can see your catalog.
Tapping/clicking Open Catalog button opens your catalog (for example,
http://localhost:4502/editor.html/content/test-catalog.html
).
Generating a Catalog - Classic UI generating-a-catalog-classic-ui
-
Using the Websites console, navigate to your Catalog Blueprint, then the Base Catalog.
For example:
http://localhost:4502/siteadmin#/content/catalogs/geometrixx-outdoors/base-catalog
-
Create a page using the Section Blueprint template.
For example,
Swimwear
. -
Open the new
Swimwear
page, then click Edit Blueprint. The Properties dialog box opens so you can set up the Products selection.For example, open the Tags/Keywords field to select Activity, then Swimming from the Geometrixx-Outdoors section.
-
Click OK so that your properties are saved; example products are shown under the Product Selection Criteria on the blueprint page.
-
Click Rollout Changes…, select Rollout page and all sub pages, then click Next then Rollout. Once the rollout is completed successfully, the Status indicator shows as green.
-
You can now click Close and check the new catalog section; for example, on and under:
http://localhost:4502/cf#/content/geometrixx-outdoors/en/swimwear.html
-
Again from the blueprints page click Edit Blueprint and in the Properties dialog open the Generated Page tab. In the Banner list field, select the image that you want to show; for example,
summer.jpg
-
Click OK so your properties are saved; banner information is shown under the Product Selection Criteria on the blueprint page.
-
Rollout these new changes.
Rolling Out a Catalog rolling-out-a-catalog
Rolling out a Catalog - Touch-optimized UI rolling-out-a-catalog-touch-optimized-ui
To rollout a catalog:
-
Navigate to the Catalogs console, via Commerce.
-
Navigate to the catalog that you want to rollout.
-
Using either:
Select the Rollout Changes icon:
-
In the wizard, set the rollout as needed and then click Rollout Changes.
-
A dialog box opens. Select Done when the process is finished.
Rolling out a Catalog - Classic UI rolling-out-a-catalog-classic-ui
To rollout a catalog:
-
Navigate to the Catalog that you want to rollout. For example:
http://localhost:4502/cf#/content/catalogs/geometrixx-outdoors/base-catalog.html
-
Click Rollout Changes…
-
Set the rollout as needed.
-
Click Rollout.
Blueprint Importer blueprint-importer
Blueprint Importer - Touch-optimized UI blueprint-importer-touch-optimized-ui
-
Navigate to the Catalogs console, via Commerce.
-
Navigate to the location where you want to import the catalog blueprint.
-
Select the Import Blueprints icon.
-
In the wizard, select the Source as required and click Next.
-
Select Done when the import is finished.
Blueprint Importer - Classic UI blueprint-importer-classic-ui
-
Using the Tools console, navigate to Commerce.
For example:
http://localhost:4502/miscadmin#/etc/commerce
-
Open the Catalog Bluprint Importer.
-
Set the import as needed.
-
Click Import Catalog Blueprints.
Promotions promotions
Creating a Promotion creating-a-promotion
Creating a Promotion - Classic UI creating-a-promotion-classic-ui
-
Open the Websites console of your author instance.
-
In the left-hand pane, select your required Campaign.
-
Click New, select the Promotion template, then specify a Title (and Name if necessary) for your new voucher.
-
Click Create. The new promotion page is shown in the right-hand pane.
-
Edit the Properties by either:
- opening the page, then clicking the Edit button to open the Properties dialog
- selecting the page in the Websites console, then using the context menu (usually the right mouse button) to select Properties… and open the properties dialog
Specify the Promotion Type, Discount Type, Discount Value and any other fields as required.
-
Click OK to save.
-
You can now activate your promotion, so that shoppers see it on the publish instance.
Vouchers vouchers
Creating a Voucher creating-a-voucher
Creating a Voucher - Classic UI creating-a-voucher-classic-ui
-
Open the Websites console of your author instance.
-
In the left-hand pane, select your required Campaign.
-
Click New, select the Voucher template, then specify a Title (and Name if necessary) for your new voucher.
-
Click Create. The new voucher page is shown in the right-hand pane.
-
Open your new voucher page with a double-click, then click Edit and configure the information as required.
-
Click OK to save.
-
You can now activate your voucher, so that shoppers can use it in their carts on the publish instance.
Removing Vouchers removing-vouchers
Removing Vouchers - Classic UI removing-vouchers-classic-ui
To make a voucher unavailable to customers, you can either:
- Deactivate the voucher - it remains available on the author environment so you can reactivate it later.
- Delete it completely.
Both actions can be done from the Websites console.
Modifying Vouchers modifying-vouchers
Modifying Vouchers - Classic UI modifying-vouchers-classic-ui
To change the properties of a voucher or promotion, you can double-click it on the Websites console and click Edit. After saving it, you should activate it so that the changes get pushed to the publish instances.
Adding Vouchers to a Cart adding-vouchers-to-a-cart
To allow users to add vouchers to their carts, you can use the built-in Vouchers component (Commerce category). Add this to the same page as where the cart is displayed (but this is not mandatory). The vouchers component is merely a form in which the user can enter a voucher code, it is the shopping cart component that actually shows the list of applied vouchers and their discount.
In the demo site (Geometrixx Outdoors - English) you can see the voucher form on the cart page, under the actual shopping cart.
Orders orders
/etc/scaffolding/geometrixx-outdoors/order/jcr:content/cq:dialog
Creating Order Information creating-order-information
Creating Order Information - Touch-optimized UI creating-order-information-touch-optimized-ui
-
Using the Orders console navigate to the required location.
-
Use the Create icon to select Create Order.
-
The wizard opens. Use the Basic, Content, Payment, and Fulfillment tabs to enter the information about the new order.
-
Select Create to save the information.
Editing Order Information editing-order-information
Editing Order Information - Touch-optimized UI editing-order-information-touch-optimized-ui
-
Using the Orders console navigate to the order.
-
Using either:
Select the View Order Data icon:
-
The order information is shown. Use Edit and Done to make any changes.