Product fee displays on various pages, and other important updates

This release of the Storefront Template has the following new features:

• Product fee displays on various pages
• Product search related updates
• AngularJS upgrade
• Product variant information in the order details and the order confirmation page

Product fee displays on various pages

As a merchant, you can add fees to any of your products or items. An example of an additional charge on an item is a deposit fee on returnable bottles when you purchase beer. The fee can be one of the following types:

• Absolute fee: An amount that is applied on an item or on the item quantity, such as a $5 fee for every six-pack of beer.
• Percentage fee: An amount that is applied on an item, such as 5%.

When a customer selects an item in the Storefront, the Product Details page now shows the fee, if applicable, that is added to the item.

The fee also displays in the customer's cart and in the Order Details page. The amount shown in the TAX line represents the taxes on the items, and the fee, if applicable.

To display the fees, define the URL of the Fee service in the Site service and create fees for the products using an external fee provider. For more information about the Site service configuration, see the Configuration page.

For information about the Cart Calculation service's supported fee types and how fees are calculated in the cart, see the Cart Calculation Process page.

Product search related updates

This release includes updates that prepare the Storefront for upcoming changes to the product indexing with the Algolia Search service. Pull the latest Storefront updates as soon as possible to ensure that the upcoming Algolia Search service release does not interfere with the ability to use the search functionality in the Storefront.

Previously, product records sent to Algolia were indexed by the unique product ID value. With the new release, Algolia uses the value of the product's YRN property in the Algolia index instead of the product's ID property. You can use the search functionality regardless of whether your data is indexed by product ID or YRN. But to handle both types of Algolia indexing, it is strongly recommended to update as soon as possible, or the search functionality could cease to work in your Storefront.

AngularJS upgrade

AngularJS and its related libraries are now updated to the latest stable versions. The library base is renewed and the Storefront is adjusted to the features of the new libraries.

The following Angular, and Angular-related libraries are updated to the specified versions:

angular: 1.5.9

angular-mocks: 1.5.9

angular-sanitize: 1.5.9

angular-touch: 1.5.9

angular-animate: 1.5.9

angular-bootstrap: 2.3.0

angular-ui-select: 0.19.6

Product variant information in the order details and the order confirmation page

Support is added to display product variant information in the order details and the order confirmation pages. Although the support is implemented now, it becomes available only when the next version of the Order service is released, and the Storefront is linked to this new version.

Stay tuned for updates in future Storefront releases.

Display of product variants, customer account deletion, region-specific storefront

Display of product variants in the cart details and checkout confirmation pages

Product variants lets the customer see all the different variations of the products in the storefront. For example, you can see the different sizes and colors that a t-shirt comes in. The storefront's cart details and checkout confirmation page now support product variants.

After you add an item to the cart and click the cart icon, you can see the item in the cart with the product variant information, if it is applicable. In the example below, a black t-shirt in size small is in the cart.

When you click Checkout, the checkout confirmation page also shows the same product information.

Price ranges for products with variants

In this release, new pricing functionality in support of variants allows you to set the price as one value or, if a product has variants, as a price range.

Depending on whether a product has variants and multiple prices, the service:

• displays a single price for products without variants, and for products with variants that cost the same price
• displays the price range for products with variants that have at least two different prices in the Storefront List page

InStock presentation for product with variants

To further support product variants, updates to the service's behavior in response to the inStock value include:

• The inStock line is hidden in the Storefront List page for products with variants.
• The information on the Storefront Details page changes depending on an item's availability:
  • Out of stock: Variants are out of stock
  • Add to cart: Variants are in stock

Customer account deletion

A customer with a storefront account can now delete the account if necessary. This feature requires the customer to sign into the storefront, go to the My Account page, and click Delete Account,.

Upon confirming the action, the system sends an email with a confirmation link to the customer's sign-in email address or, for accounts created with a social sign-in, to the customer's contact email address. You can set the confirmation URL in the configuration key customer.deletion.redirecturl, using the Configuration service. The token included in the email is valid for 24 hours.

After the customer clicks the link in the email, the system deletes the account.

Region-specific storefronts

To use the storefront in different regions, provide the --region parameter in the build task, which runs the store in the specified region. This means that the service URL the storefront calls points to that specific region, for example, https://api.eu.yaas.io.
If you omit this parameter, the service builds the storefront URL in the US region. For now, the other available region is the EU. Here is an example of the region parameter in use:

$ npm run-script singleProd -- --pid=abc --cid=123 --ruri=http://example.com --region=eu

HTTPS usage in the storefront

It is recommended that you use domains that are encrypted into a Secure Socket Layer (SSL) HTTPS session. You can enforce HTTPS instead of HTTP in the storefront by providing an additional parameter, --https, in the build task. Here is an example:

$ npm run-script singleProd -- --pid=abc --cid=123 --ruri=http://example.com --https

Anonymous login endpoint migrated

The endpoint used before by Storefront to get the anonymous access token is now deprecated: https://api.yaas.io/hybris/account/v1/auth/anonymous/login. We migrated it to the new https://api.yaas.io/hybris/customerlogin/v1/auth/anonymous/login.

We recommend this migration for the already implemented customer storefronts. The new call should use the following:

Method: POST
URL: https://api.yaas.io/hybris/customerlogin/v1/auth/anonymous/login
Body: { "clientId": <your_storefront_app_client_id>, "tenant": <your_tenant> }

Order cancellation and Measurement unit prices

Order cancellation

