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

Open in your IDE?
  1. {#
  2. ///////////////////////////////////////////////////////////////////////
  3. This template is part of EC-CUBE Design template.
  4. Copyright(c) JAPAN ELECTRONIC INDUSTRIAL ARTS CO.LTD.
  5. http://www.jeia.co.jp/
  6. For the full copyright and license information, please view the LICENSE
  7. file that was distributed with this source code.
  8. 本テンプレートの著作権は、「株式会社日本電子工藝社」に帰属いたします。
  9. ※本テンプレートを譲渡・再頒布・転用・第三者へ開示することは禁止いたします。
  10. ただし、事業者によるショップ運営者への設置代行を禁止するものではございません。
  11. ※本テンプレートを申請されたご利用サイトへの設置以外の目的で複製することは禁止いたします。
  12. ※本テンプレートデータ内のライセンス条項、および著作権に関する記述を削除することはできません。
  13. ※ご利用サイトを変更することはできません。申請と異なるサイトにてご利用になる場合は、
  14. 別途、ご利用費用をお支払いただく必要がございます。
  15. ※本テンプレートの改変にあたり、一切のサポートはいたしかねます。
  16. ※本テンプレートは、すべての設置環境で動作する事は保証しておりません。
  17. ///////////////////////////////////////////////////////////////////////
  18. #}
  19. {#
  20. drift
  21. https://github.com/imgix/drift
  22. Copyright (c) 2015-2018, Zebrafish Labs All rights reserved.
  23. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
  24. 1.Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  25. 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.
  26. 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.
  27. luminous
  28. https://github.com/imgix/luminous
  29. Copyright (c) 2015-2018, Zebrafish Labs All rights reserved.
  30. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
  31. 1.Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  32. 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.
  33. 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.
  34. #}
  35. {#
  36. 商品詳細ページ
  37. ビジュアル画像にはルーペ型とポップアップ型の拡大表示機能を実装しています。
  38. もし機能が不要な場合は下記のTwig変数「visual_options」を設定してください。
  39. * loupe: ルーペ拡大機能(0=無効、1=有効)
  40. * popup: ポップアップ拡大機能(0=無効、1=有効)
  41. 常駐カートイン機能をON/OFF切り替えできます。
  42. * clone_cartin (0,false=無効、1,true=有効)
  43. #}
  44. {# ----------▼ 商品詳細機能設定 ▼---------- #}
  45. {# ビジュアル画像拡大機能のON/OFF設定 #}
  46. {% set visual_options =
  47.     {
  48.         loupe: 0,
  49.         popup: 1
  50.     }
  51. %}
  52. {# 常駐カートインのON/OFF設定 #}
  53. {% set clone_cartin = true %}
  54. {# ----------▲ 商品詳細機能設定 ▲---------- #}
  55. {% extends 'default_frame.twig' %}
  56. {% set body_class = 'product_page' %}
  57. {% block stylesheet %}
  58.     <link rel="stylesheet" href="//unpkg.com/flatpickr/dist/flatpickr.min.css">
  59.     <!-- カスタムテーマ -->
  60.     <link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/airbnb.css">
  61.     <link rel="stylesheet" href="{{ asset('assets/css/helicopter_detail.css') }}?{{ env('CSS_PARAM') }}">
  62. {% endblock %}
  63. {% block javascript %}
  64.     <script>
  65.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  66.         // 規格2に選択肢を割り当てる。
  67.         function fnSetClassCategories(form, classcat_id2_selected) {
  68.             var $form = $(form);
  69.             var product_id = $form.find('input[name=product_id]').val();
  70.             var $sele1 = $form.find('select[name=classcategory_id1]');
  71.             var $sele2 = $form.find('select[name=classcategory_id2]');
  72.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  73.         }
  74.         {% if form.classcategory_id2 is defined %}
  75.         fnSetClassCategories(
  76.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  77.         );
  78.         {% elseif form.classcategory_id1 is defined %}
  79.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  80.         {% endif %}
  81.     </script>
  82.     <script>
  83.         $(function() {
  84.             // bfcache無効化
  85.             $(window).bind('pageshow', function(event) {
  86.                 if (event.originalEvent.persisted) {
  87.                     location.reload(true);
  88.                 }
  89.             });
  90.         });
  91.     </script>
  92.     <script>
  93.         $(function() {
  94.             $('.add-cart').on('click', function(event) {
  95.                 {% if form.classcategory_id1 is defined %}
  96.                 // 規格1フォームの必須チェック
  97.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  98.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  99.                     return true;
  100.                 } else {
  101.                     $('#classcategory_id1')[0].setCustomValidity('');
  102.                 }
  103.                 {% endif %}
  104.                 {% if form.classcategory_id2 is defined %}
  105.                 // 規格2フォームの必須チェック
  106.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  107.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  108.                     return true;
  109.                 } else {
  110.                     $('#classcategory_id2')[0].setCustomValidity('');
  111.                 }
  112.                 {% endif %}
  113.                 // 個数フォームのチェック
  114.                 if ($('#quantity').val() < 1) {
  115.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  116.                     return true;
  117.                 } else {
  118.                     $('#quantity')[0].setCustomValidity('');
  119.                 }
  120.                 event.preventDefault();
  121.                 $form = $('#form1');
  122.                 $.ajax({
  123.                     url: $form.attr('action'),
  124.                     type: $form.attr('method'),
  125.                     data: $form.serialize(),
  126.                     dataType: 'json',
  127.                     beforeSend: function(xhr, settings) {
  128.                         // Buttonを無効にする
  129.                         $('.add-cart').prop('disabled', true);
  130.                     }
  131.                 }).done(function(data) {
  132.                     // レスポンス内のメッセージをalertで表示
  133.                     $.each(data.messages, function() {
  134.                         $('#ec-modal-header').text(this);
  135.                     });
  136.                     $('.ec-modal').show()
  137.                     // カートブロックを更新する
  138.                     $.ajax({
  139.                         url: "{{ url('block_cart') }}",
  140.                         type: 'GET',
  141.                         dataType: 'html'
  142.                     }).done(function(html) {
  143.                         //$('.ec-headerRole__cart').html(html);
  144.                         $('.ec-cartNavi__detail').html(html);
  145.                     });
  146.                 }).fail(function(data) {
  147.                     alert('{{ 'カートへの追加に失敗しました。'|trans }}');
  148.                 }).always(function(data) {
  149.                     // Buttonを有効にする
  150.                     $('.add-cart').prop('disabled', false);
  151.                 });
  152.             });
  153.         });
  154.         $('.ec-modal-wrap').on('click', function(e) {
  155.             // モーダル内の処理は外側にバブリングさせない
  156.             e.stopPropagation();
  157.         });
  158.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  159.             $('.ec-modal').hide()
  160.         });
  161.     </script>
  162.     <script type="application/ld+json">
  163.     {
  164.         "@context": "https://schema.org/",
  165.         "@type": "Product",
  166.         "name": "{{ Product.name }}",
  167.         "image": [
  168.             {% for img in Product.ProductImage %}
  169.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  170.             {% else %}
  171.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  172.             {% endfor %}
  173.         ],
  174.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  175.         {% if Product.code_min %}
  176.         "sku": "{{ Product.code_min }}",
  177.         {% endif %}
  178.         "offers": {
  179.             "@type": "Offer",
  180.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  181.             "priceCurrency": "{{ eccube_config.currency }}",
  182.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  183.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  184.         }
  185.     }
  186.     </script>
  187.     {# JEIA #}
  188.     {# Drift(画像ルーペ拡大表示ライブラリ) Drift用CSSは「_14.4.product_zoom.scss」に含めています #}
  189.     <script src="{{ asset('assets/js/drift/Drift.min.js') }}"></script>
  190.     {# Luminous(画像ポップアップ拡大表示ライブラリ) Luminous用CSSは「_14.4.product_zoom.scss」に含めています #}
  191.     <script src="{{ asset('assets/js/luminous/Luminous.min.js') }}"></script>
  192.     <script>
  193.         //------------------------------
  194.         // 商品ビジュアル(slick使用)
  195.         //------------------------------
  196.         // slick適用コンテナ
  197.         var $ecSlickContainer = $( '.ec-productVisualMain .ec-slickContainer' );
  198.         // キャプションの準備
  199.         /** 商品詳細ページのslickアイテムは動的に出力されますのでキャプションを入れられませんが、
  200.          * フリーエリア内にてキャプション要素を記述しておき、javascirptで各キャプションを各画像アイテム内に挿入させます。
  201.          * ※EC-CUBE4.2.0ではフリーエリアに記述したHTMLがサニタイズ(data属性が削除)されてしまい、この機能が動作しませんのでコメントアウトします。
  202.          */
  203.         /*
  204.         var $visualCaption = $( '.visual_caption' );// キャプション要素ラッパー
  205.         $visualCaption.find( '.caption' ).each(function(){
  206.             var $this = $(this);
  207.             // index 1つ目の画像用キャプションは「data-caption="1"」としていますので、-1してindex値にします
  208.             var _index = parseInt( $this.data('caption'),10 ) - 1;
  209.             // 該当slickアイテム
  210.             var $slideItem = $ecSlickContainer.find( '.slide-item' ).eq( _index );
  211.             if ( $slideItem.length ) {
  212.                 // 該当slickアイテムにキャプションを挿入
  213.                 $slideItem.append($this);
  214.             } else {
  215.                 // 該当slickアイテムが存在しない場合はキャプションを破棄します
  216.                 $this.remove();
  217.             }
  218.         });
  219.         */
  220.         // slick準備完了時の処理
  221.         $ecSlickContainer.on('init', function(){
  222.             setTimeout(function(){
  223.                 //
  224.             }, 0);
  225.         });
  226.         // slick適用
  227.         $ecSlickContainer.slick({
  228.             fade: true,
  229.             speed: 600,
  230.             dots: false,
  231.             arrows: true,
  232.             prevArrow: '<div class="slick-prev"><i class="jeiafont jeia-arrow-left"></i></div>',
  233.             nextArrow: '<div class="slick-next"><i class="jeiafont jeia-arrow"></i></div>',
  234.             asNavFor: '.ec-productVisualNav.desktop',
  235.             responsive: [
  236.                 {
  237.                     breakpoint: 768,//768px未満(スマホ時)
  238.                     settings: {
  239.                         fade: false,
  240.                         infinit: true
  241.                     }
  242.                 }
  243.             ]
  244.         });
  245.         // ビジュアルナビ(デスクトップ・タブレット用:縦スライド)
  246.         var $visualNavDesktop = $( '.ec-productVisualNav.desktop' );
  247.         $visualNavDesktop.slick({
  248.             asNavFor: '.ec-productVisualMain .ec-slickContainer',
  249.             vertical: true,
  250.             verticalSwiping: true,
  251.             slidesToShow: 5,
  252.             slidesToScroll: 1,
  253.             //swipeToSlide: true,// ※verticalでは効かない様子
  254.             focusOnSelect: true,
  255.             speed: 600,
  256.             arrows: true,
  257.             prevArrow: '<div class="slick-prev"><i class="jeiafont jeia-arrow"></i></div>',
  258.             nextArrow: '<div class="slick-next"><i class="jeiafont jeia-arrow"></i></div>'
  259.         });
  260.         // ビジュアルナビの高さをメインビジュアルの高さと揃えます(デスクトップ・タブレット時)
  261.         // これは見た目の調整と、ナビ送りのnextボタンの配置を正しくする目的もあります
  262.         if ( window.innerWidth >= 768 ) {
  263.             // slick生成が完了してから実行します。イベント「slick_all_readiness」はjeia_function.jsによってslick生成完了後に発火されます。
  264.             $(window).on('slick_all_readiness jeia_resize', function(){
  265.                 var _height = $ecSlickContainer.height();
  266.                 // ビジュアルナビの高さを適用
  267.                 $visualNavDesktop.height( _height );
  268.                 // ブラウザのリサイズ時に.slick-listの高さが追随しない事があるのでこちらも高さを揃えます
  269.                 $visualNavDesktop.find( '.slick-list' ).height( _height );
  270.             });
  271.         }
  272.         // ビジュアルナビ(スマホ用)
  273.         var $productRoleVisual =  $( '.ec-productRole__visual' );// ※ビジュアル画像拡大機能でもこの取得要素を使います
  274.         var $visualNavSphone =    $( '.ec-productVisualNav.sphone' );// ビジュアルナビ(スマホ用)
  275.         var $sideInNavToggleBtn = $( '.sideInNavToggleBtn' );// ビジュアルナビ開閉ボタン
  276.         // ビジュアルナビ(スマホ)開閉ボタン
  277.         $sideInNavToggleBtn.on('click', function(){
  278.             // 開状態となるclassをON/OFF
  279.             $productRoleVisual.toggleClass( 'is-navOpen' );
  280.         });
  281.         // ビジュアルナビ(スマホ)サムネイルタップでメインビジュアル画像を切替え
  282.         $visualNavSphone.on('click', '.slideThumb', function() {
  283.             var index = $(this).attr( 'data-index' );
  284.             $ecSlickContainer.slick( 'slickGoTo', index, false );// slickGoTo: indexで指定したスライドへ移動
  285.             // ページ上部にスクロールする処理を入れておきます(ページトップボタンのイベントを発火)
  286.             $( '.ec-blockTopBtn' ).trigger( 'click' );
  287.             // ナビをCLOSE
  288.             $productRoleVisual.removeClass( 'is-navOpen' );
  289.         });
  290.         // サムネイル以外をタップした場合はナビをCLOSE
  291.         $visualNavSphone.on('click', function() {
  292.             // ナビをCLOSE
  293.             $productRoleVisual.removeClass( 'is-navOpen' );
  294.         });
  295.         // スライド切り替え完了後のイベント(開閉ボタンのカレント値を更新)
  296.         $ecSlickContainer.on('afterChange', function(e, slick, currentSlide){
  297.             $sideInNavToggleBtn.find( '.currentNum' ).text( currentSlide + 1 );
  298.         });
  299.         //------------------------------
  300.         // ビジュアル画像 ルーペ拡大表示(Drift)&ポップアップ拡大表示(Luminous)
  301.         //------------------------------
  302.         // ・Drift
  303.         // ルーペ拡大表示には「Drift」を使用しています(Drift was made by imgix.)
  304.         // https://github.com/imgix/drift
  305.         //------------------------------
  306.         // ・Luminous
  307.         // ポップアップ拡大表示には「Luminous」を使用しています(Luminous was made by imgix.)
  308.         // https://github.com/imgix/luminous
  309.         //------------------------------
  310.         // 商品ビジュアルの拡大機能ON/OFF
  311.         var visual_loupe = Boolean( {{ visual_options.loupe }} );// ルーペ拡大
  312.         var visual_popup = Boolean( {{ visual_options.popup }} );// ポップアップ拡大
  313.         // slick生成が完了してから実行します。イベント「slick_all_readiness」はjeia_function.jsによってslick生成完了後に発火されます。
  314.         $(window).on('slick_all_readiness', function(){
  315.             // ルーペ拡大表示
  316.             // 画像ズームはデスクトップ・タブレット時のみとします(スマホではあまり実用的ではないと思われますので)
  317.             if ( visual_loupe && window.innerWidth >= 768 ) {
  318.                 // 拡大表示パネルの大きさを決めます(リサイズ時も算出し直します)
  319.                 $(window).on('on_pane_size jeia_resize', function(){
  320.                     // パネル表示の基点(サムネイル枠の左端)
  321.                     var pane_origin = $(' .ec-productVisualNav' ).offset().left;
  322.                     // パネル幅 →ブラウザ幅から表示基点を引いて(スクロールバー分の幅も調整)、パネル領域を広く設定
  323.                     var pane_w = window.innerWidth - pane_origin - 50;
  324.                     // パネル高さ →ビジュアル上位置からブラウザ下まで、少しだけ余白を差し引き
  325.                     var pane_h = $(window).height() - $productRoleVisual.offset().top - 50;
  326.                     $( '.drift-pane' ).css({
  327.                         'width':  pane_w,
  328.                         'height': pane_h,
  329.                         'left':   $( '.ec-productVisualMain' ).width() + 1// メインビジュアルの右端 + 余白
  330.                     });
  331.                 }).trigger('on_pane_size');
  332.                 // メインビジュアル ルーペ拡大表示(ライブラリ「Drift」)
  333.                 var pane = document.querySelector( '.drift-pane' );
  334.                 $( '.drift-img' ).each(function(){
  335.                     new Drift(this, {
  336.                         paneContainer:  pane,
  337.                         inlinePane:     1279,//1280px以上でパネル表示、それ未満はルーペ表示
  338.                         containInline:  false,// ルーペを画像の端からはみ出させない場合はtrue
  339.                         inlineOffsetY:  -85,
  340.                         touchDelay:     300
  341.                     });
  342.                 })
  343.             }
  344.             // ポップアップ拡大表示
  345.             // 画像ポップアップはデスクトップ・タブレット時のみとします(スマホではあまり実用的ではないと思われますので)
  346.             if ( visual_popup && window.innerWidth >= 768 ) {
  347.                 new LuminousGallery(document.querySelectorAll( '.luminous-gallery' ));
  348.             } else {
  349.                 // ポップアップ拡大を使用しない →画像がクリックされてもa要素が動作しないようにイベントを組んでおきます
  350.                 $productRoleVisual.find( '.luminous-gallery' ).on('click', function(){
  351.                     return false;
  352.                 });
  353.             }
  354.         });
  355.         // どちらの拡大機能も使用しない場合はカーソルを矢印に戻しておきます(通常はCSS側でzoom-inにしています)
  356.         if ( !visual_loupe && !visual_popup ) {
  357.             $productRoleVisual.find( '.slide-item > a' ).css( 'cursor', 'default' );
  358.         }
  359.         //------------------------------
  360.         // お気に入り処理
  361.         //------------------------------
  362.         /* 当テンプレートではお気に入りボタンをカートボタンの横に配置するデザインとなっておりますが、
  363.             * このエリアはカートインのform要素領域の中に入っていますので、お気に入り追加用formとボタンとを分離させ、
  364.             * ボタンをカート横に配置し、ボタンクリック時に当スクリプトお気に入りフォーム送信を発生させています。
  365.             */
  366.         $( '#favorite' ).on('click', function(e){
  367.             e.preventDefault();
  368.             $( '#form_favorite' ).submit();
  369.         });
  370.         //------------------------------
  371.         // シェアボタン(サブウィンドウ表示)
  372.         //------------------------------
  373.         $( '.shareBtn' ).on('click', function(){
  374.             // ウィンドウを開かないタイプはスルー
  375.             if ( $(this).hasClass( 'no-window' ) ) {
  376.                 return true;
  377.             }
  378.             var this_url = $(this).attr( 'href' ) + location.href;
  379.             window.open( this_url, 'sns_win', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1' );
  380.             return false;
  381.         });
  382.         //------------------------------
  383.         // フリーエリア:タブ切り替えコンテンツ
  384.         //------------------------------
  385.         /* フリーエリア内にコードを記述することでタブ切り替えコンテンツを実装します。
  386.          * タブ切り替えが不要な場合は当スクリプトを削除してください。
  387.          * ※EC-CUBE4.2.0ではフリーエリアに記述したHTMLがサニタイズ(data属性が削除)されてしまい、この機能が動作しませんのでコメントアウトします。
  388.          */
  389.         /*
  390.         var $ecProductDetailTab =        $( '.ec-productDetailTab' );
  391.         var $ecProductDetailTabNav =     $ecProductDetailTab.find( '.ec-productDetailTab__nav' )
  392.         var $ecProductDetailTabContent = $ecProductDetailTab.find( '.ec-productDetailTab__content' );
  393.         $ecProductDetailTabNav.on('click', 'li', function(){
  394.             var $this = $(this);
  395.             var _index = '.tab-' + $this.data('tab');
  396.             // コンテンツのアクティブ化
  397.             $ecProductDetailTabContent.filter(_index).addClass('is-active').siblings().removeClass('is-active');
  398.             // タブのアクティブ化
  399.             $this.addClass('is-active').siblings().removeClass('is-active');
  400.         });
  401.         // 初回は1番目のタブコンテンツを表示
  402.         $ecProductDetailTabNav.find('li:eq(0)').trigger('click');
  403.         */
  404.     </script>
  405.     {# 常駐カートイン #}
  406.     {% if clone_cartin %}
  407.     <script src="{{ asset('assets/js/clone_cartin.js') }}"></script>
  408.     {% endif %}
  409.     <script src="//unpkg.com/flatpickr"></script>
  410.     <!-- 日本語の言語ファイル -->
  411.     <script src="//unpkg.com/flatpickr/dist/l10n/ja.js"></script>
  412.     <script src="{{ asset('assets/js/hotelinfo].js') }}?{{ env('CSS_PARAM') }}"></script>
  413.     <script src="{{ asset('assets/js/rental_common.js') }}?{{ env('CSS_PARAM') }}"></script>
  414.     <script src="{{ asset('assets/js/helicopter_detail.js') }}?{{ env('CSS_PARAM') }}"></script>
  415.     <script>
  416.         //Googleカレンダー予約状況
  417.         reservedInfo={{ events|raw }};
  418.         calendar_start_date="{{ calendar_start_date }}";
  419.         var aircraftlist = {
  420.                 3:"R44 (up to 3Pax/220㎏)",
  421.                 4:"Bell505 (up to 4Pax/300㎏)",
  422.                 5:"350B (up to 5Pax/400㎏)",
  423.                 6:"EC130 (up to 6Pax/600㎏)",
  424.             };
  425. /*
  426.         aircraftlist = {
  427.                 5:"350B (up to 5Pax/400㎏)",
  428.                 6:"EC130 (up to 6Pax/600㎏)",
  429.         };
  430. */
  431.     </script>
  432. {% endblock %}
  433. {% block main %}
  434. {% set carflg = false %}
  435. {% for ProductCategory in Product.ProductCategories %}
  436.      {% if 7== ProductCategory.Category.id %}
  437.         {% set carflg = true %}
  438.     {% endif %}
  439. {% endfor %}
  440.     <div class="ec-productRole">
  441.         <div class="ec-productRole__grid">
  442.             <div class="ec-productRole__gridCell cellLeft">
  443.                 {# 商品ビジュアル表示 #}
  444.                 <div class="ec-productRole__visual">
  445.                     {# メインビジュアル格納枠 #}
  446.                     <div class="ec-productVisualMain">
  447.                         {# slick適用要素 #}
  448.                         <div class="ec-slickContainer">
  449.     {% for ProductImage in Product.ProductImage %}
  450.                             <div class="slide-item">
  451.                                 <a class="luminous-gallery" data-iteration="<!--{$num}-->" href="{{ asset(ProductImage, 'save_image') }}" target="_blank">
  452.                                     <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 %}>
  453.                                 </a>
  454.                             </div>
  455.     {% else %}
  456.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}  {{ loop.first ? Product.search_word : '' }}"></div>
  457.     {% endfor %}
  458.                         </div>
  459.                     </div>
  460. {#
  461.                     ----------------------------------------------------------------------------------
  462.                     デスクトップ・タブレット時はビジュアルナビをメインビジュアルの横に配置して縦スライド機能をつけています。
  463.                     スマホ時はスライド機能は使わずに展開ボタンにより一覧ビューがサイドインする動作になります。
  464.                     レスポンシブにおいて、スライド機能のON/OFFやレイアウト変更はロジックが煩雑になるかと思いましたので、
  465.                     ビジュアルナビは、あらかじめデスクトップ用のナビと、モバイル用のナビをそれぞれ組み込んでおきレスポンシブで表示を切り替えています。
  466.                     ----------------------------------------------------------------------------------
  467. #}
  468.                     {# ビジュアルナビ(デスクトップ・タブレット用) #}
  469.                     <div class="ec-productVisualNav desktop">
  470.     {% for ProductImage in Product.ProductImage %}
  471.                         {# 当テンプレートの構造上、loading="lazy"は入れないほうがいいかも?
  472.                         <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" loading="lazy"></div>
  473.                         #}
  474.                         <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt=""></div>
  475.     {% endfor %}
  476.                     </div>
  477.                     {# ビジュアルナビ(スマホ用) #}
  478.                     <div class="ec-productVisualNav sphone">
  479.                         <div class="sideInNavShelf">
  480.         {% for ProductImage in Product.ProductImage %}
  481.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" loading="lazy"></div>
  482.         {% endfor %}
  483.                         </div>
  484.                     </div>
  485.                     {# ビジュアルナビ(スマホ用)開閉ボタン #}
  486.                     <div class="sideInNavToggleBtn">
  487.                         <i class="jeiafont jeia-grid"></i>
  488.                         <span class="currentNum">1</span>
  489.                         <span class="ceparate">/</span>
  490.                         <span class="totalNum">{{ Product.ProductImage|length }}</span>
  491.                     </div>
  492.                 </div>
  493.                 {# 商品画像ルーペ拡大表示用パネル(デスクトップ時のみ) #}
  494.                 <div class="drift-pane"></div>
  495.         {% if Product.id==16 %}
  496.                 <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>
  497.         {% endif %}
  498.                 <div class="ec-productRole__description pcOnly">
  499.                     {{ Product.description_detail|raw|nl2br }}
  500.                 </div>
  501.             </div>
  502.             <div class="ec-productRole__gridCell cellRight">
  503.                 {# 商品プロフィール #}
  504.                 <div class="ec-productRole__profile">
  505. {#
  506. {% set price = Product.item16 | json_decode %}
  507. {{ dump(price) }}
  508. {{ dump(price.price|number_format) }}
  509. {{ dump(price.km) }}
  510. #}
  511.                     {# 商品タイトル #}
  512.                     <div class="ec-productRole__title">
  513.                         <h1>{{ Product.name }}</h1>
  514.                     </div>
  515.                     {# 通常価格 #}
  516. {#
  517.                     <div class="ec-productRole__priceRegular">
  518.                         <div class="ec-price">
  519.                             <span class="ec-price__label">通常価格</span>
  520.     {% if Product.hasProductClass -%}
  521.         {% if Product.getPrice01Min is not null and Product.getPrice01IncTaxMin == Product.getPrice01IncTaxMax %}
  522.                             <span class="ec-price__price price01-default">>&yen;{{ Product.getPrice01IncTaxMin|number_format }}~</span>
  523.         {% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
  524.                             <span class="ec-price__price price01-default">{{ Product.getPrice01IncTaxMin|number_format }} ~ {{ Product.getPrice01IncTaxMax|number_format }}円</span>
  525.         {% endif %}
  526.     {% else %}
  527.         {% if Product.getPrice01Max is not null %}
  528.                             <span class="ec-price__price price01-default">&yen;{{ Product.getPrice01IncTaxMin|number_format }}~</span>
  529.         {% endif %}
  530.     {% endif %}
  531.                             <span class="ec-price__tax">({{ '税込'|trans }})</span>
  532.                         </div>
  533.                     </div>
  534. #}
  535.                     {# 販売価格 #}
  536.                     <div class="ec-productRole__price">
  537.                         <div class="ec-price">
  538. {% set tour25 = Product.item16 | json_decode %}
  539. {% set tour35 = Product.item17 | json_decode %}
  540. {% set tour45 = Product.item18 | json_decode %}
  541. {% set tour60 = Product.item19 | json_decode %}
  542.     {% if Product.getPrice01Min %}
  543.                             <span class="ec-price__price">Price &yen{{ Product.getPrice02Min|number_format }} ~ &yen{{ Product.getPrice01Min|number_format }}</span>
  544.     {% else %}
  545.                             <span class="ec-price__price">Price &yen{{ Product.getPrice02Min|number_format }} </span>
  546.     {% endif %}
  547.                         </div>
  548.                     </div>
  549.                     {# 詳細コメント #}
  550.                     <div class="ec-productRole__description spOnly">
  551.                         {{ Product.description_detail|raw|nl2br }}
  552.                     </div>
  553.                     <div class="ec-productRole__description">
  554.                         <details class="accordion-006 spec" open>
  555.                             <summary><h3>Price (JPN)</h3></summary>
  556. {% if Product.id==42 %}
  557.                             <div class="price-area">
  558.                                 <div class="ec-productRole__price">
  559.                                     <div class="ec-price">
  560.                                         <span class="ec-price__price">sky tree course(25min)</span>
  561.                                         <br>
  562.                                         <p class="note">It's a highly satisfying flight where you can enjoy the view of Tokyo's skyline and Sky Tree from above at night!</p>
  563.                                     </div>
  564.                                 </div>
  565.                                 <ul class="spec__item">
  566.                                     <li class="spec__row">
  567.                                       <span>R44 (up to 3Pax/220㎏)</span>¥{{ tour25.pax3| number_format }}</li>
  568.                                     <li class="spec__row">
  569.                                       <span>Bell505 (up to 4Pax/300㎏)</span>¥{{ tour25.pax4| number_format }}</li>
  570.                                     <li class="spec__row">
  571.                                       <span>350B (up to 5Pax/400㎏)</span>¥{{ tour25.pax5| number_format }}</li>
  572.                                     <li class="spec__row">
  573.                                       <span>EC130 (up to 6Pax/600㎏)</span>¥{{ tour25.pax6| number_format }}</li>
  574.                                 </ul>
  575.                             </div>
  576.                             <div class="price-area">
  577.                                 <div class="ec-productRole__price">
  578.                                     <div class="ec-price">
  579.                                         <span class="ec-price__price">W Tower Course(35min)</span>
  580.                                         <br>
  581.                                         <p class="note">After takeoff, we head towards Tokyo Tower along the waterfront, and then you'll also get to see Sky Tree on this route!</p>
  582.                                     </div>
  583.                                 </div>
  584.                                 <ul class="spec__item">
  585.                                     <li class="spec__row">
  586.                                       <span>R44 (up to 3Pax/220㎏)</span>¥{{ tour35.pax3| number_format }}</li>
  587.                                     <li class="spec__row">
  588.                                       <span>Bell505 (up to 4Pax/300㎏)</span>¥{{ tour35.pax4| number_format }}</li>
  589.                                     <li class="spec__row">
  590.                                       <span>350B (up to 5Pax/400㎏)</span>¥{{ tour35.pax5| number_format }}</li>
  591.                                     <li class="spec__row">
  592.                                       <span>EC130 (up to 6Pax/600㎏)</span>¥{{ tour35.pax6| number_format }}</li>
  593.                                 </ul>
  594.                             </div>
  595.                             <div class="price-area">
  596.                                 <div class="ec-productRole__price">
  597.                                     <div class="ec-price">
  598.                                         <span class="ec-price__price">Tokyo tour course(45min)</span>
  599.                                         <br>
  600.                                         <p class="note">After takeoff, we offer a highly satisfying flight over the Tokyo Tower, Sky Tree area, as well as flying over Shinjuku and Shibuya!</p>
  601.                                     </div>
  602.                                 </div>
  603.                                 <ul class="spec__item">
  604.                                     <li class="spec__row">
  605.                                       <span>R44 (up to 3Pax/220㎏)</span>¥{{ tour45.pax3| number_format }}</li>
  606.                                     <li class="spec__row">
  607.                                       <span>Bell505 (up to 4Pax/300㎏)</span>¥{{ tour45.pax4| number_format }}</li>
  608.                                     <li class="spec__row">
  609.                                       <span>350B (up to 5Pax/400㎏)</span>¥{{ tour45.pax5| number_format }}</li>
  610.                                     <li class="spec__row">
  611.                                       <span>EC130 (up to 6Pax/600㎏)</span>¥{{ tour45.pax6| number_format }}</li>
  612.                                 </ul>
  613.                             </div>
  614.                             <div class="price-area">
  615.                                 <div class="ec-productRole__price">
  616.                                     <div class="ec-price">
  617.                                         <span class="ec-price__price">Tokyo & Yokohama course(60min)</span>
  618.                                         <br>
  619.                                         <p class="note">After takeoff, we offer a highly satisfying flight over the Tokyo Tower, Sky Tree area, as well as flying over Yokohama's Minato Mirai district!</p>
  620.                                     </div>
  621.                                 </div>
  622.                                 <ul class="spec__item">
  623.                                     <li class="spec__row">
  624.                                       <span>R44 (up to 3Pax/220㎏)</span>¥{{ tour60.pax3| number_format }}</li>
  625.                                     <li class="spec__row">
  626.                                       <span>Bell505 (up to 4Pax/300㎏)</span>¥{{ tour60.pax4| number_format }}</li>
  627.                                     <li class="spec__row">
  628.                                       <span>350B (up to 5Pax/400㎏)</span>¥{{ tour60.pax5| number_format }}</li>
  629.                                     <li class="spec__row">
  630.                                       <span>EC130 (up to 6Pax/600㎏)</span>¥{{ tour60.pax6| number_format }}</li>
  631.                                 </ul>
  632.                             </div>
  633. {% endif %}
  634. {% if Product.id==43 %}
  635.                             <div class="price-area">
  636.                                 <div class="ec-productRole__price">
  637.                                     <div class="ec-price">
  638.                                         <span class="ec-price__price">Mt Fuji + Hakone Course(70min)</span>
  639.                                         <br>
  640.                                         <p class="note">You can enjoy the magnificent view of Mount Fuji. The view of Mount Fuji from the sky is truly something special. Mount Fuji dyed in the sunset is a breathtaking sight. Sunset cruises are highly recommended as well.</p>
  641.                                     </div>
  642.                                 </div>
  643.                                 <ul class="spec__item">
  644.                                     <li class="spec__row">
  645.                                       <span>R44 (up to 3Pax/220㎏)</span>¥{{ tour25.pax3| number_format }}</li>
  646.                                     <li class="spec__row">
  647.                                       <span>Bell505 (up to 4Pax/300㎏)</span>¥{{ tour25.pax4| number_format }}</li>
  648.                                     <li class="spec__row">
  649.                                       <span>350B (up to 5Pax/400㎏)</span>¥{{ tour25.pax5| number_format }}</li>
  650.                                     <li class="spec__row">
  651.                                       <span>EC130 (up to 6Pax/600㎏)</span>¥{{ tour25.pax6| number_format }}</li>
  652.                                 </ul>
  653.                             </div>
  654.                             <div class="price-area">
  655.                                 <div class="ec-productRole__price">
  656.                                     <div class="ec-price">
  657.                                         <span class="ec-price__price">Mt Fuji + Yokohama + Hakone Course(90min)</span>
  658.                                         <br>
  659.                                         <p class="note">This is a cruise that adds a Yokohama tour to the Mt. Fuji + Hakone course. You can luxuriously enjoy beautiful views of Yokohama's landmarks, port, and high-rise buildings from the sky.</p>
  660.                                     </div>
  661.                                 </div>
  662.                                 <ul class="spec__item">
  663.                                     <li class="spec__row">
  664.                                       <span>R44 (up to 3Pax/220㎏)</span>¥{{ tour35.pax3| number_format }}</li>
  665.                                     <li class="spec__row">
  666.                                       <span>Bell505 (up to 4Pax/300㎏)</span>¥{{ tour35.pax4| number_format }}</li>
  667.                                     <li class="spec__row">
  668.                                       <span>350B (up to 5Pax/400㎏)</span>¥{{ tour35.pax5| number_format }}</li>
  669.                                     <li class="spec__row">
  670.                                       <span>EC130 (up to 6Pax/600㎏)</span>¥{{ tour35.pax6| number_format }}</li>
  671.                                 </ul>
  672.                             </div>
  673.                             <div class="price-area">
  674.                                 <div class="ec-productRole__price">
  675.                                     <div class="ec-price">
  676.                                         <span class="ec-price__price">Mt Fuji Excursion course(120min)</span>
  677.                                         <br>
  678.                                         <p class="note">This is a course that goes around Mount Fuji. You can enjoy the overwhelming scenery of Mount Fuji from various locations. In addition to Mount Fuji itself, you can also enjoy diverse landscapes such as those around the Fuji Five Lakes.</p>
  679.                                     </div>
  680.                                 </div>
  681.                                 <ul class="spec__item">
  682.                                     <li class="spec__row">
  683.                                       <span>R44 (up to 3Pax/220㎏)</span>¥{{ tour45.pax3| number_format }}</li>
  684.                                     <li class="spec__row">
  685.                                       <span>Bell505 (up to 4Pax/300㎏)</span>¥{{ tour45.pax4| number_format }}</li>
  686.                                     <li class="spec__row">
  687.                                       <span>350B (up to 5Pax/400㎏)</span>¥{{ tour45.pax5| number_format }}</li>
  688.                                     <li class="spec__row">
  689.                                       <span>EC130 (up to 6Pax/600㎏)</span>¥{{ tour45.pax6| number_format }}</li>
  690.                                 </ul>
  691.                             </div>
  692. {% endif %}
  693. {% if Product.id==44 %}
  694.                             <ul class="spec__item">
  695.                                 <li class="spec__row">
  696.                                   <span>R44 (up to 3Pax/220㎏)</span>¥{{ tour25.pax3| number_format }}</li>
  697.                                 <li class="spec__row">
  698.                                   <span>Bell505 (up to 4Pax/300㎏)</span>¥{{ tour25.pax4| number_format }}</li>
  699.                                 <li class="spec__row">
  700.                                   <span>350B (up to 5Pax/400㎏)</span>¥{{ tour25.pax5| number_format }}</li>
  701.                                 <li class="spec__row">
  702.                                   <span>EC130 (up to 6Pax/600㎏)</span>¥{{ tour25.pax6| number_format }}</li>
  703.                             </ul>
  704. {% endif %}
  705. {% if Product.id==45 %}
  706.                             <div class="price-area">
  707.                                 <div class="ec-productRole__price">
  708.                                     <div class="ec-price">
  709.                                         <span class="ec-price__price">Tokyo - Fuji Speedway(36min)</span>
  710.                                         <br>
  711.                                         <p class="note">At Fuji Speedway, waiting time is free for up to 60 minutes. After that, it costs 20,000 yen per additional 60 minutes.<br>*Round trip is an additional 100,000 yen.</p>
  712.                                     </div>
  713.                                 </div>
  714.                                 <ul class="spec__item">
  715.                                     <li class="spec__row">
  716.                                       <span>R44 (up to 3Pax/220㎏)</span>¥{{ tour25.pax3 | number_format }}</li>
  717.                                     <li class="spec__row">
  718.                                       <span>Bell505 (up to 4Pax/300㎏)</span>¥{{ tour25.pax4 | number_format }}</li>
  719.                                     <li class="spec__row">
  720.                                       <span>350B (up to 5Pax/400㎏)</span>¥{{ tour25.pax5 | number_format }}</li>
  721.                                     <li class="spec__row">
  722.                                       <span>EC130 (up to 6Pax/600㎏)</span>¥{{ tour25.pax6 | number_format }}</li>
  723.                                 </ul>
  724.                             </div>
  725.                             <div class="price-area">
  726.                                 <div class="ec-productRole__price">
  727.                                     <div class="ec-price">
  728.                                         <span class="ec-price__price">Tokyo - Lake Kawaguchi(40min)</span>
  729.                                         <br>
  730.                                         <p class="note">At Lake Kawaguchi, waiting time is free for up to 60 minutes. After that, it costs 20,000 yen per additional 60 minutes.<br>*Round trip is an additional 100,000 yen.</p>
  731.                                     </div>
  732.                                 </div>
  733.                                 <ul class="spec__item">
  734.                                     <li class="spec__row">
  735.                                       <span>R44 (up to 3Pax/220㎏)</span>¥{{ tour35.pax3 | number_format }}</li>
  736.                                     <li class="spec__row">
  737.                                       <span>Bell505 (up to 4Pax/300㎏)</span>¥{{ tour35.pax4 | number_format }}</li>
  738.                                     <li class="spec__row">
  739.                                       <span>350B (up to 5Pax/400㎏)</span>¥{{ tour35.pax5 | number_format }}</li>
  740.                                     <li class="spec__row">
  741.                                       <span>EC130 (up to 6Pax/600㎏)</span>¥{{ tour35.pax6 | number_format }}</li>
  742.                                 </ul>
  743.                             </div>
  744.                             <div class="price-area">
  745.                                 <div class="ec-productRole__price">
  746.                                     <div class="ec-price">
  747.                                         <span class="ec-price__price">Tokyo - Amanem/One way(95min)</span>
  748.                                         <br>
  749.                                         <p class="note">At Amanem, waiting time is free for up to 60 minutes. After that, it costs 20,000 yen per additional 60 minutes.<br>*Round trip is an additional 300,000 yen.</p>
  750.                                     </div>
  751.                                 </div>
  752.                                 <ul class="spec__item">
  753.                                     <li class="spec__row">
  754.                                       <span>R44 (up to 3Pax/220㎏)</span>¥{{ tour45.pax3 | number_format }}</li>
  755.                                     <li class="spec__row">
  756.                                       <span>Bell505 (up to 4Pax/300㎏)</span>¥{{ tour45.pax4 | number_format }}</li>
  757.                                     <li class="spec__row">
  758.                                       <span>350B (up to 5Pax/400㎏)</span>¥{{ tour45.pax5 | number_format }}</li>
  759.                                     <li class="spec__row">
  760.                                       <span>EC130 (up to 6Pax/600㎏)</span>¥{{ tour45.pax6 | number_format }}</li>
  761.                                 </ul>
  762.                             </div>
  763. {% endif %}
  764.                         </details>
  765.                     </div>
  766.         <form name="reserveForm" action="{{ url('helicopter_reserved') }}" method="post" class="reserveForm">
  767.             <input type="hidden" name="referralhotel" class="referralhotel" value="">
  768.             <p class="ec-para-normal">
  769.             Select your date, time, and preferred, then provide your information. After submission, your temporary reservation will be secured. We look forward to your booking.
  770.             </p>
  771.             <p class="reserevedError" style="display:none;">Reservation information is not set correctly</p>
  772.             <div class="Form-Item name">
  773.                 <p class="Form-Item-Label">Date</p>
  774.                 <input name="date" type="text" class="Form-Item-Input flatpickr flatpickr-input date" placeholder="2024-01-01" id="myCal" value="">
  775.                 <span class="Form-Item-Error date" style="display: none;">*Please select</span>
  776.             </div>
  777.             <div class="Form-Item">
  778.                 <p class="Form-Item-Label block-line">Start Time</p>
  779.                 <select name="starttime" class="Form-Item-Input">
  780. {% if Product.id==44 %}
  781.                     <option value="7:00">7:00</option>
  782.                     <option value="7:30">7:30</option>
  783.                     <option value="8:00">8:00</option>
  784.                     <option value="8:30">8:30</option>
  785. {% endif %}
  786.                     <option value="9:00">9:00</option>
  787.                     <option value="9:30">9:30</option>
  788. {% if Product.id==42 %}
  789.                     <option value="10:00">10:00</option>
  790. {% else %}
  791.                     <option value="10:00" selected>10:00</option>
  792. {% endif %}
  793.                     <option value="10:00">10:00</option>
  794.                     <option value="10:30">10:30</option>
  795.                     <option value="11:00">11:00</option>
  796.                     <option value="11:30">11:30</option>
  797.                     <option value="12:00">12:00</option>
  798.                     <option value="12:30">12:30</option>
  799.                     <option value="13:00">13:00</option>
  800.                     <option value="13:30">13:30</option>
  801.                     <option value="14:00">14:00</option>
  802.                     <option value="14:30">14:30</option>
  803.                     <option value="15:00">15:00</option>
  804.                     <option value="15:30">15:30</option>
  805.                     <option value="16:00">16:00</option>
  806.                     <option value="16:30">16:30</option>
  807.                     <option value="17:00">17:00</option>
  808. {% if Product.id==42 %}
  809.                     <option value="17:30">17:30</option>
  810.                     <option value="18:00">18:00</option>
  811.                     <option value="18:30" selected>18:30</option>
  812.                     <option value="19:00">19:00</option>
  813.                     <option value="19:30">19:30</option>
  814.                     <option value="20:00">20:00</option>
  815.                     <option value="20:30">20:30</option>
  816.                     <option value="21:00">21:00</option>
  817.                     <option value="21:30">21:30</option>
  818. {% endif %}
  819.                 </select>
  820.                 <span class="Form-Item-Error starttime" style="display: none;">*Please select</span>
  821.             </div>
  822. {#
  823.             <div class="timelist">
  824.                 <input type="radio" name="time" class="time" value="10:00" id="10" >
  825.                 <label for="10" class="label">10:00</label>
  826.                 <input type="radio" name="time" class="time" value="12:00" id="12">
  827.                 <label for="12" class="label">12:00</label>
  828.                 <input type="radio" name="time" class="time" value="14:00" id="14">
  829.                 <label for="14" class="label">14:00</label>
  830.                 <input type="radio" name="time" class="time" value="16:00" id="16">
  831.                 <label for="16" class="label">16:00</label>
  832.                 <span class="Form-Item-Error timelist" style="display: none;">*Please select</span>
  833.             </div>
  834.             <div class="Form-Item name">
  835.                 <p class="Form-Item-Label">Course</p>
  836.                 <div class="timelist">
  837.                     <input type="radio" name="time" class="time" value="1" id="1H" >
  838.                     <label for="1H" class="label">1H</label>
  839.                     <input type="radio" name="time" class="time" value="2" id="2H" >
  840.                     <label for="2H" class="label">2H</label>
  841.                     <input type="radio" name="time" class="time" value="3" id="3H">
  842.                     <label for="3H" class="label">3H</label>
  843.                 </div>
  844.                 <span class="Form-Item-Error timelist" style="display: none;">*Please select</span>
  845.             </div>
  846. #}
  847. {% if Product.id==42 %}
  848.             <div class="Form-Item">
  849.                 <p class="Form-Item-Label block-line">Course</p>
  850.                 <select name="course" class="Form-Item-Input">
  851.                     <option value="sky tree course(25min)">sky tree course(25min)</option>
  852.                     <option value="W Tower Course(35min)">W Tower Course(35min)</option>
  853.                     <option value="Tokyo tour course(45min)">Tokyo tour course(45min)</option>
  854.                     <option value="Tokyo & Yokohama course(60min)">Tokyo & Yokohama course(60min)</option>
  855.                 </select>
  856.                 <span class="Form-Item-Error starttime" style="display: none;">*Please select</span>
  857.             </div>
  858. {% elseif Product.id==43 %}
  859.             <div class="Form-Item">
  860.                 <p class="Form-Item-Label block-line">Course</p>
  861.                 <select name="course" class="Form-Item-Input">
  862.                     <option value="Mt Fuji + Hakone Course(70min)">Mt Fuji + Hakone Course(70min)</option>
  863.                     <option value="Mt Fuji + Yokohama + Hakone Course(90min)">Mt Fuji + Yokohama + Hakone Course(90min)</option>
  864.                     <option value="Mt Fuji Excursion course(120min)">Mt Fuji Excursion course(120min)</option>
  865.                 </select>
  866.                 <span class="Form-Item-Error starttime" style="display: none;">*Please select</span>
  867.             </div>
  868. {% elseif Product.id==45 %}
  869.             <div class="Form-Item">
  870.                 <p class="Form-Item-Label block-line">Course</p>
  871.                 <select name="course" class="Form-Item-Input">
  872.                     <option value="Tokyo-Fuji Speedway(36min)">Tokyo-Fuji Speedway(36min)</option>
  873.                     <option value="Tokyo-Lake Kawaguchi(40min)">Tokyo-Lake Kawaguchi(40min)</option>
  874.                     <option value="Tokyo-Amanem/One way(95min)">Tokyo-Amanem/One way(95min)</option>
  875.                 </select>
  876.                 <span class="Form-Item-Error starttime" style="display: none;">*Please select</span>
  877.             </div>
  878. {% else %}
  879.             <input type="hidden" name="course" class="course" value="Narita-Tokyo Transport">
  880. {% endif %}
  881.             <div class="Form-Item">
  882.                 <p class="Form-Item-Label block-line">Number of Participants</p>
  883.                 <select name="participants" class="Form-Item-Input participants">
  884.                     <option value="1">1</option>
  885.                     <option value="2">2</option>
  886.                     <option value="3">3</option>
  887.                     <option value="4">4</option>
  888.                     <option value="5">5</option>
  889.                     <option value="6">6</option>
  890.                 </select>
  891.             </div>
  892.             <div class="Form-Item">
  893.                 <p class="Form-Item-Label block-line">Aircraft</p>
  894.                 <select name="aircraft" class="Form-Item-Input aircraft">
  895.                     <option value="R44 (up to 3Pax/220㎏)" data-num="3" class="dataaaa">R44 (up to 3Pax/220㎏)</option>
  896.                     <option value="Bell505 (up to 4Pax/300㎏)" data-num="4">Bell505 (up to 4Pax/300㎏)</option>
  897.                     <option value="350B (up to 5Pax/400㎏)" data-num="5" class="dataaaa">350B (up to 5Pax/400㎏)</option>
  898.                     <option value="EC130 (up to 6Pax/600㎏)" data-num="6">EC130 (up to 6Pax/600㎏)</option>
  899.                 </select>
  900.             </div>
  901.             <div class="Form-Item name">
  902.                 <p class="Form-Item-Label">Name</p>
  903.                 <input name="name" type="text" class="Form-Item-Input name" placeholder="John Smith" value="">
  904.                 <span class="Form-Item-Error name" style="display: none;">*Please enter</span>
  905.             </div>
  906.             <div class="Form-Item name">
  907.                 <p class="Form-Item-Label">Country</p>
  908.                 <input name="country" type="text" class="Form-Item-Input country" placeholder="Australia" value="">
  909.                 <span class="Form-Item-Error country" style="display: none;">*Please enter</span>
  910.             </div>
  911.             <div class="Form-Item email">
  912.                 <p class="Form-Item-Label">Mail</p>
  913.                 <input name="email" type="email" class="Form-Item-Input email" placeholder="example@gmail.com" value="">
  914.                 <span class="Form-Item-Error email" style="display: none;">*Please enter</span>
  915.             </div>
  916.             <div class="Form-Item tel">
  917.                 <p class="Form-Item-Label">Tel</p>
  918.                 <select name="telcode" class="Form-Item-Input telcode">
  919.                     <option value=""></option>
  920.                     <option value="+1">+1</option>
  921.                     <option value="+7">+7</option>
  922.                     <option value="+20">+20</option>
  923.                     <option value="+27">+27</option>
  924.                     <option value="+30">+30</option>
  925.                     <option value="+31">+31</option>
  926.                     <option value="+32">+32</option>
  927.                     <option value="+33">+33</option>
  928.                     <option value="+34">+34</option>
  929.                     <option value="+36">+36</option>
  930.                     <option value="+39">+39</option>
  931.                     <option value="+40">+40</option>
  932.                     <option value="+41">+41</option>
  933.                     <option value="+43">+43</option>
  934.                     <option value="+44">+44</option>
  935.                     <option value="+45">+45</option>
  936.                     <option value="+46">+46</option>
  937.                     <option value="+47">+47</option>
  938.                     <option value="+48">+48</option>
  939.                     <option value="+49">+49</option>
  940.                     <option value="+51">+51</option>
  941.                     <option value="+52">+52</option>
  942.                     <option value="+53">+53</option>
  943.                     <option value="+54">+54</option>
  944.                     <option value="+55">+55</option>
  945.                     <option value="+56">+56</option>
  946.                     <option value="+57">+57</option>
  947.                     <option value="+58">+58</option>
  948.                     <option value="+60">+60</option>
  949.                     <option value="+61">+61</option>
  950.                     <option value="+62">+62</option>
  951.                     <option value="+63">+63</option>
  952.                     <option value="+64">+64</option>
  953.                     <option value="+65">+65</option>
  954.                     <option value="+66">+66</option>
  955.                     <option value="+81">+81</option>
  956.                     <option value="+82">+82</option>
  957.                     <option value="+84">+84</option>
  958.                     <option value="+86">+86</option>
  959.                     <option value="+90">+90</option>
  960.                     <option value="+91">+91</option>
  961.                     <option value="+92">+92</option>
  962.                     <option value="+94">+94</option>
  963.                     <option value="+95">+95</option>
  964.                     <option value="+98">+98</option>
  965.                     <option value="+212">+212</option>
  966.                     <option value="+213">+213</option>
  967.                     <option value="+216">+216</option>
  968.                     <option value="+218">+218</option>
  969.                     <option value="+220">+220</option>
  970.                     <option value="+221">+221</option>
  971.                     <option value="+222">+222</option>
  972.                     <option value="+223">+223</option>
  973.                     <option value="+224">+224</option>
  974.                     <option value="+225">+225</option>
  975.                     <option value="+226">+226</option>
  976.                     <option value="+227">+227</option>
  977.                     <option value="+228">+228</option>
  978.                     <option value="+229">+229</option>
  979.                     <option value="+230">+230</option>
  980.                     <option value="+231">+231</option>
  981.                     <option value="+232">+232</option>
  982.                     <option value="+233">+233</option>
  983.                     <option value="+234">+234</option>
  984.                     <option value="+235">+235</option>
  985.                     <option value="+236">+236</option>
  986.                     <option value="+237">+237</option>
  987.                     <option value="+238">+238</option>
  988.                     <option value="+239">+239</option>
  989.                     <option value="+240">+240</option>
  990.                     <option value="+241">+241</option>
  991.                     <option value="+242">+242</option>
  992.                     <option value="+243">+243</option>
  993.                     <option value="+244">+244</option>
  994.                     <option value="+246">+246</option>
  995.                     <option value="+247">+247</option>
  996.                     <option value="+248">+248</option>
  997.                     <option value="+249">+249</option>
  998.                     <option value="+250">+250</option>
  999.                     <option value="+251">+251</option>
  1000.                     <option value="+253">+253</option>
  1001.                     <option value="+254">+254</option>
  1002.                     <option value="+255">+255</option>
  1003.                     <option value="+256">+256</option>
  1004.                     <option value="+257">+257</option>
  1005.                     <option value="+258">+258</option>
  1006.                     <option value="+260">+260</option>
  1007.                     <option value="+261">+261</option>
  1008.                     <option value="+262">+262</option>
  1009.                     <option value="+263">+263</option>
  1010.                     <option value="+264">+264</option>
  1011.                     <option value="+265">+265</option>
  1012.                     <option value="+266">+266</option>
  1013.                     <option value="+267">+267</option>
  1014.                     <option value="+268">+268</option>
  1015.                     <option value="+269">+269</option>
  1016.                     <option value="+290">+290</option>
  1017.                     <option value="+291">+291</option>
  1018.                     <option value="+297">+297</option>
  1019.                     <option value="+298">+298</option>
  1020.                     <option value="+299">+299</option>
  1021.                     <option value="+350">+350</option>
  1022.                     <option value="+351">+351</option>
  1023.                     <option value="+352">+352</option>
  1024.                     <option value="+353">+353</option>
  1025.                     <option value="+354">+354</option>
  1026.                     <option value="+355">+355</option>
  1027.                     <option value="+356">+356</option>
  1028.                     <option value="+357">+357</option>
  1029.                     <option value="+358">+358</option>
  1030.                     <option value="+359">+359</option>
  1031.                     <option value="+370">+370</option>
  1032.                     <option value="+371">+371</option>
  1033.                     <option value="+372">+372</option>
  1034.                     <option value="+373">+373</option>
  1035.                     <option value="+374">+374</option>
  1036.                     <option value="+375">+375</option>
  1037.                     <option value="+376">+376</option>
  1038.                     <option value="+377">+377</option>
  1039.                     <option value="+378">+378</option>
  1040.                     <option value="+380">+380</option>
  1041.                     <option value="+381">+381</option>
  1042.                     <option value="+385">+385</option>
  1043.                     <option value="+386">+386</option>
  1044.                     <option value="+387">+387</option>
  1045.                     <option value="+389">+389</option>
  1046.                     <option value="+420">+420</option>
  1047.                     <option value="+421">+421</option>
  1048.                     <option value="+500">+500</option>
  1049.                     <option value="+501">+501</option>
  1050.                     <option value="+502">+502</option>
  1051.                     <option value="+503">+503</option>
  1052.                     <option value="+504">+504</option>
  1053.                     <option value="+505">+505</option>
  1054.                     <option value="+506">+506</option>
  1055.                     <option value="+507">+507</option>
  1056.                     <option value="+508">+508</option>
  1057.                     <option value="+509">+509</option>
  1058.                     <option value="+590">+590</option>
  1059.                     <option value="+591">+591</option>
  1060.                     <option value="+592">+592</option>
  1061.                     <option value="+593">+593</option>
  1062.                     <option value="+594">+594</option>
  1063.                     <option value="+595">+595</option>
  1064.                     <option value="+596">+596</option>
  1065.                     <option value="+597">+597</option>
  1066.                     <option value="+598">+598</option>
  1067.                     <option value="+599">+599</option>
  1068.                     <option value="+672">+672</option>
  1069.                     <option value="+673">+673</option>
  1070.                     <option value="+674">+674</option>
  1071.                     <option value="+675">+675</option>
  1072.                     <option value="+676">+676</option>
  1073.                     <option value="+677">+677</option>
  1074.                     <option value="+678">+678</option>
  1075.                     <option value="+679">+679</option>
  1076.                     <option value="+680">+680</option>
  1077.                     <option value="+682">+682</option>
  1078.                     <option value="+683">+683</option>
  1079.                     <option value="+684">+684</option>
  1080.                     <option value="+685">+685</option>
  1081.                     <option value="+686">+686</option>
  1082.                     <option value="+687">+687</option>
  1083.                     <option value="+688">+688</option>
  1084.                     <option value="+689">+689</option>
  1085.                     <option value="+691">+691</option>
  1086.                     <option value="+692">+692</option>
  1087.                     <option value="+850">+850</option>
  1088.                     <option value="+852">+852</option>
  1089.                     <option value="+853">+853</option>
  1090.                     <option value="+855">+855</option>
  1091.                     <option value="+856">+856</option>
  1092.                     <option value="+880">+880</option>
  1093.                     <option value="+886">+886</option>
  1094.                     <option value="+941">+941</option>
  1095.                     <option value="+960">+960</option>
  1096.                     <option value="+961">+961</option>
  1097.                     <option value="+962">+962</option>
  1098.                     <option value="+963">+963</option>
  1099.                     <option value="+964">+964</option>
  1100.                     <option value="+965">+965</option>
  1101.                     <option value="+966">+966</option>
  1102.                     <option value="+967">+967</option>
  1103.                     <option value="+968">+968</option>
  1104.                     <option value="+972">+972</option>
  1105.                     <option value="+973">+973</option>
  1106.                     <option value="+974">+974</option>
  1107.                     <option value="+975">+975</option>
  1108.                     <option value="+976">+976</option>
  1109.                     <option value="+977">+977</option>
  1110.                     <option value="+995">+995</option>
  1111.                     <option value="+996">+996</option>
  1112.                 </select>
  1113.                 <input name="tel" type="tel" class="Form-Item-Input tel" placeholder="112222333" value="">
  1114.                 <span class="Form-Item-Error tel" style="display: none;">*Please select and enter</span>
  1115.             </div>
  1116.             <div class="Form-Item">
  1117.                 <p class="Form-Item-Label">PickUp Location</p>
  1118.                 <input name="pickup" type="text" class="Form-Item-Input pickup" placeholder="hotel aman tokyo" value="">
  1119.                 <span class="Form-Item-Error pickup" style="display: none;">*Please enter</span>
  1120.             </div>
  1121.             <div class="Form-Item">
  1122.                 <p class="Form-Item-Label">DropOff Location</p>
  1123.                 <input name="dropoff" type="text" class="Form-Item-Input dropoff" placeholder="hotel aman tokyo" value="">
  1124.                 <span class="Form-Item-Error dropoff" style="display: none;">*Please enter</span>
  1125.             </div>
  1126.             <div class="Form-Item">
  1127.                 <p class="Form-Item-Label">Comment</p>
  1128.                 <span class="note">*If you have any requests, please enter them.</span>
  1129.                 <textarea rows="5" class="Form-Item-Textarea" name="message"></textarea>
  1130.                 <span class="Form-Item-Error" style="display: none;">*Please enter</span>
  1131.             </div>
  1132.             <a class="ec-shopCollectionBtn submit" href="javascript:void(0)">Reserve</a>
  1133.         </form>
  1134.                     {# シェアボタン #}
  1135.                     <div class="ec-productRole__share">
  1136.                         <p class="shareLabel">SHARE</p>
  1137.                         <ul class="shareBtnList">
  1138.                         {% spaceless %}
  1139.                             {# Twitter #}
  1140.                             <li>
  1141.                                 <a class="shareBtn x-twitter" href="https://twitter.com/share?url=">
  1142.                                     <i class="jeiafont jeia-x-twitter"></i><span>Twitter</span>
  1143.                                 </a>
  1144.                             </li>
  1145.                             {# Facebook #}
  1146.                             <li>
  1147.                                 <a class="shareBtn facebook" href="https://www.facebook.com/sharer/sharer.php?u=">
  1148.                                     <i class="jeiafont jeia-facebook"></i><span>Facebook シェア</span>
  1149.                                 </a>
  1150.                             </li>
  1151.                             {# LINE #}
  1152.                             <li>
  1153.                                 <a class="shareBtn line" href="https://social-plugins.line.me/lineit/share?url=">
  1154.                                     <i class="jeiafont jeia-line2"></i><span>LINE</span>
  1155.                                 </a>
  1156.                             </li>
  1157.                             {# Pocket #}
  1158.                             <li>
  1159.                                 <a class="shareBtn pocket" href="http://getpocket.com/edit?url=">
  1160.                                     <i class="jeiafont jeia-get-pocket"></i><span>Pocket</span>
  1161.                                 </a>
  1162.                             </li>
  1163.                             {# はてなブックマーク #}
  1164.                             <li>
  1165.                                 <a class="shareBtn hatena" href="http://b.hatena.ne.jp/add?mode=confirm&url=">
  1166.                                     <i class="jeiafont jeia-hatenabookmark"></i><span>はてなブックマーク</span>
  1167.                                 </a>
  1168.                             </li>
  1169.                             {# Pinterest #}
  1170.                             <li>
  1171.                                 <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/">
  1172.                                     <i class="jeiafont jeia-pinterest"></i><span>Pinterest</span>
  1173.                                 </a>
  1174.                                 <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
  1175.                             </li>
  1176.                         {% endspaceless %}
  1177.                         </ul>
  1178.                     </div>
  1179.                 </div>{# end of .ec-productRole__profile #}
  1180.             </div>{# end of .ec-productRole__gridCell #}
  1181.         </div>{# end of .ec-productRole__grid #}
  1182.     {% if Product.freearea %}
  1183.         <div class="ec-productRole__freearea">
  1184.             {{ include(template_from_string(Product.freearea)) }}
  1185.         </div>
  1186.     {% endif %}
  1187.     </div>{# end of .ec-productRole #}
  1188. {% endblock %}