custom/plugins/MetallitTheme/src/Resources/views/storefront/page/product-detail/index.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}
  2. {% block base_head %}
  3.     {{ parent() }}
  4. {% endblock %}
  5. {% block base_content %}
  6.     {% block page_product_detail %}
  7.         <div class="container">
  8.             <div class="product-detail"
  9.                  itemscope
  10.                  itemtype="https://schema.org/Product">
  11.                 {% block page_product_detail_inner %}
  12.                     {% block page_product_detail_content %}
  13.                         <div class="product-detail-content">
  14.                             {% block page_product_detail_headline %}
  15.                             {% endblock %}
  16.                             {% set mediaItems = page.product.media.media %}
  17.                             {% block page_product_detail_main %}
  18.                                 <div class="row product-detail-main">
  19.                                     {% block page_product_detail_media %}
  20.                                         {{ parent() }}
  21.                                     {% endblock %}
  22.                                     {% block page_product_detail_buy %}
  23.                                         <div class="col-lg-5 product-detail-buy">
  24.                                             <div class="row align-items-center product-detail-headline">
  25.                                                 {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
  26.                                             </div>
  27.                                             {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
  28.                                         </div>
  29.                                     {% endblock %}
  30.                                 </div>
  31.                             {% endblock %}
  32.                         </div>
  33. {# 
  34. 2024-04-18
  35. Uwe Feldmann: Anpassung der Darstellung Staffelpreise
  36. Preise und Warenkorb nur anzeigen, wenn eingeloggt
  37. #}  
  38.                         {% block page_product_detail_content_zweipunkt_variant %}
  39.                             <span id="variants"></span>
  40.                             {% if page.allVariants and page.zweiPunktVariantTableConfig.zpvatabActive %}
  41.                                 <table class="variant-table metallit">
  42.                                     <thead style="
  43.                                             background-color: {{ page.zweiPunktVariantTableConfig.zpvtheadBgcolor }};
  44.                                             color: {{ page.zweiPunktVariantTableConfig.zpvtfontBgcolor }}">
  45.                                     <tr>
  46.                                         {% block zweipunkt_variant_table_img_columns_headers %}
  47.                                             {% if page.zweiPunktVariantTableConfig.zpvtimgActive %}
  48.                                                 <th></th>
  49.                                             {% endif %}
  50.                                         {% endblock %}
  51.                                         {% block zweipunkt_variant_table_productNumber_columns_headers %}
  52.                                             {% if page.zweiPunktVariantTableConfig.zpvtpnActive %}
  53.                                                 <th>
  54.                                                     <span>{{ 'zweipunkt.variant.productNumber'|trans }}</span>
  55.                                                 </th>
  56.                                             {% endif %}
  57.                                         {% endblock %}
  58.                                         {% block zweipunkt_variant_table_manufacturerNumber_columns_headers %}
  59.                                             {% if page.zweiPunktVariantTableConfig.zpvtmnActive %}
  60.                                                 <th>
  61.                                                     <span>{{ 'zweipunkt.variant.manufacturerNumber'|trans }}</span>
  62.                                                 </th>
  63.                                             {% endif %}
  64.                                         {% endblock %}
  65.                                         {% block zweipunkt_variant_table_options_columns_headers %}
  66.                                             {% if page.zweiPunktVariantTableConfig.zpvtopActive %}
  67.                                                 <th>
  68.                                                     <span>{{ 'zweipunkt.variant.options'|trans }}</span>
  69.                                                 </th>
  70.                                             {% endif %}
  71.                                         {% endblock %}
  72.                                         {% block zweipunkt_variant_table_purchaseSteps_columns_headers %}
  73.                                             {% if page.zweiPunktVariantTableConfig.zpvtpsActive %}
  74.                                                 <th>
  75.                                                     <span>{{ 'zweipunkt.variant.purchaseSteps'|trans }}</span>
  76.                                                 </th>
  77.                                             {% endif %}
  78.                                         {% endblock %}
  79.                                         {% block zweipunkt_variant_table_purchaseUnit_columns_headers %}
  80.                                             {% if page.zweiPunktVariantTableConfig.showUnit %}
  81.                                                 <th>
  82.                                                     <span>{{ 'zweipunkt.variant.purchaseUnit'|trans }}</span>
  83.                                                 </th>
  84.                                             {% endif %}
  85.                                         {% endblock %}
  86.                                         {% block zweipunkt_variant_table_price_columns_headers %}
  87.                                             {% if page.zweiPunktVariantTableConfig.zpvtpActive and context.customer.customerNumber > "" %}
  88.                                                 <th>
  89.                                                     <span>{{ 'zweipunkt.variant.price'|trans }}{{ "general.star"|trans|sw_sanitize }}</span>
  90.                                                 </th>
  91.                                             {% endif %}
  92.                                         {% endblock %}
  93.                                         {% block zweipunkt_variant_table_inStock_columns_headers %}
  94.                                             {% if page.zweiPunktVariantTableConfig.zpvtisActive %}
  95.                                                 <th>
  96.                                                     <span>{{ 'zweipunkt.variant.inStock'|trans }}</span>
  97.                                                 </th>
  98.                                             {% endif %}
  99.                                         {% endblock %}
  100.                                         {% block zweipunkt_variant_table_deliveryTime_columns_headers %}
  101.                                             {% if page.zweiPunktVariantTableConfig.zpvtdsActive %}
  102.                                                 <th>
  103.                                                     <span>{{ 'zweipunkt.variant.deliveryTime'|trans }}</span>
  104.                                                 </th>
  105.                                             {% endif %}
  106.                                         {% endblock %}
  107.                                         {% block zweipunkt_variant_table_advancedPrices_columns_headers %}
  108.                                             {% set showAdvancedPrices = false %}
  109.                                             {% if page.zweiPunktVariantTableConfig.zpvtspActive %}
  110.                                                 {% for variant in page.allVariants %}
  111.                                                     {% if variant.advancedPrices is not empty %}
  112.                                                         {% set showAdvancedPrices = true %}
  113.                                                         {% break %}
  114.                                                     {% endif %}
  115.                                                 {% endfor %}
  116.                                             {% endif %}
  117.                                             {% if showAdvancedPrices and context.customer.customerNumber > "" %}
  118.                                                 <th>
  119.                                                     <span>{{ 'zweipunkt.variant.advancedPrices'|trans }}</span>
  120.                                                 </th>
  121.                                             {% endif %}
  122.                                         {% endblock %}
  123.                                         {% block zweipunkt_variant_table_extra_columns_headers %}
  124.                                         {% endblock %}
  125.                                         {% block zweipunkt_variant_table_basket_columns_headers %}
  126.                                             {% if page.zweiPunktVariantTableConfig.zpvtkbActive and context.customer.customerNumber > "" %}
  127.                                                 <th class="basket-column"></th>
  128.                                             {% endif %}
  129.                                         {% endblock %}
  130.                                     </tr>
  131.                                     </thead>
  132.                                     <tbody>
  133.                                     {% for variant in page.allVariants %}
  134.                                         <tr {% if variant.productNumber == page.product.productNumber %} class="active" {% endif %}>
  135.                                             {% block zweipunkt_variant_table_img_columns %}
  136.                                                 {% if page.zweiPunktVariantTableConfig.zpvtimgActive %}
  137.                                                     <td {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}class="td-compact"{% endif %}>
  138.                                                         <a href="{{ seoUrl('frontend.detail.page', {'productId': variant.id}) }}">
  139.                                                             <img class="{% if 1 == page.zweiPunktVariantTableConfig.zpvtArt %}detail-variant-table-image{% else %}detail-variant-table-image-compact{% endif %}"
  140.                                                                  src="{{ variant.media }}"
  141.                                                                  alt="{{ variant.altTag }}"
  142.                                                                  width="90"
  143.                                                                  height="90">
  144.                                                         </a>
  145.                                                     </td>
  146.                                                 {% endif %}
  147.                                             {% endblock %}
  148.                                             {% block zweipunkt_variant_table_productNumber_columns %}
  149.                                                 {% if page.zweiPunktVariantTableConfig.zpvtpnActive %}
  150.                                                     <td {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}class="td-compact"{% endif %}
  151.                                                         data-title="{{ 'zweipunkt.variant.productNumber'|trans }}">
  152.                                                         <a href="{{ seoUrl('frontend.detail.page', {'productId': variant.id}) }}">
  153.                                                             <span class="zweipunkt-table-variant-content">{{ variant.productNumber }}</span>
  154.                                                         </a>
  155.                                                     </td>
  156.                                                 {% endif %}
  157.                                             {% endblock %}
  158.                                             {% block zweipunkt_variant_table_manufacturerNumber_columns %}
  159.                                                 {% if page.zweiPunktVariantTableConfig.zpvtmnActive %}
  160.                                                     <td {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}class="td-compact"{% endif %}
  161.                                                         data-title="{{ 'zweipunkt.variant.manufacturerNumber'|trans }}">
  162.                                                         <span class="zweipunkt-table-variant-content">{{ variant.manufacturerNumber }}</span>
  163.                                                     </td>
  164.                                                 {% endif %}
  165.                                             {% endblock %}
  166.                                             {% block zweipunkt_variant_table_options_columns %}
  167.                                                 {% if page.zweiPunktVariantTableConfig.zpvtopActive %}
  168.                                                     <td {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}class="td-compact"{% endif %}
  169.                                                         data-title="{{ 'zweipunkt.variant.options'|trans }}">
  170.                                                         {% for option in variant.options %}
  171.                                                             <span class="zweipunkt-table-variant-content">{{ option }}</span><br>
  172.                                                         {% endfor %}
  173.                                                     </td>
  174.                                                 {% endif %}
  175.                                             {% endblock %}
  176.                                             {% block zweipunkt_variant_table_purchaseSteps_columns %}
  177.                                                 {% if page.zweiPunktVariantTableConfig.zpvtpsActive %}
  178.                                                     <td {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}class="td-compact"{% endif %}
  179.                                                         data-title="{{ 'zweipunkt.variant.purchaseSteps'|trans }}">
  180.                                                         <span class="zweipunkt-table-variant-content">{{ variant.purchaseSteps }}</span>
  181.                                                     </td>
  182.                                                 {% endif %}
  183.                                             {% endblock %}
  184.                                             {% block zweipunkt_variant_table_purchaseUnit_columns %}
  185.                                                 {% if page.zweiPunktVariantTableConfig.showUnit %}
  186.                                                     <td {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}class="td-compact"{% endif %}
  187.                                                         data-title="{{ 'zweipunkt.variant.purchaseUnit'|trans }}">
  188.                                                         <span class="zweipunkt-table-variant-content">{{ variant.purchaseUnit }} {{ variant.purchaseUnitName }}</span>
  189.                                                     </td>
  190.                                                 {% endif %}
  191.                                             {% endblock %}
  192. {# 
  193. 2024-11-29
  194. Uwe Feldmann: Einzelpreis anzeigen wenn die Mindestabnahme > 1 ist
  195. #} 
  196.                                             {% block zweipunkt_variant_table_price_columns %}
  197.                                                 {% if page.zweiPunktVariantTableConfig.zpvtpActive and context.customer.customerNumber > "" %}
  198.                                                     <td {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}class="td-compact"{% endif %}
  199.                                                         data-title="{{ 'zweipunkt.variant.price'|trans }}{{ "general.star"|trans|sw_sanitize }}">
  200.                                                         {% block zweipunkt_variant_table_price_block_row %}
  201.                                                             <span class="zweipunkt-table-variant-content">{{ (variant.price/variant.minPurchase)|currency }}</span>
  202.                                                             {% if 0 != variant.referenceUnitPrice %}
  203.                                                                 <span class="zweipunkt-variant-referenceUnit">
  204.                                             ({{ variant.referenceUnitPrice|currency }} /
  205.                                             {{ variant.referenceUnit }} {{ variant.referenceUnitName }})
  206.                                         </span>
  207.                                                             {% endif %}
  208.                                                         {% endblock %}
  209.                                                     </td>
  210.                                                 {% endif %}
  211.                                             {% endblock %}
  212.                                             {% block zweipunkt_variant_table_inStock_columns %}
  213.                                                 {% if page.zweiPunktVariantTableConfig.zpvtisActive %}
  214.                                                     <td {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}class="td-compact"{% endif %}
  215.                                                         data-title="{{ 'zweipunkt.variant.inStock'|trans }}">
  216.                                 <span class="zweipunkt-table-variant-content">
  217.                                       {% sw_include '@ZweiPunktVariantsTableOverview/storefront/deliveries/delivery-information-icon.html.twig' ignore missing with {
  218.                                           product: variant
  219.                                       } %}
  220.                                 </span>
  221.                                                     </td>
  222.                                                 {% endif %}
  223.                                             {% endblock %}
  224.                                             {% block zweipunkt_variant_table_deliveryTime_columns %}
  225.                                                 {% if page.zweiPunktVariantTableConfig.zpvtdsActive %}
  226.                                                     <td {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}class="td-compact"{% endif %}
  227.                                                         data-title="{{ 'zweipunkt.variant.deliveryTime'|trans }}">
  228.                                 <span class="zweipunkt-table-variant-content">
  229.                                    {% sw_include '@ZweiPunktVariantsTableOverview/storefront/deliveries/delivery-information-time.html.twig' ignore missing with {
  230.                                        product: variant
  231.                                    } %}
  232.                                 </span>
  233.                                                     </td>
  234.                                                 {% endif %}
  235.                                             {% endblock %}
  236.                                             {% block zweipunkt_variant_table_advancedPrices_columns %}
  237.                                                 {% if page.zweiPunktVariantTableConfig.zpvtspActive and variant.advancedPrices and context.customer.customerNumber > "" %}
  238.                                                     <td id="td-advanced-prices" {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}class="td-compact"{% endif %}
  239.                                                         data-title="{{ 'zweipunkt.variant.advancedPrices'|trans }}">
  240.                                                         <div class="zweipunkt-table-variant-content">
  241.                                                             <table class="table product-block-prices-grid">
  242.                                                                 <tbody class="product-block-prices-body">
  243. {# 
  244. 2024-02-21
  245. Uwe Feldmann: Anpassung der Darstellung Staffelpreise
  246. Im Standard wird der Preis immer mit dem Bis-Wert angezeigt.
  247. Da price.quantity auch immer nur den Bis-Wert enthält, wird hier in der Haupt-Schleife der letzte Bis-Wert in die Variable oldquantity geschrieben 
  248. und um 1 erhöht. Dadurch enthält dieser Wert dann immer den Von-Wert der nächsten Staffel.
  249. In der ersten Zeile kann die Mengenangabe Ã¼ber CSS .product-block-prices-quantity-first unterdrückt werden.
  250. Die Anzeige der Einheiten kann Ã¼ber CSS .product-block-prices-quantity-unit gesteuert werden.
  251. #}  
  252.                                                                 {% set old_quantity = 1 %}
  253.                                                                 {% for price in variant.advancedPrices %}
  254.                                                                     {% if price %}
  255.                                                                         <tr class="product-block-prices-row"
  256.                                                                             itemprop="offers" itemscope
  257.                                                                             itemtype="https://schema.org/Offer">
  258.                                                                             <td class="product-block-prices-cell product-block-prices-cell-thin">
  259.                                                                                 {% set unitId = variant.unitId %}
  260.                                                                                 {% set unitPer = page.zweiPunktVariantTableConfig.unitPer %}
  261.                                                                                 {% set uniteEach = page.zweiPunktVariantTableConfig.uniteEach %}
  262.                                                                                 {% set unitFrom = page.zweiPunktVariantTableConfig.unitFrom %}
  263.                                                                                 {#
  264.                                                                                 {% if unitId in unitPer %}
  265.                                                                                     {{ 'zweipunkt.variant.unitPer'|trans|raw }}
  266.                                                                                 {% elseif unitId in uniteEach %}
  267.                                                                                     {{ 'zweipunkt.variant.uniteEach'|trans|raw }}
  268.                                                                                 {% elseif unitId in unitFrom %}
  269.                                                                                     {{ 'zweipunkt.variant.unitFrom'|trans|raw }}
  270.                                                                                 {% else %}
  271.                                                                                 {% endif %}
  272.                                                                                 #}
  273.                                                                                 {% if loop.first %}
  274.                                                                                     <span class="product-block-prices-quantity product-block-prices-quantity-first">
  275.                                                                     1
  276.                                                                 </span>
  277.                                                                 <span class="product-block-prices-quantity product-block-prices-quantity-first product-block-prices-quantity-unit"> 
  278.                                                                     {{ variant.unitShortCode|trans|sw_sanitize }}
  279.                                                                 </span>
  280.                                                                                 {% else %}
  281.                                                                                     <span class="product-block-prices-quantity">
  282.                                                                     {{ "detail.priceDataInfoFrom"|trans|sw_sanitize }} {{ old_quantity }}                                                                                        
  283.                                                                 </span>
  284.                                                                 <span class="product-block-prices-quantity product-block-prices-quantity-unit">
  285.                                                                     {{ variant.unitShortCode|trans|sw_sanitize }}
  286.                                                                 </span>
  287.                                                                                 {% endif %}
  288.                                                                             </td>
  289.                                                                             <td class="product-block-prices-cell product-block-prices-cell-thin">
  290.                                                                                 {{ price.unitPrice|currency }}
  291.                                                                             </td>
  292.                                                                         </tr>
  293.                                                                     {% endif %}
  294.                                                                     {% set old_quantity = price.quantity+1 %}
  295.                                                                 {% endfor %}
  296.                                                                 </tbody>
  297.                                                             </table>
  298.                                                         </div>
  299.                                                     </td>
  300.                                                 {% endif %}
  301.                                             {% endblock %}
  302.                                             {% block zweipunkt_variant_table_extra_columns %}
  303.                                             {% endblock %}
  304.                                             {% block zweipunkt_variant_table_basket_columns %}
  305.                                                 {% if page.zweiPunktVariantTableConfig.zpvtkbActive and context.customer.customerNumber > "" %}
  306.                                                     <td class="basket-column{% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %} td-compact{% endif %}">
  307.                                                         <form
  308.                                                                 id="productDetailPageBuyProductForm"
  309.                                                                 action="{{ path('frontend.checkout.line-item.add') }}"
  310.                                                                 method="post"
  311.                                                                 class="buy-widget"
  312.                                                                 data-add-to-cart="true">
  313.                                                             {% if page.variantsTable_csrf_token %}
  314.                                                                 <input type="hidden" name="_csrf_token" value="{{ page.variantsTable_csrf_token }}">
  315.                                                             {% endif %}
  316.                                                             {% set buyable = variant.available%}
  317.                                                             {% if buyable %}
  318.                                                                 {% if 1 == page.zweiPunktVariantTableConfig.zpvtArt %}
  319.                                                                     <div class="zweipunkt-buybox-input">
  320.                                                                         <div class="zweipunkt-buy-decrease-button">-</div>
  321.                                                                         <div class="input--field">
  322.                                                                             <input
  323.                                                                                     name="lineItems[{{ variant.id }}][quantity]"
  324.                                                                                     type="number"
  325.                                                                                     id="sQuantity"
  326.                                                                                     class="quantity--select buy-select"
  327.                                                                                     value="{{ variant.minPurchase }}"
  328.                                                                                     min="{{ variant.minPurchase }}"
  329.                                                                                     max="{{ variant.availableStock }}"
  330.                                                                                     step="{{ variant.purchaseSteps }}">
  331.                                                                         </div>
  332.                                                                         <div class="zweipunkt-buy-increase-button">+</div>
  333.                                                                     </div>
  334.                                                                 {% endif %}
  335.                                                                 <div class="form-row buy-widget-container">
  336.                                                                     <input type="hidden"
  337.                                                                            name="redirectTo"
  338.                                                                            value="frontend.detail.page">
  339.                                                                     <input type="hidden"
  340.                                                                            name="redirectParameters"
  341.                                                                            data-redirect-parameters="true"
  342.                                                                            value='{"productId": "{{ variant.id }}"}'>
  343.                                                                     <input type="hidden"
  344.                                                                            name="lineItems[{{ variant.id }}][id]"
  345.                                                                            value="{{ variant.id }}">
  346.                                                                     <input type="hidden"
  347.                                                                            name="lineItems[{{ variant.id }}][type]"
  348.                                                                            value="product">
  349.                                                                     <input type="hidden"
  350.                                                                            name="lineItems[{{ variant.id }}][referencedId]"
  351.                                                                            value="{{ variant.id }}">
  352.                                                                     <input type="hidden"
  353.                                                                            name="lineItems[{{ variant.id }}][stackable]"
  354.                                                                            value="1">
  355.                                                                     <input type="hidden"
  356.                                                                            name="lineItems[{{ variant.id }}][removable]"
  357.                                                                            value="1">
  358.                                                                     <input type="hidden"
  359.                                                                            name="product-name"
  360.                                                                            value="{{ variant.translated.name }}">
  361.                                                                     <button class="btn btn-primary btn-block btn-buy {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}btn-compact{% endif %}"
  362.                                                                             style="background-color: {{ page.zweiPunktVariantTableConfig.zpvtbuttonBgcolor }};
  363.                                                                                     color: {{ page.zweiPunktVariantTableConfig.zpvtbuttonfontBgcolor }};
  364.                                                                                     border-color: {{ page.zweiPunktVariantTableConfig.zpvtbuttonfontBgcolor }};"
  365.                                                                             title="{{ "detail.addProduct"|trans|striptags }}"
  366.                                                                             aria-label="{{ "detail.addProduct"|trans|striptags }}">
  367.                                                                         {% sw_icon 'basket' %}
  368.                                                                     </button>
  369.                                                                 </div>
  370.                                                             {% else %}
  371.                                                                 <a class="btn btn-primary btn-block btn-buy {% if 2 == page.zweiPunktVariantTableConfig.zpvtArt %}btn-compact{% endif %}"
  372.                                                                    style="background-color: {{ page.zweiPunktVariantTableConfig.zpvtbuttonBgcolor }};
  373.                                                                            color: {{ page.zweiPunktVariantTableConfig.zpvtbuttonfontBgcolor }};
  374.                                                                            border-color: {{ page.zweiPunktVariantTableConfig.zpvtbuttonfontBgcolor }};"
  375.                                                                    href="{{ seoUrl('frontend.detail.page', {'productId': variant.id}) }}">
  376.                                                                     {% sw_icon 'info' %}
  377.                                                                 </a>
  378.                                                             {% endif %}
  379.                                                         </form>
  380.                                                     </td>
  381.                                                 {% endif %}
  382.                                             {% endblock %}
  383.                                         </tr>
  384.                                     {% endfor %}
  385.                                     </tbody>
  386.                                 </table>
  387.                             {% endif %}
  388.                         {% endblock %}
  389.                     {% endblock %}
  390.                     {% block page_product_detail_tabs %}
  391.                         {{ parent() }}
  392.                     {% endblock %}
  393.                     {% block page_product_detail_cross_selling %}
  394.                         {{ parent() }}
  395.                     {% endblock %}
  396.                 {% endblock %}
  397.             </div>
  398.         </div>
  399.     {% endblock %}
  400. {% endblock %}