app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'fullwidth_frame.twig' %}
  13. {% set body_class = 'front_page' %}
  15. {% block stylesheet %}
  16. {% endblock %}
  18. {% block main %}
  20.     <section id="home_category">
  21.         <div class="home_title__inner">
  22.             <h2 class="home_en_title "><span class="en">Category</span><small>カテゴリーから探す</small></h2>
  23.             <a class="base_link_brn" href="{{ url('homepage') }}category">
  24.                 <span>カテゴリー一覧</span>
  25.                 <span>カテゴリー一覧</span>
  26.             </a>
  27.         </div><!--/.home_title__inner-->
  28.         <div class="home_category__inner">
  29.             <div class="home_category__list">
  30.                 {% for category in childCategories %}
  31.                     <a class="home_category__list_block" href="{{ url('homepage') }}products/list?category_id={{ category.id }}">
  32.                         <span class="thumb">
  33.                             <img src="{{ asset('rich_category/'~category.logo_file_name,'save_image') }}">
  34.                             </span>
  35.                         <span class="cat_ttl">{{ category.name }}</span>
  36.                     </a>
  37.                 {% endfor %}
  38.             </div><!--/.home_category__list-->
  39.         </div><!--/.home_title__inner-->
  41.         <div class="sp_center_link_btn">
  42.             <a class="base_link_brn" href="{{ url('homepage') }}category">
  43.                 <span>カテゴリー一覧</span>
  44.                 <span>カテゴリー一覧</span>
  45.             </a>
  46.         </div><!--/.sp_center_link_btn-->
  47.     </section>
  49.     <section id="home_brand">
  50.         <div class="home_title__inner">
  51.             <h2 class="home_en_title "><span class="en">Brand</span><small>ブランドから探す</small></h2>
  52.             <a class="base_link_brn" href="{{ url('homepage') }}brand">
  53.                 <span>ブランド一覧</span>
  54.                 <span>ブランド一覧</span>
  55.             </a>
  56.         </div><!--/.home_title__inner-->
  58.         <div class="home_brand__inner">
  59.             <div class="home_brand_container">
  60.                 <div class="left_column">
  61.                     <ul class="brand_logo_list">
  62.                         <li class="current">
  63.                             <a href="{{ url('homepage') }}products/list?category_id=35">
  64.                                 <img src="{{ asset('assets/img/about/brand_01_logo.png') }}" width="145" height="40" loading="lazy" alt="">
  65.                             </a>
  66.                         </li>
  67.                         <li>
  68.                             <a href="{{ url('homepage') }}products/list?category_id=36">
  69.                                 <img src="{{ asset('assets/img/about/brand_02_logo.png') }}" width="145" height="40" loading="lazy" alt="">
  70.                             </a>
  71.                         </li>
  72.                         <li>
  73.                             <a href="{{ url('homepage') }}products/list?category_id=39">
  74.                                 <img src="{{ asset('assets/img/about/brand_03_logo.png') }}" width="145" height="40" loading="lazy" alt="">
  75.                             </a>
  76.                         </li>
  77.                         <li>
  78.                             <a href="{{ url('homepage') }}products/list?category_id=40">
  79.                                 <img src="{{ asset('assets/img/about/brand_04_logo.png') }}" width="145" height="40" loading="lazy" alt="">
  80.                             </a>
  81.                         </li>
  82.                         <li>
  83.                             <a href="{{ url('homepage') }}products/list?category_id=70">
  84.                                 <img src="{{ asset('assets/img/about/brand_05_logo.png') }}" width="145" height="40" loading="lazy" alt="">
  85.                             </a>
  86.                         </li>
  87.                     </ul>
  89.                     <div class="pc_link_btn">
  90.                         <a class="base_link_brn" href="{{ url('homepage') }}brand">
  91.                             <span>and more...</span>
  92.                             <span>and more...</span>
  93.                         </a>
  94.                     </div><!--/.sp_center_link_btn-->
  96.                 </div>
  98.             </div><!--/.container-->
  99.             <div class="right_column">
  100.                 <ul class="brand_image_list">
  101.                     <li class="is-show">
  102.                         <div class="list_brand_title">
  103.                             <span class="ja">マスターウォール</span>
  104.                             <span class="en">MASTERWAL</span>
  105.                             <span class="ja sp_ja">マスターウォール</span>
  106.                         </div><!--/.list_brand_title-->
  107.                         <img src="{{ asset('assets/img/brand/home_image/brand_01.jpg') }}">
  108.                     </li>
  109.                     <li>
  110.                         <div class="list_brand_title">
  111.                             <span class="ja">カリモク ニュウスタンダード</span>
  112.                             <span class="en">Karimoku</span>
  113.                             <span class="ja sp_ja">カリモク ニュウスタンダード</span>
  114.                         </div><!--/.list_brand_title-->
  115.                         <img src="{{ asset('assets/img/brand/home_image/brand_02.jpg') }}">
  116.                     </li>
  117.                     <li>
  118.                         <div class="list_brand_title">
  119.                             <span class="ja">ブリッジ</span>
  120.                             <span class="en">BRIDGE</span>
  121.                             <span class="ja sp_ja">ブリッジ</span>
  122.                         </div><!--/.list_brand_title-->
  123.                         <img src="{{ asset('assets/img/brand/home_image/brand_03.jpg') }}">
  124.                     </li>
  125.                     <li>
  126.                         <div class="list_brand_title">
  127.                             <span class="ja">ニホンベッド</span>
  128.                             <span class="en">NIHON BED</span>
  129.                             <span class="ja sp_ja">ニホンベッド</span>
  130.                         </div><!--/.list_brand_title-->
  131.                         <img src="{{ asset('assets/img/brand/home_image/brand_04.jpg') }}">
  132.                     </li>
  133.                     <li>
  134.                         <div class="list_brand_title">
  135.                             <span class="ja">ヘイ</span>
  136.                             <span class="en">HAY</span>
  137.                             <span class="ja sp_ja">ヘイ</span>
  138.                         </div><!--/.list_brand_title-->
  139.                         <img src="{{ asset('assets/img/brand/home_image/brand_05.jpg') }}">
  140.                     </li>
  141.                 </ul>
  142.             </div>
  143.         </div><!--/.home_brand__inner-->
  144.         <div class="sp_center_link_btn">
  145.             <a class="base_link_brn" href="{{ url('homepage') }}brand">
  146.                 <span>ブランド一覧</span>
  147.                 <span>ブランド一覧</span>
  148.             </a>
  149.         </div><!--/.sp_center_link_btn-->
  150.     </section>
  152.     {#
  153.     <section id="home_special">
  154.         <div class="home_title__inner home_title__inner_no_line">
  155.             <h2 class="home_en_title "><span class="en">Special</span><small>特集</small></h2>
  156.             <a class="base_link_brn" href="{{ url('homepage') }}">
  157.                 <span>特集一覧</span>
  158.                 <span>特集一覧</span>
  159.             </a>
  160.         </div><!--/.home_title__inner-->
  161.         <div class="home_special__inner">
  162.             <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
  163.                 <span class="slider__label sr-only"></span>
  164.             </div><!--/.progress-->
  166.             <div class="special_slider_wrap">
  167.                 <div class="special_slider">
  168.                     <div class="item">
  169.                         <a class="special_slide_block" href="{{ url('homepage') }}products/list?category_id=36">
  170.                             <div class="new_icon"><span class="txt">New</span></div>
  171.                             <img src="{{ asset('assets/img/home/special_slide01.jpg') }}">
  172.                             <div class="special_ttl">統一感のあるリビングに<br>洗練されたデザインが特徴の<br>Karimoku New Standardを</div>
  173.                         </a>
  174.                     </div><!--/.slick-slide-->
  176.                     <div class="item">
  177.                         <a class="special_slide_block" href="{{ url('homepage') }}products/list?category_id=17">
  178.                             <img src="{{ asset('assets/img/home/special_slide02.jpg') }}">
  179.                             <div class="special_ttl">食卓に彩りを<br>IKUSが提案するダイニングテーブル</div>
  180.                         </a>
  181.                     </div><!--/.slick-slide-->
  183.                     <div class="item">
  184.                         <a class="special_slide_block" href="{{ url('homepage') }}products/list?category_id=35">
  185.                             <img src="{{ asset('assets/img/home/special_slide03.jpg') }}">
  186.                             <div class="special_ttl">100年後のアンティーク家具へ<br>厳選されたウォールナットを使用した<br>高品質のファニチャーブランド。</div>
  187.                         </a>
  188.                     </div><!--/.slick-slide-->
  190.                     <div class="item">
  191.                         <a class="special_slide_block" href="{{ url('homepage') }}products/list?category_id=10">
  192.                             <div class="new_icon"><span class="txt">New</span></div>
  193.                             <img src="{{ asset('assets/img/home/special_slide04.jpg') }}">
  194.                             <div class="special_ttl">リビングの顔<br>家族が集まる団らんのリビングに<br>IKUSがおすすめするソファ</div>
  195.                         </a>
  196.                     </div><!--/.slick-slide-->
  198.                     <div class="item">
  199.                         <a class="special_slide_block" href="{{ url('homepage') }}products/list?category_id=39">
  200.                             <img src="{{ asset('assets/img/home/special_slide05.jpg') }}">
  201.                             <div class="special_ttl">デンマークの家具デザイナー、<br>ハンス・S・ヤコブセンとのコラボレーションブランド</div>
  202.                         </a>
  203.                     </div><!--/.slick-slide-->
  205.                 </div><!--/.special_slider-->
  206.             </div><!--/.special_slider_wrap-->
  207.             <img class="home_special__logp" src="{{ asset('assets/icon/logo_type02.svg') }}">
  208.         </div><!--/.home_special__inner-->
  209.     </section>
  210.     #}
  212.     <section id="home_about">
  213.         <div class="home_about__inner">
  214.             <div class="home_about_container">
  215.                 <div class="home_about_txt_block">
  216.                     <h3 class="home_about_h3">自分の</br>好きなものと、</br>出会う。</h3>
  217.                     <p class="home_about_ttl__en">Kind your likes</p>
  218.                     <a class="base_link_brn" href="{{ url('homepage') }}about">
  219.                         <span>IKUSについて</span>
  220.                         <span>IKUSについて</span>
  221.                     </a>
  222.                 </div><!--/.home_about_txt_block-->
  223.             </div><!--/.container-->
  224.             <div class="left_column">
  225.                 <img src="{{ asset('assets/img/home/home_about_img.jpg') }}">
  226.             </div><!--/.left_column-->
  227.         </div>
  228.         <div class="sp_center_link_btn">
  229.             <a class="base_link_brn" href="{{ url('homepage') }}about">
  230.                 <span>IKUSについて</span>
  231.                 <span>IKUSについて</span>
  232.             </a>
  233.         </div><!--/.sp_center_link_btn-->
  234.     </section>
  237.     <section id="home_pickup">
  238.         <div class="home_title__inner">
  239.             <h2 class="home_en_title "><span class="en">Pick up</span><small>ピックアップ</small></h2>
  240.         </div><!--/.home_title__inner-->
  241.         <div class="home_pickup__inner">
  243.             <ul class="pickup_list">
  244.             {% for product in pickup_products %}
  245.                 <li class="pickup_list_block">
  246.                     <a href="{{ url('product_detail', {'id': product.id}) }}">
  247.                         <div class="thumb">
  248.                             <img src="{{ asset(product.main_list_image|no_image_product, 'save_image') }}" alt="{{ product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  249.                         </div><!--/.thumb-->
  250.                         {# 商品が所属する特定の親カテゴリの子カテゴリを取得します #}
  251.                         {% set targetParentCategoryId = 34 %} {# 親カテゴリのIDを指定 #}
  252.                         {% set relatedSubcategories = [] %}
  253.                         {% for productCategory in product.ProductCategories %}
  254.                             {% set category = productCategory.Category %}
  255.                             {% if category.Parent and category.Parent.id == targetParentCategoryId %}
  256.                                 {% set relatedSubcategories = relatedSubcategories|merge([category]) %}
  257.                             {% endif %}
  258.                         {% endfor %}
  260.                         <div class="pickup_list_block__txt">
  261.                             {# 商品が所属する特定の親カテゴリの子カテゴリを表示します #}
  262.                             {% for subcategory in relatedSubcategories %}
  263.                              <object>
  264.                                  <a class="brand_name" href="{{ url('product_list', {'category_id': subcategory.id}) }}">
  265.                                      {{ subcategory.name }}
  266.                                  </a>
  267.                              </object>
  268.                             {% endfor %}
  270.                             <span class="product_ttl">{{ product.name }}</span>
  271.                             <span class="product_price">
  272.                                     <span class="product_price__num">
  273.                                     {% if product.hasProductClass %}
  274.                                         {% if product.getPrice02Min == product.getPrice02Max %}
  275.                                             {{ product.getPrice02IncTaxMin|price }}
  276.                                         {% else %}
  277.                                             {{ product.getPrice02IncTaxMin|price }} ～ {{ product.getPrice02IncTaxMax|price }}
  278.                                         {% endif %}
  279.                                     {% else %}
  280.                                         {{ product.getPrice02IncTaxMin|price }}
  281.                                     {% endif %}
  282.                                     </span><!--/.product_price__num-->
  283.                                     <span class="zeikomi">（税込）</span>
  284.                                 </span>
  285.                         </div><!--/.pickup_list_block__txt-->
  286.                     </a>
  287.                 </li>
  288.             {% endfor %}
  289.             </ul><!--/.pickup_list-->
  290.         </div><!--/.home_pickup__inner-->
  291.     </section>
  294.     <section id="home_ranking">
  295.         <div class="home_title__inner">
  296.             <h2 class="home_en_title "><span class="en">Ranking</span><small>ランキング</small></h2>
  297.         </div><!--/.home_title__inner-->
  298.         <div class="home_ranking__inner">
  300.             <ul class="products_list">
  301.             {% for subcategory_id, products in products_by_subcategory %}
  303.                 {% set loop_index = loop.index %}
  305.                 <li class="products_list_block">
  306.                     {% for product in products %}
  307.                     <a href="{{ url('product_detail', {'id': product.id}) }}">
  308.                         <span class="rank_num rank_num_{{ loop_index }}"><span class="num_txt">{{ loop_index }}</span></span>
  309.                         <div class="thumb">
  310.                             <img src="{{ asset(product.main_list_image|no_image_product, 'save_image') }}" alt="{{ product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  311.                         </div><!--/.thumb-->
  312.                         {# 商品が所属する特定の親カテゴリの子カテゴリを取得します #}
  313.                         {% set targetParentCategoryId = 34 %} {# 親カテゴリのIDを指定 #}
  314.                         {% set relatedSubcategories = [] %}
  315.                         {% for productCategory in product.ProductCategories %}
  316.                             {% set category = productCategory.Category %}
  317.                             {% if category.Parent and category.Parent.id == targetParentCategoryId %}
  318.                                 {% set relatedSubcategories = relatedSubcategories|merge([category]) %}
  319.                             {% endif %}
  320.                         {% endfor %}
  322.                         <div class="pickup_list_block__txt">
  323.                             {# 商品が所属する特定の親カテゴリの子カテゴリを表示します #}
  324.                             {% for subcategory in relatedSubcategories %}
  325.                                 <object>
  326.                                     <a class="brand_name" href="{{ url('product_list', {'category_id': subcategory.id}) }}">
  327.                                         {{ subcategory.name }}
  328.                                     </a>
  329.                                 </object>
  330.                             {% endfor %}
  332.                             <span class="product_ttl">{{ product.name }}</span>
  333.                             <span class="product_price">
  334.                                     <span class="product_price__num">
  335.                                     {% if product.hasProductClass %}
  336.                                         {% if product.getPrice02Min == product.getPrice02Max %}
  337.                                             {{ product.getPrice02IncTaxMin|price }}
  338.                                         {% else %}
  339.                                             {{ product.getPrice02IncTaxMin|price }} ～ {{ product.getPrice02IncTaxMax|price }}
  340.                                         {% endif %}
  341.                                     {% else %}
  342.                                         {{ product.getPrice02IncTaxMin|price }}
  343.                                     {% endif %}
  344.                                     </span><!--/.product_price__num-->
  345.                                     <span class="zeikomi">（税込）</span>
  346.                                 </span>
  347.                         </div><!--/.pickup_list_block__txt-->
  348.                     </a>
  349.                     {% endfor %}
  350.                 </li>
  351.             {% endfor %}
  353.             </ul>
  354.         </div><!--/.home_pickup__inner-->
  355.     </section>
  358.     {#
  359.     <section id="home_coordinate">
  360.         <div class="home_title__inner home_title__inner_no_line home_title__inner_sp_line">
  361.             <h2 class="home_en_title "><span class="en">Coordinate Services</span><small>コーディネートサービス</small></h2>
  362.         </div><!--/.home_title__inner-->
  365.         <div class="coordinate_h3__sp_wrap">
  366.             <h3>好きと出会う、<br>コーディネートの<br>お手伝い。</h3>
  367.         </div><!--/.coordinate_h3__sp_wrap-->
  369.         <div class="coordinate_wrap">
  370.             <div class="coordinate_wrap__inner">
  372.                 <div class="swiper slider_coordinate">
  373.                     <div class="swiper-wrapper">
  374.                         <div class="swiper-slide">
  375.                             <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  376.                                 <img src="{{ asset('assets/img/home/coordinate_bg01.jpg') }}">
  377.                             </div>
  378.                          </div>
  379.                         <div class="swiper-slide">
  380.                             <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  381.                                 <img src="{{ asset('assets/img/home/coordinate_bg02.jpg') }}">
  382.                             </div>
  383.                         </div>
  384.                         <div class="swiper-slide">
  385.                             <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  386.                                 <img src="{{ asset('assets/img/home/coordinate_bg03.jpg') }}">
  387.                             </div>
  388.                         </div>
  389.                         <div class="swiper-slide">
  390.                             <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  391.                                 <img src="{{ asset('assets/img/home/coordinate_bg01.jpg') }}">
  392.                             </div>
  393.                         </div>
  394.                     </div>
  395.                 </div>
  397.                 <div class="slider_thumbnail__wrap">
  398.                     <div class="swiper slider_thumbnail">
  399.                         <div class="swiper-wrapper">
  400.                             <div class="swiper-slide">
  401.                                 <img src="{{ asset('assets/img/home/coordinate_bg01.jpg') }}">
  402.                             </div>
  403.                             <div class="swiper-slide">
  404.                                 <img src="{{ asset('assets/img/home/coordinate_bg02.jpg') }}">
  405.                             </div>
  406.                             <div class="swiper-slide">
  407.                                 <img src="{{ asset('assets/img/home/coordinate_bg03.jpg') }}">
  408.                             </div>
  409.                             <div class="swiper-slide">
  410.                                 <img src="{{ asset('assets/img/home/coordinate_bg01.jpg') }}">
  411.                             </div>
  412.                         </div>
  413.                     </div>
  414.                 </div><!--/.slider_thumbnail__wrap-->
  416.                 <div class="coordinate_inner_block">
  417.                     <div class="coordinate_inner_block__left">
  418.                         <h3>好きと出会う、<br>コーディネートの<br>お手伝い。</h3>
  419.                     </div><!--/.coordinate_inner_block__left-->
  420.                     <div class="coordinate_inner_block__right">
  421.                         <a class="base_link_brn base_link_brn__white" href="{{ url('homepage') }}coordinate/">
  422.                             <span>コーディネートサービスを見る</span>
  423.                             <span>コーディネートサービスを見る</span>
  424.                         </a>
  425.                     </div><!--/.coordinate_inner_block__right-->
  426.                 </div><!--/.coordinate_inner_block-->
  427.             </div><!--/.coordinate_wrap__inner-->
  428.         </div><!--/.coordinate_wrap-->
  430.         <div class="sp_center_link_btn">
  431.             <a class="base_link_brn" href="{{ url('homepage') }}coordinate/">
  432.                 <span>コーディネートサービスを見る</span>
  433.                 <span>コーディネートサービスを見る</span>
  434.             </a>
  435.         </div><!--/.sp_center_link_btn-->
  436.     </section>
  437.     #}
  439. {% endblock %}