templates/product/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}
  4.     {{'page.product.Product'|trans}}
  5. {% endblock %}
  6. {% block bodyClass %}product
  7. {% endblock %}
  9. {% block body %}
  10.     <div class="list">
  11.         <div class="list__header">
  12.             <h2 class="list__title">{{'page.product.list.title'|trans}}</h2>
  13.             <div class="list__action">
  14.                 <a href="{{url('app_product_new')}}" class="btn btn__primary--line btn--sizeM">{{'page.product.new'|trans}}</a>
  15.             </div>
  16.         </div>
  18.         <div class="list__list">
  19.             <div class="list__head">
  20.                 <div class="list__row">
  21.                     <div class="list__item"></div>
  22.                     <div class="list__item">{{'entity.product.field.ID'|trans}}</div>
  23.                     <div class="list__item">{{'entity.product.field.Image'|trans}}</div>
  24.                     <div class="list__item">{{'entity.product.field.Reference'|trans}}</div>
  25.                     <div class="list__item item__brand">{{'entity.product.field.Brand'|trans}}</div>
  26.                     <div class="list__item item__productName">{{'entity.product.field.Name'|trans}}</div>
  28.                     {# {% for lang in langs %}
  29.                         <div class="list__item item__nameLang lang__ico">
  30.                             <img src="/image/svg/ico_{{lang.icu}}.svg" alt="{{lang.icu}}">
  31.                         </div>
  32.                     {% endfor %} #}
  33.                     <div class="list__item item__action"></div>
  34.                 </div>
  35.                 <div class="list__row list__search">
  36.                     <div class="list__item multidelete" data-multidelete-url="{{url('app_product_delete_multiple')}}">
  37.                         <span class="btn btn--sizeXS btn__primary--line">{{'entity.general.delete'|trans}}</span>
  38.                     </div>
  39.                     <div class="list__item list__item--search">
  40.                         <input type="text" data-search-item="id" class="input input--sizeS input--search" placeholder="{{'entity.product.field.ID'|trans}}">
  41.                     </div>
  42.                     <div class="list__item list__item--search"></div>
  43.                     <div class="list__item list__item--search">
  44.                         <input type="text" data-search-item="reference" class="input input--sizeS input--search" placeholder="{{'entity.product.field.Reference'|trans}}">
  45.                     </div>
  46.                     <div class="list__item list__item--search">
  47.                         <input type="text" data-search-item="brand" class="input input--sizeS input--search" placeholder="{{'entity.product.field.Brand'|trans}}">
  48.                     </div>
  49.                     <div class="list__item list__item--search">
  50.                         <input type="text" data-search-item="name" class="input input--sizeS input--search" placeholder="{{'entity.product.field.Name'|trans}}">
  51.                     </div>
  52.                     {# {% for lang in langs %} #}
  53.                         <div class="list__item list__item--search item__nameLang lang__ico"></div>
  54.                     {# {% endfor %} #}
  55.                     <div class="list__item item__action list__item--search">
  56.                         <span class="btn btn__primary--line btn--sizeS searchReset">{{"search.Reset"|trans}}</span>
  57.                     </div>
  58.                 </div>
  60.             </div>
  61.             <div class="list__body">
  62.                 {% for product in products %}
  63.                     <div class="list__row" data-search-id="{{product.id|lower}}" data-search-brand="{{product.brand|lower}}" data-search-reference="{{product.reference|lower}}" data-search-name="{% for productLang in product.productLangs %}{% if productLang.lang == userInterfaceLang %}{{productLang.name|lower}}{% endif %}{% endfor %}">
  65.                         <div class="list__item input_group--checkbox item__multiDelete">
  66.                             <input type="checkbox" id="itemDelete{{product.id}}" name="itemDelete[]" value="{{product.id}}" class="multiDelete__checkbox">
  67.                             <label for="itemDelete{{product.id}}" class="multiDelete__label"></label>
  68.                         </div>
  69.                         <div class="list__item item__productId">{{product.id}}</div>
  70.                         <div class="list__item item__productImage">
  71.                             {% set imageDisplayed = false %}
  72.                             {% for productImage in product.image %}
  73.                                 {% if productImage.cover == 1 and imageDisplayed == false %}
  74.                                     <img width="75" loading="lazy" src="/image/products/{{productImage.name}}" data-image-id="{{productImage.id}}" data-image-description="{{productImage.description}}" data-image-cover="{{productImage.cover}}">
  75.                                     {% set imageDisplayed = true %}
  76.                                 {% endif %}
  77.                             {% endfor %}
  78.                         </div>
  79.                         <div class="list__item item__productReference">{{product.reference}}</div>
  80.                         <div class="list__item item__productBrand">{{product.brand}}</div>
  81.                         <div class="list__item item__productName">
  82.                             {% for productLang in product.productLangs %}
  83.                                 {% if productLang.lang == userInterfaceLang %}
  84.                                     <p>{{productLang.name}}</p>
  85.                                 {% endif %}
  86.                             {% endfor %}
  87.                         </div>
  88.                         <div class="list__item item__nameLang">
  89.                             {% for lang in langs %}
  90.                                 {% for productLang in product.productLangs %}
  91.                                     {% if productLang.lang == lang %}
  92.                                         <div class="langProgression {% if productLang.progression > 98 %}langProgression--green{% elseif productLang.progression > 74 %}langProgression--yellow{% else %}langProgression--red{% endif %}" data-lang="{{lang.id}}">
  93.                                             <div class="langProgression__identity">
  94.                                                 <div class="langProgression__name">
  95.                                                     <span>{{lang.icu}}</span>
  96.                                                 </div>
  97.                                                 <div class="langProgression__ico"><img src="/image/svg/ico_{{lang.icu}}.svg"></div>
  98.                                             </div>
  99.                                             <div class="langProgression__progression">{{productLang.progression}}%</div>
  100.                                         </div>
  101.                                     {% endif %}
  102.                                 {% endfor %}
  103.                             {% endfor %}
  104.                         </div>
  105.                         <div class="list__item item__actions">
  106.                             <div class="item__action">
  107.                                 <span class="list__action list__action--sync" data-action-name="{{'page.product.list.action.Sync'|trans}}" data-product-id="{{product.id}}">
  108.                                     {% include "svg/arrow-rotate.svg" %}
  109.                                 </span>
  110.                                 <a href="{{url('app_product_edit',{'id':product.id})}}" data-action-name="{{'page.product.list.action.Edit'|trans}}" class="list__action">
  111.                                     {% include "svg/pen.svg" %}
  112.                                 </a>
  113.                                 {% include "product/_delete.html.twig" %}
  114.                             </div>
  116.                         </div>
  117.                     </div>
  118.                 {% endfor %}
  119.             </div>
  120.         </div>
  121.         <a href="#breadcrumb" class="list__toTop">
  122.             <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewbox="0 0 384 512"><path d="M203.3 36.7c-6.2-6.2-16.4-6.2-22.6 0l-176 176c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L176 86.6V464c0 8.8 7.2 16 16 16s16-7.2 16-16V86.6L356.7 235.3c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-176-176z"/></svg>
  123.         </a>
  124.     </div>
  126.     <div class="modal">
  127.         <form method="POST" action="{{url('app_product_sync')}}" class="modal__wrapper">
  128.             <input type="hidden" name="productId" id="inputProductId" value="0">
  129.             <h2 class="modal__title">Sync product</h2>
  130.             <section class="modal__section">
  131.                 <h3 class="modal__sectionTitle">Select the web sites where your want sync the product</h3>
  133.                 <div class="modal__checkbox modal__checkbox--type">
  134.                     {% for site in sites %}
  135.                         <div class="input_group input_group--checkbox">
  136.                             <label for="selectSyncSite{{site.id}}">{{site.name}}</label>
  137.                             <input type="checkbox" id="selectSyncSite{{site.id}}" name="selectSyncSite[]" value="{{site.id}}">
  138.                         </div>
  139.                     {% endfor %}
  140.                 </div>
  141.             </section>
  143.             <button type="submit" class="btn btn--sizeM btn__primary--line btnExport">Sync</button>
  144.         </form>
  145.     </div>
  146. {% endblock %}