app/template/user_data/shop.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% block stylesheet %}
  3. <link href="/html/plugin/AkracingShopMap/assets/lightbox/css/lightbox.min.css" rel="stylesheet" />
  4. <style>
  5. .circle a{
  6.   text-decoration:underline;
  7. }
  8. #real_shop .table table{
  9.   display: block;
  10.   overflow-x: scroll;
  11.   white-space: nowrap;
  12.   -webkit-overflow-scrolling: touch;
  13. }
  14. #real_shop .table table::-webkit-scrollbar {
  15.   width: 10px;
  16.   height: 10px;
  17. }
  19. #real_shop .table table::-webkit-scrollbar-track {
  20.   border-radius: 5px;
  21.   box-shadow: 0 0 4px #FFF inset;
  22. }
  24. /* スクロールのつまみ部分の設定 */
  25. #real_shop .table table::-webkit-scrollbar-thumb {
  26.   border-radius: 5px;
  27.   background: #FFF;
  28. }
  29. </style>
  30. {% endblock %}
  32. {% block javascript %}
  33. <script src="{{ asset('assets/js/jmap.min.js') }}"></script>
  34.     <script type = "text/javascript">
  35.         $(document).ready(function() {
  36.             $('#jmap').jmap({
  37.                 height: "450px",
  38.                 onSelect: function(e, data) {
  39.                     //console.log(e);
  40.                     //console.log(data.name);
  41.                     $(".section__inner").removeClass("active")
  43.                     if(data.name === "北海道"){
  44.                         $("#"+data.name).addClass("active");
  45.                     }else if(data.name === "東京"){
  46.                         $("#"+data.name+"都").addClass("active");
  47.                     }else if(data.name === "大阪"){
  48.                         $("#"+data.name+"府").addClass("active");
  49.                     }else if(data.name === "京都"){
  50.                         $("#"+data.name+"府").addClass("active");
  51.                     }else{
  52.                         $("#"+data.name+"県").addClass("active");
  53.                     }
  54.                     let speed = 500;
  55.                     let href= "#shop-area";
  56.                     let target = $(href == "#" || href == "" ? 'html' : href);
  57.                     let position = target.offset().top;
  58.                     $("html, body").animate({scrollTop:position}, speed, "swing");
  59.                 },
  60.             });
  62.             $(".btnlist_shop__prefecture2 a").on("click",function(){
  63.                 //console.log($(this).text());
  64.                 $(".section__inner").removeClass("active")
  65.                 let name = $(this).text();
  66.                 $("#"+ name).addClass("active");
  67.                 let speed = 500;
  68.                 let href= "#shop-area";
  69.                 let target = $(href == "#" || href == "" ? 'html' : href);
  70.                 let position = target.offset().top;
  71.                 $("html, body").animate({scrollTop:position}, speed, "swing");
  72.                 return false;
  73.             });
  76.         });
  77.     </script>
  78. {#
  79.     light box
  80.     https://it-web-life.com/jquery_lightbox/
  81.     https://it-web-life.com/jquery_lightbox/
  82. #}
  83. <script src="/html/plugin/AkracingShopMap/assets/lightbox/js/lightbox.min.js"></script>
  84. <script>
  85.     lightbox.option({
  86.       'alwaysShowNavOnTouchDevices': false,
  87.     })
  88. </script>
  89. {% endblock %}
  90. {% block main %}
  91.     <div id="shop_page">
  92.         <div class="ak-header">
  93.             <div class="ak-pageHeader">
  94.                 <h1>SHOP</h1>
  95.                 <p>AKRacing が体験できる店舗の一覧です。ネットカフェ含む</p>
  96.                 <ul class="ak-link">
  97.                     <li><a href="#real_shop"><img src="/html/user_data/shop/real_shop_btn.png" alt=""></a></li>
  98.                     <li><a href="#online_area"><img src="/html/user_data/shop/on-line_shop_btn.png" alt=""></a></li>
  99.                     <li><a href="https://www.akracing.jp/hometown"><img src="/html/user_data/shop/furusato_btn.png" alt=""></a></li>
  100.                     <li><a href="https://akracing-outletstore.square.site/" target="_blank"><img src="/html/user_data/shop/outlet_btn.png" alt=""></a></li>
  101.                     <!-- <li><a href="https://akracing-shop.square.site/"><img src="/html/user_data/shop/akracing_shop_btn.png" alt=""></a></li> -->
  102.                 </ul>
  103.             </div>
  104.         </div><!-- ak-header -->
  105.         <div id="real_shop" class="ak-body">
  106.             <div class="ak-row">
  107.                 <div class="ak-item50">
  108.                 <h2><img src="{{ asset('assets/img/shop/real_shop.png') }}" alt=""><span>チェア実店舗</sapn></h2>
  109.                 <p>こちらで紹介する店舗では、AKRacingを実際に体感（試座）いただけます。<br>ユーザーが座る位置、座面の高さから足にかかる圧力の均一化、ランバーサポート、背中を包み込む背面形状、頸部サポートアームに至る一連のデザイン開発を行い、多くの開発者とコラボレートして人間工学に基づいたゲーミングチェアを是非体感してください。</p>
  110.                 <br>
  111.                 <ul>
  112.                     <li>※店頭での展示は事情により中止ないしは機種変更となる場合がございます。<br>詳しくは各販売店様にお問合せください</li>
  113.                     <li>※店舗の在庫状況につきましては各販売店様にお問合せください</li>
  114.                 </ul>
  115.                 </div>
  116.                 <div class="ak-item50">
  117.                     <div id="jmap"></div>
  118.                 </div>
  119.             </div>
  120. <div id="anc_a1" class="section section-shop">
  121.   <div class="section__inner">
  122.     <div class="btnlist_shop__prefecture2">
  123.       <ul>
  124.         <li><p class="btnlist_shop__prefecture2-title">北海道・東北</p></li>
  125.         <li><a href="#北海道">北海道</a></li>
  126.         <li><a href="#青森県">青森県</a></li>
  127.         <li><a href="#岩手県">岩手県</a></li>
  128.         <li><a href="#宮城県">宮城県</a></li>
  129.         <li><a href="#秋田県">秋田県</a></li>
  130.         <li><a href="#山形県">山形県</a></li>
  131.         <li><a href="#福島県">福島県</a></li>
  132.       </ul>
  133.       <ul>
  134.         <li><p class="btnlist_shop__prefecture2-title">関東</p></li>
  135.         <li><a href="#茨城県">茨城県</a></li>
  136.         <li><a href="#栃木県">栃木県</a></li>
  137.         <li><a href="#群馬県">群馬県</a></li>
  138.         <li><a href="#埼玉県">埼玉県</a></li>
  139.         <li><a href="#千葉県">千葉県</a></li>
  140.         <li><a href="#東京都">東京都</a></li>
  141.         <li><a href="#神奈川県">神奈川県</a></li>
  142.       </ul>
  143.       <ul>
  144.         <li><p class="btnlist_shop__prefecture2-title">中部</p></li>
  145.         <li><a href="#新潟県">新潟県</a></li>
  146.         <li><a href="#富山県">富山県</a></li>
  147.         <li><a href="#石川県">石川県</a></li>
  148.         <li><a href="#福井県">福井県</a></li>
  149.         <li><a href="#山梨県">山梨県</a></li>
  150.         <li><a href="#長野県">長野県</a></li>
  151.         <li><a href="#岐阜県">岐阜県</a></li>
  152.         <li><a href="#静岡県">静岡県</a></li>
  153.         <li><a href="#愛知県">愛知県</a></li>
  154.       </ul>
  155.       <ul>
  156.         <li><p class="btnlist_shop__prefecture2-title">近畿</p></li>
  157.         <li><a href="#三重県">三重県</a></li>
  158.         <li><a href="#滋賀県">滋賀県</a></li>
  159.         <li><a href="#京都府">京都府</a></li>
  160.         <li><a href="#大阪府">大阪府</a></li>
  161.         <li><a href="#兵庫県">兵庫県</a></li>
  162.         <li><a href="#奈良県">奈良県</a></li>
  163.         <li><a href="#和歌山県">和歌山県</a></li>
  164.       </ul>
  165.       <ul>
  166.         <li><p class="btnlist_shop__prefecture2-title">中国</p></li>
  167.         <li><a href="#鳥取県">鳥取県</a></li>
  168.         <li><a href="#島根県">島根県</a></li>
  169.         <li><a href="#岡山県">岡山県</a></li>
  170.         <li><a href="#広島県">広島県</a></li>
  171.         <li><a href="#山口県">山口県</a></li>
  172.       </ul>
  173.       <ul>
  174.         <li><p class="btnlist_shop__prefecture2-title">四国</p></li>
  175.         <li><a href="#徳島県">徳島県</a></li>
  176.         <li><a href="#香川県">香川県</a></li>
  177.         <li><a href="#愛媛県">愛媛県</a></li>
  178.         <li><a href="#高知県">高知県</a></li>
  179.       </ul>
  180.       <ul>
  181.         <li><p class="btnlist_shop__prefecture2-title">九州</p></li>
  182.         <li><a href="#福岡県">福岡県</a></li>
  183.         <li><a href="#佐賀県">佐賀県</a></li>
  184.         <li><a href="#長崎県">長崎県</a></li>
  185.         <li><a href="#熊本県">熊本県</a></li>
  186.         <li><a href="#大分県">大分県</a></li>
  187.         <li><a href="#宮崎県">宮崎県</a></li>
  188.         <li><a href="#鹿児島県">鹿児島県</a></li>
  189.         <li><a href="#沖縄県">沖縄県</a></li>
  190.       </ul>
  191.     </div>
  192.   </div>
  193. </div>
  195. <div id="shop-area">
  197. {% set Prefectures = repository('Plugin\\AkracingShopMap\\Entity\\Prefecture').getList() %}
  198. {% for Prefecture in Prefectures %}
  199. <section class="section section-lower">
  200.   <div id="{{Prefecture.prefecture}}" class="section__inner section-lower--border">
  201.     <h2 class="heading_lower">
  202.       <span class="heading__en">AREA</span>
  203.       <span class="heading__ja">{{Prefecture.prefecture}}</span>
  204.     </h2>
  205.     <div class="table table_03">
  206.       <table>
  207.         <tbody>
  208.           <tr>
  209.             <th>店舗名</th>
  210.             <th>住所</th>
  211.             <th>電話</th>
  212.             <th>店舗種別</th>
  213.             <th class="circle">展示</th>
  214.             <th class="circle">販売</th>
  215.           </tr>
  216.           {% set Shops = repository('Plugin\\AkracingShopMap\\Entity\\ShopList').getShopList(Prefecture) %}
  217.           {# dump(Shops) #}
  218.           {% for Shop in Shops %}
  219.           
  220.           <tr>
  221.             <td>{{Shop.name|nl2br}}</td>
  222.             <td class="line3">
  223.               〒{{Shop.zip}} <br />{{Shop.address|nl2br}} {# dump(Shop) #}
  224.             </td>
  225.             <td>{{Shop.tel|nl2br}}</td>
  226.             <td>{{Shop.categoryName|nl2br}}</td>
  227.             <td class="circle circle_01">
  228.               {% set imgFlag = 0 %}
  229.               {% set imgSrc = "" %}
  230.               {% for display in Shop.ShopImage %}
  231.               
  232.                 {% set imgFlag = 1 %}
  233.                 {% if loop.first %}
  234.                   {% set imgSrc = display.file_name %}
  235.                   <a href="{{ asset(display.file_name|no_image_product, 'save_image') }}" data-lightbox="img-{{Shop.id}}">{{Shop.display|nl2br}}</a>
  236.                 {% else %}
  237.                   <a href="{{ asset(display.file_name|no_image_product, 'save_image') }}" data-lightbox="img-{{Shop.id}}"></a>
  238.                 {% endif %}
  239.               {% endfor %}
  241.               {% if imgFlag == 0 %}
  242.               {{Shop.display|nl2br}}
  243.               {% endif %}
  244.               
  245.             </td>
  246.             <td class="circle circle_02">
  247.               {% if Shop.shopOrder == 0 %}〇{% endif %}
  248.             </td>
  249.           </tr>
  250.           {% endfor %}
  251.         </tbody>
  252.       </table>
  253.     </div>
  254.   </div>
  255. </section>
  256. {% endfor %}
  257. </div><!-- #shop-area -->
  265. <div id="online_area" style="margin-bottom:100px">
  266.     <h2><img src="{{ asset('assets/img/shop/title02.png') }}" alt=""><span>チェア オンラインショップ</sapn></h2>
  267.     <ul>
  268.         <li><a href="https://www.amazon.co.jp/akracing" target="_blank"><img src="{{ asset('shop/logo00.jpg', 'user_data') }}"></a></li>
  269.         <li><a href="http://item.rakuten.co.jp/mousecomputer/" target="_blank"><img src="{{ asset('shop/logo01.jpg', 'user_data') }}"></a></li>
  270.         <li><a href="https://www.pc-koubou.jp/pc/akracing.php" target="_blank"><img src="{{ asset('shop/logo02.jpg', 'user_data') }}"></a></li>
  271.         <li><a href="https://www.forest.co.jp/" target="_blank"><img src="{{ asset('shop/logo03.jpg', 'user_data') }}"></a></li>
  272.         <li><a href="https://www.monotaro.com/" target="_blank"><img src="{{ asset('shop/logo04.jpg', 'user_data') }}"></a></li>
  273.         <li><a href="https://www.e-zoa.com/index.htm" target="_blank"><img src="{{ asset('shop/logo05.jpg', 'user_data') }}"></a></li>
  274.         <li><a href="https://shop.applied-net.co.jp/" target="_blank"><img src="{{ asset('shop/logo06.jpg', 'user_data') }}"></a></li>
  275.         <li><a href="https://www.premoa.co.jp/" target="_blank"><img src="{{ asset('shop/logo07.jpg', 'user_data') }}"></a></li>
  276.         <li><a href="https://shop.tsukumo.co.jp/" target="_blank"><img src="{{ asset('shop/logo08.jpg', 'user_data') }}"></a></li>
  277.         <li><a href="https://item.rakuten.co.jp/machida/c/0000002862/" target="_blank"><img src="{{ asset('shop/logo10.jpg', 'user_data') }}"></a></li>
  278.         <li><a href="https://www.edion.com/" target="_blank"><img src="{{ asset('shop/edion.jpg', 'user_data') }}"></a></li>
  279.         <li><a href="https://www.biccamera.com/bc/main/" target="_blank"><img src="{{ asset('shop/bigcamera.jpg', 'user_data') }}"></a></li>
  280.         <li><a href="https://www.sofmap.com/" target="_blank"><img src="{{ asset('shop/sofmap.jpg', 'user_data') }}"></a></li>
  281.         <li><a href="https://www.kojima.net/ec/" target="_blank"><img src="{{ asset('shop/kojima.jpg', 'user_data') }}"></a></li>
  282.         <li><a href="https://www.ksdenki.com/shop/pages/special_210034_6.aspx" target="_blank"><img src="/html/user_data/shop/ks_shop.png"></a></li>
  283.         <li><a href="https://joshinweb.jp/top.html" target="_blank"><img src="/html/user_data/shop/joshinwebshop_logo.jpg"></a></li>
  284.         <li><a href="https://www.rakuten.ne.jp/gold/office-com/" target="_blank"><img src="/html/user_data/shop/office-com.png"></a></li>
  285.         <li><a href="https://www.e-trend.co.jp/search/search.php?kw=AKRacing" target="_blank"><img src="/html/user_data/shop/e-trend.jpg"></a></li>
  286.         <li><a href="https://www.dmm.com/mono/kaden/-/list/=/article=maker/id=303969/" target="_blank"><img src="/html/user_data/shop/dmm.jpg"></a></li>
  287.         <li><a href="https://item.rakuten.co.jp/rakuteneagles/n2100003/" target="_blank"><span style="color:#000000;line-height:60px;">[ 楽天イーグルス オンラインショップ ]</span></a></li>
  288.         <li><a href="https://official-store.jfa.jp/goods_detail.php?id=1084" target="_blank"><span style="color:#000000;line-height:60px;">[ JFA STORE ]</span></a></li>
  289.         <li><a href="https://bs.benefit-one.co.jp/shop/index.php" target="_blank"><span style="color:#000000;line-height:60px;">[ ベネ通販 ]</span></a></li>
  290.         
  291.     </ul>
  292.     
  293. </div>
  295. <div id="online_area">
  296.     <h2><img src="/html/user_data/shop/title04.png" alt=""><span>アウトレット ストア</sapn></h2>
  297.     <ul>
  298.         <li><a href="https://akracing-outletstore.square.site/" target="_blank"><img src="/html/user_data/shop/akracing_outletstore_logo_color.png"></a></li>
  300.     </ul>
  301.     
  302. </div>
  305.         </div>
  306.     </div>
  307. {% endblock %}