Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Follow the instructions below to configure products using the new Cloud UI Product Follow the instructions below to configure products using the new Cloud UI Product Detail Page.

Note

IMPORTANT: While Cloud UI is supported for most product detail pages, some features and configuration options are not yet supported in Cloud UI. These configurations will continue to work as usual if loaded on the Legacy pages. See section 1 below for a detailed list of incompatible configurations.

...

  • If the product is configured to show the pricing calendar as the landing page, ensure the Cloud UI Full-Page Pricing Calendar is set in advance.

  • Configure Product Shell and Product Attributes as usual, but consider the following differences for the Cloud UI PDP.

    • [Dynamic] and [Conditional] are no longer needed as the Dynamic box is not used for the Cloud UI PDP and conditional logic will be driven off the Conditional Attribute setup described in Section 5 of the Product Attributes Configuration Guide.

    • Cloud UI offers better coach messaging if an attribute is required but not preselected. Defaults no longer need to be defined unless the product uses the pricing calendar.

    • Upgrade your Experience is a configurable Language String (see below)

    • Attribute descriptions are configured differently from what is documented in section 6 of the Product Attributes Configuration Guide. Follow the instructions below for Attribute descriptions.

    • Meta title text and price from related product’s configuration pulls through on related product cards.

  • Flag products that are not compatible with Cloud UI so that they continue to render in the Legacy UI. See section 1 below for flagging instructions and a complete list of incompatible product types.

  • Product Inline calendars on the Cloud UI PDP now automatically display the month with the first available date, eliminating the need for guests to cycle through months to find it. This update makes booking more convenient. If you have enacted the recommended work-around to default the calendar to the first available month, this should be removed from products moving to the Cloud UI PDP.

...

    • When adding links in product descriptions, for these links to inherit theme customizations, class="ads-link" must be added to the link HTML. For example Go to this <a href="{LINK}" class="ads-link">LINK TEXT GOES HERE</a> has the class, but the following link does not: Go to this <a href="{LINK}">LINK TEXT GOES HERE</a>

  • Flag products that are not compatible with Cloud UI so that they continue to render in the Legacy UI. See section 1 below for flagging instructions and a complete list of incompatible product types.

  • Product Inline calendars on the Cloud UI PDP now automatically display the month with the first available date, eliminating the need for guests to cycle through months to find it. This update makes booking more convenient. If you have enacted the recommended work-around to default the calendar to the first available month, this should be removed from products moving to the Cloud UI PDP.

Note that if the short or long description exceeds 3 lines, the first 3 lines will display and the “See more” hyperlink will appear on the PDP. Users then have the option to click to expand and read all of the details. In usability testing, about 15% of users clicked to read more.

...

  • Update the following settings in Aspenware Commerce Admin.

Click the square icon to expand the table ->

...

Setting

...

Details

...

calendarsettings.useposinventory

...

Feature: Cloud UI Pricing Calendar

Acceptable Values: Boolean - True/False

Function:

If TRUE, the color shading of the calendar is based on inventory. This is required for the Cloud UI Calendar if calendarsettings.enabledadvancedcalendar is set to true.

...

calendarsettings.lowinventorybackgroundcolor

...

Feature: Cloud UI Pricing Calendar

Acceptable Values: HEX Color, Recommended #F6D241 (yellow)

Function: Color used to shade calendar on low inventory dates.

...

calendarsettings.soldoutstatustext

...

Feature: Cloud UI Pricing Calendar

Acceptable Values: Text, EX: UNAVAILABLE

Function: Legend text for sold out dates

...

awcloud.redirectenabled

...

Feature: Cloud UI PDP

Acceptable Values: True False

Function: This setting ensures that if a deep link from the marketing site is not properly set, the user will be routed to the correct PDP. Routing will direct to Cloud UI PDP or Legacy PDP, based on what is set at the product level.

Detailed Setup Guide

  1. Flag products that are incompatible with the Cloud UI PDP to continue to use Legacy UI PDP

  2. Define Attribute Title(s) and Description(s) (Optional but Highly Recommended)

  3. Configure data to enhance the item summary and cart notice (Optional but Highly Recommended)

  4. Customize Language Strings as Desired (Optional but Highly Recommended)