A customer can now cancel an order before the order is shipped if it has been placed using a registered customer account. Anonymous orders cannot be cancelled in the storefront. The cancel order button is available in the Order details screen:

After the order cancellation is confirmed, the order status becomes 'Cancelled' and no future changes to this order can be made:

Measurement unit prices on cart, checkout page, order confirmation, and order details pages

When products with units of measurement are purchased, the item price displayed in the cart, checkout, order details, and order confirmation pages contain the unit of measurement information.

Email address stored in customer profile for social login

If a customer logs in to the Storefront using a social account, the email address linked to this social account is automatically saved in the customer profile. The email address then prepopulates the email field in the checkout page when the customer places an order.

Google+ Sign-In to Google Sign-In migration, improvements to image carousel on product details page

Image carousel on product details page improvement, 'Out of stock' button disabled

On product details page, the carousel with the product images has been improved. As a result, zoom function on desktop, full screen mode and changing between thumbnail images for a product provide a better user experience. Zoom is no longer available on mobile.
Also, when a product is out of stock, the button on product details page is disabled.

Google+ Sign-In to Google Sign-In migration

As Google+ Sign-In is has been deprecated, we migrated to Google Sign-In. After user signs in Storefront with his Google account, the avatar returned by Google (if one exists) is displayed as the user's profile picture in 'My Account'.

Main media for products and categories, add item and notes, coupon revalidation, login email change, address changes on checkout page

Customer login email address change option

Until now a customer could change their contact email address in Storefront, but not the login email address. As customer service allows now login email address change, we have implemented also this in Storefront.
The login email address can be changed from 'My Account' page once a user is logged in.
When changing the address, the user is prompted to enter his password. After pressing 'Save' button, an email notifying about the change is sent to the old address and another email requesting to confirm the change is sent to the new email address.
After the user confirms the change, the login email is updated as requested. At the same time the customer contact email address is set to the changed login email address.

Main media for products and categories

From now on, the main media for products and categories is the first media item in the collection. You should no longer rely on the main attribute for product and image attribute for category.
We also recommend a migration to make sure the order of your media is kept properly.

Add an item to the cart

An indicator has been added so you are aware that an item has successfully been added to your cart. When you add an item to the cart, a notification slides over the cart icon to show how many products have been added.

Add a note to the item

After an item has been added to the cart, you can add a note to that item. This field is for you to add extra information to the product.

Multiple coupons and coupon revalidation

You can now add multiple coupons to the cart. As you add and remove items from the cart, the coupon is revalidated with each cart update. If the coupon is no longer valid, a message appears that the order value is too low for that specific coupon. Note that even though the coupon no longer valid, it is not removed from the cart. If the coupon is valid again, the NOT APPLIED message is removed.

Billing and shipping address on checkout page

The placement of the billing and shipping addresses on checkout page has changed. After adding shipping configurations, the options in the country drop-down menu of the shipping address on checkout page had to be limited to the configured ship to countries of that specific site, while the country drop-down of the billing address should display all countries. To simplify the logic and ensure a smoother user experience (and because there was no real reason to display the billing address on top), we simply decided to switch the placement of the billing and shipping addresses. With this solution, the user will immediately see which countries are available destinations for delivery, while they have the option to add any country to their billing address.

Another change introduced in this release is an update to the drop-down menus themselves. The formerly used ui-select2 directive has been deprecated and it was recommended to start using the ui-select directive from Angular, thus all drop-down menus in the Storefront has been updated to use this new directive, also supporting search and scrolling.

v1.0.2

Styling and layout updates, shipping rate improvements

Shipping Rates Improvements

With this release we have fixed some minor issues related to the shipping cost implementation.

1.0.0

Site Selector and Site Icon

With this release, the Site Selector has been moved from the footer to the header, where it’s more available to the user. The merchant can choose to upload a Site Icon, e.g. a flag that will be displayed instead of the default globe that indicates the Site Selector. This way it’s easy for the user to recognize, in the case of a flag, what regional site she is currently on.

Shipping Rates Implementation

The Storefront is now implemented with the new Shipping Service. On the product details page, the customer can click the “Shipping Info” link below the “Add to Cart” button to get information about all available shipping zones, methods, ranges and rates for the site.
The order total in cart is calculated with the minimum qualified shipping rate for the cart total, based on the default shipping zone of the site. User is given more shipping options to select from on the checkout page. The shipping service returns the options based on the ‘ship to’ country selected in the address form and the available shipping options display in the Delivery Method drop-down, where user can select an alternative shipping method if wanted.
Further changes were made to checkout page to ensure that the buyer sees the final tax amount and shipping rate included in the order total before placing the order. To enable this, the cart was moved to display at the bottom of the checkout page, and to be hidden behind a “Preview Order” button. When the user has filled in the required address fields on the checkout page, the order can be previewed with the final order total. Storefront is calling the cart-calculation service directly with the complete shipping address in order to get this calculation returned. Clicking the “Preview Order” button displays the cart including order totals and user can fill in the payment details and place order.

Currently we have disabled the ability to edit cart and add coupon code on the checkout page, but this will be reintroduced shortly.

Home page banners

The Storefront now displays home page banner images that can be managed in the Commerce Builder Module. The top image carousel displays up to five images, and the small banner sections below display one image each. The images change between small and large versions for desktop and mobile views to ensure optimal quality on different devices.

If no images are uploaded, the customer will be taken directly to the product listing page when visiting the Storefront. If there are no top images or small banners uploaded, the respective sections will be hidden. If images have hyperlinks, the customer will be taken to these URLs when clicking the image.