app/Plugin/RelatedProduct42/Resource/template/front/related_product.twig line 1

Open in your IDE?
  1. {% block stylesheet %}
  2.     <style>
  3.         .slick-slider {
  4.             margin-bottom: 30px;
  5.         }
  7.         .slick-dots {
  8.             position: absolute;
  9.             bottom: -25px;
  10.             display: block;
  11.             width: 100%;
  12.             padding: 0;
  13.             list-style: none;
  14.             text-align: center;
  15.         }
  17.         .slick-dots li {
  18.             position: relative;
  19.             display: inline-block;
  20.             width: 20px;
  21.             height: 20px;
  22.             margin: 0 5px;
  23.             padding: 0;
  24.             cursor: pointer;
  25.         }
  27.         .slick-dots li button {
  28.             font-size: 0;
  29.             line-height: 0;
  30.             display: block;
  31.             width: 20px;
  32.             height: 20px;
  33.             padding: 5px;
  34.             cursor: pointer;
  35.             color: transparent;
  36.             border: 0;
  37.             outline: none;
  38.             background: transparent;
  39.         }
  41.         .slick-dots li button:hover,
  42.         .slick-dots li button:focus {
  43.             outline: none;
  44.         }
  46.         .slick-dots li button:hover:before,
  47.         .slick-dots li button:focus:before {
  48.             opacity: 1;
  49.         }
  51.         .slick-dots li button:before {
  52.             content: " ";
  53.             line-height: 20px;
  54.             position: absolute;
  55.             top: 0;
  56.             left: 0;
  57.             width: 12px;
  58.             height: 12px;
  59.             text-align: center;
  60.             opacity: .25;
  61.             background-color: black;
  62.             border-radius: 50%;
  63.         }
  65.         .slick-dots li.slick-active button:before {
  66.             opacity: .75;
  67.             background-color: black;
  68.         }
  70.         .slick-dots li button.thumbnail img {
  71.             width: 0;
  72.             height: 0;
  73.         }
  74.         
  75.         .slick-prev, .slick-next {
  76.             font-size: 0;
  77.             line-height: 0;
  78.             position: absolute;
  79.             top: 50%;
  80.             display: block;
  81.             width: 60px;
  82.             height: 60px;
  83.             padding: 0;
  84.             -webkit-transform: translate(0, -50%);
  85.             -ms-transform: translate(0, -50%);
  86.             transform: translate(0, -50%);
  87.             cursor: pointer;
  88.             color: transparent;
  89.             border: none;
  90.             outline: none;
  91.             background: transparent;
  92.         }
  93.             
  94.         .slick-prev {
  95.             left: 0;
  96.             z-index: 1;
  97.             height: 30px;
  98.         }
  99.             
  100.         .slick-next {
  101.             right: 0;
  102.             z-index: 1;
  103.             height: 30px;
  104.         }
  105.             
  106.         .slick-prev:before, .slick-next:before {
  107.             font-family: 'slick';
  108.             font-size: 40px;
  109.             line-height: 1;
  110.             opacity: 1;
  111.             color: white;
  112.             -webkit-font-smoothing: antialiased;
  113.             -moz-osx-font-smoothing: grayscale;
  114.         }
  115.     
  116.         .slick-prev:before {
  117.             content: url({{ asset('assets/img/common/btn_carousel_l.webp', 'user_data') }});
  118.         }
  119.             
  120.         .slick-next:before {
  121.             content: url({{ asset('assets/img/common/btn_carousel_r.webp', 'user_data') }});
  122.         }
  123.     
  124.         .slick-prev:hover,
  125.         .slick-prev:focus,
  126.         .slick-next:hover,
  127.         .slick-next:focus {
  128.             color: transparent;
  129.             outline: none;
  130.             background: transparent;
  131.         }
  132.             
  133.         .slick-prev:hover:before,
  134.         .slick-prev:focus:before,
  135.         .slick-next:hover:before,
  136.         .slick-next:focus:before {
  137.             opacity: 1;
  138.         }
  139.             
  140.         .slick-prev.slick-disabled:before,
  141.         .slick-next.slick-disabled:before {
  142.             opacity: .25;
  143.         }
  145.         .slick-track{
  146.             position: relative;
  147.             top: 0;
  148.             left: 0;
  149.             display: flex;
  150.             margin-left: auto;
  151.             margin-right: auto;
  152.         }
  154.         .freeze_related {
  155.             position: unset;
  156.             width: 60px;
  157.             display: inline-block;
  158.             line-height: 1em;
  159.             padding: 5px 0;
  160.             background-color: #00B0EC;
  161.             color: white;
  162.             text-align: center;
  163.             font-size: 11px;
  164.             font-weight: 700;
  165.             border-radius: 5px;
  166.             margin-bottom: 5px;
  167.             margin-top: 0px;
  168.         }
  170.         .original_related {
  171.             position: unset;
  172.             width: 85px;
  173.             display: inline-block;
  174.             line-height: 1em;
  175.             padding: 5px 0;
  176.             background-color: #fff100;
  177.             color: black;
  178.             text-align: center;
  179.             font-size: 11px;
  180.             font-weight: 700;
  181.             border-radius: 5px;
  182.             margin-bottom: 5px;
  183.             margin-top: 0px;
  184.         }
  185.             
  186.     </style>
  187. {% endblock %}
  189.     {% block javascript %}
  190.         <script>
  191.             
  192.             $(function() {
  194.                 let width = $(window).width();
  195.                 var photo_count = 2;
  196.                 if (width <= 768) {
  197.                 } else if (width <= 1024) {
  198.                     // タブレット
  199.                     photo_count = 4;
  200.                 } else {
  201.                     // PC
  202.                     photo_count = 4;
  203.                 }
  205.                 $('.main_visual_2').slick({
  206.                     dots: false,
  207.                     autoplay: true,
  208.                     speed: 300,
  209.                     centerMode: true,
  210.                     centerPadding: '5%',
  211.                     arrows: true,
  212.                     infinite: true,
  213.                     slidesToShow: photo_count
  214.                 });
  215.             }); 
  216.         </script>
  218.         <script>
  219.             $(function () {
  220.                 $('#RelatedProduct-product_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
  221.             });
  222.         </script>
  223.     {% endblock javascript %}
  225. {% block main %}
  226. {% if Product.RelatedProducts|length %}
  227. <div id="RelatedProduct-product_area" class="ec-shelfRole" style="padding: 0px;">
  228.     <div class="block_content" style="padding-left: 10px; padding-right: 10px; margin-bottom: 0px;">
  229.         <h2 style="">よく一緒に購入されている商品</h2>
  230.     </div>
  231.     <ul class="ec-shelfGrid" style="padding-left: 10px; padding-right: 10px;">
  232.         {% for RelatedProduct in Product.RelatedProducts %}
  233.             {% set ChildProduct = RelatedProduct.ChildProduct %}
  234.             {% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
  235.                 <li class="ec-shelfGrid__item">
  236.                     <a href="{{ url('product_detail', {'id': ChildProduct.id}) }}">
  237.                         <img src="{{ asset(ChildProduct.mainFileName|no_image_product, "save_image") }}" style="width: 320px; height: 150px; object-fit: cover;">
  238.                             {% if ChildProduct.is_original == '1' %}
  239.                             <span class="original_related">オリジナル</span>
  240.                             {% endif %}
  241.                             {% if ChildProduct.is_freeze == "1" %}
  242.                             <span class="freeze_related">冷凍</span>
  243.                             {% endif %}
  244.                         <dl>
  245.                             {# 商品名 #}
  246.                             <p style="font-weight: bold; font-size: 14px; height: 40px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: black;">{{ ChildProduct.name }}</p>
  247.                             {# gあたり単価 #}
  248.                             <p style=" color: #B12704; font-size: 16px; font-weight: bold; padding-top: 10px; padding-bottom: 10px;">{{ ChildProduct.cost_per_unit }}</p>
  249.                             <dd class="item_price" style="color: black; font-size: 16px;">
  250.                                 {{ ChildProduct.getPrice02IncTaxMin|price }}(<span style="font-size: 14px;">{{ ChildProduct.getStandardText }}</span>)
  251.                             </dd>
  252.                         </dl>
  253.                     </a>
  254.                 </li>
  255.             {% endif %}
  256.         {% endfor %}
  257.     </ul>
  258. </div>
  259. {% endif %}
  260. {% endblock %}