This article focuses on storefront-related changes in hybris 6.2, specifically in HTML templates, styles, and JavaScript. If you are considering an update to 6.2 from previous versions, especially hybris 6.1, this information should be useful.

Some of the updates listed below have not yet been documented in the official hybris documentation.

Summary

In short, there are the following main updates in hybris 6.2:

• Minor changes in CSS style names
• Grouping variants in search results
• Support for the new target price discount
• Gift coupon, the promotion action result, on the thank-you-for-the-order page
• New device breakpoints, or resolution tiers, used for responsive mode
• Minor changes in in-page navigation
• New CMS components are used for navigation
• The cart page uses AJAX for vouchers, apply/remove
• For configurable products, the URL has been changed from /p/XXX/configure to /p/XXX/configuratorPage

Top-level templates

page.tag

• Skip to Content and Skip to Navigation were added
• Cart restoration was added

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

was replaced with:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

JavaScript

ACC.cart (acc.cart.js)

• handleApplyVoucher and bindToReleaseVoucher, appendAppliedVoucherCodes

ACC.common (acc.common.js)

In hybris 6.1, currentCurrency was hard-coded as USD. The new fragment looks like this:

currentCurrency: $("main").data('currencyIsoCode') || "USD"

ACC.productDetail (acc.productDetail.js)

• checkQtySelector: a bug with disabling the “+” button was fixed.

ACC.quickOrder (acc.quickOrder.js)

clearQuickOrderRow: function () {
var quickOrderMinRows = ACC.quickorder.$quickOrderMinRows;
var parentLi = ACC.quickorder.getCurrentParentLi(this);
if ($('.js-ul-container li.js-li-container').length > quickOrderMinRows) {
parentLi.remove();
ACC.quickorder.bindClearQuickOrderRow();
}
else {

ACC.ratingstars (acc.ratingstars.js)

Significantly refactored; 90% of the code was changed.

Styles

The CSS class names were slightly changed. For example,

item-price

became

item__price

,

cart__list,

became

item__list__car

,

item-sku-input

became

item__sku__input

Product

reviewsTab.jsp

Original fragment from hybris 6.1:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

was replaced with

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

productListerGridItem.tag

The following fragment was added in 6.2:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

productPageReviews.tag

This fragment

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

was replaced with

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

productPricePanel.tag

Some style names were changed; see the Styles section.

productReviewsSummary.tag

The following fragment from 6.1

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

was replaced with

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Order

accountOrderDetailsItem.tag

Small changes in CSS styles, such as item-info -> item__info.

orderEntryDetails.tag

Small changes in CSS styles, such as item-list-item -> item__list–item.

orderTotalsItem.tag

order.orderDiscounts was replaced with order.TotalDiscounts:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Previously,

order.totalDiscounts

had to be positive to show the order total taxes section. Now this section does not depend on totalDiscounts.

OrderUnconsignedEntries.tag

Some style names were changed; see the Styles section.

giftCoupon.tag

This file is brand new in hybris 6.2.

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Common

globalMessages.tag

Global alerts are now enclosed in div class=container:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

ConfigurationInfos.tag

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

was replaced with

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

header.tag

The security conditions are “upgraded”:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

with the new version:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Cart

cartDisplay.jsp

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

was replaced with

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

cartItems.tag

Small changes in CSS style names; see the Styles section.

cartVoucher.tag

A number of significant changes.

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

was replaced with:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

The form became comprehensive:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Ugly JavaScript code was removed.

Checkout

guestLogin.jsp

The same changes as in cartDisplay.jsp.

addPaymentMethodPage.jsp

The same changes as in cartDisplay.jsp.

silentOrderPostPage.jsp

The same changes as in cartDisplay.jsp.

checkoutConfirmationThankMessage.jsp

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

checkoutOrderSummary.tag

Small changes in CSS style names; see the Styles section.

pickupCartItems

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Address

addressFormSelector.tag

The same changes as in header.tag.

Variables

Constants for the responsive behavior were also changed.

The version from 6.1:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

A new version:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Error pages

serverError.jsp

A brand-new template for displaying server errors.

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Account

accountLayoutPage.jsp

Restructured. Some fragments were moved to components.

The version of the template from 6.1:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

The version from 6.2:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

accountLoginPage.jsp

The version from 6.1:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

The version from 6.2:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

accountNewCustomerLogin.jsp

Minor changes in the names of CSS styles.

accountPaymentInfoPage.jsp

A number of changes, too many to list here. The new version of the file is below.

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

accountSavedCartDetailsItem.jsp

Minor changes in the names of CSS styles.

Search

searchEmptyPage.jsp

Minor changes in the names of CSS styles.

CMS Components

Language Currency Component

The component itself and the languagecurrencycomponent.jsp template NO LONGER EXIST.

Category Navigation Component

A brand-new component, so a new template, categorynavigationcomponent.jsp, is introduced.

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Footer Navigation Component

A brand-new component, so a new template, footernavigationcomponent.jsp, is introduced.

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

addToCartAction.jsp

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

navigationBarCollectionComponent.jsp

Version from 6.1:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

New version:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

navigationBarComponent.jsp

Seriously refactored and reworked.

Version from 6.1:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Version from 6.2:

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

productAddToCartComponent.jsp

GeSHi Error: GeSHi could not find the language html (using path /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

© Rauf Aliev, October 2016