app/template/osechi/Product/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set body_class = 'product_page' %}
  5. {% block javascript %}
  6. <script>
  7. $(function(){
  8.     $('.ec-topicpath a').on('click',function(){
  9.         $('.ec-topicpath div').removeClass('active');
  10.         $(this).parent().addClass('active');
  12.         tid=$(this).attr('id');
  13.          if('all' == tid) {
  14.              $('.ec-shelfRole.list').show();
  15.          } else {
  16.             $('.ec-shelfRole.list').hide();
  17.             $('.ec-shelfRole.list#'+tid).show();
  18.          }
  19.          console.log('.ec-shelfRole.list#'+tid);
  20.     });
  21. });
  22. </script>
  23. {% endblock %}
  25. {% block stylesheet %}
  26.     <link rel="stylesheet" href="{{ asset('assets/css/products.css') }}?{{ env('CSS_PARAM') }}">
  27. {% endblock %}
  30. {% set ProductsSuperCar = 
  31.     [
  32. 5,
  33. 6,
  34. 30,
  35. 20,
  36. 1,
  37. 4,
  38. 25,
  39. 63,
  40. 69,
  41. 72,
  42. 73,
  43. 74,
  44. 75,
  45. 71,
  46. 47,
  47. 53,
  48. 21,
  49. 19,
  50. 24,
  51. 22,
  52. 23,
  53. 57,
  54. 27,
  55. 26,
  56.     ]
  57. %}
  59. {% set ProductsJdm = 
  60.     [
  61. 6,
  62. 77,
  63. 72,
  64. 73,
  65. 76,
  66. 74,
  67. 75,
  68. 71,
  69. 26,
  70.     ]
  71. %}
  73. {% set ProductsSuv = 
  74.     [
  75. 8,
  76. 10,
  77. 37,
  78. 9,
  79. 68,
  80. 64,
  81. 66,
  82. 32,
  83. 7,
  84. 29,
  85. 28,
  86. 33,
  87. 50,
  88. 65,
  89. 51,
  90. 48,
  91. 49,
  92.     ]
  93. %}
  95. {% set ProductsClasic = 
  96.     [
  97.         11,
  98.         13,
  99.         2,
  100.         12,
  101.     ]
  102. %}
  104. {% set ProductsBoat = 
  105.     [
  106.         14,
  107.         16,
  108.         78,
  109.         15,
  110.         17,
  111.     ]
  112. %}
  115. {% set ProductsHelicopter = 
  116.     [
  117.         18,
  118.         56,
  119.         58,
  120.         36,
  121.     ]
  122. %}
  124. {% set ownerflg = "false" %}
  125. {% if app.request.query.get('supermario') == 'luigi' %}
  126. {#
  127. {% set ownerflg = "true" %}
  128. #}
  129. {% endif %}
  134. {% block main %}
  135. <div class="ec-layoutRole__contents">
  136.     <main class="ec-layoutRole__main">
  137.         <form name="form1" id="form1" method="get" action="?">
  138.             <input type="hidden" id="mode" name="mode">
  139.             <input type="hidden" id="category_id" name="category_id">
  140.             <input type="hidden" id="name" name="name">
  141.             <input type="hidden" id="pageno" name="pageno">
  142.             <input type="hidden" id="disp_number" name="disp_number" value="20">
  143.             <input type="hidden" id="orderby" name="orderby" value="1">
  144.         </form>
  146.         <!-- ▼ カテゴリヘッド -->
  147.         <div class="ec-categoryHeadRole">
  148.             <div class="ec-categoryHeadRole__image" style="display: block;">
  149.                 <picture>
  150.                     <source media="(max-width:767px)" srcset="/awd/html/template/osechi/assets/img/sample/category_head_0_sp.jpg?20230921">
  151.                     <source media="(min-width:768px)" srcset="/awd/html/template/osechi/assets/img/sample/category_head_0.jpg">
  152.                     <img src="/awd/html/template/osechi/assets/img/sample/category_head_0.jpg" alt="商品ラインナップ">
  153.                 </picture>
  154.             </div>
  156.             <div class="ec-categoryHeadRole__content">
  157.                 <h1 class="title">Introducing A Wonderful Day's Mobility Lineup</h1>
  158.                 <div class="description">
  159. <p>These are the companions of your finest moments. With your choice of mobility, you can elevate your travel memories to the extraordinary. From classic cars to supercars, SUVs, pleasure boats, helicopters, the possibilities and options are limitless!!</p>
  160.                 </div>
  161.             </div>
  162.         </div>
  163.         <!-- ▲ カテゴリヘッド -->
  165. {#
  166.         <!-- ▼ .ec-searchnavRole -->
  167.         <div class="ec-searchnavRole">
  168.             <div class="ec-searchnavRole__inner">
  169.                 <div class="ec-topicpath">
  170.                     <div class="category active appearEffect">
  171.                         <a href="javascript:void(0)" id="all">
  172.                             <p>
  173.                                 all<br>mobility
  174.                             </p>
  175.                         </a>
  176.                     </div>
  177.                     <div class="appearEffect">
  178.                         <a href="javascript:void(0)" id="supercar">
  179.                             <img src="/awd/html/template/osechi/assets/img/products/icon_supercar.png" alt="super car">
  180.                             <p>Super Car</p>
  181.                         </a>
  182.                     </div>
  183.                     <div class="appearEffect">
  184.                         <a href="javascript:void(0)" id="suv">
  185.                             <img src="/awd/html/template/osechi/assets/img/products/icon_svu.png" alt="suv">
  186.                             <p>SUV</p>
  187.                         </a>
  188.                     </div>
  189.                     <div class="appearEffect">
  190.                         <a href="javascript:void(0)" id="clasiccar">
  191.                             <img src="/awd/html/template/osechi/assets/img/products/icon_classiccar.png" alt="clasic car">
  192.                             <p>Clasic Car</p>
  193.                         </a>
  194.                     </div>
  195.                     <div class="appearEffect">
  196.                         <a href="javascript:void(0)" id="boat">
  197.                             <img src="/awd/html/template/osechi/assets/img/products/icon_boat.png" alt="boat">
  198.                             <p>boat</p>
  199.                         </a>
  200.                     </div>
  201.                     <div class="appearEffect">
  202.                         <a href="javascript:void(0)" id="helicopter">
  203.                             <img src="/awd/html/template/osechi/assets/img/products/icon_helicopter.png" alt="helicopter">
  204.                             <p>helicopter</p>
  205.                         </a>
  206.                     </div>
  207.                 </div>
  208.             </div>
  209.         </div>
  210.         <!-- ▲ .ec-searchnavRole -->
  211. #}
  213.         <!-- ▼ 商品一覧 -->
  214.         <div class="ec-shelfRole list anchor" id="supercar">
  215.             <div class="category-title appearEffect">
  216.                 <img src="/awd/html/template/osechi/assets/img/products/icon_supercar.png" alt="Super Car">
  217.                 <span>Super Car</span>
  218.             </div>
  219.             <ul class="ec-shelfGrid col_max5 ready">
  220. {% for id in ProductsSuperCar %}
  221.                 <!-- ▼ 商品単位 -->
  222.                 <li class="ec-shelfGrid__item">
  223.                     <div class="ec-productItemRole appearEffect">
  224.                         <div class="ec-productItemRole__image">
  225.                             <a href="/awd/products/detail/{{ products[id].id }}">
  226.                                 <img src="/awd/html/upload/save_image/{{ products[id].file_name }}?{{ env('JS_PARAM') }}" alt="{{ products[id].name }} {{ products[id].search_word }}">
  227.                             </a>
  228.                         </div>
  229.                         <div class="ec-productItemRole__content">
  230.                             <h3 class="ec-productItemRole__title">
  231.                                 <span>
  232.                                     {% if ownerflg %}
  233. {#
  234.                                         {{products[id].item16}}
  235. #}
  236.                                     {% endif %}
  237.                                     {{ products[id].name }}
  238.                                 </span>
  239.                             </h3>
  240. <div class="status-icon">
  241. {% if products[id].item19 or products[id].item22 %}
  242. <a href="{{url('rental')}}"><span>#Rental</span></a>
  243. {% endif %}
  244. {% if products[id].item14 %}
  245. <a href="{{url('drive')}}"><span>#Experience</span></a>
  246. {% endif %}
  247. </div>
  248. {#
  249.                             <div class="ec-productItemRole__price">
  250.                                 <div class="ec-price"> <span class="ec-price__price">3,080～</span></div>
  251.                             </div>
  252. #}
  253.                         </div>
  254.                     </div>
  255.                 </li>
  256.                 <!-- ▲ 商品単位 -->
  257. {% endfor %}
  258.             </ul>
  259.         </div>
  260.         <div class="ec-pagerRole"> </div>
  261.         <!-- ▲ 商品一覧 -->
  264.         <!-- ▼ 商品一覧 -->
  265.         <div class="ec-shelfRole list anchor" id="supercar">
  266.             <div class="category-title appearEffect" style="padding-top: 5%;">
  267. {#
  268.                 <img src="/awd/html/template/osechi/assets/img/products/icon_supercar.png" alt="Super Car">
  269. #}
  270.                 <span>JDM</span>
  271.             </div>
  272.             <ul class="ec-shelfGrid col_max5 ready">
  273. {% for id in ProductsJdm %}
  274.                 <!-- ▼ 商品単位 -->
  275.                 <li class="ec-shelfGrid__item">
  276.                     <div class="ec-productItemRole appearEffect">
  277.                         <div class="ec-productItemRole__image">
  278.                             <a href="/awd/products/detail/{{ products[id].id }}">
  279.                                 <img src="/awd/html/upload/save_image/{{ products[id].file_name }}?{{ env('JS_PARAM') }}" alt="{{ products[id].name }} {{ products[id].search_word }}">
  280.                             </a>
  281.                         </div>
  282.                         <div class="ec-productItemRole__content">
  283.                             <h3 class="ec-productItemRole__title">
  284.                                 <span>
  285.                                     {% if ownerflg %}
  286. {#
  287.                                         {{products[id].item16}}
  288. #}
  289.                                     {% endif %}
  290.                                     {{ products[id].name }}
  291.                                 </span>
  292.                             </h3>
  293. <div class="status-icon">
  294. {% if products[id].item19 or products[id].item22 %}
  295. <a href="{{url('rental')}}"><span>#Rental</span></a>
  296. {% endif %}
  297. {% if products[id].item14 %}
  298. <a href="{{url('drive')}}"><span>#Experience</span></a>
  299. {% endif %}
  300. </div>
  301.                         </div>
  302.                     </div>
  303.                 </li>
  304.                 <!-- ▲ 商品単位 -->
  305. {% endfor %}
  306.             </ul>
  307.         </div>
  308.         <div class="ec-pagerRole"> </div>
  309.         <!-- ▲ 商品一覧 -->
  311.         <!-- ▼ 商品一覧 -->
  312.         <div class="ec-shelfRole list anchor" id="suv">
  313.             <div class="category-title appearEffect">
  314.                 <img src="/awd/html/template/osechi/assets/img/products/icon_svu.png" alt="suv">
  315.                 <span>SUV</span>
  316.             </div>
  317.             <ul class="ec-shelfGrid col_max5 ready">
  318. {% for id in ProductsSuv %}
  319.                 <!-- ▼ 商品単位 -->
  320.                 <li class="ec-shelfGrid__item">
  321.                     <div class="ec-productItemRole appearEffect">
  322.                         <div class="ec-productItemRole__image">
  323.                             <a href="/awd/products/detail/{{ products[id].id }}">
  324. {#
  325. {% if products[id].id==64 or products[id].id==66 %}
  326.                                 <span class="sell-icon off-rate" style="background-color: #f4352d;position: absolute;padding: 0 5px;z-index: 10;color: #fff;font-size: 1.2rem;">New Snow tire！</span>
  327. {% endif %}
  328. #}
  329.                                 <img src="/awd/html/upload/save_image/{{ products[id].file_name }}?{{ env('JS_PARAM') }}" alt="{{ products[id].name }} {{ products[id].search_word }}">
  330.                             </a>
  331.                         </div>
  332.                         <div class="ec-productItemRole__content">
  333.                             <h3 class="ec-productItemRole__title">
  334.                                 <span>
  335.                                     {% if ownerflg %}
  336. {#
  337.                                         {{products[id].item16}}
  338. #}
  339.                                     {% endif %}
  340.                                     {{ products[id].name }}
  341.                                 </span>
  342.                             </h3>
  343. <div class="status-icon">
  344. {% if products[id].item19 or products[id].item22 %}
  345. <a href="{{url('rental')}}"><span>#Rental</span></a>
  346. {% endif %}
  347. {% if products[id].item14 %}
  348. <a href="{{url('drive')}}"><span>#Experience</span></a>
  349. {% endif %}
  350. </div>
  351. {#
  352.                             <div class="ec-productItemRole__price">
  353.                                 <div class="ec-price"> <span class="ec-price__price">3,080～</span></div>
  354.                             </div>
  355. #}
  356.                         </div>
  357.                     </div>
  358.                 </li>
  359.                 <!-- ▲ 商品単位 -->
  360. {% endfor %}
  361.             </ul>
  362.         </div>
  363.         <div class="ec-pagerRole"> </div>
  364.         <!-- ▲ 商品一覧 -->
  366.         <!-- ▼ 商品一覧 -->
  367.         <div class="ec-shelfRole list anchor" id="clasiccar">
  368.             <div class="category-title appearEffect">
  369.                 <img src="/awd/html/template/osechi/assets/img/products/icon_classiccar.png" alt="classiccar">
  370.                 <span>Classic car</span>
  371.             </div>
  372.             <ul class="ec-shelfGrid col_max5 ready">
  373. {% for id in ProductsClasic %}
  374.                 <!-- ▼ 商品単位 -->
  375.                 <li class="ec-shelfGrid__item">
  376.                     <div class="ec-productItemRole appearEffect">
  377.                         <div class="ec-productItemRole__image">
  378.                             <a href="/awd/products/detail/{{ products[id].id }}">
  379.                                 <img src="/awd/html/upload/save_image/{{ products[id].file_name }}?{{ env('JS_PARAM') }}" alt="{{ products[id].name }} {{ products[id].search_word }}">
  380.                             </a>
  381.                         </div>
  382.                         <div class="ec-productItemRole__content">
  383.                             <h3 class="ec-productItemRole__title">
  384.                                 <span>
  385.                                     {% if ownerflg %}
  386. {#
  387.                                         {{products[id].item16}}
  388. #}
  389.                                     {% endif %}
  390.                                     {{ products[id].name }}
  391.                                 </span>
  392.                             </h3>
  393. <div class="status-icon">
  394. {% if products[id].item19 or products[id].item22 %}
  395. <a href="{{url('rental')}}"><span>#Rental</span></a>
  396. {% endif %}
  397. {% if products[id].item14 %}
  398. <a href="{{url('drive')}}"><span>#Experience</span></a>
  399. {% endif %}
  400. </div>
  401. {#
  402.                             <div class="ec-productItemRole__price">
  403.                                 <div class="ec-price"> <span class="ec-price__price">3,080～</span></div>
  404.                             </div>
  405. #}
  406.                         </div>
  407.                     </div>
  408.                 </li>
  409.                 <!-- ▲ 商品単位 -->
  410. {% endfor %}
  411.             </ul>
  412.         </div>
  413.         <div class="ec-pagerRole"> </div>
  414.         <!-- ▲ 商品一覧 -->
  416.         <!-- ▼ 商品一覧 -->
  417.         <div class="ec-shelfRole list anchor" id="boat">
  418.             <div class="category-title appearEffect">
  419.                 <img src="/awd/html/template/osechi/assets/img/products/icon_boat.png" alt="boat">
  420.                 <span>Boat</span>
  421.             </div>
  422.             <ul class="ec-shelfGrid col_max5 ready">
  423. {% for id in ProductsBoat %}
  424.                 <!-- ▼ 商品単位 -->
  425.                 <li class="ec-shelfGrid__item">
  426.                     <div class="ec-productItemRole appearEffect">
  427.                         <div class="ec-productItemRole__image">
  428.                             <a href="/awd/products/detail/{{ products[id].id }}">
  429.                                 <img src="/awd/html/upload/save_image/{{ products[id].file_name }}?{{ env('JS_PARAM') }}" alt="{{ products[id].name }} {{ products[id].search_word }}">
  430.                             </a>
  431.                         </div>
  432.                         <div class="ec-productItemRole__content">
  433.                             <h3 class="ec-productItemRole__title">
  434.                                 <span>
  435.                                     {% if ownerflg %}
  436. {#
  437.                                         {{products[id].item16}}
  438. #}
  439.                                     {% endif %}
  440.                                     {{ products[id].name }}
  441.                                 </span>
  442.                             </h3>
  443. {#
  444.                             <div class="ec-productItemRole__price">
  445.                                 <div class="ec-price"> <span class="ec-price__price">3,080～</span></div>
  446.                             </div>
  447. #}
  448.                         </div>
  449.                     </div>
  450.                 </li>
  451.                 <!-- ▲ 商品単位 -->
  452. {% endfor %}
  453.             </ul>
  454.         </div>
  455.         <div class="ec-pagerRole"> </div>
  456.         <!-- ▲ 商品一覧 -->
  458.         <!-- ▼ 商品一覧 -->
  459.         <div class="ec-shelfRole list anchor" id="helicopter">
  460.             <div class="category-title appearEffect">
  461.                 <img src="/awd/html/template/osechi/assets/img/products/icon_helicopter.png" alt="helicopter">
  462.                 <span>Helicopter</span>
  463.             </div>
  464.             <ul class="ec-shelfGrid col_max5 ready">
  465. {% for id in ProductsHelicopter %}
  466.                 <!-- ▼ 商品単位 -->
  467.                 <li class="ec-shelfGrid__item">
  468.                     <div class="ec-productItemRole appearEffect">
  469.                         <div class="ec-productItemRole__image">
  470.                             <a href="/awd/products/detail/{{ products[id].id }}">
  471.                                 <img src="/awd/html/upload/save_image/{{ products[id].file_name }}?{{ env('JS_PARAM') }}" alt="{{ products[id].name }} {{ products[id].search_word }}">
  472.                             </a>
  473.                         </div>
  474.                         <div class="ec-productItemRole__content">
  475.                             <h3 class="ec-productItemRole__title">
  476.                                 <span>
  477.                                     {% if ownerflg %}
  478. {#
  479.                                         {{products[id].item16}}
  480. #}
  481.                                     {% endif %}
  482.                                     {{ products[id].name }}
  483.                                 </span>
  484.                             </h3>
  485. {#
  486.                             <div class="ec-productItemRole__price">
  487.                                 <div class="ec-price"> <span class="ec-price__price">3,080～</span></div>
  488.                             </div>
  489. #}
  490.                         </div>
  491.                     </div>
  492.                 </li>
  493.                 <!-- ▲ 商品単位 -->
  494. {% endfor %}
  495.             </ul>
  496.         </div>
  497.         <div class="ec-pagerRole"> </div>
  498.         <!-- ▲ 商品一覧 -->
  502. </div>
  503. {% endblock %}