custom/static-plugins/NdVoorwindenTheme/src/Resources/views/storefront/page/product-detail/tap-bar.html.twig line 1

Open in your IDE?
  1. {% set product = page.product %}
  2. {% set count = 0 %}
  3. {% for element in page.product.children.elements %}
  4.     {% set count = count + element.stock %}
  5. {% endfor %}
  6. {% if count > 0 %}
  7.     <nav id="tap-bar" class="tap-bar-add-to-cart">
  8.         <div class="fixed bottom-0 left-0 right-0 py-3 lg:5 rounded-t-sm bg-white transition translate-y-full opacity-0 z-10 max-w-[1008px] mx-auto"
  9.              data-product-tab-bar="true"
  10.              data-toggle-classes="translate-y-0 opacity-100"
  11.              style="box-shadow: 0px -20px 25px -5px rgba(0, 0, 0, 0.1), 0px -10px 10px -5px rgba(0, 0, 0, 0.04);">
  12.             <div class="boxed-layout md:flex md:items-center md:grid-gap-8 md:justify-between lg:px-6">
  13.                 <div class="tab-bar-product-container hidden md:flex md:grid-gap-4 lg:grid-gap-8">
  14.                     <div class="product-thumbnail ratio ratio_product_image w-12">
  15.                         {% sw_thumbnails 'product-tab-bar-thumbnail' with {
  16.                             media: product.cover.media,
  17.                             attributes: {
  18.                                 'class': 'product-tab-bar-thumbnail',
  19.                                 'alt': (product.cover.media.translated.alt ?: ''),
  20.                                 'title': (product.cover.media.translated.title ?: '')
  21.                             }
  22.                         } %}
  23.                     </div>
  24.                     <div class="product-info flex flex-col justify-center">
  25.                         {# {% if product.manufacturer.translated.name %} #}
  26.                         {# <div class="product-brand-name font-accent font-bold uppercase text-sm line-clamp-1 mb-2"> #}
  27.                         {# {{ product.manufacturer.translated.name }} #}
  28.                         {# </div> #}
  29.                         {# {% endif %} #}
  31.                         {% block component_product_box_name %}
  32.                             <div class="product-name font-accent font-bold uppercase text-sm line-clamp-1">
  33.                                 {{ product.translated.name }}
  34.                             </div>
  35.                         {% endblock %}
  37.                         {% block component_product_box_price %}
  38.                             {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
  39.                         {% endblock %}
  40.                     </div>
  41.                 </div>
  42.                 <div class="tab-bar-atc-container md:flex-grow-1 md:justify-end {% if page.product.children|length > 0 %}flex items-center grid-gap-2 lg:grid-gap-8{% endif %}">
  43.                     {% set buyable = product.available and product.calculatedMaxPurchase > 0 %}
  44.                     {% if buyable %}
  45.                         {% if page.product.children|length > 0 %}
  46.                             <div class="w-1/3 flex-shrink-0 lg:w-[240px]">
  47.                                 {% sw_include '@Storefront/storefront/page/product-detail/configurator/select.html.twig' with{
  48.                                     'type': 'dropdown',
  49.                                     'position': 'top',
  50.                                     'label': false,
  51.                                     'tapBar': true,
  52.                                     'product': page.product
  53.                                 } %}
  54.                             </div>
  55.                         {% endif %}
  56.                     {% endif %}
  57.                     <button class="btn btn-primary w-full {% if buyable %}{% else %}pointer-events-none disabled{% endif %}"
  58.                             type="button"
  59.                             {% if buyable %}
  60.                                 title="{{ "tapBar.addToCart"|trans|striptags }}"
  61.                                 aria-label="{{ "tapBar.addToCart"|trans|striptags }}"
  62.                                 data-product-add-to-cart-button="true"
  63.                             {% endif %}
  64.                     >
  65.                         {% sw_icon 'cart-solid' style {'pack': 'hero', 'class': ' white w-5'} %}
  66.                         {% if buyable %}
  67.                             {{ "tapBar.addToCart"|trans|sw_sanitize }}
  68.                         {% else %}
  69.                             {{ "pages.product.soldOutLabel"|trans }}
  70.                         {% endif %}
  71.                     </button>
  72.                 </div>
  73.             </div>
  74.         </div>
  75.     </nav>
  76. {% endif %}