app/Plugin/SheebRental42/Resource/template/Parts/rental_information.twig line 1

Open in your IDE?
  1. {% set firstProductClassId = -1 %}
  2. {% if Product.hasProductClass -%}
  3. {% else %}
  4.     {% set firstProductClassId = Product.ProductClasses[0].id %}
  5. {% endif %}
  7. <div class="rental-info no-{{ count }}" data-count="{{ count }}" style="display:none;">
  8.     <div class="rental-content">
  9.         <p class="rental-header">レンタル情報</p>
  11.         {% if count == 1 %}
  12.             <div id="app_sheeb_rental42"></div>
  13.         {% endif %}
  15.         <dl>
  16.             <div id="basic-charge-term-{{ count }}">
  17.                 <dt>基本レンタル日数<br />
  18.                     <span>ご利用日は後ほどご注文手続き画面で選択いただけます</span>
  19.                 </dt>
  20.                 <dd></dd>
  21.             </div>
  23.             <div id="extension-fee-{{ count }}">
  24.                 <dt>延長料金<br />
  25.                     <span>基本レンタル日数 を超えるレンタルの場合に延長料金が手数料として加算されます</span>
  26.                 </dt>
  27.                 <dd><span class="price"></span><span> 税込(1日毎)</span></dd>
  28.             </div>
  29.         </dl>
  30.     </div>
  31. </div>
  33. {# 一度だけ実行したい処理 #}
  34. {% if count == 1 %}
  35.     <style>
  36.         .rental-info {
  37.             position: relative;
  38.             width: 100%;
  39.             font-size: 1.5rem;
  40.         }
  42.         .rental-header {
  43.             padding: 1rem;
  44.             background: grey;
  45.             color: white;
  46.             font-weight: bold;
  47.             letter-spacing: 0.2rem;
  48.         }
  50.         .rental-content {
  51.             padding: 1.5rem 0.5rem 0.5rem 0.5rem;
  52.         }
  54.         .rental-content dt {
  55.             padding: 0.5rem;
  56.             line-height: 1.2;
  57.         }
  59.         .rental-content dt span {
  60.             font-size: 1.2rem;
  61.             color: #a7acb0;
  62.             font-weight: 500;
  63.         }
  65.         .rental-content dd {
  66.             margin-top: -0.5rem;
  67.             padding-left: 0.5rem;
  68.         }
  70.         .rental-content dd span {
  71.             font-size: 1.2rem;
  72.         }
  74.         .rental-content dd span.price {
  75.             font-size: 1.5rem;
  76.             color: #DE5D50;
  77.         }
  78.     </style>
  79. {% endif %}
  81. {# 毎回実行したい処理 #}
  82. <script>
  83.     $(function() {
  84.         var selfCount = {{ count }};
  85.         var choices = {{ class_categories_as_json(Product)|raw }};
  86.         var rentals = {{ rentals|raw }};
  87.         var first_product_class_id = '{{ firstProductClassId }}';
  88.         var current_rental_settings = null;
  90.         // 読み込み時
  91.         setCurrentRentalSetting(first_product_class_id);
  93.         // 規格1選択時
  94.         $('select[name=classcategory_id1]')
  95.             .change(function() {
  96.                 if (!isSelfEvent(selfCount, this)) return;
  97.                 var $form = $(this).parents('form');
  98.                 onChangeClass($(this), $form.find('select[name=classcategory_id2]'));
  99.             });
  100.         // 規格2選択時
  101.         $('select[name=classcategory_id2]')
  102.             .change(function() {
  103.                 if (!isSelfEvent(selfCount, this)) return;
  104.                 var $form = $(this).parents('form');
  105.                 onChangeClass($form.find('select[name=classcategory_id1]'), $(this));
  106.             });
  108.         // 規格変更共通処理
  109.         function onChangeClass($select1, $select2) {
  110.             clearRentalSetting();
  112.             if (!$select1.length) return;
  114.             // 規格1のみの場合
  115.             if (!$select2.length) {
  116.                 var class1_id = $select1.val();
  117.                 var class2_id = '';
  118.                 setCurrentRentalSetting(
  119.                     getProductClassId(class1_id, class2_id)
  120.                 );
  121.             }
  122.             // 規格2ありの場合
  123.             else {
  124.                 var class1_id = $select1.val();
  125.                 var class2_id = $select2.val();
  126.                 // まだ規格2が選択されていなければ無視
  127.                 if (!class2_id) return;
  128.                 setCurrentRentalSetting(
  129.                     getProductClassId(class1_id, class2_id)
  130.                 );
  131.             }
  132.         }
  134.         // 選択した規格からproductClassIdを取得
  135.         function getProductClassId(class1_id, class2_id) {
  136.             if (!class1_id) return;
  137.             if (!choices[class1_id]) return;
  138.             if (!choices[class1_id]['#' + class2_id]) return;
  139.             if (!choices[class1_id]['#' + class2_id]['product_class_id']) return;
  140.             return choices[class1_id]['#' + class2_id]['product_class_id'];
  141.         }
  143.         // 選択中の規格のレンタル設定をクリア
  144.         function clearRentalSetting() {
  145.             current_rental_settings = null;
  146.             drawRentalSettings(current_rental_settings);
  147.         }
  149.         // 選択中の規格のレンタル設定をセット
  150.         function setCurrentRentalSetting(product_class_id) {
  151.             if (!product_class_id) return;
  152.             if (!rentals[product_class_id]) return;
  153.             current_rental_settings = rentals[product_class_id];
  154.             drawRentalSettings(current_rental_settings);
  155.         }
  157.         // ==============================
  158.         //          描画処理
  159.         // ==============================
  161.         // block count が自分のEventかどうかの判定
  162.         function isSelfEvent(selfCount, selectBoxThis) {
  163.             // 詳細画面なら常にtrue
  164.             if (!isListPage()) {
  165.                 return true;
  166.             }
  168.             $elements = $(selectBoxThis).parents('.ec-shelfGrid__item');
  169.             if ($elements.length === 0) {
  170.                 return false;
  171.             }
  172.             $elements = $($elements[0]).children('.rental-info');
  173.             if ($elements.length === 0) {
  174.                 return false;
  175.             }
  176.             $rental_info = $($($elements[0]));
  177.             return parseInt($rental_info.data('count')) === selfCount;
  178.         }
  180.         // 商品一覧画面かどうか ( falseなら詳細画面 )
  181.         function isListPage() {
  182.             return eccube.hasOwnProperty('productsClassCategories');
  183.         }
  185.         // レンタル設定を元に、設定を描画する
  186.         function drawRentalSettings(current_rental_settings) {
  187.             var $rental_info = $('.rental-info.no-{{ count }}');
  188.             if (!current_rental_settings) {
  189.                 $rental_info.hide();
  190.                 return;
  191.             }
  193.             updateBasicChargeTerm(current_rental_settings);
  194.             updateExtensionFee(current_rental_settings);
  196.             if (!isListPage()) {
  197.                 updateProductStockCalendar(current_rental_settings);
  198.             }
  200.             $rental_info.show();
  201.         }
  203.         function updateBasicChargeTerm(setting) {
  204.             var data = parseInt(setting.basic_charge_term);
  205.             var text = (data - 1) + '泊' + data + '日';
  206.             $('#basic-charge-term-{{ count }} dd').text(text);
  207.         }
  209.         function updateExtensionFee(setting) {
  210.             var target = $('#extension-fee-{{ count }}');
  211.             var data = setting.one_day_charge;
  212.             var text = '¥' + data;
  214.             if (data === 0.0) {
  215.                 target.hide();
  216.             } else {
  217.                 target.show();
  218.             }
  219.             $('#extension-fee-{{ count }} dd .price').text(text);
  220.         }
  222.         function updateProductStockCalendar(setting) {
  223.             currentCalendarSettings = setting.calendar;
  224.             $('#update-calendar').trigger('click');
  225.         }
  226.     });
  227.     //# sourceURL=rental_information_{{ count }}.js
  228. </script>