app/template/default/Block/campaign.twig line 1

Open in your IDE?
  2. {% set cat_id = cat_id_campaign %}
  4. {% set Products = get_category_product(cat_id,10) %}
  5.     {% if Products|length > 0 %}
  6.      {% set count =  0%}   
  7. <section class="campaign max">
  8.         <div class="heading">
  9.         <div class="eng">Campaign</div>
  10.         <h2>キャンペーン商品</h2>
  11.         <div class="text">
  12.             <p>期間限定でオトクな商品をご用意しております。</p>
  13.         </div>
  14.     </div>
  17.     <div class="content">
  18.         <div class="slider">
  19.             
  20. <ul class="thumb-item">
  21.    {% for Product in Products %}
  22.     {% if Product|length > 0 %}
  23.      {% set count = count + 1%}   
  24.     {% endif %}
  25.      <li>
  26.         <div class="wrap">
  27.         <div class="number"><div class="inner">0{{count}}</div></div>           
  28.         <a href="{{ url('product_detail', {'id': Product.id}) }}">
  29.             <div class="image">
  30.             <img src="{{asset(Product.main_list_image|no_image_product, 'save_image')}}">
  31.             <div class="catch">
  32.                   <div class="price">                    
  33.                     {% if Product.hasProductClass %}
  34.                             {% if Product.getPrice02Min == Product.getPrice02Max %}
  35.                                 {{ Product.getPrice02IncTaxMin|price }}
  36.                             {% else %}
  37.                                 {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
  38.                             {% endif %}
  39.                         {% else %}
  40.                             {{ Product.getPrice02IncTaxMin|price }}
  41.                         {% endif %}  
  42.                       </div>
  43.                 <div class="title">{{ Product.name }}</div>
  44.             </div>
  45.             </div>
  47.         </a>
  49.         </div>
  50.      </li>
  51.         {% endfor %}
  55. </ul>
  56. <!-- ↓サムネイル -->
  57. <ul class="thumb-item-nav">
  58.    {% for Product in Products %}
  60.      <li>
  61.                     {% set change_image_size = change_image_size( asset(Product.main_list_image|no_image_product, 'save_image'),200,200 ) %} {# サムネ画像のサイズ変更 #}
  63.             <div class="image">
  64.             <img src="{{ change_image_size }}">
  65.             </div>
  66.             <div class="catch">
  67.                           <div class="price">
  68.                             {% if Product.hasProductClass %}
  69.                                 {% if Product.getPrice02Min == Product.getPrice02Max %}
  70.                                     {{ Product.getPrice02IncTaxMin|price }}
  71.                                 {% else %}
  72.                                     {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
  73.                                 {% endif %}
  74.                             {% else %}
  75.                                 {{ Product.getPrice02IncTaxMin|price }}
  76.                             {% endif %}  
  77.                         </div>
  78.                 <div class="title">{{ Product.name }}</div>
  79.             </div>
  80.      </li>
  81.         {% endfor %}
  84. </ul>
  85.         </div>
  87. <div class=" common_btn">
  88.     <a href="{{url('product_list')}}?category_id={{cat_id}}">キャンペーン一覧<span></span></a>
  89. </div>
  90.     </div>
  91. </section>
  93.     {% if count >= 3 %}
  94.         <script>
  95.                 var cam_count =3 
  96.             
  97.         </script>
  98.         {% else %}
  99.             <script>
  100.                 var cam_count = {{count}} 
  101.             </script>
  102.         {% endif %}
  105. <script>
  106.     /*jQuery*/
  107. $(function() {
  108.      $('.thumb-item').slick({
  109.           infinite: true,
  110.           slidesToShow: 1,
  111.           slidesToScroll: 1,
  112.           arrows: false,
  113.           fade: true,
  114.           asNavFor: '.thumb-item-nav' //サムネイルのクラス名
  115.      });
  116.      $('.thumb-item-nav').slick({
  117.           infinite: true,
  118.           slidesToShow: cam_count,
  119.           slidesToScroll: 1,
  120.           asNavFor: '.thumb-item', //スライダー本体のクラス名
  121.           focusOnSelect: true,
  122.             prevArrow: '<button type="button" class="slick-prev slick-arrow"></button>',
  123.             nextArrow: '<button type="button" class="slick-next slick-arrow"></button>',
  124.      });
  125. });
  127. </script>
  129. {% else %}
  130.     <div class="none_recommend" style="padding-bottom: 70px;"></div>
  131.     {% endif %}