custom/plugins/HyBuys/src/Resources/views/storefront/page/content/home.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}
  2. {% block base_main_inner %}
  3.     {#    <div class="container-main"> #}
  4.     {% block page_content %}
  5.         {% block cms_breadcrumb %}
  6.             {% if app.request.requesturi != '/' %}
  7.                 {% sw_include '@Storefront/storefront/layout/breadcrumb.html.twig' with {
  8.                     context: context,
  9.                     category: page.header.navigation.active
  10.                 } only %}
  11.             {% endif %}
  12.         {% endblock %}
  13.         {% block cms_content %}
  14.             {% set cmsPageClasses = ('cms-page ' ~ page.cmsPage.cssClass|striptags)|trim %}
  15.             {#            <div class="{{ cmsPageClasses }}"> #}
  16.             {% block page_content_blocks %}
  17.                 {% sw_include "@Storefront/storefront/page/content/detail.html.twig" with {'cmsPage': page.cmsPage} %}
  18.             {% endblock %}
  19.             {#            </div> #}
  20.         {% endblock %}
  21.         <div class="popular_categories">
  22.             <div class="page_container">
  23.                 <h2 class="section_title">POPULAR CATEGORIES</h2>
  24.                 <ul class="categories_list">
  25.                     <li>
  26.                         <a href="/Fashion/" class="category_btn">
  27.                                 <span class="category_image">
  28.                                     <img src="images/x1/fashion.png"
  29.                                          srcset="images/x1/fashion.png 1x, images/x2/fashion@2x.png 2x" width="159"
  30.                                          height="146" alt="" title=""/>
  31.                                 </span>
  32.                             <span class="category_name">Fashion</span>
  33.                         </a>
  34.                     </li>
  35.                     <li>
  36.                         <a href="/Beauty-Health/" class="category_btn">
  37.                                 <span class="category_image">
  38.                                     <img src="images/x1/beauty-health.png"
  39.                                          srcset="images/x1/beauty-health.png 1x, images/x2/beauty-health@2x.png 2x"
  40.                                          width="159" height="146" alt="" title=""/>
  41.                                 </span>
  42.                             <span class="category_name">Beauty &#38; Health</span>
  43.                         </a>
  44.                     </li>
  45.                     <li>
  46.                         <a href="/Electronics/" class="category_btn">
  47.                                 <span class="category_image">
  48.                                     <img src="images/x1/electronics_sm.png"
  49.                                          srcset="images/x1/electronics_sm.png 1x, images/x2/electronics_sm@2x.png 2x"
  50.                                          width="159" height="146" alt="" title=""/>
  51.                                 </span>
  52.                             <span class="category_name">Electronics</span>
  53.                         </a>
  54.                     </li>
  55.                     <li>
  56.                         <a href="/Toys/" class="category_btn">
  57.                                 <span class="category_image">
  58.                                     <img src="images/x1/toys.png"
  59.                                          srcset="images/x1/toys.png 1x, images/x2/toys@2x.png 2x" width="159"
  60.                                          height="146" alt="" title=""/>
  61.                                 </span>
  62.                             <span class="category_name">Toys</span>
  63.                         </a>
  64.                     </li>
  65.                     <li>
  66.                         <a href="/Home-Garden/" class="category_btn">
  67.                                 <span class="category_image">
  68.                                     <img src="images/x1/home-garden.png"
  69.                                          srcset="images/x1/home-garden.png 1x, images/x2/home-garden@2x.png 2x"
  70.                                          width="159" height="146" alt="" title=""/>
  71.                                 </span>
  72.                             <span class="category_name">Home &#38; Garden</span>
  73.                         </a>
  74.                     </li>
  75.                     <li>
  76.                         <a href="/Business-Industrial/" class="category_btn">
  77.                                 <span class="category_image">
  78.                                     <img src="images/x1/business-industrial.png"
  79.                                          srcset="images/x1/business-industrial.png 1x, images/x2/business-industrial@2x.png 2x"
  80.                                          width="159" height="146" alt="" title=""/>
  81.                                 </span>
  82.                             <span class="category_name">Business &#38; Industrial</span>
  83.                         </a>
  84.                     </li>
  85.                 </ul>
  86.             </div>
  87.         </div>
  88.         <div class="bnner_section">
  89.             <div class="page_container">
  90.                 <a href="" class="bnner_block">
  91.                     <picture>
  92.                         <source media="(min-width:640px)" srcset="images/wide_bnner.jpg"/>
  93.                         <img src="images/portrait_bnner.jpg" width="1480" height="240" alt="" title=""/>
  94.                         banner title <!--important for google lighthouse-->
  95.                     </picture>
  96.                 </a>
  97.             </div>
  98.         </div>
  99.         <div class="why_section">
  100.             <div class="page_container">
  101.                 <h2 class="section_title">WHY HYBUYS</h2>
  102.                 <ul>
  103.                     <li>
  104.                         <img src="images/x1/best_price.png"
  105.                              srcset="images/x1/best_price.png 1x, images/x2/best_price@2x.png 2x"
  106.                              width="225" height="224" alt="" title=""/>
  107.                         <span class="text_block">BEST PRICE IN EUROPE</span>
  108.                     </li>
  109.                     <li>
  110.                         <img src="images/x1/trust.png" srcset="images/x1/trust.png 1x, images/x2/trust@2x.png 2x"
  111.                              width="225"
  112.                              height="224" alt="" title=""/>
  113.                         <span class="text_block">TRUST AND SAVE FOR YOUR GOODS</span>
  114.                     </li>
  115.                     <li>
  116.                         <img src="images/x1/free-tax.png"
  117.                              srcset="images/x1/free-tax.png 1x, images/x2/free-tax@2x.png 2x"
  118.                              width="225" height="224" alt="" title=""/>
  119.                         <span class="text_block">TAX FREE</span>
  120.                     </li>
  121.                 </ul>
  122.             </div>
  123.         </div>
  124.         <div class="newers_section">
  125.             <div class="page_container">
  126.                 <h2 class="section_title">NEW IN</h2>
  127.                 <div class="products_list">
  128.                     {% for product in latest_products %}
  129.                         {% set name = product.translated.name %}
  130.                         {% set id = product.id %}
  131.                         {% set cover = product.cover.media %}
  132.                         {% set variation = product.variation %}
  133.                         {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %}
  134.                         <div class="list_item">
  135.                             <div class="product_block">
  136.                                 {% block component_product_box_badges %}
  137.                                     {% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %}
  138.                                 {% endblock %}
  139.                                 {% if config('core.cart.wishlistEnabled') %}
  140.                                     {% block component_product_box_wishlist_action %}
  141.                                         {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
  142.                                             appearance: 'circle',
  143.                                             productId: id
  144.                                         } %}
  145.                                     {% endblock %}
  146.                                 {% endif %}
  147.                                 {% block component_product_box_rich_snippets %}
  148.                                     {# @deprecated tag:v6.5.0 - Block will be removed completely including the template it references #}
  149.                                     {#                        {% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %} #}
  150.                                 {% endblock %}
  151.                                 {% block component_product_box_image %}
  152.                                     {# fallback if display mode is not set #}
  153.                                     {% set displayMode = displayMode ?: 'standard' %}
  154.                                     {# set display mode 'cover' for box-image with standard display mode #}
  155.                                     {% if layout == 'image' and displayMode == 'standard' %}
  156.                                         {% set displayMode = 'cover' %}
  157.                                     {% endif %}
  158.                                     {% block component_product_box_image_link %}
  159.                                         <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}"
  160.                                            title="{{ name }}"
  161.                                            class="product_image">
  162.                                             {% block component_product_box_image_link_inner %}
  163.                                                 {% if cover.url %}
  164.                                                     {% set attributes = {
  165.                                                         'class': 'is-'~displayMode,
  166.                                                         'alt': (cover.translated.alt ?: name),
  167.                                                         'title': (cover.translated.title ?: name)
  168.                                                     } %}
  169.                                                     {% if displayMode == 'cover' or displayMode == 'contain' %}
  170.                                                         {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  171.                                                     {% endif %}
  172.                                                     {% block component_product_box_image_thumbnail %}
  173.                                                         {% sw_thumbnails 'product-image-thumbnails' with {
  174.                                                             media: cover,
  175.                                                             sizes: sizes
  176.                                                         } %}
  177.                                                     {% endblock %}
  178.                                                 {% else %}
  179.                                                     {% block component_product_box_image_placeholder %}
  180.                                                         no-image
  181.                                                     {% endblock %}
  182.                                                 {% endif %}
  183.                                             {% endblock %}
  184.                                         </a>
  185.                                     {% endblock %}
  186.                                 {% endblock %}
  187.                                 {% block component_product_box_info %}
  188.                                     <div class="info_block">
  189.                                         {% block component_product_box_name %}
  190.                                             <a href="/search?search={{ product.manufacturer.name }}"
  191.                                                class="product_brand">{{ product.manufacturer.name }}</a>
  192.                                             <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  193.                                                class="product_name"
  194.                                                title="{{ name }}">
  195.                                                 {{ name }}
  196.                                             </a>
  197.                                         {% endblock %}
  198.                                         {% block component_product_box_price %}
  199.                                             <div class="price_block">
  200.                                                 {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
  201.                                             </div>
  202.                                         {% endblock %}
  203.                                         {% block component_product_box_action %}
  204.                                             {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
  205.                                         {% endblock %}
  206.                                     </div>
  207.                                 {% endblock %}
  208.                             </div>
  209.                         </div>
  210.                     {% endfor %}
  211.                 </div>
  212.                 <div class="see_all_link">
  213.                     {#                                <a href="listing.php">SEE ALL</a> #}
  214.                 </div>
  215.             </div>
  216.         </div>
  217.         <div class="products_section">
  218.             <div class="page_container">
  219.                 <h2 class="section_title">BEST SELLERS IN FASHION</h2>
  220.                 <div class="products_list">
  221.                     {% for product in fashion_products %}
  222.                         {% set name = product.translated.name %}
  223.                         {% set id = product.id %}
  224.                         {% set cover = product.cover.media %}
  225.                         {% set variation = product.variation %}
  226.                         {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %}
  227.                         <div class="list_item">
  228.                             <div class="product_block">
  229.                                 {% block component_product_box_badges_fashion %}
  230.                                     {% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %}
  231.                                 {% endblock %}
  232.                                 {% if config('core.cart.wishlistEnabled') %}
  233.                                     {% block component_product_box_wishlist_action_fashion %}
  234.                                         {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
  235.                                             appearance: 'circle',
  236.                                             productId: id
  237.                                         } %}
  238.                                     {% endblock %}
  239.                                 {% endif %}
  240.                                 {% block component_product_box_rich_snippets_fashion %}
  241.                                     {# @deprecated tag:v6.5.0 - Block will be removed completely including the template it references #}
  242.                                     {#                        {% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %} #}
  243.                                 {% endblock %}
  244.                                 {% block component_product_box_image_fashion %}
  245.                                     {# fallback if display mode is not set #}
  246.                                     {% set displayMode = displayMode ?: 'standard' %}
  247.                                     {# set display mode 'cover' for box-image with standard display mode #}
  248.                                     {% if layout == 'image' and displayMode == 'standard' %}
  249.                                         {% set displayMode = 'cover' %}
  250.                                     {% endif %}
  251.                                     {% block component_product_box_image_link_fashion %}
  252.                                         <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}"
  253.                                            title="{{ name }}"
  254.                                            class="product_image">
  255.                                             {% block component_product_box_image_link_inner_fashion %}
  256.                                                 {% if cover.url %}
  257.                                                     {% set attributes = {
  258.                                                         'class': 'is-'~displayMode,
  259.                                                         'alt': (cover.translated.alt ?: name),
  260.                                                         'title': (cover.translated.title ?: name)
  261.                                                     } %}
  262.                                                     {% if displayMode == 'cover' or displayMode == 'contain' %}
  263.                                                         {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  264.                                                     {% endif %}
  265.                                                     {% block component_product_box_image_thumbnail_fashion %}
  266.                                                         {% sw_thumbnails 'product-image-thumbnails' with {
  267.                                                             media: cover,
  268.                                                             sizes: sizes
  269.                                                         } %}
  270.                                                     {% endblock %}
  271.                                                 {% else %}
  272.                                                     {% block component_product_box_image_placeholder_fashion %}
  273.                                                         no-image
  274.                                                     {% endblock %}
  275.                                                 {% endif %}
  276.                                             {% endblock %}
  277.                                         </a>
  278.                                     {% endblock %}
  279.                                 {% endblock %}
  280.                                 {% block component_product_box_info_fashion %}
  281.                                     <div class="info_block">
  282.                                         {% block component_product_box_name_fashion %}
  283.                                             <a href="/search?search={{ product.manufacturer.name }}"
  284.                                                class="product_brand">{{ product.manufacturer.name }}</a>
  285.                                             <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  286.                                                class="product_name"
  287.                                                title="{{ name }}">
  288.                                                 {{ name }}
  289.                                             </a>
  290.                                         {% endblock %}
  291.                                         {% block component_product_box_price_fashion %}
  292.                                             <div class="price_block">
  293.                                                 {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
  294.                                             </div>
  295.                                         {% endblock %}
  296.                                         {% block component_product_box_action_fashion %}
  297.                                             {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
  298.                                         {% endblock %}
  299.                                     </div>
  300.                                 {% endblock %}
  301.                             </div>
  302.                         </div>
  303.                     {% endfor %}
  304.                 </div>
  305.                 <div class="see_all_link">
  306.                     <a href="/Fashion/">SEE ALL</a>
  307.                 </div>
  308.             </div>
  309.         </div>
  310.         <div class="offers_section">
  311.             <div class="page_container">
  312.                 <ul class="offers_list">
  313.                     {% for product in intros_products %}
  314.                         {% set name = product.translated.name %}
  315.                         {% set id = product.id %}
  316.                         {% set cover = product.cover.media %}
  317.                         {% set variation = product.variation %}
  318.                         {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %}
  319.                         <li>
  320.                             <div class="offer_block">
  321.                                 <div class="offer_image">
  322.                                     {% if product.customFields.custom_homepage_intro_image %}
  323.                                         {% set image = searchMedia([product.customFields.custom_homepage_intro_image], context.context).first %}
  324.                                         <img src="{{ image.url }}" srcset="{{ image.url }} 1x, {{ image.url }} 2x"
  325.                                              width="220" height="223" alt="{{ product.name }}"
  326.                                              title="{{ product.name }}"/>
  327.                                     {% else %}
  328.                                         {% sw_thumbnails 'product-offer-thumbnails' with {
  329.                                             media: cover,
  330.                                             sizes: sizes
  331.                                         } %}
  332.                                     {% endif %}
  333.                                 </div>
  334.                                 <div class="offer_title">
  335.                                     {% if product.customFields.custom_homepage_intro_title %}
  336.                                         {{ product.customFields.custom_homepage_intro_title|sw_sanitize }}
  337.                                     {% else %}
  338.                                         {% if product.name %} {{ name|sw_sanitize }} {% endif %}
  339.                                     {% endif %}
  340.                                 </div>
  341.                                 <div class="offer_description">
  342.                                     {% if product.customFields.custom_homepage_intro_desc %}
  343.                                         {{ product.customFields.custom_homepage_intro_desc|sw_sanitize }}
  344.                                     {% else %}
  345.                                         {% if product.description %}  {{ product.description|sw_sanitize }} {% endif %}
  346.                                     {% endif %}
  347.                                 </div>
  348.                                 <a
  349.                                     {% if product.customFields.custom_homepage_intro_desc %}
  350.                                         href="{{ product.customFields.custom_homepage_intro_link }}"
  351.                                     {% else %}
  352.                                         href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  353.                                     {% endif %}
  354.                                     class="view_more">VIEW MORE</a>
  355.                             </div>
  356.                         </li>
  357.                     {% endfor %}
  358.                 </ul>
  359.             </div>
  360.         </div>
  361.         <div class="products_section">
  362.             <div class="page_container">
  363.                 <h2 class="section_title">BEST SELLERS IN ELECTRONICS</h2>
  364.                 <div class="products_list">
  365.                     {% for product in electronics_products %}
  366.                         {% set name = product.translated.name %}
  367.                         {% set id = product.id %}
  368.                         {% set cover = product.cover.media %}
  369.                         {% set variation = product.variation %}
  370.                         {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %}
  371.                         <div class="list_item">
  372.                             <div class="product_block">
  373.                                 {% block component_product_box_badges_electronics %}
  374.                                     {% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %}
  375.                                 {% endblock %}
  376.                                 {% if config('core.cart.wishlistEnabled') %}
  377.                                     {% block component_product_box_wishlist_action_electronics %}
  378.                                         {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
  379.                                             appearance: 'circle',
  380.                                             productId: id
  381.                                         } %}
  382.                                     {% endblock %}
  383.                                 {% endif %}
  384.                                 {% block component_product_box_rich_snippets_electronics %}
  385.                                     {# @deprecated tag:v6.5.0 - Block will be removed completely including the template it references #}
  386.                                     {#                        {% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %} #}
  387.                                 {% endblock %}
  388.                                 {% block component_product_box_image_electronics %}
  389.                                     {# fallback if display mode is not set #}
  390.                                     {% set displayMode = displayMode ?: 'standard' %}
  391.                                     {# set display mode 'cover' for box-image with standard display mode #}
  392.                                     {% if layout == 'image' and displayMode == 'standard' %}
  393.                                         {% set displayMode = 'cover' %}
  394.                                     {% endif %}
  395.                                     {% block component_product_box_image_link_electronics %}
  396.                                         <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}"
  397.                                            title="{{ name }}"
  398.                                            class="product_image">
  399.                                             {% block component_product_box_image_link_inner_electronics %}
  400.                                                 {% if cover.url %}
  401.                                                     {% set attributes = {
  402.                                                         'class': 'is-'~displayMode,
  403.                                                         'alt': (cover.translated.alt ?: name),
  404.                                                         'title': (cover.translated.title ?: name)
  405.                                                     } %}
  406.                                                     {% if displayMode == 'cover' or displayMode == 'contain' %}
  407.                                                         {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  408.                                                     {% endif %}
  409.                                                     {% block component_product_box_image_thumbnail_electronics %}
  410.                                                         {% sw_thumbnails 'product-image-thumbnails' with {
  411.                                                             media: cover,
  412.                                                             sizes: sizes
  413.                                                         } %}
  414.                                                     {% endblock %}
  415.                                                 {% else %}
  416.                                                     {% block component_product_box_image_placeholder_electronics %}
  417.                                                         no-image
  418.                                                     {% endblock %}
  419.                                                 {% endif %}
  420.                                             {% endblock %}
  421.                                         </a>
  422.                                     {% endblock %}
  423.                                 {% endblock %}
  424.                                 {% block component_product_box_info_electronics %}
  425.                                     <div class="info_block">
  426.                                         {% block component_product_box_name_electronics %}
  427.                                             <a href="/search?search={{ product.manufacturer.name }}"
  428.                                                class="product_brand">{{ product.manufacturer.name }}</a>
  429.                                             <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  430.                                                class="product_name"
  431.                                                title="{{ name }}">
  432.                                                 {{ name }}
  433.                                             </a>
  434.                                         {% endblock %}
  435.                                         {% block component_product_box_price_electronics %}
  436.                                             <div class="price_block">
  437.                                                 {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
  438.                                             </div>
  439.                                         {% endblock %}
  440.                                         {% block component_product_box_action_electronics %}
  441.                                             {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
  442.                                         {% endblock %}
  443.                                     </div>
  444.                                 {% endblock %}
  445.                             </div>
  446.                         </div>
  447.                     {% endfor %}
  448.                 </div>
  449.                 <div class="see_all_link">
  450.                     <a href="/Electronics/">SEE ALL</a>
  451.                 </div>
  452.             </div>
  453.         </div>
  454.         <div class="products_section">
  455.             <div class="page_container">
  456.                 <h2 class="section_title">BEST SELLERS IN HOME &#38; GARDEN</h2>
  457.                 <div class="products_list">
  458.                     {% for product in garden_products %}
  459.                         {% set name = product.translated.name %}
  460.                         {% set id = product.id %}
  461.                         {% set cover = product.cover.media %}
  462.                         {% set variation = product.variation %}
  463.                         {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %}
  464.                         <div class="list_item">
  465.                             <div class="product_block">
  466.                                 {% block component_product_box_badges_garden %}
  467.                                     {% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %}
  468.                                 {% endblock %}
  469.                                 {% if config('core.cart.wishlistEnabled') %}
  470.                                     {% block component_product_box_wishlist_action_garden %}
  471.                                         {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
  472.                                             appearance: 'circle',
  473.                                             productId: id
  474.                                         } %}
  475.                                     {% endblock %}
  476.                                 {% endif %}
  477.                                 {% block component_product_box_rich_snippets_garden %}
  478.                                     {# @deprecated tag:v6.5.0 - Block will be removed completely including the template it references #}
  479.                                     {#                        {% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %} #}
  480.                                 {% endblock %}
  481.                                 {% block component_product_box_image_garden %}
  482.                                     {# fallback if display mode is not set #}
  483.                                     {% set displayMode = displayMode ?: 'standard' %}
  484.                                     {# set display mode 'cover' for box-image with standard display mode #}
  485.                                     {% if layout == 'image' and displayMode == 'standard' %}
  486.                                         {% set displayMode = 'cover' %}
  487.                                     {% endif %}
  488.                                     {% block component_product_box_image_link_garden %}
  489.                                         <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}"
  490.                                            title="{{ name }}"
  491.                                            class="product_image">
  492.                                             {% block component_product_box_image_link_inner_garden %}
  493.                                                 {% if cover.url %}
  494.                                                     {% set attributes = {
  495.                                                         'class': 'is-'~displayMode,
  496.                                                         'alt': (cover.translated.alt ?: name),
  497.                                                         'title': (cover.translated.title ?: name)
  498.                                                     } %}
  499.                                                     {% if displayMode == 'cover' or displayMode == 'contain' %}
  500.                                                         {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  501.                                                     {% endif %}
  502.                                                     {% block component_product_box_image_thumbnail_garden %}
  503.                                                         {% sw_thumbnails 'product-image-thumbnails' with {
  504.                                                             media: cover,
  505.                                                             sizes: sizes
  506.                                                         } %}
  507.                                                     {% endblock %}
  508.                                                 {% else %}
  509.                                                     {% block component_product_box_image_placeholder_garden %}
  510.                                                         no-image
  511.                                                     {% endblock %}
  512.                                                 {% endif %}
  513.                                             {% endblock %}
  514.                                         </a>
  515.                                     {% endblock %}
  516.                                 {% endblock %}
  517.                                 {% block component_product_box_info_garden %}
  518.                                     <div class="info_block">
  519.                                         {% block component_product_box_name_garden %}
  520.                                             <a href="/search?search={{ product.manufacturer.name }}"
  521.                                                class="product_brand">{{ product.manufacturer.name }}</a>
  522.                                             <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  523.                                                class="product_name"
  524.                                                title="{{ name }}">
  525.                                                 {{ name }}
  526.                                             </a>
  527.                                         {% endblock %}
  528.                                         {% block component_product_box_price_garden %}
  529.                                             <div class="price_block">
  530.                                                 {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
  531.                                             </div>
  532.                                         {% endblock %}
  533.                                         {% block component_product_box_action_garden %}
  534.                                             {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
  535.                                         {% endblock %}
  536.                                     </div>
  537.                                 {% endblock %}
  538.                             </div>
  539.                         </div>
  540.                     {% endfor %}
  541.                 </div>
  542.                 <div class="see_all_link">
  543.                     <a href="/Home-Garden/">SEE ALL</a>
  544.                 </div>
  545.             </div>
  546.         </div>
  547.         <div class="bnner_section">
  548.             <div class="page_container">
  549.                 <a href="" class="bnner_block">
  550.                     <picture>
  551.                         <source media="(min-width:640px)" srcset="images/wide_bnner.jpg"/>
  552.                         <img src="images/portrait_bnner.jpg" width="1480" height="240" alt="" title=""/>
  553.                         banner title <!--important for google lighthouse-->
  554.                     </picture>
  555.                 </a>
  556.             </div>
  557.         </div>
  558.         <div class="brands_section">
  559.             <div class="page_container">
  560.                 <h2 class="section_title">POPULAR BRANDS</h2>
  561.                 <ul class="brands_list">
  562.                     {% for brand in brands %}
  563.                         <li>
  564.                             <a class="brand_block" href="/search?search={{ brand.name }}">
  565.                                 <img src="{{ brand.image }}" srcset="{{ brand.image }} 1x, {{ brand.image }} 2x"
  566.                                      width="240"
  567.                                      height="191" alt="{{ brand.name }}" title="{{ brand.name }}"/>
  568.                                 {{ brand.name }}
  569.                             </a>
  570.                         </li>
  571.                     {% endfor %}
  572.                 </ul>
  573.                 <div class="more_btn_block">
  574.                     <a href="/brands" class="primary_btn">SEE ALL</a>
  575.                 </div>
  576.             </div>
  577.         </div>
  578.     {% endblock %}
  579.     {#    </div> #}
  580. {% endblock %}