app/template/bravers/Block/hsd_related_product42.twig line 1

Open in your IDE?
  1. {% block main %}
  3.     <link rel="stylesheet" href="{{ asset('assets/css/hsd_swiper.min.css') }}">
  4.     <script src="{{ asset('assets/js/hsd_swiper.min.js') }}"></script>
  6.     <style type="text/css">
  7.         .hsd_product_img_rp {
  8.             width: 100%;
  9.         }
  11.         .hsd_flex_area_rp {
  12.         {% if show_type == 'flip' or show_type == 'cube' %}
  13.             display: block;
  14.         {% else %}
  15.             display: flex;
  16.             flex-wrap: wrap;
  17.         {% endif %}
  18.         }
  20.         .hsd_h4 {
  21.             padding-left: 15px;
  22.         }
  23.     </style>
  24.     <div class="ec-productRole" id="hsd_related_product_area">
  25.         {% if rp_count > 0 %}
  26.             <h4 class="hsd_h4">{{ title }}</h4>
  27.         {% endif %}
  29.         {% set lpc = 1 %}
  31.         <div class="hsd_flex_area_rp">
  32.             {% if rp_count > 0 and show_type == 'normal' %}
  33.                 {% for reldat in hsd_related_product %}
  34.                     {% if max_count >= lpc %}
  35.                         <div class="col-sm-3 col-xs-6">
  36.                             <div class="pickup_item">
  37.                                 <a href="{{ url('product_detail', {'id': reldat.id}) }}">
  38.                                     <div class="item_photo"><img src="{{ asset('', 'save_image') }}{{ reldat.file_name | no_image_product }}" class="hsd_product_img_rp" style="width: 100%;" /></div>
  39.                                     <dd class="item_comment">{{ reldat.description_detail|length > 30 ? reldat.description_detail[:30] ~ '...' : reldat.description_detail }}</dd>
  40.                                     <dl>
  41.                                         <dt class="item_name">{{reldat.name}}</dt>
  42.                                         {% if show_price == 'true' %}
  43.                                             {% if reldat.min_price == reldat.max_price %}
  44.                                                 {% if calc_rule == 'floor' %}
  45.                                                     <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round(0, 'floor')|number_format(0, '.', ',') }}円</dd>
  46.                                                 {% elseif calc_rule == 'ceil' %}
  47.                                                     <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round(0, 'ceil')|number_format(0, '.', ',') }}円</dd>
  48.                                                 {% else %}
  49.                                                     <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round|number_format(0, '.', ',') }}円</dd>
  50.                                                 {% endif %}
  51.                                             {% else %}
  52.                                                 {% if calc_rule == 'floor' %}
  53.                                                     <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round(0, 'floor')|number_format(0, '.', ',') }}円 〜 {{ (reldat.max_price * reldat.tax2)|round(0, 'floor')|number_format(0, '.', ',') }}円</dd>
  54.                                                 {% elseif calc_rule == 'ceil' %}
  55.                                                     <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round(0, 'ceil')|number_format(0, '.', ',') }}円 〜 {{ (reldat.max_price * reldat.tax2)|round(0, 'ceil')|number_format(0, '.', ',') }}円</dd>
  56.                                                 {% else %}
  57.                                                     <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round|number_format(0, '.', ',') }}円 〜 {{ (reldat.max_price * reldat.tax2)|round|number_format(0, '.', ',') }}円</dd>
  58.                                                 {% endif %}
  59.                                             {% endif %}
  60.                                         {% endif %}
  61.                                     </dl>
  62.                                 </a>
  63.                             </div>
  64.                         </div>
  65.                     {% endif %}
  66.                     {% set lpc = lpc + 1 %}
  67.                 {% endfor %}
  68.             {% else %}
  69.                 {%  if rp_count > 0 %}
  70.                     <div class="swiper-container">
  71.                         <div class="swiper-wrapper">
  72.                             {% for reldat in hsd_related_product %}
  73.                                 {% if max_count >= lpc %}
  74.                                     <div class="swiper-slide">
  75.                                         <div class="pickup_item">
  76.                                             <a href="{{ url('product_detail', {'id': reldat.id}) }}">
  77.                                                 <div class="item_photo"><img src="{{ asset('', 'save_image') }}{{ reldat.file_name | no_image_product }}" style="width: 100%;" /></div>
  78.                                                 <dd class="item_comment">{{ reldat.description_detail|length > 30 ? reldat.description_detail[:30] ~ '...' : reldat.description_detail }}</dd>
  79.                                                 <dl>
  80.                                                     <dt class="item_name">{{reldat.name}}</dt>
  81.                                                     {% if show_price == 'true' %}
  82.                                                         {% if reldat.min_price == reldat.max_price %}
  83.                                                             {% if calc_rule == 'floor' %}
  84.                                                                 <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round(0, 'floor')|number_format(0, '.', ',') }}円</dd>
  85.                                                             {% elseif calc_rule == 'ceil' %}
  86.                                                                 <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round(0, 'ceil')|number_format(0, '.', ',') }}円</dd>
  87.                                                             {% else %}
  88.                                                                 <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round|number_format(0, '.', ',') }}円</dd>
  89.                                                             {% endif %}
  90.                                                         {% else %}
  91.                                                             {% if calc_rule == 'floor' %}
  92.                                                                 <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round(0, 'floor')|number_format(0, '.', ',') }}円 〜 {{ (reldat.max_price * reldat.tax2)|round(0, 'floor')|number_format(0, '.', ',') }}円</dd>
  93.                                                             {% elseif calc_rule == 'ceil' %}
  94.                                                                 <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round(0, 'ceil')|number_format(0, '.', ',') }}円 〜 {{ (reldat.max_price * reldat.tax2)|round(0, 'ceil')|number_format(0, '.', ',') }}円</dd>
  95.                                                             {% else %}
  96.                                                                 <dd class="item_price">{{ (reldat.min_price * reldat.tax)|round|number_format(0, '.', ',') }}円 〜 {{ (reldat.max_price * reldat.tax2)|round|number_format(0, '.', ',') }}円</dd>
  97.                                                             {% endif %}
  98.                                                         {% endif %}
  99.                                                     {% endif %}
  100.                                                 </dl>
  101.                                             </a>
  102.                                         </div>
  103.                                     </div>
  104.                                 {% endif %}
  105.                                 {% set lpc = lpc + 1 %}
  106.                             {% endfor %}
  107.                         </div>
  109.                         {% if pagination == 'true' %}
  110.                             <div class="swiper-pagination"></div>
  111.                         {% endif %}
  113.                         {% if navbuttons == 'true' %}
  114.                             <div class="swiper-button-prev"></div>
  115.                             <div class="swiper-button-next"></div>
  116.                         {% endif %}
  118.                     </div>
  119.                 {%  endif %}
  120.             {% endif %}
  121.         </div>
  122.     </div>
  123.     {%  if rp_count > 0 %}
  124.         {% if show_type == 'flip' or show_type == 'cube' %}
  125.             <style>
  126.                 #hsd_related_product_area .swiper-container {
  127.                     margin: 0 20px;
  128.                 }
  129.             </style>
  130.         {% elseif show_type == 'coverflow' %}
  131.             <style>
  132.                 #hsd_related_product_area .swiper-slide {
  133.                     background-position: center;
  134.                     background-size: cover;
  135.                     width: 200px;
  136.                 }
  137.             </style>
  138.         {% endif %}
  139.     {% endif %}
  141.     <script>
  142.         var swiper = new Swiper('#hsd_related_product_area .swiper-container', {
  143.             pagination: '#hsd_related_product_area .swiper-pagination',
  144.             prevButton: '#hsd_related_product_area .swiper-button-prev',
  145.             nextButton: '#hsd_related_product_area .swiper-button-next',
  146.             paginationClickable: true,
  147.             {% if rp_count > 0 and showloop == 'true' %}
  148.             autoplay: 2500,
  149.             {% else %}
  150.             autoplay: 0,
  151.             {% endif %}
  152.             {% if rp_count > 0 and show_type == 'per3' %}
  153.             slidesPerView: 3.75,
  154.             spaceBetween: 20,
  155.             breakpoints: {
  156.                 // スライドの表示枚数：768px以上の場合
  157.                 768: {
  158.                 slidesPerView: 2.25,
  159.                 }
  160.             },
  161.             {% elseif rp_count > 0 and show_type == 'per4' %}
  162.             slidesPerView: 4.75,
  163.             spaceBetween: 20,
  164.             breakpoints: {
  165.                 // スライドの表示枚数：768px以上の場合
  166.                 768: {
  167.                 slidesPerView: 2.25,
  168.                 }
  169.             },
  170.             {% elseif rp_count > 0 and show_type == 'per5' %}
  171.             slidesPerView: 5.75,
  172.             spaceBetween: 20,
  173.             breakpoints: {
  174.                 // スライドの表示枚数：768px以上の場合
  175.                 768: {
  176.                 slidesPerView: 2.25,
  177.                 }
  178.             },
  179.             {% elseif rp_count > 0 and show_type == 'flip' %}
  180.             effect: 'flip',
  181.             grabCursor: true,
  182.             {% elseif rp_count > 0 and show_type == 'cube' %}
  183.             effect: 'cube',
  184.             grabCursor: true,
  185.             cube: {
  186.                 shadow: true,
  187.                 slideShadows: true,
  188.                 shadowOffset: 20,
  189.                 shadowScale: 0.94
  190.             },
  191.             {% elseif rp_count > 0 and show_type == 'coverflow' %}
  192.             effect: 'coverflow',
  193.             grabCursor: true,
  194.             centeredSlides: true,
  195.             slidesPerView: 'auto',
  196.             coverflow: {
  197.                 rotate: 50,
  198.                 stretch: 0,
  199.                 depth: 100,
  200.                 modifier: 1,
  201.                 slideShadows : true
  202.             },
  203.             {% endif %}
  204.         });
  205.         {% if rp_count > 0 and showloop == 'false' %}
  206.         swiper.autoplay.stop();
  207.         {% endif %}
  208.     </script>
  210. {% endblock %}