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.
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)
became
,
became
,
became
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)
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)
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)
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)
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
should be positive to show order total taxes section. Now this section doesn’t depend on 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)
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)
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)
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)
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)
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.
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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 /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 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)
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 {
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
item__price
cart__list,
item__list__car
item-sku-input
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)
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 fragmentGeSHi 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)
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.1GeSHi 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)
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 (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 /var/www/html/hybrismart.com/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)
order.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 /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)
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)
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)
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 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)
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)
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)
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 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)
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)
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)
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 long to list them all. 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 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 /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)
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)
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
Charles Davis
17 November 2017 at 03:43
Why are your code snippets so poorly formatted?
Rauf Aliev
13 December 2017 at 07:57
That is a pain:( WordPress.com