app/template/osechi/Block/customize.twig line 1

Open in your IDE?
  1. {# ----------▼ カテゴリ内容登録 ▼---------- #}
  2. {% set ProductsSuperCar = 
  3.     [
  4.         {
  5.             id:         2,
  6.             name:       'Mercedes-Benz SL280',
  7.             image:      '/awd/html/upload/save_image/0918144743_6507e47f68e31.JPG?20231014',
  8.             price:        '120000'
  9.         },{
  10.             id:         25,
  11.             name:       'Alpha Romeo 8C',
  12.             image:      '/awd/html/upload/save_image/0918150802_6507e94258e04.JPG?20231014',
  13.             price:        '120000'
  14.         },{
  15.             id:         7,
  16.             name:       'Mercedes G63 BRABUS WIDE STAR',
  17.             image:      '/awd/html/upload/save_image/0918152023_6507ec27586c2.JPG?20231014',
  18.             price:        '120000'
  19.         },{
  20.             id:         8,
  21.             name:       'Lamborghini Urus',
  22.             image:      '/awd/html/upload/save_image/0918151652_6507eb54a430f.JPG?20231014',
  23.             price:        '120000'
  24.         },{
  25.             id:         18,
  26.             name:       'AW109',
  27.             image:      '/awd/html/upload/save_image/0927145054_6513c2beab09c.jpg?20231014',
  28.             price:        '120000'
  29.         },{
  30.             id:         14,
  31.             name:       'PRINCESS F49',
  32.             image:      '/awd/html/upload/save_image/0910132047_64fd441fc54db.webp?20231014',
  33.             price:        '120000'
  34.         }
  35.     ]
  36. %}
  37. {# {{ asset('assets/img/top/fpo_355x150.png') }} #}
  38. {% set PickupCategoryList = 
  39.     [
  40.         {
  41.             title:       'Package Plan',
  42.             title_sub:   'PRINCESS YACHTS x Fireworks',
  43.             description: '<p>October 2023 Closed Reception</p>Join us for an unforgettable evening at the Yokosuka Fireworks Festival, a celebration of light and color like no other. Our exclusive private charter offers an unparalleled view of this magnificent event.',
  44.             link:        url('plan_case01'),
  45.             image:       '/awd/html/template/osechi/assets/img/plan/40476735.jpg'
  46.         },{
  47.             title:       'Package Plan',
  48.             title_sub:   'GTR NISMO x Fuji Speedway Hotel',
  49.             description: '<p>Now accepting reservations !!</p>Wouldn\'t you like to embark on an exhilarating road trip just 100 km (1.5 hours) from Tokyo with a supercar? Your accommodations come with a magnificent view of Mount Fuji or an exciting circuit view. You can also enjoy a relaxing time at the hot springs and spa.',
  50.             link:        url('plan_case03'),
  51.             image:       '/awd/html/template/osechi/assets/img/top/top_plan03.webp'
  52.         },{
  53.             title:       'Package Plan',
  54.             title_sub:   ' Porsche SUV x Tokyo Classic Camp',
  55.             description: '<p>Coming Soon</p>Drive the first Porsche crossover SUV, the Cayenne Turbo, just for one hour to glamping accormodation.  Enjoy comfortable stays in premium cabins, forest bathing, stargazing, BBQs, and more for a full outdoor experience.',
  56.             link:        url('plan_case02'),
  57.             image:       '/awd/html/template/osechi/assets/img/top/top_plan02.webp'
  58.         }
  59.     ]
  60. %}
  61. {# ----------▲ カテゴリ内容登録 ▲---------- #}
  62. <div class="lead">
  63. </div>
  64. <div class="ec-pickupRole">
  65.     <div class="ec-secHeading">
  66.         <h2 class="text-span updown ec-secHeading__en">
  67.             Mobility
  68.         </h2>
  69.     </div>
  70. </div>
  71. <div class="container-Mobility appearEffect">
  72.     <div class="ec-shelfRole list">
  73. {#
  74.         <ul class="ec-shelfGrid col_max5 ready">
  75. {% for item in ProductsSuperCar %}
  76.             <!-- ▼ 商品単位 -->
  77.             <li class="ec-shelfGrid__item">
  78.                 <div class="ec-productItemRole">
  79.                     <div class="ec-productItemRole__image">
  80.                         <a href="{{ url('product_detail', {'id': item.id}) }}">
  81.                             <img src="{{ item.image }}" alt="{{ item.name }}">
  82.                         </a>
  83.                     </div>
  84.                     <div class="ec-productItemRole__content">
  85.                         <h3 class="ec-productItemRole__title"><span>{{ item.name }}</span></h3>
  86.                     </div>
  87.                 </div>
  88.             </li>
  89.             <!-- ▲ 商品単位 -->
  90. {% endfor %}
  91.         </ul>
  92. #}
  93.     <div class="container-linenup">
  94.         <div class="item-list">
  95.             <a href="{{ url('product') }}#supercar">
  96.                 <img src="/awd/html/template/osechi/assets/img/products/icon_supercar.png" width="140" height="80">
  97.                 <p>Super Car</p>
  98.             </a>
  99.         </div>
  100.         <div class="item-list">
  101.             <a href="{{ url('product') }}#suv">
  102.                 <img src="/awd/html/template/osechi/assets/img/products/icon_svu.png" width="140" height="80">
  103.                 <p>SUV</p>
  104.             </a>
  105.         </div>
  106.         <div class="item-list">
  107.             <a href="{{ url('product') }}#clasiccar">
  108.                 <img src="/awd/html/template/osechi/assets/img/products/icon_classiccar.png" width="140" height="80">
  109.                 <p>Classic car</p>
  110.             </a>
  111.         </div>
  112.         <div class="item-list">
  113.             <a href="{{ url('product') }}#boat">
  114.                 <img src="/awd/html/template/osechi/assets/img/products/icon_boat.png" width="140" height="80">
  115.                 <p>Boat</p>
  116.             </a>
  117.         </div>
  118.         <div class="item-list">
  119.             <a href="{{ url('product') }}#helicopter">
  120.                 <img src="/awd/html/template/osechi/assets/img/products/icon_helicopter.png" width="140" height="80">
  121.                 <p>Helicopter</p>
  122.             </a>
  123.         </div>
  124.         <div class="item-list">
  125.             <a href="{{ url('product') }}">
  126.                 <p class="-text">all<br>mobility</p>
  127.             </a>
  128.         </div>
  129.     </div>
  130.     </div>
  131. </div>
  132. <!-- Block/category.twig -->
  133. <div class="ec-pickupRole limitedoffer">
  134.     <div class="ec-secHeading">
  135.         <h2 class="text-span updown ec-secHeading__en">
  136.             Limited Offer
  137.         </h2>
  138. {#
  139.         <div class="appearEffect">
  140.             <p class="font-120 top-msg-titles">
  141.                 A Wonderful Day' Celebration Packages<br>
  142.                 - Luxury Getaways with Free Accommodation-
  143.             </p>
  144.             <p>
  145.         Join our exclusive promotion celebrating <br class="spOnly">'A Wonderful Day' luxury mobility service! <br class="spOnly">Experience extraordinary monthly adventures and enjoy a complimentary one-night stay in our opulent accommodations!
  146.             </p>
  147.         </div>
  148. #}
  149.     </div>
  150. </div>
  151. <div class="ec-categoryRole">
  152.     {# ピックアップカテゴリコンテンツ枠(※スマホ時は非表示) #}
  153.     <div class="ec-categoryRole__content">
  154.         <div class="wrap">
  155.             <div class="wrap2">
  156.                 {# slickコンテナ #}
  157.                 <div class="ec-slickContainer">
  158.                     {# アイテム #}
  159. {% for post in WpPosts %}
  160.                     <div class="item">
  161.                         <h3 class="title" data-splitting>{{ post.title }}</h3>
  162.                         <div class="description"><p>{{ post.list_status }}</p>{{ post.list_text |raw|nl2br }}</div>
  163.                         <a class="ec-shopCollectionBtn" href="./plan/{{ post.id }}">read more</a>
  164.                     </div>
  165. {% endfor %}
  166.                 </div>
  167.             </div>
  168.         </div>
  169.     </div>
  170.     {# ピックアップカテゴリイメージ画像枠 #}
  171.     <div class="ec-categoryRole__image">
  172.         {# アイテム #}
  173. {% for post in WpPosts %}
  174.         <div class="item" data-index="{{ loop.index0 }}">
  175.             {# img要素をパララックスさせます(simplePARALLAX.js) #}
  176.             <img class="js-parallax" src="{{ post.list_img }}" alt="{{ post.title }}" width="414" height="293">
  177.             {# スマホ時用コンテンツ #}
  178.             <div class="content_sp">
  179.                 <h3 class="title" data-splitting>{{ post.title }}</h3>
  180.                 <div class="description"><p>{{ post.list_status }}</p>{{ post.list_text |raw|nl2br }}</div>
  181.                 <a class="ec-shopCollectionBtn" href="./plan/{{ post.id }}">read more</a>
  182.             </div>
  183.         </div>
  184. {% endfor %}
  185.     </div>
  186. </div>
  187. <div class="ec-pickupRole limitedoffer">
  188.     <div class="ec-secHeading ceo-message">
  189.         <h2 class="text-span updown ec-secHeading__en">
  190.             CEO Message
  191.         </h2>
  192.         <p>
  193. -Exploring a New Japan Together-
  194.         </p>
  195.         <div class="appearEffect">
  196.             <img src="/awd/html/template/osechi/assets/img/top/ceo-message.webp" alt="CEO Message"  width="362" height="207">
  197.         </div>
  198.     </div>
  199.     <div class="content-wrap animated appearEffect">
  200.       <div class="content-txt">
  201.         <p>
  202. A Wonderful Day (AWD) is a celebratory service aimed at affluent visitors to Japan in an era where ownership is shifting to shared experiences. Through the novel approach of sharing high-value mobility services, we aim to make Japan's tourism an experience of freedom and elegance.
  203.             <br><br>
  204. Following the end of the COVID-19 pandemic, Tokyo is bustling with foreign tourists, thanks to favorable foreign exchange rates. Hotel prices have surged by three to five times. However, there are still numerous tranquil destinations in the suburbs offering affordable and serene experiences. World heritage sites, hot springs, and the beauty of changing seasons are all within easy reach. We encourage you to visit and explore these places.
  205.             <br><br>
  206. Our primary mission is to connect Tokyo with its surrounding tourist destinations within a 200-kilometer radius, resolving transportation challenges. Furthermore, by utilizing high-value mobility options such as classic cars, supercars, pleasure boats, superyachts, and helicopters, we aim to turn the stress of travel into exciting and unforgettable experiences. Additionally, we seek to promote the shared use of assets, including membership-based lodgings and vacation homes, alongside luxury hotels and traditional inns. Our goal is to provide our customers with special options that allow them to enjoy Japan with the freedom and elegance of their own homeland.
  207.             <br><br>
  208. While AWD's services operate on a club membership and referral basis, this choice reflects our emphasis on connecting people and building new communities with shared values. Simultaneously, we aspire to contribute to the sustainable economic ecosystem surrounding Japan's alternative investment assets.
  209.             <br><br>
  210. The ultimate vision for AWD is to become a community of high-value alternative assets representing Asia. Through this community, we aspire to showcase the charm of Japan and Asia to the world. This is my dream.
  211.             <br><br>
  212. In our journey towards experiencing A Wonderful Day together, we walk hand in hand with our customers, contributing to the formation of new communities and ecosystems. Our mission is to spread the allure of Japan and Asia worldwide. Your smiles are our greatest success and the driving force behind our daily efforts.
  213.             <br><br>
  214. Thank you for your support!
  215.             <br><br>
  216.             <br>
  217.             Producer of A Wonderful Day<br>CEO of GIFT LIFE Co., Ltd<br>Marehiko Yamada
  218.         </p>
  219.       </div>
  220.       <div class="more-btn">
  221.         <p class="open">read more</p>
  222.       </div>
  223.     </div>
  224. </div>
  225. <script>
  226.     $(function(){
  227.         var $categoryRole = $( '.ec-categoryRole' );
  228.         var $categoryContainer_content = $categoryRole.find( '.ec-categoryRole__content .ec-slickContainer' );
  229.         var check_timer = null;
  230.         // content枠 slickスライダー
  231.         $categoryContainer_content.slick({
  232.             fade:          true,
  233.             dots:          false,
  234.             arrows:        false,
  235.             speed:         1000,
  236.             adaptiveHeight: true
  237.         });
  238.         // Intersection Observer APIでイメージ画像のビューポートINを監視します
  239.         // ターゲット要素
  240.         var targets = document.querySelectorAll('.ec-categoryRole__image > .item');
  241.         // 監視設定
  242.         var options = {
  243.             root: null,
  244.             rootMargin: '-50% 0px',// 判定を上下中央の線としてビューポート中央にあるターゲットをアクティブと判定します
  245.             threshold: 0 
  246.         }
  247.         // 監視オブザーバ
  248.         var observer = new IntersectionObserver( intersectionCallback, options );
  249.         // オブザーバにターゲット要素を渡す
  250.         targets.forEach((target) => {
  251.             observer.observe( target );
  252.         });
  253.         // オブザーバコールバック
  254.         function intersectionCallback( entries, observer ) {
  255.             //console.log(entries, observer);
  256.             entries.forEach((entry) => {
  257.                 /*
  258.                 console.log(
  259.                     'target', entry.target, '\n',
  260.                     'boundingClientRect', entry.boundingClientRect, '\n',
  261.                     'intersectionRatio', entry.intersectionRatio, '\n',
  262.                     'intersectionRect', entry.intersectionRect, '\n',
  263.                     'isIntersecting', entry.isIntersecting, '\n',
  264.                     'rootBounds', entry.rootBounds, '\n',
  265.                     'time', entry.time
  266.                 );
  267.                 */
  268.                 if ( entry.isIntersecting ) {
  269.                     //console.log('enrty IN', entry);
  270.                     // 画像ターゲットからインデックス番号を取得
  271.                     var index = entry.target.dataset.index;
  272.                     $categoryContainer_content.slick('slickGoTo', index);
  273.                     // スクロールが早いと監視INが多発する事になりますが、slickGoToのスライド中に次の監視INが来るとスライド反映できない様子なのでチェック処理を入れます
  274.                     clearTimeout(check_timer);// 最後の監視Inを有効にするためひとまずタイマーリセットさせます
  275.                     check_timer = setTimeout(function(){
  276.                         // slickスライダーのカレントスライドを取得
  277.                         var current = $categoryContainer_content.slick('slickCurrentSlide');
  278.                         // slickカレントと監視INしたindex値が異なる場合はslickGoTo
  279.                         if ( current != index ) {
  280.                             $categoryContainer_content.slick('slickGoTo', index);
  281.                         }
  282.                     }, 1000);// タイマー値はslickのspeed値より多め
  283.                 } else {
  284.                     //console.log('entry OUT', entry);
  285.                 }
  286.             });
  287.         }
  288.         // 文字列へのspan設定
  289.         $(".text-span").each(function() {
  290.             var content = $(this).html();
  291.             var trimText = $.trim(content);
  292.             var newText = "";
  293.             trimText.split("").forEach(function(e) {
  294.                 if(e == ' '){
  295.                       // 空白対策
  296.                     newText += '<span>&nbsp;</span>';
  297.                 } else {
  298.                     newText += '<span>' + e + '</span>';
  299.                   }
  300.             });
  301.             $(this).html(newText);
  302.         });
  303.         var block = $(".updown"),
  304.         Window = $(window);
  305.         Window.scroll(function() {
  306.             block.each(function() {
  307.                 //表示範囲に入ったらactiveを付与
  308.                 if (Window.scrollTop() > $(this).offset().top - Window.height()) {
  309.                     $(this).addClass("active");
  310.                 }
  311.             });
  312.         });
  313.     });
  314. </script>