app/template/kaiino/Block/new_item.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. #}
  12. {% block javascript %}
  13.     <script>
  14.         {% set arrowLeft = asset('assets/icon/slick-arrow-left-white.svg') %}
  15.         {% set arrowRight = asset('assets/icon/slick-arrow-right-white.svg') %}
  16.         $(function() {
  17.             $('#slide_newitems').slick({
  18.                 slidesToShow: 4,
  19.                 dots: false,
  20.                 arrows: true,
  21.                 autoplay: false,
  22.                 speed: 300,
  23.                 infinite: false,
  24.                 appendArrows: $('.item-arrows'),
  25.                 prevArrow: '<button type="button" class="btn"><img src="{{ arrowLeft }}" alt=""></button>',
  26.                 nextArrow: '<button type="button" class="btn btn-juliet"><img src="{{ arrowRight }}" alt=""></button>',
  27.                 responsive: [{
  28.                     breakpoint: 768,
  29.                     settings: {
  30.                       slidesToShow: 2
  31.                     }
  32.                 }]
  33.             });
  34.             /*
  35.             $('.ec-campaignRole__List').slick({
  36.                 slidesToShow: 4,
  37.                 dots: false,
  38.                 arrows: true,
  39.                 autoplay: false,
  40.                 speed: 300,
  41.                 infinite: false,
  42.                 appendArrows: $('.campaign-arrows'),
  43.                 prevArrow: '<button type="button" class="btn"><img src="{{ arrowLeft }}" alt=""></button>',
  44.                 nextArrow: '<button type="button" class="btn btn-juliet"><img src="{{ arrowRight }}" alt=""></button>',
  45.                 responsive: [{
  46.                     breakpoint: 768,
  47.                     settings: {
  48.                       slidesToShow: 2
  49.                     }
  50.                 }]
  51.             });*/
  52.             /*
  53.             $('.ec-rankingRole__List').slick({
  54.                 slidesToShow: 4,
  55.                 dots: false,
  56.                 arrows: true,
  57.                 autoplay: false,
  58.                 speed: 300,
  59.                 infinite: false,
  60.                 appendArrows: $('.ranking-arrows'),
  61.                 prevArrow: '<button type="button" class="btn"><img src="{{ arrowLeft }}" alt=""></button>',
  62.                 nextArrow: '<button type="button" class="btn btn-juliet"><img src="{{ arrowRight }}" alt=""></button>',
  63.                 responsive: [{
  64.                     breakpoint: 768,
  65.                     settings: {
  66.                       slidesToShow: 2
  67.                     }
  68.                 }]
  69.             });
  70.             */
  71.             $(".ec-headerCategoryAreaSp__heading").on("click", function() {
  72.                 $(this).next().slideToggle();
  73.                 if($(this).hasClass('active')) {
  74.                     $(this).find('img').attr('src','{{ asset("assets/icon/side-arrow-right-gray.svg") }}');
  75.                     $(this).removeClass('active');
  76.                 } else {
  77.                     $(this).find('img').attr('src','{{ asset("assets/icon/side-arrow-down-gray.svg") }}');
  78.                     $(this).addClass('active');
  79.                 }
  80.             });
  81.             $(".ec-headerCategoryAreaSp .ec-itemNav__nav a").on("click", function() {
  82.                 if($(this).hasClass('active')) {
  83.                     $(this).find('img').attr('src','{{ asset("assets/icon/side-arrow-right-gray.svg") }}');
  84.                     $(this).removeClass('active');
  85.                 } else {
  86.                     $(this).css({
  87.                         'border':'none'
  88.                     });
  89.                     $(this).find('img').attr('src','{{ asset("assets/icon/side-arrow-down-gray.svg") }}');
  90.                     $(this).addClass('active');
  91.                 }
  92.             });
  93.         });
  94.     </script>
  95. {% endblock javascript %}
  97. {#
  98. <!-- ▼バナー -->
  99. <div class="ec-role">
  100.     <div class="ec-banner">
  101.         <div class="ec-banner__left">
  102.             <a href=""><img src="{{ asset('assets/img/top/img_new_collection.png') }}" alt="" /></a>
  103.         </div>
  104.         <div class="ec-banner_right">
  105.             <a href=""><img src="{{ asset('assets/img/top/img_limited_time_sale.png') }}" alt="" /></a>
  106.         </div>
  107.     </div>
  108. </div>
  109. <!-- ▲バナー -->
  110. #}
  111. <!-- ▼新着商品 -->
  112. <div class="ec-role">
  113.     <div class="ec-newItemRole ec-contentRole">
  114.         <div class="ec-secHeading">
  115.             <div>
  116.                 <span class="ec-secHeading__en">{{ 'NEW ITEM'|trans }}</span>
  117.                 <img src="{{ asset('assets/icon/slash.svg') }}" alt="" class="ec-slash is-pc">
  118.                 <div class="ec-secHeading__ja">{{ '新着商品'|trans }}</div>
  119.             </div>
  120.             <div class="item-arrows content-arrows"></div>
  121.         </div>
  122.             
  123.         <div class="ec-rankingRole__List" id="slide_newitems">
  124.           {% set PickupProductList = repository('Eccube\\Entity\\Product').getNewProducts() %}
  125.           {% for Product in PickupProductList %}
  126.           {{ include('Product/list_single_slide_item.twig') }}
  127.           {% endfor %}
  128.         </div>
  129.     </div>
  130.         
  131.     <div class="read_more">
  132.     <a href="{{ url('product_list') }}?orderby=2" class="">新着アイテム一覧</a>
  133.   </div>
  134. </div>
  135. <!-- ▲新着商品 -->
  137. {#
  138. <!-- ▼キャンペーン -->
  139. <div class="ec-role">
  140.     <div class="ec-campaignRole ec-contentRole">
  141.         <div class="ec-secHeading">
  142.             <div>
  143.                 <span class="ec-secHeading__en">{{ 'CAMPAIGN'|trans }}</span>
  144.                 <img src="{{ asset('assets/icon/slash.svg') }}" alt="" class="ec-slash is-pc">
  145.                 <span class="ec-secHeading__ja">{{ 'キャンペーン'|trans }}</span>
  146.             </div>
  147.             <div class="campaign-arrows content-arrows"></div>
  148.         </div>
  149.         <div class="ec-campaignRole__List">
  150.             <div class="ec-contentRole__listItem">
  151.                 <a href="{{ url('product_detail', {'id': '1'}) }}">
  152.                     <img src="{{ asset('wooden-shelf.png', 'save_image') }}">
  153.                     <p class="ec-contentRole__listItemTitle">{{ 'wooden shelf'|trans }}</p>
  154.                     <p class="ec-contentRole__listItemPrice">{{ '￥1,000(税込)'|trans }}</p>
  155.                 </a>
  156.             </div>
  157.             <div class="ec-contentRole__listItem">
  158.                 <a href="{{ url('product_detail', {'id': '1'}) }}">
  159.                     <img src="{{ asset('blue_modern_sofa.png', 'save_image') }}">
  160.                     <p class="ec-contentRole__listItemTitle">{{ 'Blue modern sofa'|trans }}</p>
  161.                     <p class="ec-contentRole__listItemPrice">{{ '￥1,000(税込)'|trans }}</p>
  162.                 </a>
  163.             </div>
  164.             <div class="ec-contentRole__listItem">
  165.                 <a href="{{ url('product_detail', {'id': '1'}) }}">
  166.                     <img src="{{ asset('gray_sofa.png', 'save_image') }}">
  167.                     <p class="ec-contentRole__listItemTitle">{{ 'Gray sofa'|trans }}</p>
  168.                     <p class="ec-contentRole__listItemPrice">{{ '￥1,000(税込)'|trans }}</p>
  169.                 </a>
  170.             </div>
  171.             <div class="ec-contentRole__listItem">
  172.                 <a href="{{ url('product_detail', {'id': '1'}) }}">
  173.                     <img src="{{ asset('wooden_cabinet.png', 'save_image') }}">
  174.                     <p class="ec-contentRole__listItemTitle">{{ 'Wooden cabinet'|trans }}</p>
  175.                     <p class="ec-contentRole__listItemPrice">{{ '￥1,000(税込)'|trans }}</p>
  176.                 </a>
  177.             </div>
  178.             <div class="ec-contentRole__listItem">
  179.                 <a href="{{ url('product_detail', {'id': '1'}) }}">
  180.                     <img src="{{ asset(''|no_image_product , 'save_image') }}">
  181.                     <p class="ec-contentRole__listItemTitle">{{ 'wooden shelf big'|trans }}</p>
  182.                     <p class="ec-contentRole__listItemPrice">{{ '￥1,000(税込)'|trans }}</p>
  183.                 </a>
  184.             </div>
  185.         </div>
  186.     </div>
  187. </div>
  188. <!-- ▲キャンペーン -->
  189. #}
  190. {#
  191. <!-- ▼ランキング -->
  192. <div class="ec-role">
  193.     <div class="ec-rankingRole ec-contentRole">
  194.         <div class="ec-secHeading">
  195.             <div>
  196.                 <span class="ec-secHeading__en">{{ 'RANKING'|trans }}</span>
  197.                 <img src="{{ asset('assets/icon/slash.svg') }}" alt="" class="ec-slash is-pc">
  198.                 <span class="ec-secHeading__ja">{{ 'ランキング'|trans }}</span>
  199.             </div>
  200.             <div class="ranking-arrows content-arrows"></div>
  201.         </div>
  202.         <div class="ec-rankingRole__List">
  203.             <div class="ec-contentRole__listItem">
  204.                 <a href="{{ url('product_detail', {'id': '1'}) }}">
  205.                     <img src="{{ asset('blue_convertible_sofa_bed.png', 'save_image') }}">
  206.                     <p class="ec-contentRole__listItemTitle">{{ 'Blue Convertible Sofa Bed'|trans }}</p>
  207.                     <p class="ec-contentRole__listItemPrice">{{ '￥1,000(税込)'|trans }}</p>
  208.                 </a>
  209.             </div>
  210.             <div class="ec-contentRole__listItem">
  211.                 <a href="{{ url('product_detail', {'id': '1'}) }}">
  212.                     <img src="{{ asset('wooden_cabinet.png', 'save_image') }}">
  213.                     <p class="ec-contentRole__listItemTitle">{{ 'wooden cabinet'|trans }}</p>
  214.                     <p class="ec-contentRole__listItemPrice">{{ '￥1,000(税込)'|trans }}</p>
  215.                 </a>
  216.             </div>
  217.             <div class="ec-contentRole__listItem">
  218.                 <a href="{{ url('product_detail', {'id': '1'}) }}">
  219.                     <img src="{{ asset('grey_modern_sofa.png', 'save_image') }}">
  220.                     <p class="ec-contentRole__listItemTitle">{{ 'Grey modern sofa'|trans }}</p>
  221.                     <p class="ec-contentRole__listItemPrice">{{ '￥1,000(税込)'|trans }}</p>
  222.                 </a>
  223.             </div>
  224.             <div class="ec-contentRole__listItem">
  225.                 <a href="{{ url('product_detail', {'id': '1'}) }}">
  226.                     <img src="{{ asset('blue_wing_chair.png', 'save_image') }}">
  227.                     <p class="ec-contentRole__listItemTitle">{{ 'Blue Wing Chair'|trans }}</p>
  228.                     <p class="ec-contentRole__listItemPrice">{{ '￥1,000(税込)'|trans }}</p>
  229.                 </a>
  230.             </div>
  231.             <div class="ec-contentRole__listItem">
  232.                 <a href="{{ url('product_detail', {'id': '1'}) }}">
  233.                     <img src="{{ asset(''|no_image_product , 'save_image') }}">
  234.                     <p class="ec-contentRole__listItemTitle">{{ 'wooden shelf big'|trans }}</p>
  235.                     <p class="ec-contentRole__listItemPrice">{{ '￥1,000(税込)'|trans }}</p>
  236.                 </a>
  237.             </div>
  238.         </div>
  239.     </div>
  240. </div>
  241. <!-- ▲ランキング -->
  242. #}
  244. {#
  245. <!-- ▼SPバナー -->
  246. <div class="ec-banner3 is-sp">
  247.     <a href=""><img src="{{ asset('assets/img/common/img_living_interior.png') }}" alt=""></a>
  248. </div>
  249. <!-- ▲SPバナー -->
  250. #}
  252. {# @see https://github.com/bolt/bolt/pull/2388 #}
  253. {#
  254. <!-- ▼SPカテゴリー -->
  255. {% set Categories = repository('Eccube\\Entity\\Category').getList() %}
  256. {% macro tree(Category) %}
  257.     {% from _self import tree %}
  258.     <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
  259.         {{ Category.name }}
  260.         <img src="{{ asset('assets/icon/side-arrow-right-gray.svg') }}" alt="">
  261.     </a>
  262.     {% if Category.children|length > 0 %}
  263.         <ul>
  264.             {% for ChildCategory in Category.children %}
  265.                 <li>
  266.                     {{ tree(ChildCategory) }}
  267.                 </li>
  268.             {% endfor %}
  269.         </ul>
  270.     {% endif %}
  271. {% endmacro %}
  274. {% from _self import tree %}
  275. <div class="ec-headerCategoryAreaSp is-sp">
  276.     <div class="ec-headerCategoryAreaSp__heading">
  277.         <p>{{ 'Categories'|trans }}</p>
  278.     </div>
  279.     <div class="ec-itemNav">
  280.         <ul class="ec-itemNav__nav">
  281.             <li class="ec-sideCategoryList__all">
  282.                 <a href="{{ url('product_list') }}?category_id=">全ての商品</a>
  283.             </li>
  284.             {% for Category in Categories %}
  285.                 <li>
  286.                     {{ tree(Category) }}
  287.                 </li>
  288.             {% endfor %}
  289.         </ul>
  290.     </div>
  291. </div>
  292. <!-- ▲SPカテゴリー -->
  293. #}