1. Flag products that are incompatible with the Cloud UI PDP to continue to use Legacy UI PDP

Most products are Cloud UI compatible, but there are currently some exceptions. If a product has any of the following features/configurations enabled on the PDP it should NOT load on the Cloud UI and should be flagged to continue to display Legacy PDP.

These products will continue to work if they retain their Legacy configuration and are flagged as noted below (Cloud UI compatibility is coming soon for most of these product types):

Info

NOTE: Time-based products are supported in Cloud UI version 1.5 or later. Voucher products, Affirm products and Payment Plan products are supported in Cloud UI version 1.6 or later, and Radio button date configuration products are supported in Cloud UI version 1.7 or later.

For these listed exception products, there is a new product-level setting that enables some products to continue to load for users in the Legacy UI, and for the majority of products to load in the new Cloud UI. Respecting this routing will work whether a PDP is accessed via the category page, related product link, or cross-sell link. To flag a product so that it continues to load in the Legacy UI:

  • Find the product from Catalog > Products >Edit

  • Scroll to the Aspenware Commerce section of the edit page

  • Locate the new product-level setting called Use Legacy Product Page.

  • Check the box

  • Click SAVE ALL SETTINGS

    Image Removed
Info

NOTE: This setting should ONLY be turned on if a product is incompatible with Cloud UI.

2. Define Attribute Title and Description (Optional but Highly Recommended)

In the Cloud UI PDP, Cloud customers can customize the titles and descriptions of product attributes. These titles and descriptions will appear above the corresponding attributes on the Product Detail Page (PDP).

To maintain a consistent design, the Cloud UI uses a predefined styling for attribute titles and descriptions. As a result, you won't have access to a rich text HTML editor for these fields. However, you can still include basic <a> links by using the plain text field if you want to link to external content from your attribute descriptions.

Info

NOTE: It is recommended that you edit all attributes used on Cloud UI PDPs to ensure an optimal user experience.

To edit product attribute titles and descriptions:

  • Go to Catalog > Attributes > Product Attributes

  • Scroll to the desired attributes and select Edit

  • Edit the attribute as indicated below

  • Click Save

Attribute titles and descriptions can also be displayed for add-on product selections, to better explain the add-on, as in the example below.

...

  • Update the following settings in Aspenware Commerce Admin.

Click the square icon to expand the table ->

Setting

Details

calendarsettings.useposinventory

Feature: Cloud UI Pricing Calendar

Acceptable Values: Boolean - True/False

Function:

If TRUE, the color shading of the calendar is based on inventory. This is required for the Cloud UI Calendar if calendarsettings.enabledadvancedcalendar is set to true.

calendarsettings.lowinventorybackgroundcolor

Feature: Cloud UI Pricing Calendar

Acceptable Values: HEX Color, Recommended #F6D241 (yellow)

Function: Color used to shade calendar on low inventory dates.

calendarsettings.soldoutstatustext

Feature: Cloud UI Pricing Calendar

Acceptable Values: Text, EX: UNAVAILABLE

Function: Legend text for sold out dates

awcloud.redirectenabled

Feature: Cloud UI PDP

Acceptable Values: True False

Function: This setting ensures that if a deep link from the marketing site is not properly set, the user will be routed to the correct PDP. Routing will direct to Cloud UI PDP or Legacy PDP, based on what is set at the product level.

Detailed Setup Guide

  1. Flag products that are incompatible with the Cloud UI PDP to continue to use Legacy UI PDP

  2. Define Attribute Title(s) and Description(s) (Optional but Highly Recommended)

  3. Configure data to enhance the item summary and cart notice (Optional but Highly Recommended)

  4. Customize Language Strings as Desired (Optional but Highly Recommended)

1. Flag products that are incompatible with the Cloud UI PDP to continue to use Legacy UI PDP

Most products are Cloud UI compatible, but there are currently some exceptions. If a product has any of the following features/configurations enabled on the PDP it should NOT load on the Cloud UI and should be flagged to continue to display Legacy PDP.

