{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}{% block base_main_inner %} {# <div class="container-main"> #} {% block page_content %} {% block cms_breadcrumb %} {% if app.request.requesturi != '/' %} {% sw_include '@Storefront/storefront/layout/breadcrumb.html.twig' with { context: context, category: page.header.navigation.active } only %} {% endif %} {% endblock %} {% block cms_content %} {% set cmsPageClasses = ('cms-page ' ~ page.cmsPage.cssClass|striptags)|trim %} {# <div class="{{ cmsPageClasses }}"> #} {% block page_content_blocks %} {% sw_include "@Storefront/storefront/page/content/detail.html.twig" with {'cmsPage': page.cmsPage} %} {% endblock %} {# </div> #} {% endblock %} <div class="popular_categories"> <div class="page_container"> <h2 class="section_title">POPULAR CATEGORIES</h2> <ul class="categories_list"> <li> <a href="/Fashion/" class="category_btn"> <span class="category_image"> <img src="images/x1/fashion.png" srcset="images/x1/fashion.png 1x, images/x2/fashion@2x.png 2x" width="159" height="146" alt="" title=""/> </span> <span class="category_name">Fashion</span> </a> </li> <li> <a href="/Beauty-Health/" class="category_btn"> <span class="category_image"> <img src="images/x1/beauty-health.png" srcset="images/x1/beauty-health.png 1x, images/x2/beauty-health@2x.png 2x" width="159" height="146" alt="" title=""/> </span> <span class="category_name">Beauty & Health</span> </a> </li> <li> <a href="/Electronics/" class="category_btn"> <span class="category_image"> <img src="images/x1/electronics_sm.png" srcset="images/x1/electronics_sm.png 1x, images/x2/electronics_sm@2x.png 2x" width="159" height="146" alt="" title=""/> </span> <span class="category_name">Electronics</span> </a> </li> <li> <a href="/Toys/" class="category_btn"> <span class="category_image"> <img src="images/x1/toys.png" srcset="images/x1/toys.png 1x, images/x2/toys@2x.png 2x" width="159" height="146" alt="" title=""/> </span> <span class="category_name">Toys</span> </a> </li> <li> <a href="/Home-Garden/" class="category_btn"> <span class="category_image"> <img src="images/x1/home-garden.png" srcset="images/x1/home-garden.png 1x, images/x2/home-garden@2x.png 2x" width="159" height="146" alt="" title=""/> </span> <span class="category_name">Home & Garden</span> </a> </li> <li> <a href="/Business-Industrial/" class="category_btn"> <span class="category_image"> <img src="images/x1/business-industrial.png" srcset="images/x1/business-industrial.png 1x, images/x2/business-industrial@2x.png 2x" width="159" height="146" alt="" title=""/> </span> <span class="category_name">Business & Industrial</span> </a> </li> </ul> </div> </div> <div class="bnner_section"> <div class="page_container"> <a href="" class="bnner_block"> <picture> <source media="(min-width:640px)" srcset="images/wide_bnner.jpg"/> <img src="images/portrait_bnner.jpg" width="1480" height="240" alt="" title=""/> banner title <!--important for google lighthouse--> </picture> </a> </div> </div> <div class="why_section"> <div class="page_container"> <h2 class="section_title">WHY HYBUYS</h2> <ul> <li> <img src="images/x1/best_price.png" srcset="images/x1/best_price.png 1x, images/x2/best_price@2x.png 2x" width="225" height="224" alt="" title=""/> <span class="text_block">BEST PRICE IN EUROPE</span> </li> <li> <img src="images/x1/trust.png" srcset="images/x1/trust.png 1x, images/x2/trust@2x.png 2x" width="225" height="224" alt="" title=""/> <span class="text_block">TRUST AND SAVE FOR YOUR GOODS</span> </li> <li> <img src="images/x1/free-tax.png" srcset="images/x1/free-tax.png 1x, images/x2/free-tax@2x.png 2x" width="225" height="224" alt="" title=""/> <span class="text_block">TAX FREE</span> </li> </ul> </div> </div> <div class="newers_section"> <div class="page_container"> <h2 class="section_title">NEW IN</h2> <div class="products_list"> {% for product in latest_products %} {% set name = product.translated.name %} {% set id = product.id %} {% set cover = product.cover.media %} {% set variation = product.variation %} {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %} <div class="list_item"> <div class="product_block"> {% block component_product_box_badges %} {% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %} {% endblock %} {% if config('core.cart.wishlistEnabled') %} {% block component_product_box_wishlist_action %} {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with { appearance: 'circle', productId: id } %} {% endblock %} {% endif %} {% block component_product_box_rich_snippets %} {# @deprecated tag:v6.5.0 - Block will be removed completely including the template it references #} {# {% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %} #} {% endblock %} {% block component_product_box_image %} {# fallback if display mode is not set #} {% set displayMode = displayMode ?: 'standard' %} {# set display mode 'cover' for box-image with standard display mode #} {% if layout == 'image' and displayMode == 'standard' %} {% set displayMode = 'cover' %} {% endif %} {% block component_product_box_image_link %} <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}" title="{{ name }}" class="product_image"> {% block component_product_box_image_link_inner %} {% if cover.url %} {% set attributes = { 'class': 'is-'~displayMode, 'alt': (cover.translated.alt ?: name), 'title': (cover.translated.title ?: name) } %} {% if displayMode == 'cover' or displayMode == 'contain' %} {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %} {% endif %} {% block component_product_box_image_thumbnail %} {% sw_thumbnails 'product-image-thumbnails' with { media: cover, sizes: sizes } %} {% endblock %} {% else %} {% block component_product_box_image_placeholder %} no-image {% endblock %} {% endif %} {% endblock %} </a> {% endblock %} {% endblock %} {% block component_product_box_info %} <div class="info_block"> {% block component_product_box_name %} <a href="/search?search={{ product.manufacturer.name }}" class="product_brand">{{ product.manufacturer.name }}</a> <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}" class="product_name" title="{{ name }}"> {{ name }} </a> {% endblock %} {% block component_product_box_price %} <div class="price_block"> {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %} </div> {% endblock %} {% block component_product_box_action %} {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %} {% endblock %} </div> {% endblock %} </div> </div> {% endfor %} </div> <div class="see_all_link"> {# <a href="listing.php">SEE ALL</a> #} </div> </div> </div> <div class="products_section"> <div class="page_container"> <h2 class="section_title">BEST SELLERS IN FASHION</h2> <div class="products_list"> {% for product in fashion_products %} {% set name = product.translated.name %} {% set id = product.id %} {% set cover = product.cover.media %} {% set variation = product.variation %} {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %} <div class="list_item"> <div class="product_block"> {% block component_product_box_badges_fashion %} {% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %} {% endblock %} {% if config('core.cart.wishlistEnabled') %} {% block component_product_box_wishlist_action_fashion %} {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with { appearance: 'circle', productId: id } %} {% endblock %} {% endif %} {% block component_product_box_rich_snippets_fashion %} {# @deprecated tag:v6.5.0 - Block will be removed completely including the template it references #} {# {% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %} #} {% endblock %} {% block component_product_box_image_fashion %} {# fallback if display mode is not set #} {% set displayMode = displayMode ?: 'standard' %} {# set display mode 'cover' for box-image with standard display mode #} {% if layout == 'image' and displayMode == 'standard' %} {% set displayMode = 'cover' %} {% endif %} {% block component_product_box_image_link_fashion %} <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}" title="{{ name }}" class="product_image"> {% block component_product_box_image_link_inner_fashion %} {% if cover.url %} {% set attributes = { 'class': 'is-'~displayMode, 'alt': (cover.translated.alt ?: name), 'title': (cover.translated.title ?: name) } %} {% if displayMode == 'cover' or displayMode == 'contain' %} {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %} {% endif %} {% block component_product_box_image_thumbnail_fashion %} {% sw_thumbnails 'product-image-thumbnails' with { media: cover, sizes: sizes } %} {% endblock %} {% else %} {% block component_product_box_image_placeholder_fashion %} no-image {% endblock %} {% endif %} {% endblock %} </a> {% endblock %} {% endblock %} {% block component_product_box_info_fashion %} <div class="info_block"> {% block component_product_box_name_fashion %} <a href="/search?search={{ product.manufacturer.name }}" class="product_brand">{{ product.manufacturer.name }}</a> <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}" class="product_name" title="{{ name }}"> {{ name }} </a> {% endblock %} {% block component_product_box_price_fashion %} <div class="price_block"> {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %} </div> {% endblock %} {% block component_product_box_action_fashion %} {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %} {% endblock %} </div> {% endblock %} </div> </div> {% endfor %} </div> <div class="see_all_link"> <a href="/Fashion/">SEE ALL</a> </div> </div> </div> <div class="offers_section"> <div class="page_container"> <ul class="offers_list"> {% for product in intros_products %} {% set name = product.translated.name %} {% set id = product.id %} {% set cover = product.cover.media %} {% set variation = product.variation %} {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %} <li> <div class="offer_block"> <div class="offer_image"> {% if product.customFields.custom_homepage_intro_image %} {% set image = searchMedia([product.customFields.custom_homepage_intro_image], context.context).first %} <img src="{{ image.url }}" srcset="{{ image.url }} 1x, {{ image.url }} 2x" width="220" height="223" alt="{{ product.name }}" title="{{ product.name }}"/> {% else %} {% sw_thumbnails 'product-offer-thumbnails' with { media: cover, sizes: sizes } %} {% endif %} </div> <div class="offer_title"> {% if product.customFields.custom_homepage_intro_title %} {{ product.customFields.custom_homepage_intro_title|sw_sanitize }} {% else %} {% if product.name %} {{ name|sw_sanitize }} {% endif %} {% endif %} </div> <div class="offer_description"> {% if product.customFields.custom_homepage_intro_desc %} {{ product.customFields.custom_homepage_intro_desc|sw_sanitize }} {% else %} {% if product.description %} {{ product.description|sw_sanitize }} {% endif %} {% endif %} </div> <a {% if product.customFields.custom_homepage_intro_desc %} href="{{ product.customFields.custom_homepage_intro_link }}" {% else %} href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}" {% endif %} class="view_more">VIEW MORE</a> </div> </li> {% endfor %} </ul> </div> </div> <div class="products_section"> <div class="page_container"> <h2 class="section_title">BEST SELLERS IN ELECTRONICS</h2> <div class="products_list"> {% for product in electronics_products %} {% set name = product.translated.name %} {% set id = product.id %} {% set cover = product.cover.media %} {% set variation = product.variation %} {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %} <div class="list_item"> <div class="product_block"> {% block component_product_box_badges_electronics %} {% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %} {% endblock %} {% if config('core.cart.wishlistEnabled') %} {% block component_product_box_wishlist_action_electronics %} {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with { appearance: 'circle', productId: id } %} {% endblock %} {% endif %} {% block component_product_box_rich_snippets_electronics %} {# @deprecated tag:v6.5.0 - Block will be removed completely including the template it references #} {# {% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %} #} {% endblock %} {% block component_product_box_image_electronics %} {# fallback if display mode is not set #} {% set displayMode = displayMode ?: 'standard' %} {# set display mode 'cover' for box-image with standard display mode #} {% if layout == 'image' and displayMode == 'standard' %} {% set displayMode = 'cover' %} {% endif %} {% block component_product_box_image_link_electronics %} <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}" title="{{ name }}" class="product_image"> {% block component_product_box_image_link_inner_electronics %} {% if cover.url %} {% set attributes = { 'class': 'is-'~displayMode, 'alt': (cover.translated.alt ?: name), 'title': (cover.translated.title ?: name) } %} {% if displayMode == 'cover' or displayMode == 'contain' %} {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %} {% endif %} {% block component_product_box_image_thumbnail_electronics %} {% sw_thumbnails 'product-image-thumbnails' with { media: cover, sizes: sizes } %} {% endblock %} {% else %} {% block component_product_box_image_placeholder_electronics %} no-image {% endblock %} {% endif %} {% endblock %} </a> {% endblock %} {% endblock %} {% block component_product_box_info_electronics %} <div class="info_block"> {% block component_product_box_name_electronics %} <a href="/search?search={{ product.manufacturer.name }}" class="product_brand">{{ product.manufacturer.name }}</a> <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}" class="product_name" title="{{ name }}"> {{ name }} </a> {% endblock %} {% block component_product_box_price_electronics %} <div class="price_block"> {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %} </div> {% endblock %} {% block component_product_box_action_electronics %} {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %} {% endblock %} </div> {% endblock %} </div> </div> {% endfor %} </div> <div class="see_all_link"> <a href="/Electronics/">SEE ALL</a> </div> </div> </div> <div class="products_section"> <div class="page_container"> <h2 class="section_title">BEST SELLERS IN HOME & GARDEN</h2> <div class="products_list"> {% for product in garden_products %} {% set name = product.translated.name %} {% set id = product.id %} {% set cover = product.cover.media %} {% set variation = product.variation %} {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %} <div class="list_item"> <div class="product_block"> {% block component_product_box_badges_garden %} {% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %} {% endblock %} {% if config('core.cart.wishlistEnabled') %} {% block component_product_box_wishlist_action_garden %} {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with { appearance: 'circle', productId: id } %} {% endblock %} {% endif %} {% block component_product_box_rich_snippets_garden %} {# @deprecated tag:v6.5.0 - Block will be removed completely including the template it references #} {# {% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %} #} {% endblock %} {% block component_product_box_image_garden %} {# fallback if display mode is not set #} {% set displayMode = displayMode ?: 'standard' %} {# set display mode 'cover' for box-image with standard display mode #} {% if layout == 'image' and displayMode == 'standard' %} {% set displayMode = 'cover' %} {% endif %} {% block component_product_box_image_link_garden %} <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}" title="{{ name }}" class="product_image"> {% block component_product_box_image_link_inner_garden %} {% if cover.url %} {% set attributes = { 'class': 'is-'~displayMode, 'alt': (cover.translated.alt ?: name), 'title': (cover.translated.title ?: name) } %} {% if displayMode == 'cover' or displayMode == 'contain' %} {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %} {% endif %} {% block component_product_box_image_thumbnail_garden %} {% sw_thumbnails 'product-image-thumbnails' with { media: cover, sizes: sizes } %} {% endblock %} {% else %} {% block component_product_box_image_placeholder_garden %} no-image {% endblock %} {% endif %} {% endblock %} </a> {% endblock %} {% endblock %} {% block component_product_box_info_garden %} <div class="info_block"> {% block component_product_box_name_garden %} <a href="/search?search={{ product.manufacturer.name }}" class="product_brand">{{ product.manufacturer.name }}</a> <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}" class="product_name" title="{{ name }}"> {{ name }} </a> {% endblock %} {% block component_product_box_price_garden %} <div class="price_block"> {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %} </div> {% endblock %} {% block component_product_box_action_garden %} {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %} {% endblock %} </div> {% endblock %} </div> </div> {% endfor %} </div> <div class="see_all_link"> <a href="/Home-Garden/">SEE ALL</a> </div> </div> </div> <div class="bnner_section"> <div class="page_container"> <a href="" class="bnner_block"> <picture> <source media="(min-width:640px)" srcset="images/wide_bnner.jpg"/> <img src="images/portrait_bnner.jpg" width="1480" height="240" alt="" title=""/> banner title <!--important for google lighthouse--> </picture> </a> </div> </div> <div class="brands_section"> <div class="page_container"> <h2 class="section_title">POPULAR BRANDS</h2> <ul class="brands_list"> {% for brand in brands %} <li> <a class="brand_block" href="/search?search={{ brand.name }}"> <img src="{{ brand.image }}" srcset="{{ brand.image }} 1x, {{ brand.image }} 2x" width="240" height="191" alt="{{ brand.name }}" title="{{ brand.name }}"/> {{ brand.name }} </a> </li> {% endfor %} </ul> <div class="more_btn_block"> <a href="/brands" class="primary_btn">SEE ALL</a> </div> </div> </div> {% endblock %} {# </div> #}{% endblock %}