app/template/osechi/Rental/detail.twig line 1

Open in your IDE?
  1. {#
  2. ///////////////////////////////////////////////////////////////////////
  4. This template is part of EC-CUBE Design template.
  6. Copyright(c) JAPAN ELECTRONIC INDUSTRIAL ARTS CO.LTD.
  8. http://www.jeia.co.jp/
  10. For the full copyright and license information, please view the LICENSE
  11. file that was distributed with this source code.
  13. 本テンプレートの著作権は、「株式会社日本電子工藝社」に帰属いたします。
  15. ※本テンプレートを譲渡・再頒布・転用・第三者へ開示することは禁止いたします。
  16. ただし、事業者によるショップ運営者への設置代行を禁止するものではございません。
  17. ※本テンプレートを申請されたご利用サイトへの設置以外の目的で複製することは禁止いたします。
  18. ※本テンプレートデータ内のライセンス条項、および著作権に関する記述を削除することはできません。
  19. ※ご利用サイトを変更することはできません。申請と異なるサイトにてご利用になる場合は、
  20. 別途、ご利用費用をお支払いただく必要がございます。
  21. ※本テンプレートの改変にあたり、一切のサポートはいたしかねます。
  22. ※本テンプレートは、すべての設置環境で動作する事は保証しておりません。
  24. ///////////////////////////////////////////////////////////////////////
  25. #}
  27. {#
  28. drift
  29. https://github.com/imgix/drift
  31. Copyright (c) 2015-2018, Zebrafish Labs All rights reserved.
  32. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
  33. 1.Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  34. 2.Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
  35. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  37. luminous
  38. https://github.com/imgix/luminous
  40. Copyright (c) 2015-2018, Zebrafish Labs All rights reserved.
  41. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
  42. 1.Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  43. 2.Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
  44. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  45. #}
  47. {#
  48. 商品詳細ページ
  50. ビジュアル画像にはルーペ型とポップアップ型の拡大表示機能を実装しています。
  51. もし機能が不要な場合は下記のTwig変数「visual_options」を設定してください。
  52. * loupe: ルーペ拡大機能（0=無効、1=有効）
  53. * popup: ポップアップ拡大機能（0=無効、1=有効）
  55. 常駐カートイン機能をON/OFF切り替えできます。
  56. * clone_cartin （0,false=無効、1,true=有効）
  57. #}
  58. {# ----------▼ 商品詳細機能設定 ▼---------- #}
  60. {# ビジュアル画像拡大機能のON/OFF設定 #}
  61. {% set visual_options =
  62.     {
  63.         loupe: 0,
  64.         popup: 1
  65.     }
  66. %}
  67. {# 常駐カートインのON/OFF設定 #}
  68. {% set clone_cartin = true %}
  70. {# ----------▲ 商品詳細機能設定 ▲---------- #}
  72. {% extends 'default_frame.twig' %}
  74. {% set body_class = 'product_page' %}
  76. {# カテゴリーがスーパーカーか #}
  77. {% set category_id = 0 %}
  78. {% if Product.ProductCategories is not empty %}
  79.     {% for ProductCategory in Product.ProductCategories %}
  80.         {% for Category in ProductCategory.Category.path %}
  81.             {% set category_id = Category.id %}
  82.         {% endfor %}
  83.     {% endfor %}
  84. {% endif %}
  87. {% block stylesheet %}
  88.     <link rel="stylesheet" href="//unpkg.com/flatpickr/dist/flatpickr.min.css">
  89.     <!-- カスタムテーマ -->
  90.     <link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/airbnb.css">
  91.     <link rel="stylesheet" href="{{ asset('assets/css/rental_detail.css') }}?{{ env('CSS_PARAM') }}">
  92.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css">
  93. {% endblock %}
  96. {% block javascript %}
  97.     <script>
  98.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  100.         // 規格2に選択肢を割り当てる。
  101.         function fnSetClassCategories(form, classcat_id2_selected) {
  102.             var $form = $(form);
  103.             var product_id = $form.find('input[name=product_id]').val();
  104.             var $sele1 = $form.find('select[name=classcategory_id1]');
  105.             var $sele2 = $form.find('select[name=classcategory_id2]');
  106.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  107.         }
  109.         {% if form.classcategory_id2 is defined %}
  110.         fnSetClassCategories(
  111.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  112.         );
  113.         {% elseif form.classcategory_id1 is defined %}
  114.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  115.         {% endif %}
  116.     </script>
  117.     <script>
  118.         $(function() {
  119.             // bfcache無効化
  120.             $(window).bind('pageshow', function(event) {
  121.                 if (event.originalEvent.persisted) {
  122.                     location.reload(true);
  123.                 }
  124.             });
  125.         });
  126.     </script>
  127.     <script>
  128.         $(function() {
  129.             $('.add-cart').on('click', function(event) {
  130.                 {% if form.classcategory_id1 is defined %}
  131.                 // 規格1フォームの必須チェック
  132.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  133.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  134.                     return true;
  135.                 } else {
  136.                     $('#classcategory_id1')[0].setCustomValidity('');
  137.                 }
  138.                 {% endif %}
  140.                 {% if form.classcategory_id2 is defined %}
  141.                 // 規格2フォームの必須チェック
  142.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  143.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  144.                     return true;
  145.                 } else {
  146.                     $('#classcategory_id2')[0].setCustomValidity('');
  147.                 }
  148.                 {% endif %}
  150.                 // 個数フォームのチェック
  151.                 if ($('#quantity').val() < 1) {
  152.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  153.                     return true;
  154.                 } else {
  155.                     $('#quantity')[0].setCustomValidity('');
  156.                 }
  158.                 event.preventDefault();
  159.                 $form = $('#form1');
  160.                 $.ajax({
  161.                     url: $form.attr('action'),
  162.                     type: $form.attr('method'),
  163.                     data: $form.serialize(),
  164.                     dataType: 'json',
  165.                     beforeSend: function(xhr, settings) {
  166.                         // Buttonを無効にする
  167.                         $('.add-cart').prop('disabled', true);
  168.                     }
  169.                 }).done(function(data) {
  170.                     // レスポンス内のメッセージをalertで表示
  171.                     $.each(data.messages, function() {
  172.                         $('#ec-modal-header').text(this);
  173.                     });
  175.                     $('.ec-modal').show()
  177.                     // カートブロックを更新する
  178.                     $.ajax({
  179.                         url: "{{ url('block_cart') }}",
  180.                         type: 'GET',
  181.                         dataType: 'html'
  182.                     }).done(function(html) {
  183.                         //$('.ec-headerRole__cart').html(html);
  184.                         $('.ec-cartNavi__detail').html(html);
  185.                     });
  186.                 }).fail(function(data) {
  187.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  188.                 }).always(function(data) {
  189.                     // Buttonを有効にする
  190.                     $('.add-cart').prop('disabled', false);
  191.                 });
  192.             });
  193.         });
  195.         $('.ec-modal-wrap').on('click', function(e) {
  196.             // モーダル内の処理は外側にバブリングさせない
  197.             e.stopPropagation();
  198.         });
  199.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  200.             $('.ec-modal').hide()
  201.         });
  202.     </script>
  203.     <script type="application/ld+json">
  204.     {
  205.         "@context": "https://schema.org/",
  206.         "@type": "Product",
  207.         "name": "{{ Product.name }}",
  208.         "image": [
  209.             {% for img in Product.ProductImage %}
  210.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  212.             {% else %}
  213.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  214.             {% endfor %}
  215.         ],
  216.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  217.         {% if Product.code_min %}
  218.         "sku": "{{ Product.code_min }}",
  219.         {% endif %}
  220.         "offers": {
  221.             "@type": "Offer",
  222.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  223.             "priceCurrency": "{{ eccube_config.currency }}",
  224.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  225.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  226.         }
  227.     }
  228.     </script>
  230.     {# JEIA #}
  232.     {# Drift（画像ルーペ拡大表示ライブラリ） Drift用CSSは「_14.4.product_zoom.scss」に含めています #}
  233.     <script src="{{ asset('assets/js/drift/Drift.min.js') }}"></script>
  235.     {# Luminous（画像ポップアップ拡大表示ライブラリ） Luminous用CSSは「_14.4.product_zoom.scss」に含めています #}
  236.     <script src="{{ asset('assets/js/luminous/Luminous.min.js') }}"></script>
  238.     <script>
  240.         //------------------------------
  241.         // 商品ビジュアル（slick使用）
  242.         //------------------------------
  243.         // slick適用コンテナ
  244.         var $ecSlickContainer = $( '.ec-productVisualMain .ec-slickContainer' );
  246.         // キャプションの準備
  247.         /** 商品詳細ページのslickアイテムは動的に出力されますのでキャプションを入れられませんが、
  248.          * フリーエリア内にてキャプション要素を記述しておき、javascirptで各キャプションを各画像アイテム内に挿入させます。
  249.          * ※EC-CUBE4.2.0ではフリーエリアに記述したHTMLがサニタイズ（data属性が削除）されてしまい、この機能が動作しませんのでコメントアウトします。
  250.          */
  251.         /*
  252.         var $visualCaption = $( '.visual_caption' );// キャプション要素ラッパー
  253.         $visualCaption.find( '.caption' ).each(function(){
  254.             var $this = $(this);
  256.             // index 1つ目の画像用キャプションは「data-caption="1"」としていますので、-1してindex値にします
  257.             var _index = parseInt( $this.data('caption'),10 ) - 1;
  259.             // 該当slickアイテム
  260.             var $slideItem = $ecSlickContainer.find( '.slide-item' ).eq( _index );
  262.             if ( $slideItem.length ) {
  263.                 // 該当slickアイテムにキャプションを挿入
  264.                 $slideItem.append($this);
  265.             } else {
  266.                 // 該当slickアイテムが存在しない場合はキャプションを破棄します
  267.                 $this.remove();
  268.             }
  269.         });
  270.         */
  272.         // slick準備完了時の処理
  273.         $ecSlickContainer.on('init', function(){
  274.             setTimeout(function(){
  275.                 //
  276.             }, 0);
  277.         });
  279.         // slick適用
  280.         $ecSlickContainer.slick({
  281.             fade: true,
  282.             speed: 600,
  283.             dots: false,
  284.             arrows: true,
  285.             prevArrow: '<div class="slick-prev"><i class="jeiafont jeia-arrow-left"></i></div>',
  286.             nextArrow: '<div class="slick-next"><i class="jeiafont jeia-arrow"></i></div>',
  287.             asNavFor: '.ec-productVisualNav.desktop',
  288.             responsive: [
  289.                 {
  290.                     breakpoint: 768,//768px未満（スマホ時）
  291.                     settings: {
  292.                         fade: false,
  293.                         infinit: true
  294.                     }
  295.                 }
  296.             ]
  297.         });
  299.         // ビジュアルナビ（デスクトップ・タブレット用：縦スライド）
  300.         var $visualNavDesktop = $( '.ec-productVisualNav.desktop' );
  301.         $visualNavDesktop.slick({
  302.             asNavFor: '.ec-productVisualMain .ec-slickContainer',
  303.             vertical: true,
  304.             verticalSwiping: true,
  305.             slidesToShow: 5,
  306.             slidesToScroll: 1,
  307.             //swipeToSlide: true,// ※verticalでは効かない様子
  308.             focusOnSelect: true,
  309.             speed: 600,
  310.             arrows: true,
  311.             prevArrow: '<div class="slick-prev"><i class="jeiafont jeia-arrow"></i></div>',
  312.             nextArrow: '<div class="slick-next"><i class="jeiafont jeia-arrow"></i></div>'
  313.         });
  315.         // ビジュアルナビの高さをメインビジュアルの高さと揃えます（デスクトップ・タブレット時）
  316.         // これは見た目の調整と、ナビ送りのnextボタンの配置を正しくする目的もあります
  317.         if ( window.innerWidth >= 768 ) {
  318.             // slick生成が完了してから実行します。イベント「slick_all_readiness」はjeia_function.jsによってslick生成完了後に発火されます。
  319.             $(window).on('slick_all_readiness jeia_resize', function(){
  320.                 var _height = $ecSlickContainer.height();
  321.                 // ビジュアルナビの高さを適用
  322.                 $visualNavDesktop.height( _height );
  323.                 // ブラウザのリサイズ時に.slick-listの高さが追随しない事があるのでこちらも高さを揃えます
  324.                 $visualNavDesktop.find( '.slick-list' ).height( _height );
  325.             });
  326.         }
  328.         // ビジュアルナビ（スマホ用）
  329.         var $productRoleVisual =  $( '.ec-productRole__visual' );// ※ビジュアル画像拡大機能でもこの取得要素を使います
  330.         var $visualNavSphone =    $( '.ec-productVisualNav.sphone' );// ビジュアルナビ（スマホ用）
  331.         var $sideInNavToggleBtn = $( '.sideInNavToggleBtn' );// ビジュアルナビ開閉ボタン
  333.         // ビジュアルナビ（スマホ）開閉ボタン
  334.         $sideInNavToggleBtn.on('click', function(){
  335.             // 開状態となるclassをON/OFF
  336.             $productRoleVisual.toggleClass( 'is-navOpen' );
  337.         });
  339.         // ビジュアルナビ（スマホ）サムネイルタップでメインビジュアル画像を切替え
  340.         $visualNavSphone.on('click', '.slideThumb', function() {
  341.             var index = $(this).attr( 'data-index' );
  342.             $ecSlickContainer.slick( 'slickGoTo', index, false );// slickGoTo: indexで指定したスライドへ移動
  344.             // ページ上部にスクロールする処理を入れておきます（ページトップボタンのイベントを発火）
  345.             $( '.ec-blockTopBtn' ).trigger( 'click' );
  347.             // ナビをCLOSE
  348.             $productRoleVisual.removeClass( 'is-navOpen' );
  349.         });
  351.         // サムネイル以外をタップした場合はナビをCLOSE
  352.         $visualNavSphone.on('click', function() {
  353.             // ナビをCLOSE
  354.             $productRoleVisual.removeClass( 'is-navOpen' );
  355.         });
  357.         // スライド切り替え完了後のイベント（開閉ボタンのカレント値を更新）
  358.         $ecSlickContainer.on('afterChange', function(e, slick, currentSlide){
  359.             $sideInNavToggleBtn.find( '.currentNum' ).text( currentSlide + 1 );
  360.         });
  363.         //------------------------------
  364.         // ビジュアル画像 ルーペ拡大表示（Drift）＆ポップアップ拡大表示（Luminous）
  365.         //------------------------------
  366.         // ・Drift
  367.         // ルーペ拡大表示には「Drift」を使用しています（Drift was made by imgix.）
  368.         // https://github.com/imgix/drift
  369.         //------------------------------
  370.         // ・Luminous
  371.         // ポップアップ拡大表示には「Luminous」を使用しています（Luminous was made by imgix.）
  372.         // https://github.com/imgix/luminous
  373.         //------------------------------
  375.         // 商品ビジュアルの拡大機能ON/OFF
  376.         var visual_loupe = Boolean( {{ visual_options.loupe }} );// ルーペ拡大
  377.         var visual_popup = Boolean( {{ visual_options.popup }} );// ポップアップ拡大
  379.         // slick生成が完了してから実行します。イベント「slick_all_readiness」はjeia_function.jsによってslick生成完了後に発火されます。
  380.         $(window).on('slick_all_readiness', function(){
  382.             // ルーペ拡大表示
  383.             // 画像ズームはデスクトップ・タブレット時のみとします（スマホではあまり実用的ではないと思われますので）
  384.             if ( visual_loupe && window.innerWidth >= 768 ) {
  386.                 // 拡大表示パネルの大きさを決めます（リサイズ時も算出し直します）
  387.                 $(window).on('on_pane_size jeia_resize', function(){
  389.                     // パネル表示の基点（サムネイル枠の左端）
  390.                     var pane_origin = $(' .ec-productVisualNav' ).offset().left;
  392.                     // パネル幅 →ブラウザ幅から表示基点を引いて（スクロールバー分の幅も調整）、パネル領域を広く設定
  393.                     var pane_w = window.innerWidth - pane_origin - 50;
  395.                     // パネル高さ →ビジュアル上位置からブラウザ下まで、少しだけ余白を差し引き
  396.                     var pane_h = $(window).height() - $productRoleVisual.offset().top - 50;
  398.                     $( '.drift-pane' ).css({
  399.                         'width':  pane_w,
  400.                         'height': pane_h,
  401.                         'left':   $( '.ec-productVisualMain' ).width() + 1// メインビジュアルの右端 + 余白
  402.                     });
  403.                 }).trigger('on_pane_size');
  405.                 // メインビジュアル ルーペ拡大表示（ライブラリ「Drift」）
  406.                 var pane = document.querySelector( '.drift-pane' );
  408.                 $( '.drift-img' ).each(function(){
  409.                     new Drift(this, {
  410.                         paneContainer:  pane,
  411.                         inlinePane:     1279,//1280px以上でパネル表示、それ未満はルーペ表示
  412.                         containInline:  false,// ルーペを画像の端からはみ出させない場合はtrue
  413.                         inlineOffsetY:  -85,
  414.                         touchDelay:     300
  415.                     });
  416.                 })
  417.             }
  419.             // ポップアップ拡大表示
  420.             // 画像ポップアップはデスクトップ・タブレット時のみとします（スマホではあまり実用的ではないと思われますので）
  421.             if ( visual_popup && window.innerWidth >= 768 ) {
  422.                 new LuminousGallery(document.querySelectorAll( '.luminous-gallery' ));
  423.             } else {
  424.                 // ポップアップ拡大を使用しない →画像がクリックされてもa要素が動作しないようにイベントを組んでおきます
  425.                 $productRoleVisual.find( '.luminous-gallery' ).on('click', function(){
  426.                     return false;
  427.                 });
  428.             }
  429.         });
  431.         // どちらの拡大機能も使用しない場合はカーソルを矢印に戻しておきます（通常はCSS側でzoom-inにしています）
  432.         if ( !visual_loupe && !visual_popup ) {
  433.             $productRoleVisual.find( '.slide-item > a' ).css( 'cursor', 'default' );
  434.         }
  437.         //------------------------------
  438.         // お気に入り処理
  439.         //------------------------------
  440.         /* 当テンプレートではお気に入りボタンをカートボタンの横に配置するデザインとなっておりますが、
  441.             * このエリアはカートインのform要素領域の中に入っていますので、お気に入り追加用formとボタンとを分離させ、
  442.             * ボタンをカート横に配置し、ボタンクリック時に当スクリプトお気に入りフォーム送信を発生させています。
  443.             */
  444.         $( '#favorite' ).on('click', function(e){
  445.             e.preventDefault();
  446.             $( '#form_favorite' ).submit();
  447.         });
  450.         //------------------------------
  451.         // シェアボタン（サブウィンドウ表示）
  452.         //------------------------------
  453.         $( '.shareBtn' ).on('click', function(){
  455.             // ウィンドウを開かないタイプはスルー
  456.             if ( $(this).hasClass( 'no-window' ) ) {
  457.                 return true;
  458.             }
  459.             var this_url = $(this).attr( 'href' ) + location.href;
  460.             window.open( this_url, 'sns_win', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1' );
  461.             return false;
  462.         });
  465.         //------------------------------
  466.         // フリーエリア：タブ切り替えコンテンツ
  467.         //------------------------------
  468.         /* フリーエリア内にコードを記述することでタブ切り替えコンテンツを実装します。
  469.          * タブ切り替えが不要な場合は当スクリプトを削除してください。
  470.          * ※EC-CUBE4.2.0ではフリーエリアに記述したHTMLがサニタイズ（data属性が削除）されてしまい、この機能が動作しませんのでコメントアウトします。
  471.          */
  472.         /*
  473.         var $ecProductDetailTab =        $( '.ec-productDetailTab' );
  474.         var $ecProductDetailTabNav =     $ecProductDetailTab.find( '.ec-productDetailTab__nav' )
  475.         var $ecProductDetailTabContent = $ecProductDetailTab.find( '.ec-productDetailTab__content' );
  477.         $ecProductDetailTabNav.on('click', 'li', function(){
  478.             var $this = $(this);
  479.             var _index = '.tab-' + $this.data('tab');
  481.             // コンテンツのアクティブ化
  482.             $ecProductDetailTabContent.filter(_index).addClass('is-active').siblings().removeClass('is-active');
  484.             // タブのアクティブ化
  485.             $this.addClass('is-active').siblings().removeClass('is-active');
  486.         });
  488.         // 初回は1番目のタブコンテンツを表示
  489.         $ecProductDetailTabNav.find('li:eq(0)').trigger('click');
  490.         */
  492.     </script>
  493.     {# 常駐カートイン #}
  494.     {% if clone_cartin %}
  495.     <script src="{{ asset('assets/js/clone_cartin.js') }}"></script>
  496.     {% endif %}
  498.     <script src="//unpkg.com/flatpickr"></script>
  499.     <!-- 日本語の言語ファイル -->
  500.     <script src="//unpkg.com/flatpickr/dist/l10n/ja.js"></script>
  501.     <script>
  502.         // 日付をフォーマットする関数
  503.         function formatDateTmp(date) {
  504.           const year = date.getFullYear();
  505.           const month = String(date.getMonth() + 1).padStart(2, '0'); // 月は0始まり
  506.           const day = String(date.getDate()).padStart(2, '0');
  507.           return `${year}-${month}-${day}`;
  508.         }
  511.         //Googleカレンダー予約状況
  512.         reservedInfo={{ events|raw }};
  515.         {% if Product.id==26 or Product.id==23 or Product.id==22 %}
  516.             // 今日の日付を取得
  517.             const tmp_today = new Date();
  519.             // 100日分の日付を作成
  520.             for (let i = 0; i < 100; i++) {
  521.               const newDate = new Date(tmp_today);
  522.               newDate.setDate(tmp_today.getDate() + i);
  523.               tmpdate=formatDateTmp(newDate)
  524.                 reservedInfo[tmpdate] = tmpdate;
  525.             }
  527.             console.log(reservedInfo);
  528.         {% endif %}
  530. /*
  531.         for (let key in reservedInfo) {
  532.           console.log('key:' + key);
  533.           console.log(reservedInfo[key].length);
  534.         }
  535. */
  537.         calendar_start_date="{{ calendar_start_date }}";
  538.     </script>
  539.     <script src="{{ asset('assets/js/hotelinfo].js') }}?{{ env('JS_PARAM') }}"></script>
  540.     <script src="{{ asset('assets/js/rental_common.js') }}?{{ env('JS_PARAM') }}"></script>
  541.     <script src="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js"></script>
  543. {% endblock %}
  545. {% block main %}
  548. {% set carflg = false %}
  549. {% set supercarflg = false %}
  551. {% for ProductCategory in Product.ProductCategories %}
  552.     {% if 7== ProductCategory.Category.id %}
  553.         {% set carflg = true %}
  554.     {% endif %}
  555.     {% if 8== ProductCategory.Category.id %}
  556.         {% set supercarflg = true %}
  557.     {% endif %}
  558.     {% if 10== ProductCategory.Category.id %}
  559.         {% set supercarflg = true %}
  560.     {% endif %}
  561. {% endfor %}
  563.     <div class="ec-productRole">
  564.         <div class="ec-productRole__grid">
  565.             <div class="ec-productRole__gridCell cellLeft">
  567.                 {# 商品ビジュアル表示 #}
  568.                 <div class="ec-productRole__visual">
  570.                     {# メインビジュアル格納枠 #}
  571.                     <div class="ec-productVisualMain">
  572.                         {# slick適用要素 #}
  573.                         <div class="ec-slickContainer">
  574.     {% for ProductImage in Product.ProductImage %}
  575.                             <div class="slide-item">
  576.                                 <a class="luminous-gallery" data-iteration="<!--{$num}-->" href="{{ asset(ProductImage, 'save_image') }}" target="_blank">
  577.                                     <img class="drift-img" src="{{ asset(ProductImage, 'save_image') }}" data-zoom="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }} {{ loop.first ? Product.search_word : '' }}" {% if loop.index > 1 %} loading="lazy"{% endif %}>
  578.                                 </a>
  579.                             </div>
  580.     {% else %}
  581.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}  {{ loop.first ? Product.search_word : '' }}"></div>
  582.     {% endfor %}
  583.                         </div>
  584.                     </div>
  586. {#
  587.                     ----------------------------------------------------------------------------------
  588.                     デスクトップ・タブレット時はビジュアルナビをメインビジュアルの横に配置して縦スライド機能をつけています。
  589.                     スマホ時はスライド機能は使わずに展開ボタンにより一覧ビューがサイドインする動作になります。
  590.                     レスポンシブにおいて、スライド機能のON/OFFやレイアウト変更はロジックが煩雑になるかと思いましたので、
  591.                     ビジュアルナビは、あらかじめデスクトップ用のナビと、モバイル用のナビをそれぞれ組み込んでおきレスポンシブで表示を切り替えています。
  592.                     ----------------------------------------------------------------------------------
  593. #}
  594.                     {# ビジュアルナビ（デスクトップ・タブレット用） #}
  595.                     <div class="ec-productVisualNav desktop">
  596.     {% for ProductImage in Product.ProductImage %}
  597.                         {# 当テンプレートの構造上、loading="lazy"は入れないほうがいいかも？
  598.                         <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" loading="lazy"></div>
  599.                         #}
  600.                         <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt=""></div>
  601.     {% endfor %}
  602.                     </div>
  604.                     {# ビジュアルナビ（スマホ用） #}
  605.                     <div class="ec-productVisualNav sphone">
  606.                         <div class="sideInNavShelf">
  607.         {% for ProductImage in Product.ProductImage %}
  608.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" loading="lazy"></div>
  609.         {% endfor %}
  610.                         </div>
  611.                     </div>
  613.                     {# ビジュアルナビ（スマホ用）開閉ボタン #}
  614.                     <div class="sideInNavToggleBtn">
  615.                         <i class="jeiafont jeia-grid"></i>
  616.                         <span class="currentNum">1</span>
  617.                         <span class="ceparate">/</span>
  618.                         <span class="totalNum">{{ Product.ProductImage|length }}</span>
  619.                     </div>
  620.                 </div>
  622.                 {# 商品画像ルーペ拡大表示用パネル（デスクトップ時のみ） #}
  623.                 <div class="drift-pane"></div>
  624.         {% if Product.id==16 %}
  625.                 <video poster="/awd/html/upload/save_image/poster_aquariva34.webp" controls="" muted="" width="100%" src="/awd/html/upload/save_image/IMG_5774.mp4" style="margin-top: 10px;"></video>
  626.         {% endif %}
  627. {#
  628.         {% if Product.id==62 or Product.id==2 or Product.id==12 %}
  629.                 <div class="container-offer">
  630.                     <div class="offer-title">
  631.                         <p>Limited Offer</p>
  632.                     </div>
  633.                     <div class="item">
  634.                         <p>
  635.                             1Hour 33,000 JPY ～<br>
  636.                             <a href="/awd/plan/542" style="text-decoration: underline; color: initial;">Details click here</a>
  637.                         </p>
  638.                     </div>
  639.                 </div>
  640.         {% endif %}
  641. #}
  642.                 <div class="ec-productRole__description pcOnly">
  643.                     {{ Product.description_detail|raw|nl2br }}
  644.                 </div>
  645.             </div>
  647.             <div class="ec-productRole__gridCell cellRight">
  649.                 {# 商品プロフィール #}
  650.                 <div class="ec-productRole__profile">
  652.                     {# 商品タイトル #}
  653.                     <div class="ec-productRole__title">
  654.                         <h1>{{ Product.name }}</h1>
  655. {#
  656.         {% if Product.id==64 or Product.id==66 or Product.id==68  or Product.id==69 %}
  657.                         <span style="color: #FF0058;font-weight: bold;font-size: 120%;">Snow tire available! New！</span>
  658.         {% endif %}
  659. #}
  660.                     </div>
  663.                     {# 販売価格 #}
  664.                     <div class="ec-productRole__price">
  665.                         <div class="ec-price">
  666. {% if carflg %}
  667. {% else %}
  668.                             <span class="ec-price__price">Price ASK</span>
  669. {% endif %}
  670.                         </div>
  671.                     </div>
  673.                     {# 詳細コメント #}
  674.                     <div class="ec-productRole__description spOnly">
  675.                         {{ Product.description_detail|raw|nl2br }}
  676.                     </div>
  678. {% if carflg %}
  679.                     <div class="ec-productRole__description">
  680.                         <details class="accordion-006 spec" open>
  681.                             <summary><h3>Car Rental Plan</h3></summary>
  683.                             <div class="ec-productRole__price">
  684.                                 <div class="ec-price">
  685. {% if Product.id not in env('AskCar') %}
  686.                                     <span class="ec-price__price">Price &yen;{{ (Product.item18+(Product.item17*6)+(Product.item16*40)) |number_format }} (6Hour inc 40Km) 〜</span>
  687. {% else %}
  688.                                     <span class="ec-price__price">Price ASK</span>
  689. {% endif %}
  690.                                 </div>
  691.                             </div>
  693. {% if Product.id not in env('AskCar') %}
  694.                             <ul class="spec__item">
  695.                                 <li class="spec__row">
  696.                                   <span>Cost per Km</span>&yen;{{ Product.item16|number_format }}</li>
  697.                                 <li class="spec__row">
  698.                                   <span>Cost per Hour</span>&yen;{{ Product.item17|number_format }}</li>
  699.                             </ul>
  700. {% endif %}
  701.                         </details>
  703.                         <details class="accordion-006" open>
  704.                             <summary><h3>Benefits</h3></summary>
  705.                             <ul class="container-flex">
  706.                                 <li class="item">
  707.                                     <img src="{{ asset('assets/img/rental/Requirements05.webp') }}" alt="Insurance included" >
  708.                                     <p>Insurance included</p>
  709.                                 </li>
  710.                                 <li class="item">
  711.                                     <img src="{{ asset('assets/img/rental/Requirements06.webp') }}" alt="No need to return<br>with a full tank" >
  712.                                     <p>No need to return<br>with a full tank</p>
  713.                                 </li>
  714.                                 <li class="item">
  715.                                     <img src="{{ asset('assets/img/rental/Requirements07.webp') }}" alt="Highway Free" >
  716.                                     <p>Highway Free</p>
  717.                                 </li>
  718.                                 <li class="item">
  719.                                     <img src="{{ asset('assets/img/rental/Requirements08.webp') }}" alt="Free delivery to your hotel" >
  720.                                     <p>Free delivery to your hotel</p>
  721.                                 </li>
  722.                                 <li class="item">
  723.                                     <img src="{{ asset('assets/img/rental/Requirements09.webp') }}" alt="Driving instruction" >
  724.                                     <p>Driving instruction</p>
  725.                                 </li>
  726.                             </ul>
  727.                         </details>
  729.                         <details class="accordion-006">
  730.                             <summary><h3>SPEC</h3></summary>
  731.                             <ul class="spec__item">
  732.                                 <li class="spec__row">
  733.                                   <span>Year　　　　</span>{{ Product.item1|trans }}</li>
  734.                                 <li class="spec__row">
  735.                                   <span>HP        　</span>{{ Product.item21|trans }}</li>
  736.                                 <li class="spec__row">
  737.                                   <span>Steering Wheel　</span>{{ Product.item2|trans }}</li>
  738.                                 <li class="spec__row">
  739.                                   <span>Seater　　　</span>{{ Product.item3|trans }}</li>
  740.                                 <li class="spec__row">
  741.                                   <span>Doors　　　</span>{{ Product.item4|trans }}</li>
  742.                                 <li class="spec__row">
  743.                                   <span>Mission　</span>{{ Product.item5|trans }}</li>
  744.                                 <li class="spec__row">
  745.                                   <span>Fuel　 　</span>{{ Product.item6|trans }}</li>
  746.                                 <li class="spec__row">
  747.                                   <span>Drive type　</span>{{ Product.item7|trans }}</li>
  748.                                 <li class="spec__row">
  749.                                   <span>Displacement　　</span>{{ Product.item8|number_format }}cc        </li>
  750.                                 <li class="spec__row">
  751.                                   <span>Equipment　　　</span>{{ Product.item9|trans }}</li>
  752.                             </ul>
  753.                         </details>
  756.                     </div>
  757. {% endif %}
  759.         <form name="reserveForm" action="{{ url('rental_comfirm') }}" method="post" class="reserveForm">
  760.             <input type="hidden" name="calendarId" id="calendarId" value="{{ Product.item13|trans }}">
  761.             <input type="hidden" name="carurl" value="{{ app.request.getUri }}">
  762.             <input type="hidden" name="id" value="{{ Product.id }}">
  763.             <input type="hidden" name="carname" value="{{ Product.name }}">
  764.             <input type="hidden" name="carimg" value="{{ asset(Product.ProductImage[0], 'save_image') }}">
  765.             <input type="hidden" id="rental_fee" name="rental_fee" value="">
  767.             <input type="hidden" id="destination_name" name="destination_name" value="">
  768.             <input type="hidden" id="extra_day" name="extra_day" value="0">
  769.             <input type="hidden" id="estimate" name="estimate" value="0">
  772.             <input type="hidden" id="supercarflg" name="supercarflg" value="0">
  774.             <input type="hidden" id="basekm" name="basekm" value="">
  775.             <input type="hidden" id="rental_term" name="rental_term" value="">
  776.             <input type="hidden" id="price_km" name="price_km" value="{{Product.item16}}">
  777.             <input type="hidden" id="price_hour" name="price_hour" value="{{Product.item17}}">
  778.             <input type="hidden" id="price_setup" name="price_setup" value="{{Product.item18}}">
  779.             <input type="hidden" id="price_extra_km" name="price_extra_km" value="{{Product.item10}}">
  780.             <input type="hidden" id="price_extra_hour" name="price_extra_hour" value="{{Product.item19}}">
  781.             
  782.             <input type="hidden" id="price_extrakm" name="price_extrakm" value="">
  783.             <input type="hidden" id="extra_km" name="extra_km" value="">
  784.             
  785.             <input type="hidden" id="inc_km" name="inc_km" value="">
  786.             
  788.             <p class="ec-para-normal">
  789.                 Select a rental date and destination to calculate the estimated cost.
  790.             </p>
  792.             <p class="reserevedError" style="display:none;">Reservation information is not set correctly</p>
  796. {% set spot01 = 'Tokyo City Drive : 30km～' %}
  797. {% set spot02 = 'Daikoku PA Tour : 70km～' %}
  798. {% set spot03 = 'Yokohama Road Trip : 80km～' %}
  799. {% set spot04 = 'Kamakura Round Trip : 100km～' %}
  800. {% set spot05 = 'ATAMI Round Trip : 200km～' %}
  801. {% set spot06 = 'HAKONE Round Trip : 220km～' %}
  802. {% set spot07 = 'FUJI Round Trip : 200km～' %}
  803. {% set spot08 = 'KAWAGUCHIKO Round Trip : 220km～' %}
  804. {% set spot09 = 'NIKKO Round Trip : 320km～' %}
  805. {% set spot10 = 'KARUIZAWA Round Trip : 350km～' %}
  807.             <div class="Form-Item name">
  808.                 <p class="Form-Item-Label">Start Date/Time</p>
  809.                 <input name="startdate" type="text" class="Form-Item-Input flatpickr flatpickr-input startdate" placeholder="2024-01-01" id="rentalCal" value="">
  810.                 <select name="starttime" class="Form-Item-Input starttime">
  811.                     <option value="08:00">08:00</option>
  812.                     <option value="08:30">08:30</option>
  813.                     <option value="09:00">09:00</option>
  814.                     <option value="09:30">09:30</option>
  815.                     <option value="10:00" selected>10:00</option>
  816.                     <option value="10:30">10:30</option>
  817.                     <option value="11:00">11:00</option>
  818.                     <option value="11:30">11:30</option>
  819.                     <option value="12:00">12:00</option>
  820.                     <option value="12:30">12:30</option>
  821.                     <option value="13:00">13:00</option>
  822.                     <option value="13:30">13:30</option>
  823.                     <option value="14:00">14:00</option>
  824.                     <option value="14:30">14:30</option>
  825.                     <option value="15:00">15:00</option>
  826.                     <option value="15:30">15:30</option>
  827.                     <option value="16:00">16:00</option>
  828.                     <option value="16:30">16:30</option>
  829.                     <option value="17:00">17:00</option>
  830.                     <option value="17:30">17:30</option>
  831.                     <option value="18:00">18:00</option>
  832.                     <option value="18:30">18:30</option>
  833.                     <option value="19:00">19:00</option>
  834.                     <option value="19:30">19:30</option>
  835.                     <option value="20:00">20:00</option>
  836.                 </select>
  837.                 <span class="Form-Item-Error startdate" style="">*Please Select</span>
  838.             </div>
  840.             <div class="Form-Item name">
  841.                 <p class="Form-Item-Label enddate">End Date/Time</p>
  842.                 <input name="enddate" type="text" class="Form-Item-Input flatpickr flatpickr-input enddate" placeholder="2024-01-01" id="rentalCal" value="">
  843.                 <select name="endtime" class="Form-Item-Input endtime">
  844.                     <option value="08:00">08:00</option>
  845.                     <option value="08:30">08:30</option>
  846.                     <option value="09:00">09:00</option>
  847.                     <option value="09:30">09:30</option>
  848.                     <option value="10:00">10:00</option>
  849.                     <option value="10:30">10:30</option>
  850.                     <option value="11:00">11:00</option>
  851.                     <option value="11:30">11:30</option>
  852.                     <option value="12:00">12:00</option>
  853.                     <option value="12:30">12:30</option>
  854.                     <option value="13:00">13:00</option>
  855.                     <option value="13:30">13:30</option>
  856.                     <option value="14:00">14:00</option>
  857.                     <option value="14:30">14:30</option>
  858.                     <option value="15:00">15:00</option>
  859.                     <option value="15:30">15:30</option>
  860.                     <option value="16:00">16:00</option>
  861.                     <option value="16:30">16:30</option>
  862.                     <option value="17:00">17:00</option>
  863.                     <option value="17:30">17:30</option>
  864.                     <option value="18:00" selected>18:00</option>
  865.                     <option value="18:30">18:30</option>
  866.                     <option value="19:00">19:00</option>
  867.                     <option value="19:30">19:30</option>
  868.                     <option value="20:00">20:00</option>
  869.                 </select>
  870.                 <span class="Form-Item-Error enddate" style="">*Please Select</span>
  871.             </div>
  873.             <div class="Form-Item">
  874.                 <p class="Form-Item-Label block-line">Drive Destination</p>
  875.                 <div class="w100">
  876.                     <select name="destination" class="Form-Item-Input destination">
  877.                         <option value="30" selected>{{ spot01 }}</option>
  878.                         <option value="70">{{ spot02 }}</option>
  879.                         <option value="80">{{ spot03 }}</option>
  880.                         <option value="100">{{ spot04 }}</option>
  881.                         <option value="200">{{ spot05 }}</option>
  882.                         <option value="220">{{ spot06 }}</option>
  883.                         <option value="200">{{ spot07 }}</option>
  884.                         <option value="220">{{ spot08 }}</option>
  885.                         <option value="320">{{ spot09 }}</option>
  886.                         <option value="350">{{ spot10 }}</option>
  887.                         <option value="other">Other Destination Select your mileage （km）</option>
  888.                     </select>
  889.                 </div>
  891.                 <div class="w100 destination-note" style="display: none;">
  892.                     <select name="otherkm" class="Form-Item-Input otherkm">
  893.                         <option value="40" selected>40km</option>
  894.                         <option value="50">50km</option>
  895.                         <option value="60">60km</option>
  896.                         <option value="70">70km</option>
  897.                         <option value="80">80km</option>
  898.                         <option value="90">90km</option>
  899.                         <option value="100">100km</option>
  900.                         <option value="110">110km</option>
  901.                         <option value="120">120km</option>
  902.                         <option value="130">130km</option>
  903.                         <option value="140">140km</option>
  904.                         <option value="150">150km</option>
  905.                         <option value="160">160km</option>
  906.                         <option value="170">170km</option>
  907.                         <option value="180">180km</option>
  908.                         <option value="190">190km</option>
  909.                         <option value="200">200km</option>
  910.                         <option value="210">210km</option>
  911.                         <option value="220">220km</option>
  912.                         <option value="230">230km</option>
  913.                         <option value="240">240km</option>
  914.                         <option value="250">250km</option>
  915.                         <option value="260">260km</option>
  916.                         <option value="270">270km</option>
  917.                         <option value="280">280km</option>
  918.                         <option value="290">290km</option>
  919.                         <option value="300">300km</option>
  920.                         <option value="350">350km</option>
  921.                         <option value="400">400km</option>
  922.                         <option value="450">450km</option>
  923.                         <option value="500">500km</option>
  924.                         <option value="550">550km</option>
  925.                         <option value="600">600km</option>
  926.                         <option value="650">650km</option>
  927.                         <option value="700">700km</option>
  928.                         <option value="750">750km</option>
  929.                         <option value="800">800km</option>
  930.                         <option value="850">850km</option>
  931.                         <option value="900">900km</option>
  932.                         <option value="950">950km</option>
  933.                         <option value="1000">1,000km</option>
  934.                         <option value="1500">1,500km</option>
  935.                         <option value="2000">2,000km</option>
  936.                         <option value="2500">2,500km</option>
  937.                         <option value="3000">3,000km</option>
  938.                         <option value="3500">3,500km</option>
  939.                         <option value="4000">4,000km</option>
  940.                         <option value="4500">4,500km</option>
  941.                         <option value="5000">5,000km</option>
  942.                     </select>
  943.                 </div>
  944. {% if Product.id not in env('AskCar') %}
  945.                 <div>
  946.                     ※Upon return, in the event of exceeded KM/Hours beyond the agreed budget: <br>
  947.                     per KM &yen;{{ Product.item10|number_format  }} <br>
  948.                     per Hour &yen;{{ Product.item19|number_format  }} 
  949.                 </div>
  950. {% endif %}
  951.             </div>
  954. {% if Product.id not in env('AskCar') %}
  955.             <div class="estimate-area">
  956.                 <h4>Rental Price (inc Tax)</h4>
  957.                 <ul class="detail_item container">
  958.                     <li class="title w80">
  959.                         Rental Fee  (<span class="inc_hour">0</span>Hours inc <span class="inc_km"></span>Km)
  960.                     </li>
  961.                     <li class="w20">
  962.                         &yen; <span class="rental_fee">0</span>
  963.                     </li>
  964.                     <li class="title w80">
  965.                         Extra/Km ( &yen;{{ Product.item16|number_format }}/Km, <span class="viewkm">No Extra</span>)
  966.                     </li>
  967.                     <li class="w20">
  968.                         &yen; <span class="extra_km">0</span>
  969.                     </li>
  970.                 </ul>
  971.                 <ul class="detail_item container reserved_total">
  972.                     <li class="title w50">
  973.                         Total Charge</span>
  974.                     </li>
  975.                     <li class="w50">
  976.                         &yen; <span class="totalcharge">0</span>
  977.                     </li>
  978.                 </ul>
  979.             </div>
  980. {% endif %}
  982.             <a class="ec-shopCollectionBtn submit" href="javascript:void(0)">Next</a>
  983.         </form>
  985.                     {# シェアボタン #}
  986.                     <div class="ec-productRole__share">
  987.                         <p class="shareLabel">SHARE</p>
  988.                         <ul class="shareBtnList">
  989.                         {% spaceless %}
  990.                             {# Twitter #}
  991.                             <li>
  992.                                 <a class="shareBtn x-twitter" href="https://twitter.com/share?url=">
  993.                                     <i class="jeiafont jeia-x-twitter"></i><span>Twitter</span>
  994.                                 </a>
  995.                             </li>
  996.                             {# Facebook #}
  997.                             <li>
  998.                                 <a class="shareBtn facebook" href="https://www.facebook.com/sharer/sharer.php?u=">
  999.                                     <i class="jeiafont jeia-facebook"></i><span>Facebook シェア</span>
  1000.                                 </a>
  1001.                             </li>
  1002.                             {# LINE #}
  1003.                             <li>
  1004.                                 <a class="shareBtn line" href="https://social-plugins.line.me/lineit/share?url=">
  1005.                                     <i class="jeiafont jeia-line2"></i><span>LINE</span>
  1006.                                 </a>
  1007.                             </li>
  1008.                             {# Pocket #}
  1009.                             <li>
  1010.                                 <a class="shareBtn pocket" href="http://getpocket.com/edit?url=">
  1011.                                     <i class="jeiafont jeia-get-pocket"></i><span>Pocket</span>
  1012.                                 </a>
  1013.                             </li>
  1014.                             {# はてなブックマーク #}
  1015.                             <li>
  1016.                                 <a class="shareBtn hatena" href="http://b.hatena.ne.jp/add?mode=confirm&url=">
  1017.                                     <i class="jeiafont jeia-hatenabookmark"></i><span>はてなブックマーク</span>
  1018.                                 </a>
  1019.                             </li>
  1020.                             {# Pinterest #}
  1021.                             <li>
  1022.                                 <a class="shareBtn no-window pinterest" data-pin-do="buttonBookmark" data-pin-custom="true" data-pin-lang="ja" data-pin-save="false" href="//jp.pinterest.com/pin/create/button/">
  1023.                                     <i class="jeiafont jeia-pinterest"></i><span>Pinterest</span>
  1024.                                 </a>
  1025.                                 <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
  1026.                             </li>
  1027.                         {% endspaceless %}
  1028.                         </ul>
  1029.                     </div>
  1033.                 </div>{# end of .ec-productRole__profile #}
  1034.             </div>{# end of .ec-productRole__gridCell #}
  1035.         </div>{# end of .ec-productRole__grid #}
  1037.     {% if Product.freearea %}
  1038.         <div class="ec-productRole__freearea">
  1039.             {{ include(template_from_string(Product.freearea)) }}
  1040.         </div>
  1041.     {% endif %}
  1043.     <!-- modaal start-->
  1044.     <div id="leadcar" style="display:none;" class="white-popup-block">
  1045.         <h2>Lead Car Option</h2>
  1046.         <p>
  1047.             In case you are unfamiliar with Japan's traffic rules, the lead car will provide guidance and support to ensure a safe drive.<br>
  1048.             To enjoy your drive with peace of mind, the lead car accompanies you, offering a sense of reassurance and confidence to the driver.
  1049.         </p>
  1051.         <img src="{{ asset('assets/img/rental/leadcar2.png') }}" alt="" loading="lazy">
  1052.         <a class="ec-shopCollectionBtn" href="javascript:void(0);" onclick="$('.leadcar').modaal('close');">close</a>
  1054.     </div>
  1055.     <!-- modaal end-->
  1057.     </div>{# end of .ec-productRole #}
  1059.     <script src="{{ asset('assets/js/rental_detail.js') }}?{{ env('JS_PARAM') }}"></script>
  1061. {% endblock %}