Release Date:

New Features

NEW Cloud UI Product Detail Page

Aspenware is excited to introduce our newly redesigned PDP for Cloud UI. The new PDP leverages Aspenware’s design system and component libraries, which bring a fresh, contemporary look and feel and a consistent, streamlined UX to the shopping pages. All newly designed elements have undergone extensive testing in usability studies and A/B testing.

Simplified Information Flow: We've streamlined the design and organized information more predictably, reducing clutter and scrolling, especially on mobile devices. This involves a linear attribute selection process, eliminating the dynamic box on the right for desktop, providing concise access to short and long descriptions, offering an intuitive and detailed item summary, keeping calls-to-action (CTAs) and quantity selections consistently visible on both desktop and mobile and enhancing the clarity of attribute selections with titles and optional descriptions. A/B tests and usability studies have revealed that excessive clutter and mandatory options below the visible screen on shopping pages hinder mobile users, resulting in lower conversions.

Simplified and Data-Driven Add-to-Cart Optimization: The Cloud UI PDP enhances the cart-adding process with a new, user-friendly interface. On mobile, the interface remains visible and straightforward, featuring only the essential call-to-action and quantity selection. For desktop, the add-to-cart button, quantity selector, and item summary stay together and are visible as users scroll. These improvements, informed by successful A/B test results for both mobile and desktop, led to a 9.5% to 16% increase in cart additions using the simplified mobile method. Additionally, there was a 1% to 4% boost in revenue per visitor.

Improved Item Summary and Savings: Savings information can be added to more products and highlighted more clearly in the item summary and cart notice. Customers are made more aware that advanced purchase behavior is rewarded with discounted pricing throughout the shopping experience by highlighting the savings.

Additionally, the cart notice includes information on discounts applied to the added item from coupons they have already added in their session.

NEED TO UPDATE VISUAL FOR CART NOTICE

Ability to add accurate savings information for non-dynamically priced products: Defining a max price for non-dynamically priced variants enables more robust discount visibility. This used to only be available for dynamically priced products using the base price entry feature.

Theme Designer and Design System Utilization: The introduction of a design system also comes with clearer guidelines on what can and cannot be customized. This simplifies the development of new themes and ensures a consistently improved user experience across all resort sites. Theme adjustments for these pages can be made on-the-fly with the assistance of your Aspenware Service Agent, without the need to wait for a code deployment.

Optimized components and control types: We’ve introduced easy-to-use control types that require less vertical real estate, are more mobile friendly, and ensure the information that is presented is easily consumable and improves add-to-cart rates. The refreshed components include:

• Radio button

• Drop down (aka Select)

• Checkbox

• Inline date picker

• Drop down date picker

• Item Summary

• Product Description

• Product image

• Add to cart button

• Quantity selection

• Related products

• Coach messages

• Cart notice

• Cross-sell products

• Error and success messages

• Edit cart mode

• Button chip selector (COMING SOON in 1.5)

Automatic redirection for deep links to the PDP if URLs from the marketing site: 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 documentation, however, 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.

See the Redesigned PDP for Cloud UI documentation to learn more about this new refresh.

Enhancements

PDP (Product Page) Refresh - New Language String

Included in our ongoing visual refresh of the Product Detail Page (PLP), we now offer resorts the opportunity to customize the “Upgrade Your Experience” label that precedes the display of add-on products.

Admin users can edit a configurable language string, product.productattributes.addons.label, which will allow replacement of the default text (Upgrade Your Experience) with custom copy. While the design is responsive, font and size are determined by theme settings, so best practice would be to limit the custom text to a single line.

PDP - Language String for Attributes

new language strings are
productattributes.selectoption - "Select Option"
optional - Optional (parens are added by code, so don’t add parentheses)
required - Required (parens are added by code, so don’t add parentheses)

