ESIGate proxy

  Written by The Jahia Team
   Estimated reading time:

In this document we will go over the steps that are necessary in order 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 seperate tag files: cartItems.tag, cartItem.tag, cartTotals.tag

  • Cart Items

    • Contains the markup for the table itself

  • Cart Item

    • Contains the markup for the product row

  • Cart Totals

    • Contains the markup for the order total of the cart

In order to display the relevant information in the rows, minor changes will need to be made in the above mentioned files. In our example, the Item column will contain the image, price in as well as the default values of the original markup.

It is recommended to add classes to any elements that will require styling. This mainly refers to top level elements such as containing divs

Commerce IO Demo Templates

In this module we add the various styles we want in order to design the cart page.

Using classes previously declared we are able to create custom css, so we can achieve the desired look and feel of the Cart page.

ESI Fragments are used to render hybris html in DX, the cart page fragment is defined in Hybris CIO Storefront. In this example we have a singular tag <esi:fragment name="hybris-cart"> defined in cartPage.jsp.

ESI Fragments provide flexibility when defining content selection all the way from generic to specific, depending on our design preferences.This gives us full control on how to organize and style our page.

As an editor you have the flexibility to use DX components along side Hybris fragments, in order to create a unified user experience. The Cart page is automatically generated using the tag previously mentioned. We could easily create a separate page, adding any/all of our defined fragments; thus allowing us to apply css targeting the html rendered by the fragments.


Before

After