hybris 6.2 frontend updates – hybrismart | SAP hybris under the hood

hybris 6.2 frontend updates


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

Some of the updates listed below have not been documented yet on 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
  • supporting new target price discount
  • gift coupon (the promotion action result) on the thank-you-for-the-order page
  • new device breakpoints (resolution tiers) used for the responsive mode
  • minor changes in in-page navigation
  • new CMS components are used for the navigation
  • cart page uses AJAX for vouchers (apply/remove)
  • for configurable products the URL has been changed (/p/XXX/configure -> /p/XXX/configuratorPage)

Top level templates

page.tag

  • Skip to content, Skip to Navigation was added
  • card restoration was added

GeSHi Error: GeSHi could not find the language html (using path /home/admin/web/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 /home/admin/web/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Javascripts

ACC.cart (acc.cart.js)

  • handleApplyVoucher and bindToReleaseVoucher , appendAppliedVoucherCodes

ACC.common (acc.common.js)

in hybris 6.1 the currentCurrency was hard-coded (“USD”). The new fragment looks as following:

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

ACC.productDetail (acc.productDetail.js)

  • checkQtySelector: a bug with disabling “+” 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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Order

accountOrderDetailsItem.tag

Small changes in CSS styles (like “item-info” -> “item__info”)

orderEntryDetails.tag

Small changes in CSS styles (like “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 /home/admin/web/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Previously

order.totalDiscounts

should be positive to show order total taxes section. Now this section doesn’t depend on totalDiscounts.

OrderUnconsignedEntries.tag

Some style names were changed (see the Styles section)

giftCoupon.tag

This file is a brand-new in hybris 6.2.


GeSHi Error: GeSHi could not find the language html (using path /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

cartItems.tag

Small changes in CSS style names (see Styles section)

cartVoucher.tag

A number of significant changes.


GeSHi Error: GeSHi could not find the language html (using path /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

checkoutOrderSummary.tag

Small changes in CSS style names (see Styles section)

pickupCartItems


GeSHi Error: GeSHi could not find the language html (using path /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 long to list them all. The new version of the file is below.


GeSHi Error: GeSHi could not find the language html (using path /home/admin/web/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 template languagecurrencycomponent.jsp 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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/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 /home/admin/web/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

© Rauf Aliev, October 2016

2 Responses

  1. Charles Davis

    Charles Davis

    Reply

    17 November 2017 at 03:43

    Why are your code snippets so poorly formatted?

Leave a Reply