These products will continue to work if they retain their Legacy configuration and are flagged as noted below (Cloud UI compatibility is coming soon for most of these product types):

Info

NOTE: Time-based products are supported in Cloud UI version 1.5 or later. Voucher products, Affirm products and Payment Plan products are supported in Cloud UI version 1.6 or later, and Radio button date configuration products are supported in Cloud UI version 1.7 or later.

For these listed exception products, there is a new product-level setting that enables some products to continue to load for users in the Legacy UI, and for the majority of products to load in the new Cloud UI. Respecting this routing will work whether a PDP is accessed via the category page, related product link, or cross-sell link. To flag a product so that it continues to load in the Legacy UI:

  • Find the product from Catalog > Products >Edit

  • Scroll to the Aspenware Commerce section of the edit page

  • Locate the new product-level setting called Use Legacy Product Page.

  • Check the box

  • Click SAVE ALL SETTINGS

    Image Added
Info

NOTE: This setting should ONLY be turned on if a product is incompatible with Cloud UI.

2. Define Attribute Title and Description (Optional but Highly Recommended)

In the Cloud UI PDP, Cloud customers can customize the titles and descriptions of product attributes. These titles and descriptions will appear above the corresponding attributes on the Product Detail Page (PDP).

To maintain a consistent design, the Cloud UI uses a predefined styling for attribute titles and descriptions. As a result, you won't have access to a rich text HTML editor for these fields. However, you can still include basic <a> links by using the plain text field if you want to link to external content from your attribute descriptions.

Info

NOTE: It is recommended that you edit all attributes used on Cloud UI PDPs to ensure an optimal user experience.

To edit product attribute titles and descriptions globally, meaning defining titles and descriptions that will be displayed across all assigned products with no override attribute title and description defined for the specific product (see next section for details on product-specific override attribute titles and descriptions).

  • Go to Catalog > Attributes > Product Attributes

  • Scroll to the desired attributes and select Edit

  • Edit the attribute as indicated below

    • Titles must be plain text.

    • Descriptions can include links (anchor tags) but no other HTML.

    • 200 characters max is recommended for both titles and descriptions.

    • Invalid inputs trigger an error message, preventing incorrect data from being saved.

  • Click Save

Attribute titles and descriptions can also be displayed for add-on product selections, to better explain the add-on, as in the example below.

...

Info

NOTE: If an attribute title isn’t defined, the attribute name will be displayed above the attribute values on the PDP.

Product Override Attribute Titles and Descriptions can also be defined, which allows for clearer guidance on product detail pages (PDPs) and streamlines attribute management. To edit product attribute titles and descriptions at the product level, meaning defining titles and descriptions that will be used only for specific products and will override globally defined attribute title and descriptions:

  • Find the product from Catalog > Products >Edit

  • Scroll to the Product Attribute Overrides section. Within this section, if attributes are added, each attribute will be populated in the table and the override title and description can be edited, enabling admins to define product-specific attribute titles and descriptions.

    • Titles must be plain text.

    • Descriptions can include links (anchor tags) but no other HTML.

    • Both are optional, and if left blank, global values will be used instead.

    • Character limits from the attribute editor (200 characters) are enforced for product-specific configurations.

    • Invalid inputs trigger an error message, preventing incorrect data from being saved.

  • The new Attribute Display section includes a grid showing global titles and descriptions (view-only) for all assigned attributes.

    • If no product-level title is defined, the system defaults to the global attribute title and description on the front end

    • If no global attribute title and description are defined, the system defaults to displaying the attribute name on the front end.

    • See the image below to understand how attribute names, titles, and descriptions will appear on the Cloud UI PDP with various levels of configuration.

image-20241016-225834.pngImage Added

3. Configure Data to Enhance Item Summary and Cart Notice (Optional but Highly Recommended)

...

To edit product variant names:

  • Go to Catalog > Products

  • Edit the desired product.

  • Expand the Additional Product Settings section. Within this section, if attribute combinations are defined, each attribute combination will be populated in the table and can be edited.

...

