app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'front_page' %}
  10. {% block stylesheet %}
  11.     <style>
  12.         .slick-slider {
  13.             margin-bottom: 30px;
  14.         }
  15.         .slick-dots {
  16.             position: absolute;
  17.             bottom: -45px;
  18.             display: block;
  19.             width: 100%;
  20.             padding: 0;
  21.             list-style: none;
  22.             text-align: center;
  23.         }
  24.         .slick-dots li {
  25.             position: relative;
  26.             display: inline-block;
  27.             width: 20px;
  28.             height: 20px;
  29.             margin: 0 5px;
  30.             padding: 0;
  31.             cursor: pointer;
  32.         }
  33.         .slick-dots li button {
  34.             font-size: 0;
  35.             line-height: 0;
  36.             display: block;
  37.             width: 20px;
  38.             height: 20px;
  39.             padding: 5px;
  40.             cursor: pointer;
  41.             color: transparent;
  42.             border: 0;
  43.             outline: none;
  44.             background: transparent;
  45.         }
  46.         .slick-dots li button:hover,
  47.         .slick-dots li button:focus {
  48.             outline: none;
  49.         }
  50.         .slick-dots li button:hover:before,
  51.         .slick-dots li button:focus:before {
  52.             opacity: 1;
  53.         }
  54.         .slick-dots li button:before {
  55.             content: " ";
  56.             line-height: 20px;
  57.             position: absolute;
  58.             top: 0;
  59.             left: 0;
  60.             width: 12px;
  61.             height: 12px;
  62.             text-align: center;
  63.             opacity: .25;
  64.             background-color: black;
  65.             border-radius: 50%;
  66.         }
  67.         .slick-dots li.slick-active button:before {
  68.             opacity: .75;
  69.             background-color: black;
  70.         }
  71.         .slick-dots li button.thumbnail img {
  72.             width: 0;
  73.             height: 0;
  74.         }
  75.     </style>
  76. {% endblock %}
  77. {% block javascript %}
  78.     <script>
  79.         $(function() {
  80.             $('.main_visual').slick({
  81.                 dots: true,
  82.                 arrows: false,
  83.                 autoplay: true,
  84.                 speed: 300
  85.             });
  86.         });
  87.     </script>
  88. <script>
  89. /*
  90. <script src="https://code.jquery.com/jquery-3.6.0.min.js">
  91. function showWeather(zipCode) {
  92.   const apiKey = 'YOUR_API_KEY';
  93.   const url = `https://map.yahooapis.jp/weather/V1/place?coordinates=135.99668266689392,34.634682905099524&appid=dj00aiZpPXM4Y0ZhTXliT3ZaTCZzPWNvbnN1bWVyc2VjcmV0Jng9ODY-`;
  94.   $.getJSON(url, function(data) {
  95.     const weather = data.query.results.channel;
  96.     const weatherWidget = document.getElementById('weather-widget');
  97.     weatherWidget.innerHTML = `
  98.       <h3>${weather.location.city}の天気</h3>
  99.       <p>気温: ${weather.item.condition.temp}°C</p>
  100.       <p>天気: ${weather.item.condition.text}</p>
  101.     `;
  102.   });
  103. }
  104. // 郵便番号を指定して天気を表示
  105. showWeather('6302234');
  106. */
  107. </script>
  108. {% endblock javascript %}
  109. {% block main %}
  110.     <div class="ec-sliderRole position-relative">
  111.         <div class="main_visual">
  112.             <div class="item slick-slide"><img src="{{ asset('assets/img/top/top_slider_1.jpg') }}"></div>
  113.         </div>
  114.         <div id="header_wrap" class="position-absolute top-50 end-0">
  115.             <div class="inner">
  116.                 <div class="">奈良県山添村、<br class="sp_on">名阪国道に隣接する<br>総合モータースポーツ施設<br class="sp_on">「名阪スポーツランド」です。</div>
  117.                 <div class="text-center">
  118.                 </div>
  119.             </div>
  120.         </div>
  121.     </div>
  122.     <section id="course_wrap" class="">
  123.         <div class="inner">
  124.             <div class="section_title"><span>コース紹介</span></div>
  125.             <div class="section_data d-flex flex-wrap justify-content-center">
  126.                 {% for k,v in courses %}
  127.                     <a class="course_data " href="{{ url('course_detail',{id:v.id}) }}">
  128.                         <img src="{{ eccube_config.course_image_dir_default }}{{ v.image_before1 }}" alt="前半画像1" width="100%">
  129.                         <div class="">{{ v.name }}</div>
  130.                     </a>
  131.                 {% endfor %}
  132.             </div>
  133.         </div>
  134.     </section>
  135.     
  136.     
  137.     <section class="weather_daily">
  138.         <div class="inner">
  139.             <div class="section_title"><span>お天気情報</span></div>
  140.             <div class="daily_data d-flex flex-wrap justify-content-between">
  141.                 {% for k,v in daily.time %}
  142.                     <div class="text-center mb-4 border border-secondary rounded p-2">
  143.                         <div class="day mb-2 fw-bold h4">{{ v|date('m月d日') }}</div>
  144.                         <div class="d-flex flex-wrap justify-content-center align-items-">
  145.                             <div class="w-75 mx-auto mb-2">
  146.                             {% set codes = WeatherInfo(daily.weather_code[k]) %}
  147.                                 <img src="/html/template/default/assets/img/weathers/{{ codes['jma_code']}}.svg">
  148.                                 <div class="">{{ codes['description'] }}</div>
  149.                             </div>
  150.                             <div class="w-100 d-flex text-center">
  151.                                 <div class="max col-6 px-2">
  152.                                     <div>最高気温</div>
  153.                                     <div class="h5">{{ daily.temperature_2m_max[k] }}℃</div>
  154.                                 </div>
  155.                                 <div class="min col-6 px-2">
  156.                                     <div>最低気温</div>
  157.                                     <div class="h5">{{ daily.temperature_2m_min[k] }}℃</div>
  158.                                 </div>
  159.                             </div>
  160.                             <div class="w-100 d-flex text-center my-2 py-2 border border-secondary border-start-0 border-end-0">
  161.                                 <div class="sunrise col-6 px-2">
  162.                                     <div>日の出</div>
  163.                                     <div class="h5">{{ daily.sunrise[k]|date('H時i分') }}</div>
  164.                                 </div>
  165.                                 <div class="sunset col-6 px-2">
  166.                                     <div>日の入</div>
  167.                                     <div class="h5">{{ daily.sunset[k]|date('H時i分') }}</div>
  168.                                 </div>
  169.                             </div>
  170.                             <div class="w-100 d-flex text-center">
  171.                                 <div class="max col-6 px-2">
  172.                                     <div>降水確率</div>
  173.                                     <div class="h5">{{ daily.precipitation_sum[k] }}%</div>
  174.                                 </div>
  175.                                 <div class="min col-6 px-2">
  176.                                     <div>最低気温</div>
  177.                                     <div class="h5">{{ daily.wind_speed_10m_max[k] }}km/h</div>
  178.                                 </div>
  179.                             </div>
  180.                         </div>
  181.                     </div>
  182.                 {% endfor %}
  183.             </div>
  184.         </div>
  185.     </section>
  186.     <section id="product_wrap" class="">
  187.         <div class="inner">
  188.             <div class="section_title"><span>販売中グッズ</span></div>
  189.         </div>
  190.         <div class="product_items">
  191.         
  192.             <div class="ec-role">
  193.                 <div class="ec-newItemRole">
  194.                     <div class="top_sales_list">
  195.                         {% for Product in products %}
  196.                             <div class="top_sales_listItem">
  197.                                 <a href="{{ url('product_detail', {'id': Product.id}) }}">
  198.                                     <div class="img_wrap">
  199.                                         <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  200.                                         <div class="sales_wrap">
  201.                                             {% if Product.ProductSales %}
  202.                                                 <div class="btn fs-6" style="color:{{ Product.ProductSales.color }};background:{{ Product.ProductSales.bg_color }};">{{ Product.ProductSales.label }}</div>
  203.                                             {% else %}
  204.                                                 <div class="btn fs-6 btn-outline-secondary">未設定</div>
  205.                                             {% endif %}
  206.                                         </div>
  207.                                     </div>
  208.                                     <p class="ec-newItemRole__listItemTitle">{{ Product.name }}</p>
  209.                                     <p class="ec-newItemRole__listItemPrice">
  210.                                     
  211.                                     {% if Product.hasProductClass %}
  212.                                         {% if Product.getPrice02Min == Product.getPrice02Max %}
  213.                                             {{ Product.getPrice02IncTaxMin|price }}
  214.                                         {% else %}
  215.                                             {{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}
  216.                                         {% endif %}
  217.                                     {% else %}
  218.                                         {{ Product.getPrice02IncTaxMin|price }}
  219.                                     {% endif %}
  220.                                     {{ '(税込)'|trans }}</p>
  221.                                 </a>
  222.                             </div>
  223.                         {% endfor %}
  224.                     </div>
  225.                 </div>
  226.             </div>
  227.         </div>
  228.     </section>
  229.     <section id="event_wrap" class="">
  230.         <div class="inner">
  231.             <div class="section_title"><span>イベント情報</span></div>
  232.             <div class="section_data d-flex flex-wrap justify-content-center">
  233.                 {% for year,values in events %}
  234.                     <div class="event_items">
  235.                         <div class="event_year">{{ year }}年度 イベント一覧</div>
  236.                         <div class="event_data">
  237.                             {% for k,v in values %}
  238.                                 <div class="row">
  239.                                     <div class="col-3">
  240.                                         <div>{{ v.day_start|date('Y.m.d') }}</div>
  241.                                         {% if v.day_end %}
  242.                                             <div>~{{ v.day_end|date('Y.m.d') }}</div>
  243.                                         {% endif %}
  244.                                     </div>
  245.                                     <div class="col-7">
  246.                                         <a href="{{ url('event_detail', {'id': v.id}) }}">{{ v.name }}
  247.                                             {% if v.sub_title %}
  248.                                                 <p>[ {{ v.sub_title }} ]</p>
  249.                                             {% endif %}
  250.                                         </a>
  251.                                     </div>
  252.                                     <div class="col-2">
  253.                                         <a href="{{ url('event_detail', {'id': v.id}) }}">詳細 >> </a>
  254.                                     </div>
  255.                                 </div>
  256.                             {% endfor %}
  257.                         </div>
  258.                     </div>
  259.                 {% endfor %}
  260.             </div>
  261.         </div>
  262.     </section>
  263.     
  264.     <section id="document_wrap" class="">
  265.         <div class="inner">
  266.             <div class="section_title"><span>申込書などダウンロード</span></div>
  267.             <div class="document_items">
  268.                 {% for k,v in documents %}
  269.                 {% if v.pdf %}
  270.                 <div class="row my-2 py-2 border-bottom border-seconday border-2 col-md-8 col-12 mx-auto">
  271.                     <div class="col-10 h5">{{ v.label }}</div>
  272.                     <div class="col-2"><a href="/html/user_data/assets/pdf/{{ v.pdf }}" target="_blank"><i class="bi bi-download"></i></a></div>
  273.                 </div>
  274.                 {% endif %}
  275.                 {% endfor %}
  276.             </div>
  277.         </div>
  278.     </section>
  279. {% endblock %}