app/template/plugin/RelatedProduct42/front/related_product.twig line 1

Open in your IDE?
  1. <script>
  2.     $(function () {
  3.         $('#RelatedProduct-product_area').appendTo($('#relatedproduct_area'));
  4.         var productsSlider = null;
  5.         $('#RelatedProduct-product_area .carousel-prev').click(function () {
  6.             if (productsSlider)
  7.                 productsSlider.prev();
  8.         });
  9.         $('#RelatedProduct-product_area .carousel-next').click(function () {
  10.             if (productsSlider)
  11.                 productsSlider.next();
  12.         });
  13.         var parpage = 4;
  14.         resizeFnc();
  15.         $(window).resize(function () {
  16.             resizeFnc();
  17.         });
  18.         function resizeFnc() {
  19.             var pp = 4;
  20.             if ($(window).width() <= 767) {
  21.                 pp = 3;
  22.             } else if ($(window).width() <= 999) {
  23.                 pp = 3;
  24.             }
  25.             if (parpage != pp) {
  26.                 parpage = pp;
  27.                 // clients-slider
  28.                 //clientsSlider = clientsSliderChange(clientsSlider, pp);
  29.                 //products-slider
  30.                 if (parpage == 2) {
  31.                     productsSlider = productsSliderChange(productsSlider, 1);
  32.                 } else if (parpage == 3) {
  33.                     productsSlider = productsSliderChange(productsSlider, 2);
  34.                 } else {
  35.                     productsSlider.destroy(true);
  36.                     productsSlider = null;
  37.                 }
  38.             }
  39.         }
  40.         function productsSliderChange(productsSlider, pp) {
  41.             if (productsSlider) {
  42.                 productsSlider.destroy(true);
  43.                 productsSlider = null;
  44.             }
  45.             productsSlider = new Siema({
  46.                 selector: '.products-slider',
  47.                 duration: 400,
  48.                 easing: 'ease-out',
  49.                 perPage: pp,
  50.                 startIndex: 0,
  51.                 draggable: true,
  52.                 multipleDrag: true,
  53.                 threshold: 20,
  54.                 loop: true,
  55.                 rtl: false,
  56.                 onInit: () => { },
  57.                 onChange: () => { },
  58.             });
  59.             return productsSlider;
  60.         }
  61.     });
  62. </script>
  63. <style>
  64. #RelatedProduct-product_area {
  65.     background: #FFFFFF;
  66.     padding: 40px 0;
  67. }
  68. #RelatedProduct-product_area h2 {
  69.     font-size: 42px;
  70.     letter-spacing: 1px;
  71.     font-weight: 400;
  72.     display: block;
  73.     margin-bottom: 15px;
  74.     color: #e52128;
  75.     text-align: center;
  76.     text-transform: uppercase;
  77. }
  78. #RelatedProduct-product_area .desc {
  79.     font-size: 20px;
  80.     line-height: 28px;
  81.     color: #9d9fa2;
  82.     text-align: center;
  83.     padding-bottom: 30px;
  84. }
  85. #RelatedProduct-product_area .carousel .slider-item img {
  86.     margin: 0 auto;
  87.     width: 350px;
  88.     max-width:100%;
  89. }
  90. #RelatedProduct-product_area .carousel .slider-item h3 {
  91.     color: #e52128;
  92.     font-size: 16px;
  93.     line-height: 22px;
  94.     margin-bottom: 4px;
  95.     text-align: center;
  96. }
  97. #RelatedProduct-product_area .carousel-heading {
  98.     display: none;
  99. }
  100. #RelatedProduct-product_area .carousel-next, #RelatedProduct-product_area .carousel-prev {
  101.     height: 30px;
  102.     width: 30px;
  103.     background-color: #1d90fb;
  104.     cursor: pointer;
  105.     margin-left: 5px;
  106.     transition: all 0.2s linear 0s;
  107.     -webkit-transition: all 0.2s linear 0s;
  108.     -o-transition: all 0.2s linear 0s;
  109.     -moz-transition: all 0.2s linear 0s;
  110.     position: absolute;
  111.     top: 0px;
  112.     border-radius: 1px;
  113.     -webkit-border-radius: 1px;
  114.     -o-border-radius: 1px;
  115.     -moz-border-radius: 1px;
  116.     text-align: center;
  117.     z-index: 10;
  118. }
  119. #RelatedProduct-product_area .carousel-next:hover, #RelatedProduct-product_area .carousel-prev:hover {
  120.     background-color: #56ADFF;
  121. }
  122. #RelatedProduct-product_area .carousel-prev {
  123.     right: 38px;
  124.     padding-right: 1px;
  125. }
  126. #RelatedProduct-product_area .carousel-next {
  127.     right: 0px;
  128.     padding-left: 1px;
  129. }
  130. #RelatedProduct-product_area .carousel-next i, #RelatedProduct-product_area .carousel-prev i {
  131.     color: #fff;
  132.     font-size: 24px;
  133.     line-height: 30px;
  134. }
  135. #RelatedProduct-product_area .sale_price .price {
  136.     color: red;
  137.     font-size: 16px;
  138. }
  139. #RelatedProduct-product_area .regular-price p {
  140.     display: inline-block;
  141. }
  142. #RelatedProduct-product_area .price-box,
  143. #RelatedProduct-product_area .actions {
  144.     text-align: center;
  145. }
  146. #RelatedProduct-product_area .product-info {
  147.     text-align: center;
  148.     font-weight:bold;
  149.     margin:0;
  150. }
  151. #RelatedProduct-product_area .button {
  152.     background: #ff0000;
  153.     margin-bottom:10px;
  154. }
  155. #RelatedProduct-product_area .button:hover {
  156.     background: #cc0000;
  157. }
  158. #RelatedProduct-product_area .button.learn-more {
  159.     background-color:#0886fb;
  160. }
  161. #RelatedProduct-product_area .button.learn-more:hover {
  162.     background-color:#00d3f3;
  163.     color:#ffffff;
  164. }
  165. #RelatedProduct-product_area .button {
  166.     height: 33px;
  167.     line-height: 33px;
  168.     padding: 0 10px;
  169.     min-width: 140px;
  170.     box-sizing: content-box;
  171. }
  172. @media only screen and (max-width: 999px) {
  173.     #RelatedProduct-product_area .flexbox {
  174.         display: block;
  175.     }
  176.     #RelatedProduct-product_area .carousel-heading {
  177.         display: block;
  178.     }
  179.     #RelatedProduct-product_area span.price.price01_default {
  180.         font-size:10px;
  181.     }
  182.     #RelatedProduct-product_area .container {
  183.         padding: 30px 0;
  184.         max-width: 600px;
  185.     }
  186. }
  187. @media only screen and (max-width: 767px) {
  188.     #RelatedProduct-product_area .button {
  189.         min-width: 80%;
  190.     }
  191.     #RelatedProduct-product_area .carousel .slider-item h3 {
  192.         font-size:10px;
  193.         line-height: 14px;
  194.         margin-bottom: 0;
  195.     }
  196.     #RelatedProduct-product_area span.price.price01_default {
  197.         font-size:8px;
  198.     }
  199.     #RelatedProduct-product_area p.normal_price {
  200.         margin: -7px 5px;
  201.         position: absolute;
  202.     }
  203.     #RelatedProduct-product_area .product-info {
  204.         font-size:10px;
  205.         font-weight:normal;
  206.         margin: 0 0 3px 0;
  207.     }
  208.     #RelatedProduct-product_area .container {
  209.         padding: 10px 0;
  210.         max-width: 300px;
  211.         min-width: 300px;
  212.     }
  213. }
  214. /*Review Area*/
  215. #RelatedProduct-product_area .carousel .slider-item .review_score img{
  216.     display: inline-block;
  217.     vertical-align: unset;
  218.     max-width:inherit;
  219.     width:22px;
  220. }
  221. #RelatedProduct-product_area .carousel .slider-item #review_area .review_list .recommend_level img {
  222.     display: block;
  223.     float: left;
  224.     margin-right: 1px;
  225.     max-width:25px;
  226.     max-height:25px;     
  227. }
  228. #RelatedProduct-product_area .carousel .slider-item h3.review_score {
  229.     font-size: 14px;
  230.     line-height: 21px;
  231.     color:#636363;
  232. }
  233. </style>
  234. <div id="RelatedProduct-product_area" class="ec-shelfRole">
  235.     <h2>関連商品</h2>
  236.     <div class="carousel-outer">
  237.         <div class="carousel-wrap">
  238.             <div class="container flexbox">
  239.                 <div class="carousel-heading">
  240.                     <a class="carousel-prev" href="#!"><i class="fa fa-angle-left"></i></a>
  241.                     <a class="carousel-next" href="#!"><i class="fa fa-angle-right"></i></a>
  242.                 </div>
  243.                 <div class="row carousel flexbox products-slider">
  244.                 {% for RelatedProduct in Product.RelatedProducts %}
  245.                     {% set ChildProduct = RelatedProduct.ChildProduct %}
  246.                     {% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
  247.                         {% set campaignProduct, newProduct, limitedProduct = false, false, false %}
  248.                         {% for ProductTag in RelatedProduct.ChildProduct.ProductTag %}
  249.                             {% if ProductTag.Tag.id == 100 %}
  250.                                 {% set campaignProduct = true %}
  251.                             {% elseif ProductTag.Tag.id == 1 %}
  252.                                 {% set newProduct = true %}
  253.                             {% elseif ProductTag.Tag.id == 3 %}
  254.                                 {% set limitedProduct = true %}
  255.                             {% endif %}
  256.                         {% endfor %}
  257.                         <div class="slider-item">
  258.                         {% if campaignProduct == true %}
  259.                             <p class="ec-shelfGrid__item-image campaignProduct">
  260.                         {% elseif newProduct == true %}
  261.                             <p class="ec-shelfGrid__item-image newProduct">
  262.                         {% elseif limitedProduct == true %}
  263.                             <p class="ec-shelfGrid__item-image limitedProduct">
  264.                         {% else %}
  265.                             <p class="ec-shelfGrid__item-image">
  266.                         {% endif %}
  267.                                 <img src="{{ asset(RelatedProduct.ChildProduct.main_list_image|no_image_product, 'save_image') }}" alt="{{ RelatedProduct.ChildProduct.name }}">
  268.                             </p>
  269.                             <h3 class="light">{{ RelatedProduct.ChildProduct.name }}</h3>
  270.                             <p class="product-info">{{ RelatedProduct.content|raw }}</p>
  271.                             <div class="price-box">
  272.                                 <span class="regular-price">
  273.                                 {% if RelatedProduct.ChildProduct.hasProductClass -%}
  274.                                     {% if RelatedProduct.ChildProduct.getPrice01Min is not null and RelatedProduct.ChildProduct.getPrice01IncTaxMin == RelatedProduct.ChildProduct.getPrice01IncTaxMax %}
  275.                                         <p class="normal_price">
  276.                                             <span class="price price01_default">{{ RelatedProduct.ChildProduct.getPrice01IncTaxMin|price }}</span>
  277.                                             <span class="inctax">(税込)</span>
  278.                                         </p>
  279.                                     {% elseif RelatedProduct.ChildProduct.getPrice01Min is not null and RelatedProduct.ChildProduct.getPrice01Max is not null %}
  280.                                         <p class="normal_price">
  281.                                             <span class="price price01_default">{{ RelatedProduct.ChildProduct.getPrice01IncTaxMin|price }} ~ {{ RelatedProduct.ChildProduct.getPrice01IncTaxMax|price}}</span>
  282.                                             <span class="inctax">(税込)</span>
  283.                                         </p>
  284.                                     {% endif %}
  285.                                 {% else -%}
  286.                                     {% if RelatedProduct.ChildProduct.getPrice01Max is not null %}
  287.                                         <p class="normal_price">
  288.                                             <span class="price price01_default">{{ RelatedProduct.ChildProduct.getPrice01IncTaxMin|price }}</span>
  289.                                             <span class="inctax">(税込)</span>
  290.                                         </p>
  291.                                     {% endif %}
  292.                                 {% endif -%}
  293.                                 {% if RelatedProduct.ChildProduct.hasProductClass %}
  294.                                     {% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
  295.                                         <p class="sale_price text-primary">
  296.                                             <span class="price price02_default">{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}</span>
  297.                                             <span class="inctax">(税込)</span>
  298.                                         </p>
  299.                                     {% else %}
  300.                                         <p class="sale_price text-primary">
  301.                                             <span class="price price02_default">{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ~ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}</span>
  302.                                             <span class="inctax">(税込)</span>
  303.                                         </p>
  304.                                     {% endif %}
  305.                                 {% else %}
  306.                                     <p class="sale_price text-primary">
  307.                                         <span class="price price02_default">{{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}</span>
  308.                                         <span class="inctax">(税込)</span>
  309.                                     </p>
  310.                                 {% endif %}
  311.                                 </span>
  312.                             </div>
  313.                             
  314.                             <!-- REVIEW AREA -->
  315.                             {% import('@CustomerReview42/Block/customer_review4_recommend_macro.twig') as recommend_macro %}
  316.                             {% set review_list = repository('Plugin\\CustomerReview42\\Entity\\CustomerReviewTotal').getRecommend(ChildProduct.id) %}
  317.                             {% set reviewer_total = 0 %}
  318.                             {% set review_total_point = 0 %}
  319.                             {% set count = 5 %}
  320.                             {% for i in review_list %}
  321.                                 {% set reviewer_total = reviewer_total + i %}
  322.                                 {% set review_total_point = review_total_point + i * count %}
  323.                                 {% set count = count - 1 %}
  324.                             {% endfor %}
  325.                             {% set review_point = reviewer_total == 0 ? 0  : (review_total_point / reviewer_total) %}
  326.                             
  327.                             {% if 0 < reviewer_total %}
  328.                                 <div id="plg_customer_review{{ChildProduct.id}}" class="review-layoutRole product_list">
  329.                                     <h3 class="review_score" data-id="{{ ChildProduct.id }}" data-avg="{{ review_point }}" data-num="{{ reviewer_total }}" data-starsize="22" data-imgbase="{{ asset('aneros/img/products/') }}">
  330.                                         <span class="review_all_score_image" style="display: inline-block"></span><br />
  331.                                         <span class="review_all_score"><a href="{{ url('product_detail', {'id': ChildProduct.id}) }}#review_area"></a></span>
  332.                                     </h3>
  333.                                 </div>
  334.                             {% endif %}
  335.                             
  336.                             <script>
  337.                               $(function () {
  338.                                 if ( $('#plg_customer_review_anchor{{ChildProduct.id}}').length) {
  339.                                     $('#plg_customer_review{{ChildProduct.id}}').insertAfter($('#plg_customer_review_anchor{{ChildProduct.id}}'));
  340.                                 } else if ( $('#productForm{{ChildProduct.id}}').length) {
  341.                                     $('#plg_customer_review{{ChildProduct.id}}').insertBefore($('#productForm{{ChildProduct.id}}'));
  342.                                 } else {
  343.                                     $('#plg_customer_review{{ChildProduct.id}}').hide();
  344.                                 }
  345.                               });
  346.                             </script>
  347.                             <!-- REVIEW AREA END -->
  348.                             
  349.                             <div class="actions" id="productForm{{ ChildProduct.id }}">
  350.                                 <a class="button btn-cart learn-more related-more-info" title="商品詳細" href="{{ url('product_detail', {'id': RelatedProduct.ChildProduct.id}) }}" id="{{ RelatedProduct.ChildProduct.name }}">
  351.                                     商品詳細
  352.                                 </a>
  353.                                 {% if RelatedProduct.ChildProduct.stock_find %}
  354.                                     {% if RelatedProduct.ChildProduct.hasProductClass %}
  355.                                         {#<a class="button btn-cart learn-more" title="商品詳細" href="{{ url('product_detail', {'id': RelatedProduct.ChildProduct.id}) }}">
  356.                                             <span>
  357.                                                 <span>商品詳細</span>
  358.                                             </span>
  359.                                         </a>#}
  360.                                     {% else %}
  361.                                         <button type="button" title="カゴに入れる" class="button btn-cart one-click-add-cart related-add-cart" 
  362.                                         data-action="{{ url('product_add_cart', {id:Product.id}) }}" 
  363.                                         data-product_id="{{ RelatedProduct.ChildProduct.id }}" data-product_name="{{ RelatedProduct.ChildProduct.name }}"  data-product_img="{{ asset(RelatedProduct.ChildProduct.main_list_image|no_image_product, 'save_image') }}"
  364.                                         data-product_class="{{ RelatedProduct.ChildProduct.ProductClasses[0].id }}" 
  365.                                         data-token="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" id="{{ RelatedProduct.ChildProduct.name }}">
  366.                                             カゴに入れる
  367.                                         </button>
  368.                                     {% endif %}
  369.                                 {% else %}
  370.                                     {% set arrivemail = true %}
  371.                                     {% for ProductTag in RelatedProduct.ChildProduct.ProductTag %}
  372.                                         {% if ProductTag.Tag.id == 99 %}
  373.                                             {% set arrivemail = false %}
  374.                                         {% endif %}
  375.                                     {% endfor %}
  376.                                 
  377.                                     {% if arrivemail %}
  378.                                         <button type="button" data-productid="{{ RelatedProduct.ChildProduct.id }}" data-productname="{{ RelatedProduct.ChildProduct.name }}" title="入荷お知らせ" class="button btn-cart add-to-mail">
  379.                                             <span>入荷お知らせ</span>
  380.                                         </button>
  381.                                     {% else %}
  382.                                         <button type="button" title="在庫切れ" class="button btn-cart add-to-cart-out">
  383.                                             <span>在庫切れ</span>
  384.                                         </button>
  385.                                     {% endif %}
  386.                                 {% endif %}
  387.                                 </div>
  388.                             </div>
  389.                         {% endif %}
  390.                     {% endfor %}
  391.                 </div>
  392.             </div>
  393.         </div>
  394.     </div>
  395. </div>