• 

  • Select Option (Required) is a new language string defaulted to “Select Option (Required)” - unless created via a separate ticket - same language string across control types

  • Product use number of days attribute (can use same product in cycle e when ready): https://qa-current.aspenwarecommerce.net/s/purchase-team-products/p/attributed-product-with-dynamic-pricing-and-simple-add-on-copy (confirmed for qa current- will need to update cycle e if testing there)

• If a date is not required and has not yet been selected, the “Select Option (Optional)” message shows in grey (See Mobile 1.7 for example)

  • Select Option (Optional ) is a new language string defaulted to “Select Option (Optional)” - unless created via a separate ticket - same language string across control types

  • Product use insurance add on attribute (can use same product in cycle e when ready): https://qa-current.aspenwarecommerce.net/s/purchase-team-products/p/attributed-product-with-simple-and-hidden-attributed-add-on (confirmed for qa current- will need to update cycle e if testing there)

Standard Date Picker - Date Selection

If using a standard date picker and you want default text to load before a date is set, like mm/dd/yyyy, add it in the text prompt for start date. Ensure that start and end date settings are set to YYYY-MM-DD.

Cart Notice

This version includes a refreshed cart notice that includes better details on savings off the base price and also includes discount savings if the discount is added prior to adding to the cart.

Cloud UI Version Visibility

Can now see the Cloud UI version in the nop dashboard,and also in the AW dev ops dashboard used for tracking who is on what release. Will show up as public.ui x.x/

Unavailble Dates Indication

Calendar dates that are unavailable but not sold out, perhaps they are a past date, not priced, etc. now show distinctly as unavailable rather than sold out on the PDP.

Breadcrumbs

The name of the product and breadcrumbs to get back to the category are now added to the Cloud UI pricing calendar page.

Hover State on Pricing Calendar

The hover state on the Cloud UI pricing calendar has been updated so that it’s not identical to the sold out view. The date hover border now defaults to the resort’s primary color. Note that this does require theme designer updates to define. Please contact your Aspenware Service Agent (support@aspenware.com) if you are interested in this change.

PDP Page Title

To aid accessibility, a page title now appears on the browser tab when the user is on a Cloud UI PDP.

Favicons

Cloud UI now supports the update of favicons through Theme Designer. Please contact your Aspenware Service Agent (support@aspenware.com) if you are interested updating a favicon.

Resolved Issues

Legacy Products with Cloud UI - Calendar Loading

• The new Redesigned Calendar no longer loads if a product is the only product in a category and has been set to load the legacy calendar. The standard pricing calendar now loads in all circumstances if the product is flagged as “Use Legacy PDP.”

Product-level and Store-wide Cut-off Times

• Previously, on the Cloud UI PDP and Redesigned Calendar, product-level and store-wide cut-off times were not firing on the resort’s timezone, causing products to be unavailable for online purchase prematurely. Now, these cut-off times work as expected, honoring the resort’s timezone on the Cloud UI Redesigned Calendar.

Pricing Calendar Display for Future Dates

• The Redesigned Full-Page Pricing Calendar only displays and enables selection for dates in the month that is being viewed.

Cloud Header Formatting

• Previously, for resorts on the Cloud UI header, there were some formatting issues on the PDP when in edit mode. These have been resolved and the formatting now works as expected.

Edit Cart-Enabled Products

Previously edit cart-enabled products would route the customer to the legacy experience if a product was in edit mode. Now edit cart item works with the Cloud UI and will route the product to legacy or cloud depending on the product’s flag.

Snippet to Support Convert AB Testing Tool

Snippet code has been added to the nopCommerce setting seosettings.customheadtags, Previously, an HTML widget was used and the HTML widget zone html_head_tag loaded in the body of the code on some pages, causing issues with Convert AB testing tool. The tool now works as expected.

Scarcity Indication

For PDPs that use the new scarcity color indication, If “today’s date” triggered the threshold, it was not showing as color coded even though it should have been. This has been resolved and color-coding now displays as expected.