app/template/default/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% block stylesheet %}
  3.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
  4.     <link rel="stylesheet" href="/test-ec-05/html/user_data/assets/css/top.min.css">
  5.     <style>
  6.         .ec-layoutRole .ec-layoutRole__contents {
  7.             max-width: unset;
  8.         }
  9.         .p-top__items__box .p-top__item {
  10.             overflow: hidden;
  11.             position: relative;
  12.         }
  13.         .cart.absolute {
  14.             position: absolute;
  15.             z-index: 1;
  16.             transform: rotate(40deg);
  17.             right: -25%;
  18.             overflow: hidden;
  19.             top: 5%;
  20.             text-align: center;
  21.             width: 100%;
  22.             font-size: 18px !important;
  23.         }
  24.         .p-top__items__box .p-top__item .cart {
  25.             padding: 0.6rem 10%;
  26.         }
  27.         .detail__only {
  28.             display: none;
  29.         }
  30.         @media screen and (max-width:1023px) {
  31.             .cart.absolute {
  32.                 right: -9vw;
  33.                 top: 3vw;
  34.                 width: 100%;
  35.                 text-align: center;
  36.                 
  37.             }
  38.         }
  39.         @media screen and (max-width:767px) {
  40.             .p-top__items__box .p-top__item__title, .p-top__items__box .p-top__item__price {
  41.                 font-size: 14px;
  42.             }
  43.             .p-top__items__box .p-top__item .cart.absolute {
  44.             padding: 0.6rem 0;
  45.             text-align: center;
  46.             }
  47.             .cart.absolute {
  48.                 right: 0;
  49.                 top: 0;
  50.                 transform: unset;
  51.                 width: 100%;
  52.                 border-radius: 0 !important;
  53.             }
  54.         }
  55.     </style>
  56. {% endblock %}
  58. {% block main %}
  59.     
  60.     <!-- start FV -->
  61.     <section class="p-top__fv">
  62.         <img class="cloud2" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cloud__gl2.webp')}}" alt="雲">
  63.         <img class="cloud1" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cloud_gl1.webp')}}" alt="雲">
  64.         <div class="p-top__fv__container">
  65.             <div class="p-top__fv__container__chara" id="visible">
  66.                 <img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/kanban.webp')}}" alt="">
  67.             </div>
  68.             <div class="swiper p-top__fv__container__left">
  69.                 <!-- Additional required wrapper -->
  70.                 <div class="swiper-wrapper">
  71.                   <!-- Slides -->
  72.                   <div class="swiper-slide"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/EC6062.jpeg')}}" alt="スライド画像１"></div>
  73.                   <div class="swiper-slide"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/EC6047.jpeg')}}" alt="スライド画像２"></div>
  74.                   <div class="swiper-slide"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/tongue.jpg')}}" alt="スライド画像３"></div>
  75.                 </div>
  76.             </div>
  77.             <div class="p-top__fv__container__right">
  78.                 <img class="top_text" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/top_text.webp')}}" alt="テキスト">
  79.             </div>
  80.             
  81.             <div class="main__chara" id="visible2">
  82.                 <img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/Cow10.png')}}" alt="キャラクター">
  83.             </div>
  85.         </div>
  86.         <!-- banner -->
  87.         {#{{ include('Block/banner.twig') }}#}
  88.         <!-- banner -->
  89.             
  90.         </section>
  91.         <!-- end FV -->
  92.         <!-- start concept -->
  93.         <section class="p-top__concept">
  94.             <img class="absolute1" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/frame2.webp')}}" alt="和柄">
  95.             <img class="absolute2" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cloud__gl2.webp')}}" alt="雲">
  96.             <img class="absolute3" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cloud_gl1.webp')}}" alt="雲">
  97.             <div class="section__title">
  98.                 <div class="image-wrapper">
  99.                     <img class="chara" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/chara2.webp')}}" alt="牛さん">
  100.                     <img class="chara" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/Cow6.png')}}" alt="牛さん">
  101.                 </div>
  102.                 <h2>牛さん紹介</h2>
  103.             </div>
  105.             <div class="p-top__concept__container">
  106.                 <img class="p-top__concept__container__left" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/chara2.webp')}}" alt="もぐも〜">
  107.                 <div class="p-top__concept__container__right">
  108.                     <h3 class="p-top__concept__container__right__title">
  109.                         もぐも〜
  110.                     </h3>
  111.                     <p>
  112.                     もぐ形村出身<br>
  113.                     『 も〜サイド 』CEO<br>
  114.                     穏やかで優しい性格<br>
  115.                     弟の「もぐぞ〜」の暴走に振り回されることも多いが、
  116.                     仲良し兄弟
  117.                     </p>
  118.                 </div>
  119.             </div>
  120.             <div class="p-top__concept__container">
  121.                 <img class="p-top__concept__container__left" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/Cow4.png')}}" alt="もぐぞ〜">
  122.                 <div class="p-top__concept__container__right">
  123.                     <h3 class="p-top__concept__container__right__title">
  124.                         もぐぞ〜
  125.                     </h3>
  126.                     <p>
  127.                         もぐ海道村在住<br>
  128.                         もぐも〜の弟<br>
  129.                         少し気が強く、暴走して兄を困らせることも<br>
  130.                         最近はYouTubeやSNSの参画を狙ってるらしい<br>
  131.                     </p>
  132.                 </div>
  133.             </div>
  134.         </section>
  135.         <!-- end concept -->
  136.         <!-- start recommend -->
  137.         <section class="p-top__recommend" id="recommend">
  138.             <img class="absolute2" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cloud_gl1.webp')}}" alt="雲">
  139.             
  140.             <div class="section__title">
  141.                 <div class="image-wrapper">
  142.                     <img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/Cow2_.png')}}" alt="牛さん">
  143.                 </div>
  144.                 <h2>お肉メニュー</h2>
  145.             </div>
  146.             
  147.             
  148.             <div class="p-top__items__box">
  149.                 
  150.                 <div class="p-top__item">
  151.                     {#<img class="p-top__item__rank" src="{{asset ('/html/user_data/assets/img/common/rank1.webp')}}" alt="1位">#}
  152.                     {#<img class="p-top__item__meet" src="{{asset ('/html/user_data/assets/img/common/EC5951.jpeg')}}" alt="商品">#}
  153.                     <img class="p-top__item__meet" src="{{ asset(Product26.main_list_image|no_image_product, 'save_image') }}" alt="商品">
  154.                     <h3 class="p-top__item__title">{{ include(template_from_string(Product26.freearea)) }}</h3>
  155.                     <p class="p-top__item__price">{{ Product26.getPrice02IncTaxMin|price }}</p>
  156.                     <a href="https://xb579178.xbiz.jp/test-ec-05/products/detail/26" class="cart">詳細を見る</a>
  157.                 </div>
  158.                 <div class="p-top__item">
  159.                     {#<p class="cart absolute">オープンセール</p>#}
  160.                     {#<img class="p-top__item__rank" src="{{asset ('/html/user_data/assets/img/common/rank2.webp')}}" alt="2位">#}
  161.                     <img class="p-top__item__meet" src="{{ asset(Product27.main_list_image|no_image_product, 'save_image') }}" alt="商品">
  162.                     <h3 class="p-top__item__title">{{ include(template_from_string(Product27.freearea)) }}</h3>
  163.                     <p class="p-top__item__price">{{ Product27.getPrice02IncTaxMin|price }}</p>
  164.                     <a href="https://xb579178.xbiz.jp/test-ec-05/products/detail/27" class="cart">詳細を見る</a>
  165.                 </div>
  166.                 <div class="p-top__item">
  167.                     {#<p class="cart absolute">オープンセール</p>#}
  168.                     {#<img class="p-top__item__rank" src="{{asset ('/html/user_data/assets/img/common/rank3.webp')}}" alt="3位">#}
  169.                     <img class="p-top__item__meet" src="{{ asset(Product28.main_list_image|no_image_product, 'save_image') }}" alt="商品">
  170.                     <h3 class="p-top__item__title">{{ include(template_from_string(Product28.freearea)) }}</h3>
  171.                     <p class="p-top__item__price">{{ Product28.getPrice02IncTaxMin|price }}</p>
  172.                     <a href="https://xb579178.xbiz.jp/test-ec-05/products/detail/28" class="cart">詳細を見る</a>
  173.                 </div>
  174.                 {#<div class="p-top__item">#}
  175.                 {#    <img class="p-top__item__rank" style="opacity:0;" src="{{asset ('/html/user_data/assets/img/common/rank2.webp')}}" alt="2位">#}
  176.                 {#    <img class="p-top__item__meet" src="{{ asset(Product25.main_list_image|no_image_product, 'save_image') }}" alt="商品">#}
  177.                 {#    <h3 class="p-top__item__title">{{ include(template_from_string(Product25.freearea)) }}</h3>#}
  178.                 {#    <p class="p-top__item__price">{{ Product25.getPrice02IncTaxMin|price }}</p>#}
  179.                 {#    <a href="https://gyunikukobo-moo-side.com/products/detail/25" class="cart">詳細を見る</a>#}
  180.                 {#</div>#}
  181.             </div>
  182.         </section>
  183.         <!-- end recommend -->
  185. <!-- start popular -->
  186.         <section class="p-top__popular" id="popular">
  187.             
  188.             <img class="absolute2" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cloud_gl1.webp')}}" alt="雲">
  189.             
  190.             <div class="section__title">
  191.                 <div class="image-wrapper">
  192.                     <img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/Cow-stamp9.png')}}" alt="牛さん">
  193.                 </div>
  194.                 <h2>牛さんグッズ</h2>
  195.             </div>
  196.             <div class="p-top__items__box">
  197.                 <div class="p-top__item">
  198.                     {#<img class="p-top__item__rank" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/rank1.webp')}}" alt="1位">#}
  199.                     <img class="p-top__item__meet" src="{{ asset(Product26.main_list_image|no_image_product, 'save_image') }}" alt="商品">
  200.                     <h3 class="p-top__item__title">{{ include(template_from_string(Product26.freearea)) }}</h3>
  201.                     <p class="p-top__item__price">{{ Product26.getPrice02IncTaxMin|price }}</p>
  202.                     <a href="https://xb579178.xbiz.jp/test-ec-05/products/detail/26" class="cart">詳細を見る</a>
  203.                 </div>
  204.                 <div class="p-top__item">
  205.                     {#<img class="p-top__item__rank" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/rank2.webp')}}" alt="2位">#}
  206.                     <img class="p-top__item__meet" src="{{ asset(Product25.main_list_image|no_image_product, 'save_image') }}" alt="商品">
  207.                     <h3 class="p-top__item__title">{{ include(template_from_string(Product25.freearea)) }}</h3>
  208.                     <p class="p-top__item__price">{{ Product25.getPrice02IncTaxMin|price }}</p>
  209.                     <a href="https://xb579178.xbiz.jp/test-ec-05/products/detail/25" class="cart">詳細を見る</a>
  210.                 </div>
  211.                 <div class="p-top__item">
  212.                     {#<img class="p-top__item__rank" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/rank3.webp')}}" alt="3位">#}
  213.                     <img class="p-top__item__meet" src="{{ asset(Product10.main_list_image|no_image_product, 'save_image') }}" alt="商品">
  214.                     <h3 class="p-top__item__title">{{ include(template_from_string(Product10.freearea)) }}</h3>
  215.                     <p class="p-top__item__price">{{ Product10.getPrice02IncTaxMin|price }}</p>
  216.                     <a href="https://xb579178.xbiz.jp/test-ec-05/products/detail/10" class="cart">詳細を見る</a>
  217.                 </div>
  218.                 <div class="p-top__item">
  219.                     {#<p class="cart absolute">オープンセール</p>#}
  220.                     {#<img class="p-top__item__rank" style="opacity:0;" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/rank2.webp')}}" alt="2位">#}
  221.                     <img class="p-top__item__meet" src="{{ asset(Product12.main_list_image|no_image_product, 'save_image') }}" alt="商品">
  222.                     <h3 class="p-top__item__title">{{ include(template_from_string(Product12.freearea)) }}</h3>
  223.                     <p class="p-top__item__price">{{ Product12.getPrice02IncTaxMin|price }}</p>
  224.                     <a href="https://xb579178.xbiz.jp/test-ec-05/products/detail/12" class="cart">詳細を見る</a>
  225.                 </div>
  226.             </div>
  227.         </section>
  228.         <!-- end popular -->
  231. <!-- start merchadise -->
  232. <section class="p-top__merchandise">
  233.             <img class="absolute1" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cloud__gl2.webp')}}" alt="雲">
  234.             <img class="absolute2" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cloud_gl1.webp')}}" alt="雲">
  235.             <div class="section__title">
  236.                 <div class="image-wrapper">
  237.                     <img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/Cow8.png')}}" alt="牛さん">
  238.                 </div>
  239.                 <h2>LINEスタンプ</h2>
  240.             </div>
  241.     {#        {% set Categories = repository('Eccube\\Entity\\Category').getList() %}#}
  243.     {#{% macro tree(Category) %}#}
  244.     {#    {% from _self import tree %}#}
  245.     {#    <a class="more__page" href="{{ url('product_list') }}?category_id={{ Category.id }}#page_anchor">#}
  246.     {#        {{ Category.name }}#}
  247.     {#    </a>#}
  248.         
  249.     {#{% endmacro %}#}
  251.     {# @see https://github.com/bolt/bolt/pull/2388 #}
  252.     {#{% from _self import tree %}#}
  253.     
  256.     {#<div class="p-top__merchandise__category">#}
  257.     {#    <p>カテゴリー選択<span>｜</span></p>#}
  258.     {#    <div class="p-top__merchandise__category__items">#}
  259.     {#            {% for Category in Categories %}#}
  260.     {#                    {{ tree(Category) }}#}
  261.     {#            {% endfor %}#}
  262.     {#    </div>#}
  263.     {#</div>#}
  265.             <div class="p-top__items__box line">
  266.                 <div class="p-top__item">
  267.                     <img class="p-top__item__meet" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/Cow3.png')}}" alt="商品">
  268.                     <h3 class="p-top__item__title">スタンプ名が入ります</h3>
  269.                     <a href="https://xb579178.xbiz.jp/test-ec-05/products/detail/10" class="cart">スタンプを購入する</a>
  270.                 </div>
  271.                 <div class="p-top__item">
  272.                     <img class="p-top__item__meet" src="{{asset ('/test-ec-05/html/user_data/assets/img/common/Cow8.png')}}" alt="商品">
  273.                     <h3 class="p-top__item__title">スタンプ名が入ります</h3>
  274.                     <a href="https://xb579178.xbiz.jp/test-ec-05/products/detail/23" class="cart">スタンプを購入する</a>
  275.                 </div>
  276.             </div>
  277. </section>
  278. <!-- end merchandise -->
  279. {% endblock %}