templates/index/menu_show.html.twig line 1

Open in your IDE?
  1. {% extends 'index/layout.html.twig' %}
  3. {% block page_name %}menu_detail{% endblock %}
  5. {% block title %}{{ menu.name }}｜{{ shop.name }}{% endblock %}
  6. {% block header_title %}{{ menu.name }}{% endblock %}
  8. {% block stylesheet %}
  9.   <link rel="stylesheet" href="/css/detail.css">
  10.   <style>
  11.       [v-cloak] {
  12.           display: none;
  13.       }
  14.   </style>
  15. {% endblock %}
  17. {% block main %}
  18.   <main class="pd0 v-element">
  19. {#    <section class="details_wr">#}
  20. {#      <h1>{{ shop.name }}</h1>#}
  21. {#      <h2>{{ shop.categories|join(' / ') }}</h2>#}
  22. {#      <ul class="provide">#}
  23. {#        {% if shop.toGo %}<li>テイクアウト</li>{% endif %}#}
  24. {#        {% if shop.delivery %}<li>デリバリー</li>{% endif %}#}
  25. {#      </ul>#}
  26. {#      <ul class="time">#}
  27. {#        <li class="indication">提供時間目安 <span>{{ shop.estimatedMinutes|default('-') }}分</span></li>#}
  28. {#        <li class="start">{{ shop.hourFrom|date('H:i') }}〜{{ shop.hourTo|date('H:i') }}受付可</li>#}
  29. {#      </ul>#}
  30. {#      <div class="add">〒{{ shop.zipcode }} {{ shop.address }}</div>#}
  31. {#      #}{#<div class="map">#}
  32. {#      #}{#<div id="map-container" style="height: 150px;width: 100%;"></div>#}
  33. {#      #}{#</div>#}
  34. {#    </section>#}
  36.     <section class="add_cart_wr">
  37.         <img src="{{ menu.image }}" class="shop_img" alt="{{ menu.name }}">
  38.         <h2 class="title">{{ menu.name }}</h2>
  39.         <p class="text">{{ menu.description }}</p>
  40.         <p class="indication">提供目安時間 : <span>{{ menu.minutes|default('-') }}分</span></p>
  42.       {% if menu.shop.shopPlan.slug == constant('App\\Entity\\ShopPlan::SLUG_PAID') %}
  43.         <div class="add_cart_area">
  44.             <form action="{{ path('cart_add', {menu: menu.id}) }}" method="post" v-cloak>
  45.               <input type="hidden" name="token" value="{{ csrf_token('add-item') }}"/>
  46. {#                <input type="hidden" name="form[cart][menu]" :value="{{ menu.id }}">#}
  47.               <input type="hidden" name="cart_add_item[quantity]" :value="amount">
  48.                 <div class="add_control">
  49.                   {% if shop.acceptable %}
  50.                     <button class="add_button" type="button" @click="increment" :disabled="! canIncrement">＋</button>
  51.                     <div class="num">[[ amount ]]</div>
  52.                     <button class="delete_button" type="button" @click="decrement" :disabled="! canDecrement">ー</button>
  53.                   {% endif %}
  54.                 </div>
  55.               {% if shop.acceptable %}
  56.                 <button type="submit" name="submit" class="button">[[ amount ]]つカートに入れる　&yen;[[ numberFormat(subtotal) ]]</button>
  57.               {% else %}
  58.                 <span class="button tel out-of-service">受付時間外です</span>
  59.               {% endif %}
  60.             </form>
  61.         </div>
  62.       {% endif %}
  63.     </section>
  64.   </main>
  65. {% endblock %}
  67. {% block js %}
  68. <script>
  69.     {{ include('components/common-js.html.twig') }}
  71.     var vApp = new Vue({
  72.         el: '.v-element',
  73.         delimiters: ['[[', ']]'],
  74.         data: function () {
  75.             return {
  76.                 amount: 1,
  77.                 unitPrice: {% if menu.discountedPrice is not same as null %}{{ menu.discountedPrice | default(0) }}{% else %}{{ menu.price | default(0) }}{% endif %},
  78.             };
  79.         },
  80.         computed: {
  81.             canIncrement: function () {
  82.                 return (this.amount < 99);
  83.             },
  84.             canDecrement: function () {
  85.                 return (this.amount > 1);
  86.             },
  87.             subtotal: function () {
  88.                 return this.unitPrice * this.amount;
  89.             },
  90.         },
  91.         methods: {
  92.             numberFormat: function (value) {
  93.                 return _numberFormat(value);
  94.             },
  95.             increment: function () {
  96.                 if (this.canIncrement) {
  97.                     ++this.amount;
  98.                 }
  99.             },
  100.             decrement: function () {
  101.                 if (this.canDecrement) {
  102.                     --this.amount;
  103.                 }
  104.             },
  105.         },
  106.     });
  107. </script>
  108. {% endblock %}