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

Open in your IDE?
  1. {% if CheckProducts|length > 0 %}
  2. {# 本番(coinpalace.jp)と同仕様のSwiperスライダー: SP=1枚/PC(980px以上)=3枚・矢印+ドット #}
  3. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  4. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  5. <h3>最近チェックした商品</h3>
  6. <div class="ichiran_coinlist checkwrap swiper" id="checkitem_wrap">
  7.   <ul class="swiper-wrapper">
  8.     {% for Product in CheckProducts %}
  9.       <li class="swiper-slide"><a href="{{ url('product_detail', {'id': Product.id}) }}">
  10.           <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="#">
  11.           {% if Product.Status.id == 8 %}
  12.           <b class="tab_yoyaku">ご予約可</b>
  13.           {% endif %}
  14.           <h2>{{ Product.name }}</h2>
  15.           <p>
  16.             {% if Product.Status.id == 6 %}
  17.               {# 取り置き（公開）は価格表示なし #}
  18.             {% elseif Product.getPrice02IncTaxMin == 0 and htMeyasu[Product.id] is defined %}
  19.               {# 価格0円の場合は目安価格を表示 #}
  20.               目安価格：{{ htMeyasu[Product.id]|number_format }}円（税込）
  21.             {% else %}
  22.               <s>一般価格：{{ Product.getPrice02IncTaxMin|number_format }}円（税込）</s>
  23.               {% if htPrice[Product.id] is defined %}
  24.               <br><strong>会員価格：{{ htPrice[Product.id]|number_format }}円（税込）</strong>
  25.               {% endif %}
  26.             {% endif %}
  27.           </p>
  28.         </a></li>
  29.     {% endfor %}
  30.   </ul>
  31.   <div class="swiper-pagination"></div>
  32.   <div class="swiper-button-prev"></div>
  33.   <div class="swiper-button-next"></div>
  34. </div>
  35. <style>
  36.   /* swiper化に伴う既存リストCSS(.ichiran_coinlist ul の flex-wrap/幅)の打ち消し。このブロック内限定 */
  37.   #checkitem_wrap ul.swiper-wrapper{flex-wrap:nowrap;width:100%;margin:0 auto}
  38.   #checkitem_wrap ul li{float:none}
  39.   #checkitem_wrap{padding:0 36px 34px;box-sizing:border-box}
  40.   #checkitem_wrap .swiper-button-prev,
  41.   #checkitem_wrap .swiper-button-next{color:#4285f4}
  42.   #checkitem_wrap .swiper-pagination-bullet-active{background:#4285f4}
  43. </style>
  44. <script>
  45.   new Swiper('#checkitem_wrap', {
  46.     slidesPerView: 1,
  47.     spaceBetween: 20,
  48.     pagination: { el: '#checkitem_wrap .swiper-pagination', clickable: true },
  49.     navigation: { nextEl: '#checkitem_wrap .swiper-button-next', prevEl: '#checkitem_wrap .swiper-button-prev' },
  50.     breakpoints: {
  51.       980: { slidesPerView: 3 }
  52.     }
  53.   });
  54. </script>
  55. {% endif %}