To edit product variant names:

  • Go to Catalog > Products

  • Edit the desired product.

  • Expand the Additional Product Settings section. Within this section, if attribute combinations are defined, each attribute combination will be populated in the table and can be edited.

  • If you want to configure the max price but not show it to the guest, you can hide savings information on the product or add on product itself within the Aspenware Commerce settings section. To hide savings information from displaying to guests uncheck “Show Max Price” and select Save All Settings. Show Max Price is true by default for all products.

...

Resource Name

Default/Function

Feature

Example

shoppingcart.addtocart

Default: ADD TO CART

Cloud UI PDP

products.relatedproducts

Default: Related Products

Cloud UI PDP - Related Products

productattributes.selectoption

Default: Select Option

Function: If an option a product page (on the pricing calendar or the pdp) is not set, used to coach users that an option is not set but either required or optional (see below)

Cloud UI PDP and Pricing Calendar

optional

Default: Optional

(parentheses are added by code, so don’t add parentheses)

Function: Used in attribute selection coach messaging to indicate an option is optional, not required to enable add to cart

Cloud UI PDP

required

Default: Required

(parentheses are added by code, so don’t add parentheses)

Function: Used in attribute selection coach messaging to indicate an option is required, a selection is required to enable add to cart

Cloud UI PDP and Pricing Calendar

aspenware.commerce.cart.itemsummary

Default: Item Summary

Function: Title of Item Summary Box on PDP

Cloud UI PDP - Item Summary

aspenware.commerce.cart.total

Default: Total

Function: Label for the total of everything you are about to add to cart

Cloud UI PDP - Item Summary

aspenware.commerce.cart.yousaved

Default: You save

Function: Label to summarize online savings compared to window rate for product being added plus all add ons prior to adding to cart and in cart notice.

Cloud UI PDP - Item Summary

aspenware.commerce.cart.startdate

Default: Start date

Function: Label for selected date if product is dated

Cloud UI PDP - Item Summary

aspenware.commerce.cart.onlinesavings

Default: Save {}% off list price. (where percentage is dynamically populated).

Function: Label to summarize online savings compared to window rate for item being added (may also be used in cart notice once implemented)

Cloud UI PDP - Item Summary

image-20231221-165506.png

product.productattributes.addons.label

Default: Upgrade your experience

Function: Title to separate the add on option selections from core product selections

Cloud UI PDP - Add ons

publicui.cartnotice.itemadded

Default: Item added

Function: Cart notice title

Cloud UI PDP - Cart notice

image-20231221-165500.png

publicui.cartnotice.applycoupons

Default: Apply ‘Apply coupons in the <a href="{cartUrl}" class="ads-link">cart</a>’href="/cart">cart</a>

Function: Description to link to the cart so that users know to apply coupons in the cart

Cloud UI PDP - Cart notice

image-20231221-165447.png

publicui.cartnotice.checkout

Default: Checkout

Function: Direct link to checkout if user is logged in. Will log user in then route to checkout if signed out.

Cloud UI PDP - Cart notice

image-20231221-165453.png

publicui.cartnotice.viewcart

Default: View Cart

Function: Direct link to full cart page.

Cloud UI PDP - Cart notice

image-20231221-165506.png

publicui.cartnotice.itemsubtotal

Default: Per Item Subotal

Function: Price per item of what was just added to cart before discounts have been subtracted from the item price.

Cloud UI PDP - Cart notice

image-20231221-165504.png

publicui.cartnotice.itemstotal

Default: Per Item Total

Function: Price per item of what was just added to cart after discounts have been subtracted from the item price.

Cloud UI PDP - Cart notice

image-20240104-233526.png

publicui.cartnotice.carttotal

Default: Cart Total

Function: Displays the subtotal (before tax) of the entire user’s cart.

Cloud UI PDP - Cart notice

image-20240104-233816.png

publicui.cartnotice.itemupdated

Default: Item Changed

Function: Title of cart notice if PDP is in edit mode and customer is changing something about an already added cart item.

Cloud UI PDP - Cart notice when product in edit mode

image-20240109-004935.png

productattributes.nodatesavailable

Default: "No dates are available for your selection”

Function: Displays if a variant is selected that has no future availability

Cloud UI PDP

image-20240830-214239.png

...