Configuration: Cloud UI Product Detail Page

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

Prerequisite Tasks

Infrastructure Tasks required

• Ensure that your environment has been upgraded to the latest infrastructure recommendations and Cloud UI is enabled. If you have any questions on the status of your environment, reach out to your Aspenware representative

• Upgrade to Aspenware Commerce 3.3 or later.

• Work with your Aspenware Service Agent (support@aspenware.com) on using Theme Designer to theme Cloud UI pages. See the Cloud UI Theming Details to learn more about what is customizable for the Cloud UI PDP.

Marketing Site / Email Update Tasks

For the best user experience, it is advised that product detail page deep links on the marketing site and from emails be updated to use the new url path, which uses an /l/ between the host domain and category slug rather than an /s/. See the “important” box above.

If a deep link to a PDP is not updated, or a link is updated to use the Cloud UI url and that product page should continue to render in Legacy, the shop will handle re-directing the user to the correct experience (Legacy or Cloud UI) automatically so that customers have a consistent experience with a given product, regardless of their origination route. This auto-redirection can be enabled and disabled using the setting ‘awcloud.redirectenabled.’ We recommend that resorts update their deep links rather than rely on this failsafe, as there can sometimes be a “blip” when using the awcloud.redirectenabled for redirection.

Commerce Tasks

• 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.

  • 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.

Open

• Update the following settings in Aspenware Commerce Admin.

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):

• Fast Flow

• Reservations

• Renewal

• IKON Friends and Family ticket

• Arrive Parking

• Retail

• Golf

• Payment Plans for non US date format resorts (the payment plan schedule modal on the PDP displays mm/dd/yyyy for all cultures and will be fixed in 2.0)

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

  Open

  

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.

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.

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.

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

There are several options for enhanced product configuration on the Cloud UI PDP that will offer information to the guest before they add to cart. The following graphic illustrates the possibilities and instructions for configuring each element are outlined below.

Define Variant Names to Display in the Item summary and Cart notice

If a product has attribute combinations defined, admins can define a name for each variant (product attribute combination). This name will be used in the item summary shown to customers before adding to cart on the PDP to describe the selected variant. It will also be passed into Google Analytics 4 as the variant name. If no product attributes are used, the product name will display in the item summary and be passed to Google Analytics 4 as the variant name. If a variant name is not defined, the product name will be displayed.

For a better user experience and effective usage in Google Analytics 4 (GA4) reporting, it's advisable to review and edit all variants used on Cloud UI Product Detail Pages (PDPs). When doing so, aim for clear and concise variant names, keeping in mind that these names are visible to guests.

Variant names are also shown for add-on product selections to provide a more descriptive explanation of the add-on, similar to the example mentioned earlier. These variant names for add-ons will be set up and configured within the add-on product itself.

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.

Define Max Prices for Variants to Display in the Item summary and Cart notice

If a non-dynamically priced product has attribute combinations specified, admins can set a maximum price for each variant (product attribute combination). For dynamically priced products, the maximum price should be defined using the Base Price feature in dynamic pricing. For products that don’t have attribute combinations, the maximum price should be defined using the “Old price” field in the product shell guide.

If a maximum price is defined, it will be used to highlight the cost savings when customers view the product summary before adding it to their cart on the Product Detail Page (PDP). This max price information will also be displayed for add-on products, showing the savings associated with purchasing online or in conjunction with another product in the add-on product experience.

It is recommended to edit all variants used on Cloud UI PDPs if the online price is cheaper than the maximum price to ensure an optimal user experience.

Max price can also be displayed for add-on product selections, to better explain the add-on, as in the example above. The max price for add-ons will be configured in the add-on product itself.

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.
  
  

4. Configure Button Group Control Type (Available in Cloud UI 1.5 or later)

To configure the Button Group for an attributed product, follow the standard configuration instructions to set up the attribute and simply select “Button Chip Selector” for the control type.

Depending on the type of attribute, horizontal or vertical chips will be triggered.

A vertical button group will be displayed if:

• If at least one attribute value exceeds the maximum width of ~7 characters.

• If any attribute value in the group has an associated add-on price.

• If any attribute value in the group contains a pipe character “|”.

Otherwise they will display as a horizontal button group.

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

Follow the instructions to edit the following language strings in Aspenware Admin.