Commerce 3.7/Cloud UI 2.0: Cloud UI PDP Updates

Item Summary and Cart Notice Savings Badge

The design of the Cloud UI Item Summary has been updated, including a refreshed display of savings information in a "badge" format and adjustments to the layout and sizing of price displays. Similarly, the Cart Notice design has been updated to incorporate the "badge" display for savings information and revised price display layout and sizing. These changes aim to ensure consistency in the presentation of price and savings information from the add-on display to the cart notice.

Open

Savings Badges for Item Summary and Cart Notice

As part of transitioning from a text-based savings message to a badge, we've updated the language string for savings information on each item in the item summary, cart notice, and add-ons when applicable.

• The new language string, publicui.product.savings, will truncate after 13 characters. The default for this string is “{0}% OFF”.

• The badge color and text are customizable in Theme Designer. Contact your Aspenware Customer Success Representative for assistance.

Enable Tool Tips Next to Badge

• The "you saved ${0}" messaging has been relocated below the cart item totals so subtotal and total info could be grouped.

Tool Tips

Cloud UI supports tool tips that allow resorts to clarify that savings badges represent discounts off the window rate for customers. These tool tips are visible upon hovering over the “i” next to the badge (see below). To enable this feature:

• Set awcloud.tooltips.isenabled to TRUE

• Customize the language string, aspenware.commerce.cart.onlinesavings for the copy for the tool tip. The default is “Save {0}% off the list price.”
  
  

Open

Max Price of Add Ons

Savings display now shows on add on selector before user has selected add on to incentivize/clarify selection and savings (still shows in Item Summary and Cart Notice). If the add on had savings when selected in item summary before, now it will show before the option is selected.

• For non-dynamically priced add-ons: If a max price is defined for a variant on the add-on product, savings will be displayed. To prevent savings from showing, do not configure a max price.

• For dynamically priced add-ons, a feature only available to pilot customers in 3.7 (full roll out coming in 3.8): If base price is defined for the selected variant and date (using dynamic pricing base pricing for the add-on product), savings will be displayed. To prevent savings from showing, do not configure base pricing.

Tab Order New Group Member on PDP Assignment

The tab order—referring to the sequence in which users navigate between fields using the Tab key—now functions as expected for non-USD formats when creating a new group member and assigning them on the PDP.

Edit Cart for Requires Assignment

Items that require assignment can now be edited in the cart. This is only for products that require assignment on the PDP and are enabled for enhanced cart.

Icon Image on Horizontal Button Chips

Images can be added on attribute values provided that it is on all options for horizontal button chips. Optional product icon images are 40 x 40 px.

Handling of Attribute Value in Cart Notice

Improvements have been made for the cart notice handling of an attribute value that contains a number. This improvement also cascades to the chip display in the cart, checkout, and confirmation email.

Error Messages on Small Screens

An issue was resolved where error messages displayed when an item couldn't be added to the cart were being cut off on smaller screen sizes.

Incorrect Item Name in Item Summary

When navigating from one Cloud UI PDP to another PDP on slower internet connections, without visiting another page in between (such as a cross-sell or related product), the item summary would temporarily display the name of the previously visited product until the new PDP fully loaded and the item summary updated with the correct product name.

Content Wrap for Drop Downs

If an attribute was set as a drop down and had more than 1 line of content, the drop down selector would wrap the content when not opened. This has been updated to only wrap content for options if the drop down is open.

Enhanced Data Structure for Item Summary

We’ve improved the underlying data structure used by the item summary so that it’s easier to scan and comprehend. Although the design of the item summary has been updated, there are no functional changes to it. These data structure changes allow add-ons with a max price configured to display price and savings information in a more seamless and consistent manner.

Back Button Navigation and Selected Value Retention

We’ve resolved an issue with Cloud UI PDPs that use the pricing calendar and button chips or radio buttons as their control type on the PDP, where if users click through on the pricing calendar and then use the back arrow in their browser, the pricing calendar doesn’t retain pre-selected values that should be selected to populate accurate pricing.

To learn more about the Cloud UI PDP, see Cloud UI PDP.