templates/front/product/product_card_list.html.twig line 1

Open in your IDE?
  1. {% block stylesheets %}
  2.     {{ encore_entry_link_tags('react/partials/wishlist') }}
  3. {% endblock %}
  4. {% block javascripts %}
  5.     {{ encore_entry_script_tags('react/partials/wishlist') }}
  6.     {{ encore_entry_script_tags('empathy') }}
  7. {% endblock %}
  9. {% set translations = {
  10.     "wishlist_popup.title": ('wishlist_popup.title'|trans),
  11.     "wishlist_popup.details": ('wishlist_popup.details'|trans),
  12.     "wishlist_popup.button_cancel": ('wishlist_popup.button_cancel'|trans),
  13.     "wishlist_popup.button_save": ('wishlist_popup.button_save'|trans),
  14.     "wishlist_popup.create_list": ('wishlist_popup.create_list'|trans),
  15.     "wishlist_popup.name_list": ('wishlist_popup.name_list'|trans),
  16.     "wishlist_popup.name_list_placeholder": ('wishlist_popup.name_list_placeholder'|trans),
  17.     "wishlist_popup.select_placeholder": ('wishlist_popup.select_placeholder'|trans),
  18.     "wishlist_popup.required_field": ('wishlist_popup.required_field'|trans),
  19.     "wishlist_popup.save_changes_ok": ('wishlist_popup.save_changes_ok'|trans),
  20.     "wishlist_popup.list_validation_name": ('wishlist_popup.list_validation_name'|trans),
  21.     "wishlist_popup.list_validation_duplicated": ('wishlist_popup.list_validation_duplicated'|trans),
  22.     "wishlist_popup.list_validation_alphanumeric": ('wishlist_popup.list_validation_alphanumeric'|trans),
  23.     "wishlist_popup.list_validation_max_list": ('wishlist_popup.list_validation_max_list'|trans),
  24. } %}
  26. <div id="empathy" data-layout="{{ layout|json_encode }}" data-iso-code="{{ app.session.get('lang') }}" data-session-id="{{ app.session.getId() }}" ></div>
  28. <div id="wishlist-translations" data-translations="{{ translations|json_encode }}"> </div>
  30. {% for product in parameters.products %}
  31.     <div class="productList-item">
  32.         {% set classStock = '' %}
  34.         {% if app.session.get('is_wholesaler') ==  app.session.get('customerGroup') %}
  35.             {% if  product.quantity <= 0 %}
  36.                 {% set classStock = ((product.quantity_venideros > 0) or (product.quantity_supplier_to_show > 0) )  ? 'productCard--soon' : 'productCard--noStock' %}
  37.             {% else %}
  38.                 {% set classStock = (product.quantity > 0)  ? 'productCard--soon' : 'productCard--noStock' %}
  39.             {% endif %}
  40.         {% endif %}
  43.         <article data-js-product-card="product-card" data-js-idProduct="{{ product.id_product }}"
  44.                  data-js-idAttribute="0"
  45.                  data-js-ga-reference="{{ product.reference[0] }}" data-js-ga-name="{{ product.name }}"
  46.                  data-js-ga-category="0" data-js-ga-list="Categoria" class="productCard productCard--shoppable {{ product.ribbon_class }}">
  48.             <figure class="productCard-content">
  49.                 {% if app.session.get('id_customer') == true %}
  50.                     <div 
  51.                         id="bb-wishlist-{{loop.index}}"
  52.                         class="bb-wishlist-counter"
  53.                         data-product="{{ product|json_encode }}" 
  54.                     >
  55.                     </div>
  56.                 {% endif %}
  57.                 <a class="productCard-link productCard-imgCont productCard-imgCont--threeImgs"
  58.                    href="{{ base_url }}{{ app.session.get('lang') }}/{{ product.link_rewrite }}.html"
  59.                    onClick="window.productCardEmpathy('{{ product.name|raw }}', {{ product.id }}, '{{ base_url }}{{ app.session.get('lang') }}/{{ product.link_rewrite }}.html')"
  60.                    {% if product.translations == false %}rel="nofollow"{% endif %}>
  61.                     {% set typeImage = (product.is_gif) ? '.gif' : '.jpg' %}
  62.                      <img data-js-product-card-imgtodetail="imgtodetail"
  63.                      class="productCard-img {% if product.name_image != false %}lazy{% else %}u-hide{% endif %}"
  64.                      src="{{ base_url_img }}public/img/Loading.gif"
  65.                      data-original="{{ base_url }}{{ product.id_image }}-home/{{ product.name_image }}{{ typeImage }}"
  66.                      alt="{{ product.name|raw }}" title="{{ product.name|raw }}">
  67.                     
  68.                 </a>
  69.                 <figcaption class="productCard-properties">
  70.                     <div class="productCard-title">
  71.                         <a data-js-product-card-atodetail="atodetail" class="productCard-link"
  72.                            onClick="window.productCardEmpathy('{{ product.name|raw }}', {{ product.id }}, '{{ base_url }}{{ app.session.get('lang') }}/{{ product.link_rewrite }}.html')"
  73.                            href="{{ base_url }}{{ app.session.get('lang') }}/{{ product.link_rewrite }}.html"
  74.                            title="{{ product.name|raw }}"
  75.                            {% if product.translations == false %}rel="nofollow"{% endif %}>{{ product.name }}</a>
  76.                         {% if app.session.get('is_wholesaler') %}
  77.                             <aside class="productCard-sizes">
  78.                                 <div class="productCard-sizesItem">
  79.                                     <svg role="img" class="icon icon--inline icon--xs">
  80.                                         <use xmlns:xlink="http://www.w3.org/1999/xlink"
  81.                                              xlink:href="{{ base_url }}public/img/icons/svg-defs.svg#icon-bbcode"></use>
  82.                                     </svg>
  83.                                     {{ legacy_trans('Ref.', 'product-card-list') }} {{ product.reference|last }}</div>
  84.                                 <div class="productCard-sizesItem">
  85.                                     <svg role="img" class="icon icon--inline icon--xs">
  86.                                         <use xmlns:xlink="http://www.w3.org/1999/xlink"
  87.                                              xlink:href="{{ base_url }}public/img/icons/svg-defs.svg#icon-caja_alt"></use>
  88.                                     </svg>
  89.                                     {{ legacy_trans('Caja (uds.)', 'product-card-list') }}: {{ product.box }}</div>
  90.                                 <div class="productCard-sizesItem">
  91.                                     <svg role="img" class="icon icon--inline icon--xs">
  92.                                         <use xmlns:xlink="http://www.w3.org/1999/xlink"
  93.                                              xlink:href="{{ base_url }}public/img/icons/svg-defs.svg#icon-pallet3"></use>
  94.                                     </svg>
  95.                                     {{ legacy_trans('Pallet (uds.)', 'product-card-list') }}: {{ product.palet }}</div>
  96.                             </aside>
  97.                         {% endif %}
  98.                     </div>
  99.                     {% if app.session.get('is_wholesaler') %}
  100.          
  101.                         <div class="stockAvailability stockAvailability--vertical">
  102.                             <p class="stockAvailability-title stockAvailability-title--{{ product.quantity > 0 ? 'success' : 'error' }}">
  103.                                 {% if product.quantity <= 0 and product.quantity_future <= 0 and product.quantity_venideros <= 0 and (0 <= (product.quantity_supplier - product.quantity_extern)) %}
  104.                                     {{ legacy_trans('No disponible', 'product-card-list') }}
  105.                                 {% elseif product.quantity > 0 or  product.quantity_future > 0 %}
  106.                                     {{ legacy_trans('Disponible', 'product-card-list') }} ({{ product.quantity }})
  107.                                 {% else %}
  108.                                     {{ legacy_trans('Próximamente', 'product-card-list') }}
  109.                                 {% endif %}
  110.                             </p>
  111.                             <ul class="stockAvailability-list">
  112.                                 {% if product.quantity_immediate  > 0 %}
  113.                                     <li class="stockAvailability-item">
  114.                                         {{ 'stock.units_immediate' | trans({}, 'messages', app.session.get('lang')) | format(product.quantity_immediate) }}
  115.                                     </li>
  116.                                 {% endif %}
  117.                                 {% if product.quantity_supplier - product.quantity_extern > 0 %}
  118.                                     <li class="stockAvailability-item">
  119.                                         {{ 'stock.units_jit_24_48' | trans({}, 'messages', app.session.get('lang')) | format((product.quantity_supplier - product.quantity_extern)) }}
  120.                                     </li>
  121.                                 {% endif %}
  122.                                 {% if (product.quantity_supplier_2_5 - product.quantity_extern_2_5) > 0 %}
  123.                                     <li class="stockAvailability-item">
  124.                                         {{ 'stock.units_days' | trans({}, 'messages', app.session.get('lang')) | format(product.quantity_supplier_2_5 - product.quantity_extern_2_5, '2-5') }}
  125.                                     </li>
  126.                                 {% endif %}
  127.                                 {% if (product.quantity_future) > 0 %}
  128.                                     <li class="stockAvailability-item">
  129.                                         {{ 'stock.units_days' | trans({}, 'messages', app.session.get('lang')) | format(product.quantity_future, '5-30') }}
  130.                                     </li>
  131.                                 {% endif %}
  132.                             </ul>
  134.                         </div>
  135.                     {% endif %}
  137.                     <div class="productCard-prices">
  139.                         <div class="productCard-pvp productCard-pvp--now">
  141.                             <div class="productCard-pvp-name productCard-pvp--relevant">
  142.                                 {% if app.session.get('is_wholesaler') %}
  143.                                     {{ legacy_trans('PVD', 'product-card-list') }}
  144.                                 {% else %}
  145.                                     {{ legacy_trans('PVR', 'product-card-list') }}
  146.                                 {% endif %}
  147.                             </div>
  149.                             <div class="productCard-pvp-amount productCard-pvp--relevant">
  150.                                 {{ display_price(product.price_after) }}
  151.                             </div>
  152.                         </div>
  154.                         <div class="productCard-pvp productCard-pvp--before">
  155.                             <div class="productCard-pvp-name">
  156.                                 {% if app.session.get('is_wholesaler') %}
  157.                                     {{ legacy_trans('PVR', 'product-card-list') }}
  158.                                 {% else %}
  159.                                     {{ legacy_trans('PVP', 'product-card-list') }}
  160.                                 {% endif %}
  161.                             </div>
  163.                             <div class="productCard-pvp-amount  productCard-pvp-amount--before">
  164.                                 {{ display_price(product.price_before) }}
  165.                             </div>
  166.                         </div>
  168.                         <div class="productCard-pvp productCard-pvp--discount">
  169.                             -{{ product.descuento|number_format(0) }}%
  170.                         </div>
  171.                     </div>
  173.                     {% if app.session.get('is_wholesaler') %}
  174.                         <div class="productCard-prices productCard-prices--alt">
  175.                             <p class="productCard-priceitem">
  176.                             <span>
  177.                                 {{ legacy_trans('New', 'product-card-list') }}
  178.                                 {{ legacy_trans('PVD', 'product-card-list') }}
  179.                             </span>
  180.                                 <span>
  181.                                 {{ display_price(product.price_after) }}
  182.                             </span>
  183.                             </p>
  184.                             <p class="productCard-priceitem u-op-50">
  185.                             <span>
  186.                                 {{ legacy_trans('Old', 'product-card-list') }}
  187.                                 {{ legacy_trans('PVD', 'product-card-list') }}
  188.                             </span>
  189.                                 <strike>
  190.                                     {{ display_price(product.price_after_old) }}
  191.                                 </strike>
  192.                             </p>
  193.                             <p class="productCard-priceitem">
  194.                             <span>
  195.                                 {{ legacy_trans('New', 'product-card-list') }}
  196.                                 {{ legacy_trans('PVR', 'product-card-list') }}
  197.                             </span>
  198.                                 <span>
  199.                                 {{ display_price(product.price_before) }}
  200.                             </span>
  201.                             </p>
  202.                             <p class="productCard-priceitem u-op-50">
  203.                             <span>
  204.                                 {{ legacy_trans('Old', 'product-card-list') }}
  205.                                 {{ legacy_trans('PVR', 'product-card-list') }}
  206.                             </span>
  207.                                 <strike>
  208.                                     {{ display_price(product.price_before_old) }}
  209.                                 </strike>
  210.                             </p>
  212.                             <div class="productCard-discount">
  213.                                 -{{ product.descuento_old|number_format(0) }}%
  214.                             </div>
  215.                         </div>
  216.                     {% endif %}
  217.                 </figcaption>
  218.             </figure>
  219.             {% if product.ribbon_name != false %}
  220.                 {% set ribbon_name = product.ribbon_name %}
  221.                 {% if product.ribbon_name|upper == 'OPENBOX' %}
  222.                     {% set ribbon_name = 'Renewed' %}
  223.                 {% endif %}
  224.                 <div class="productCard-ribbon">
  225.                     {{ ribbon_name }}
  226.                 </div>
  227.             {% endif %}
  229.             {% if product.video != false %}
  230.                 <div class="productCard-play"></div>
  231.             {% endif %}
  233.             <div class="productCard-buy">
  234.                 {% if product.quantity_supplier_to_show > 0 and product.quantity <= 0 and app.session.get('is_wholesaler') %}
  235.                     <div class="productCard-caption">
  236.                         {{ legacy_trans('Bajo pedido', 'product-card-list') }}
  237.                     </div>
  238.                 {% elseif product.quantity_venideros > 0 and product.quantity <= 0 and app.session.get('is_wholesaler') %}
  239.                     <div class="productCard-caption">
  240.                         {{ legacy_trans('Próximamente', 'product-card-list') }}
  241.                     </div>
  242.                 {% elseif product.quantity <= 0 %}
  243.                     <div class="productCard-caption">
  244.                         {{ legacy_trans('Sin stock', 'product-card-list') }}
  245.                     </div>
  246.                 {% else %}
  247.                     <div data-js-product-card-container-addToCart class="productCard-caption">
  248.                         <div class="unitControl">
  249.                             <input data-js-product-card-unitcontrolinput="unitcontrolinput"
  250.                                    class="form-input form-input--postfix unitControl-input" type="text"
  251.                                    maxlength="10" value="1">
  252.                             <span class="form-postfix unitControl-groupBtns">
  253.                             <button data-js-product-card-unitcontrolplus="unitcontrolPlus"
  254.                                     class="button button--icon unitControl-button unitControl-button--plus"></button>
  255.                             <button data-js-product-card-unitcontrolminus="unitcontrolMinus"
  256.                                     class="button button--icon unitControl-button unitControl-button--minus"></button>
  257.                         </span>
  258.                         </div>
  259.                         {% if product.id_product_attribute is defined and product.id_product_attribute is not null or product.quantity_dif != 0 and app.session.get('is_wholesaler') %}
  260.                             <div class="productCard-action u-pdt--half">
  261.                                 <a data-js-product-card-options="options" class="productCard-link"
  262.                                    href="{{ base_url }}{{ app.session.get('lang') }}/{{ product.link_rewrite }}.html">
  263.                                     {{ legacy_trans('Opciones', 'product-card-list') }}
  264.                                     <i data-js-product-card-options="options"
  265.                                        class="form-action-icon productCard-action-icon fa fa-chevron-right"></i>
  266.                                 </a>
  267.                             </div>
  268.                         {% else %}
  269.                             {% if (
  270.                                 (
  271.                                 app.session.get('customerPack') == 0 or
  272.                                 (
  273.                                 app.session.get('customerDateCsv')|date("Y-m-d") < "now"|date("Y-m-d") and app.session.get('customerPack') >1
  274.                                 ) or
  275.                                 app.session.get('id_customer') == false
  276.                                 )
  277.                                 )
  278.                                 and product.only_pack %}
  280.                                 <button class="button productCard-ctaButton" disabled
  281.                                         title="{{ legacy_trans('Añadir al carrito', 'product-card-list') }}">
  282.                                     <svg role="img" class="icon icon--xs">
  283.                                         <use xlink:href="{{ base_url }}public/img/icons/svg-defs.svg#icon-cart"></use>
  284.                                     </svg>
  285.                                 </button>
  286.                             {% else %}
  287.                                 <button data-js-product-card-addToCart="addToCart"
  288.                                         class="button button--primary productCard-ctaButton"
  289.                                         title="{{ legacy_trans('Añadir al carrito', 'product-card-list') }}">
  290.                                     <svg role="img" class="icon icon--xs">
  291.                                         <use xlink:href="{{ base_url }}public/img/icons/svg-defs.svg#icon-cart"></use>
  292.                                     </svg>
  293.                                 </button>
  294.                             {% endif %}
  295.                         {% endif %}
  296.                     </div>
  297.                 {% endif %}
  298.             </div>
  299.         </article>
  300.     </div>
  301. {% endfor %}