templates/category/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Hello CategoryController!
  4. {% endblock %}
  6. {% block body %}
  7.     <div class="container">
  8.         <br>
  9.         <h1>{{category.name}}</h1>
  10.         <br>
  11.         {% set i=0 %}
  12.         <div class="row">
  13.             {% for article in articles %}
  14.                 {% set i=i+1 %}
  15.                 <div class="col-3">
  16.                     <div class="card">
  17.                         <img class="card-img-top" src="{{asset('uploads/') ~ article.image}}" alt="Card image cap" height="200px">
  18.                         <div class="card-body">
  19.                             <a href="{{path('app_detail', {'id':article.id})}}">
  20.                                 <h5 class="card-title">{{article.name}}</h5>
  21.                             </a>
  22.                             <p class="card-text">{{article.category}}</p>
  23.                         </div>
  24.                         {% if article.quantity < article.warnining %}
  25.                             <div class="card-footer bg-danger">
  26.                             {% else %}
  27.                                 <div class="card-footer">
  28.                                 {% endif %}
  29.                                 <small class="text-muted">
  30.                                     <div class="input-group js-count">
  31.                                         <span class="input-group-btn">
  32.                                             <a href="{{path('article_minus', {'id':article.id})}}" class="btn btn-link js-count js-count {{article.id}}">
  33.                                                 <button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="quant[2]">
  34.                                                     <span class="fa fa-minus"></span>
  35.                                                 </button>
  36.                                             </a>
  37.                                         </span>
  38.                                         <h5>
  39.                                             <span class="js-count" id="js{{article.id}}" min="0">{{article.quantity}}</span>
  40.                                         </h5>
  41.                                         <span class="input-group-btn">
  42.                                             <a href="{{ path('article_add', {'id':article.id})}}" class="btn btn-link js-count {{article.id}}">
  43.                                                 <button type="button" class="btn btn-success " data-type="plus" data-field="quant[2]">
  44.                                                     <span class="fa fa-plus"></span>
  45.                                                 </button>
  46.                                             </a>
  47.                                         </span>
  48.                                     </div>
  49.                                 </small>
  50.                             </div>
  51.                         </div>
  52.                     </div>
  53.                     {% if i % 4 == 0 %}
  54.                     </div>
  55.                     <br><br>
  56.                     <div class="row">
  57.                     {% endif %}
  58.                 {% endfor %}
  60.             </div>
  61.         </div>
  64.         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  65.         <script>
  66.             function onClickBtnCount(event) {
  67. event.preventDefault();
  68. const url = this.href;
  69. console.log(url);
  70. axios.get(url).then(function (response) {
  71. console.log(response);
  72. const spanCount = document.querySelector("#js" + response.data.id);
  73. spanCount.textContent = response.data.quantity;
  74. }).catch(function (error) {
  75. console.log(error);
  76. });
  77. }
  78. document.querySelectorAll('span.input-group-btn > a.js-count').forEach(function (link) {
  79. link.addEventListener('click', onClickBtnCount);
  80. })
  81.         </script>
  82.     </div>
  83. {% endblock %}