Overview

Homepage of the Eu24 is managed by builder under the page model.

Opening the entry on builder

To open the entry on builder, select the page model on the left side bar & search for the home page.

Every pages are consist of various components & sections,

Sections

1. Hero Section

Top hero section contains the banners on homepage with different layouts. Inside the hero section, there are two carousels for the desktop & mobile view.

Carousel component takes the slides which can be managed from the builder props from the right side bar.

Mobile Carousel

To display the mobile carousel, we have BannerHomeHeroMobile component which displays one banner suited for mobile view.

Desktop Carousel

To display the desktop carousel, we have BannerHomePrimaryDynamic & BannerHomeRightDynamic components creates one slide of the carousel suited for desktop view.

All three components optionally takes the product id as a prop which can be used to display the product details such as price, title, description etc.

HiFiveSection

Aside from the banner, hero section also contains the HiFiveSection which displays the card with links. It is a list type component which can iterate through the data from the builder props.

2. Highlights Section

Highlights section has the TimelineSlider component which displays the BannerHomeHighlights component inside the carousel & CardCategory component which displays the cards with the category name and the link. Those combine goes to the TimelineSlider tabs which can be managed from the builder props.

similar to the previous banner components, the BannerHomeHighlights component takes the product id as a prop which can be used to display the product details as well.

3. New Launch

New launch section is just Card components inside the builder buit in column component. where, BannerNewLaunch component goes first and CardNewLaunch component goes afterwards.

at the bottom there is a Button component which can be used to redirect to the new launch page.

4. Deals & Offers Section

It is a section containing the BannerHomeDealsAndOffers component which displays the banners with the deals and offers.

It goes to the carousel component so it can be displayed as a slider.

5. Black Friday Section

Black Friday section is a section containing the CarouselRecomendedProducts component which is a carousel component with the product cards & a background image for desktop & mobile view.

The CarouselRecomendedProducts component takes multiple product id's comma separated as a prop which can be used to display the product in the carousel.