ESIGate proxy
This section shows how to design the cart page.
There are 2 main sections that we will have to focus on: Hybris CIO Storefront and Commerce IO Demo Templates.
Hybris CIO Storefront
The markup is located in 3 separate tag files: cartItems.tag, cartItem.tag, cartTotals.tag
- Cart Items
Contains the markup for the table - Cart Item
Contains the markup for the product row - Cart Totals
Contains the markup for the order total of the cart
To display the relevant information in the rows, you make minor changes to the tag files. In the example, the Item column contains the image, price and default values of the original markup.
It is recommended that you add classes to any elements that require styling, typically to top level elements, such as containing divs.
Commerce IO demo templates
This section shows how to use the styles to design the cart page on the Commerce IO demo site.
Using classes previously declared, custom CSS is created to provide the desired look and feel of the Cart page. ESI Fragments are used to render Hybris HTML in Jahia and the cart page fragment is defined in Hybris CIO Storefront. In this example, a singular tag <esi:fragment name="hybris-cart"> is defined in cartPage.jsp. ESI Fragments provide flexibility when defining content selection from generic to specific, depending on design preferences. This provides full control for organizing and styling the page.
As an editor, you have the flexibility to use Jahia components with Hybris fragments to create a unified user experience. The Cart page is automatically generated using the tag in cartPage.jsp. You could also create a separate page, adding any or all of the defined fragments and allowing CSS that targets the HTML rendered by the fragments.
