Browse code
Style product detail page and buy widget
Martin Filipovic Hinrichs authored on03/02/2026 12:25:15 Showing8 changed files
- src/Resources/app/storefront/src/scss/overrides.scss
- src/Resources/app/storefront/src/scss/scopes/_detail-page.scss
- src/Resources/views/storefront/component/buy-widget/buy-widget-form.html.twig
- src/Resources/views/storefront/component/buy-widget/buy-widget-price.html.twig
- src/Resources/views/storefront/component/buy-widget/buy-widget.html.twig
- src/Resources/views/storefront/page/product-detail/buy-widget-form.html.twig
- src/Resources/views/storefront/page/product-detail/buy-widget-price.html.twig
- src/Resources/views/storefront/page/product-detail/buy-widget.html.twig
| ... | ... |
@@ -25,10 +25,11 @@ $light: #EBE8E7; |
| 25 | 25 |
$lighter: #F8F7F7; |
| 26 | 26 |
$lightest: #F8F5F1; |
| 27 | 27 |
|
| 28 |
-$light-gray: #CDC6C3; |
|
| 28 |
+$light-gray-300: #EDEAE9; |
|
| 29 |
+$light-gray: #E8E5E3; |
|
| 29 | 30 |
|
| 30 | 31 |
$tab-inactive: #ECEAE9; |
| 31 |
-$table-border: #D3CDCA; |
|
| 32 |
+$table-border: $light-gray-300; |
|
| 32 | 33 |
|
| 33 | 34 |
$dark: #6D6561; |
| 34 | 35 |
|
| ... | ... |
@@ -16,39 +16,107 @@ |
| 16 | 16 |
} |
| 17 | 17 |
} |
| 18 | 18 |
|
| 19 |
- .cms-section-sidebar-main-content .cms-block-gallery-buybox .product-detail-media {
|
|
| 20 |
- @include media-breakpoint-up(lg) {
|
|
| 21 |
- display: none; |
|
| 19 |
+ .product-heading-name-container {
|
|
| 20 |
+ .lage {
|
|
| 21 |
+ font-size: rfs-value(22px); |
|
| 22 | 22 |
} |
| 23 |
- } |
|
| 24 |
- } |
|
| 25 | 23 |
|
| 24 |
+ h1 {
|
|
| 25 |
+ padding: .4rem 0; |
|
| 26 |
+ font-size: rfs-value(28px); |
|
| 27 |
+ margin: 0; |
|
| 28 |
+ } |
|
| 26 | 29 |
|
| 27 |
- .product-heading-name-container {
|
|
| 28 |
- .lage {
|
|
| 29 |
- font-size: rfs-value(22px); |
|
| 30 |
- } |
|
| 30 |
+ .weinlinie {
|
|
| 31 |
+ color: $primary; |
|
| 32 |
+ font-size: rfs-value(22px); |
|
| 31 | 33 |
|
| 32 |
- h1 {
|
|
| 33 |
- padding: .4rem 0; |
|
| 34 |
- font-size: rfs-value(28px); |
|
| 35 |
- margin: 0; |
|
| 34 |
+ &::before {
|
|
| 35 |
+ content: open-quote; |
|
| 36 |
+ } |
|
| 37 |
+ |
|
| 38 |
+ &::after {
|
|
| 39 |
+ content: close-quote; |
|
| 40 |
+ } |
|
| 41 |
+ } |
|
| 36 | 42 |
} |
| 37 | 43 |
|
| 38 |
- .weinlinie {
|
|
| 39 |
- color: $primary; |
|
| 40 |
- font-size: rfs-value(22px); |
|
| 44 |
+ .cms-section-sidebar-main-content .cms-block-gallery-buybox {
|
|
| 45 |
+ padding: 0 20px; |
|
| 41 | 46 |
|
| 42 |
- &::before {
|
|
| 43 |
- content: open-quote; |
|
| 44 |
- } |
|
| 47 |
+ @include media-breakpoint-up(lg) {
|
|
| 48 |
+ .product-detail-media {
|
|
| 49 |
+ display: none; |
|
| 50 |
+ } |
|
| 51 |
+ .product-detail-buy {
|
|
| 52 |
+ width: 100%; |
|
| 53 |
+ background-color: $light-gray-300; |
|
| 54 |
+ padding: 2.5rem; |
|
| 55 |
+ line-height: normal; |
|
| 56 |
+ |
|
| 57 |
+ p {
|
|
| 58 |
+ margin-bottom: 0; |
|
| 59 |
+ } |
|
| 60 |
+ |
|
| 61 |
+ .buy-widget-container {
|
|
| 62 |
+ display: flex; |
|
| 63 |
+ flex-wrap: nowrap; |
|
| 64 |
+ justify-content: flex-end; |
|
| 65 |
+ align-items: stretch; |
|
| 66 |
+ gap: 1rem; |
|
| 45 | 67 |
|
| 46 |
- &::after {
|
|
| 47 |
- content: close-quote; |
|
| 68 |
+ width: 50%; |
|
| 69 |
+ float: right; |
|
| 70 |
+ |
|
| 71 |
+ .input-group {
|
|
| 72 |
+ flex: 0 0 4rem; |
|
| 73 |
+ |
|
| 74 |
+ .form-select {
|
|
| 75 |
+ border: 2px solid $primary; |
|
| 76 |
+ } |
|
| 77 |
+ |
|
| 78 |
+ input[type="hidden"] {
|
|
| 79 |
+ flex: 0; |
|
| 80 |
+ } |
|
| 81 |
+ } |
|
| 82 |
+ |
|
| 83 |
+ .btn-buy {
|
|
| 84 |
+ flex: 1 0 auto; |
|
| 85 |
+ font-size: rfs-value(15px); |
|
| 86 |
+ padding: .25rem 1rem; |
|
| 87 |
+ |
|
| 88 |
+ .fa-cart {
|
|
| 89 |
+ font-size: rfs-value(22px); |
|
| 90 |
+ margin-right: 1rem; |
|
| 91 |
+ } |
|
| 92 |
+ } |
|
| 93 |
+ } |
|
| 94 |
+ |
|
| 95 |
+ .product-detail-price {
|
|
| 96 |
+ font-size: rfs-value(40px); |
|
| 97 |
+ line-height: 100%; |
|
| 98 |
+ font-family: $font-secondary; |
|
| 99 |
+ font-weight: 400; |
|
| 100 |
+ margin-bottom: 1.5rem; |
|
| 101 |
+ } |
|
| 102 |
+ |
|
| 103 |
+ .product-detail-price-unit, .product-detail-tax-container {
|
|
| 104 |
+ font-size: rfs-value(15px); |
|
| 105 |
+ } |
|
| 106 |
+ } |
|
| 48 | 107 |
} |
| 49 | 108 |
} |
| 50 | 109 |
} |
| 110 |
+ .card-tabs {
|
|
| 111 |
+ .card-header {
|
|
| 112 |
+ padding: 0; |
|
| 113 |
+ } |
|
| 114 |
+ .nav-item {
|
|
| 115 |
+ margin: 0; |
|
| 116 |
+ } |
|
| 117 |
+ } |
|
| 51 | 118 |
} |
| 119 |
+ |
|
| 52 | 120 |
//.is-ctl-product {
|
| 53 | 121 |
// nav[aria-label="breadcrumb"] {
|
| 54 | 122 |
// display: none; |
| 55 | 123 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,70 @@ |
| 1 |
+{% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget-form.html.twig' %}
|
|
| 2 |
+ |
|
| 3 |
+{% block buy_widget_buy_container %}
|
|
| 4 |
+ {% if buyable %}
|
|
| 5 |
+ <div class="buy-widget-container"> |
|
| 6 |
+ {% block buy_widget_buy_quantity_container %}
|
|
| 7 |
+ {% if showQuantitySelect %}
|
|
| 8 |
+ {% set selectQuantityThreshold = 100 %}
|
|
| 9 |
+ {% block page_product_detail_buy_quantity %}
|
|
| 10 |
+ {% block page_product_detail_buy_quantity_input_group %}
|
|
| 11 |
+ <div class="input-group product-detail-quantity-group quantity-selector-group" |
|
| 12 |
+ data-quantity-selector="true"> |
|
| 13 |
+ {% block page_product_detail_buy_quantity_input %}
|
|
| 14 |
+ |
|
| 15 |
+ <input type="hidden" class="js-quantity-selector"> |
|
| 16 |
+ <input type="hidden" class="js-btn-plus"> |
|
| 17 |
+ <input type="hidden" class="js-btn-minus"> |
|
| 18 |
+ |
|
| 19 |
+ <select class="form-select" |
|
| 20 |
+ name="lineItems[{{ product.id }}][quantity]">
|
|
| 21 |
+ <option selected="selected" |
|
| 22 |
+ value="{{ product.minPurchase }}">{{ product.minPurchase }}</option>
|
|
| 23 |
+ {% for i in range(product.minPurchase + 1, product.minPurchase + 5) %}
|
|
| 24 |
+ <option value="{{ i }}">{{ i }}</option>
|
|
| 25 |
+ {% endfor %}
|
|
| 26 |
+ </select> |
|
| 27 |
+ |
|
| 28 |
+ {% endblock %}
|
|
| 29 |
+ {% block page_product_detail_buy_quantity_input_unit %}
|
|
| 30 |
+ {% if product.translated.packUnit %}
|
|
| 31 |
+ <span class="input-group-text"> |
|
| 32 |
+ {% if product.minPurchase > 1 and product.translated.packUnitPlural %}
|
|
| 33 |
+ {{ product.translated.packUnitPlural }}
|
|
| 34 |
+ {% elseif product.translated.packUnit %}
|
|
| 35 |
+ {{ product.translated.packUnit }}
|
|
| 36 |
+ {% endif %}
|
|
| 37 |
+ </span> |
|
| 38 |
+ {% endif %}
|
|
| 39 |
+ {% endblock %}
|
|
| 40 |
+ </div> |
|
| 41 |
+ {% endblock %}
|
|
| 42 |
+ {% endblock %}
|
|
| 43 |
+ {% endif %}
|
|
| 44 |
+ {% endblock %}
|
|
| 45 |
+ {% block buy_widget_buy_redirect_input %}
|
|
| 46 |
+ {{ parent() }}
|
|
| 47 |
+ {% endblock %}
|
|
| 48 |
+ |
|
| 49 |
+ {% block buy_widget_buy_product_buy_info %}
|
|
| 50 |
+ {{ parent() }}
|
|
| 51 |
+ {% endblock %}
|
|
| 52 |
+ |
|
| 53 |
+ {% block buy_widget_product_buy_meta %}
|
|
| 54 |
+ {{ parent() }}
|
|
| 55 |
+ {% endblock %}
|
|
| 56 |
+ |
|
| 57 |
+ {% block buy_widget_buy_button_container %}
|
|
| 58 |
+ {% block buy_widget_buy_button %}
|
|
| 59 |
+ <button class="btn btn-primary btn-buy" |
|
| 60 |
+ type="submit" |
|
| 61 |
+ title="{{ 'detail.addProduct'|trans|striptags }}"
|
|
| 62 |
+ aria-label="{{ 'detail.addProduct'|trans|striptags }}">
|
|
| 63 |
+ <i class="fa-kit fa-cart"></i> {{ 'detail.addProduct'|trans|sw_sanitize }}
|
|
| 64 |
+ </button> |
|
| 65 |
+ {% endblock %}
|
|
| 66 |
+ {% endblock %}
|
|
| 67 |
+ </div> |
|
| 68 |
+ {% endif %}
|
|
| 69 |
+{% endblock %}
|
|
| 70 |
+ |
| 0 | 71 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,29 @@ |
| 1 |
+{% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget-price.html.twig' %}
|
|
| 2 |
+ |
|
| 3 |
+ {% block buy_widget_price_unit %}
|
|
| 4 |
+ <div class="product-detail-price-unit"> |
|
| 5 |
+ {% block buy_widget_price_unit_label %}
|
|
| 6 |
+ <span class="price-unit-label"> |
|
| 7 |
+ {{ 'detail.priceUnitName'|trans|sw_sanitize }}
|
|
| 8 |
+ </span> |
|
| 9 |
+ {% endblock %}
|
|
| 10 |
+ |
|
| 11 |
+ {% block buy_widget_price_unit_content %}
|
|
| 12 |
+ <span class="price-unit-content"> |
|
| 13 |
+ {{ product.purchaseUnit|number_format(2, ',', '') }} {{ product.unit.translated.name|replace({'Liter': 'l'}) }}
|
|
| 14 |
+ </span> |
|
| 15 |
+ {% endblock %}
|
|
| 16 |
+ {% if price.referencePrice is not null %}
|
|
| 17 |
+ {% block buy_widget_price_unit_reference_content %}
|
|
| 18 |
+ <span> | </span> |
|
| 19 |
+ <span class="price-unit-reference-content"> |
|
| 20 |
+ {% if price.referencePrice.referenceUnit == '1' and price.referencePrice.unitName =='Liter' %}
|
|
| 21 |
+ {{ price.referencePrice.price|currency }}/l
|
|
| 22 |
+ {% else %}
|
|
| 23 |
+ ({{ price.referencePrice.price|currency }} / {{ price.referencePrice.referenceUnit }} {{ price.referencePrice.unitName }})
|
|
| 24 |
+ {% endif %}
|
|
| 25 |
+ </span> |
|
| 26 |
+ {% endblock %}
|
|
| 27 |
+ {% endif %}
|
|
| 28 |
+ </div> |
|
| 29 |
+ {% endblock %}
|
|
| 0 | 30 |
\ No newline at end of file |
| 1 | 31 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,23 @@ |
| 1 |
+{% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget.html.twig' %}
|
|
| 2 |
+ |
|
| 3 |
+{% block buy_widget_buy_container %}
|
|
| 4 |
+ <div itemprop="offers" |
|
| 5 |
+ itemscope |
|
| 6 |
+ itemtype="{% if product.calculatedPrices|length > 1 %}https://schema.org/AggregateOffer{% else %}https://schema.org/Offer{% endif %}">
|
|
| 7 |
+ {% block buy_widget_buy_form %}
|
|
| 8 |
+ {{ parent() }}
|
|
| 9 |
+ {% endblock %}
|
|
| 10 |
+ {% block buy_widget_data %}
|
|
| 11 |
+ {{ parent() }}
|
|
| 12 |
+ {% endblock %}
|
|
| 13 |
+ {% block buy_widget_configurator_include %}
|
|
| 14 |
+ {{ parent() }}
|
|
| 15 |
+ {% endblock %}
|
|
| 16 |
+ </div> |
|
| 17 |
+{% endblock %}
|
|
| 18 |
+ |
|
| 19 |
+{% block buy_widget_tax_link %}
|
|
| 20 |
+ <p class="product-detail-tax">Inkl. MWST, zzgl. Versandkosten</p> |
|
| 21 |
+{% endblock %}
|
|
| 22 |
+ |
|
| 23 |
+{% block buy_widget_ordernumber_container %}{% endblock %}
|
|
| 0 | 24 |
\ No newline at end of file |
| 1 | 25 |
deleted file mode 100644 |
| ... | ... |
@@ -1,53 +0,0 @@ |
| 1 |
-{% sw_extends '@Storefront/storefront/page/product-detail/buy-widget-form.html.twig' %}
|
|
| 2 |
- |
|
| 3 |
- |
|
| 4 |
-{% block page_product_detail_buy_quantity_container %}
|
|
| 5 |
- {% if showQuantitySelect %}
|
|
| 6 |
- <div class="col-3 d-flex justify-content-end"> |
|
| 7 |
- {% set selectQuantityThreshold = 100 %}
|
|
| 8 |
- {% block page_product_detail_buy_quantity %}
|
|
| 9 |
- {% block page_product_detail_buy_quantity_input_group %}
|
|
| 10 |
- <div class="input-group product-detail-quantity-group quantity-selector-group" data-quantity-selector="true"> |
|
| 11 |
- {% block page_product_detail_buy_quantity_input %}
|
|
| 12 |
- |
|
| 13 |
- <input type="hidden" class="js-quantity-selector"> |
|
| 14 |
- <input type="hidden" class="js-btn-plus"> |
|
| 15 |
- <input type="hidden" class="js-btn-minus"> |
|
| 16 |
- |
|
| 17 |
- <select class="form-select" name="lineItems[{{ product.id }}][quantity]">
|
|
| 18 |
- <option selected="selected" value="{{ product.minPurchase }}">{{ product.minPurchase }}</option>
|
|
| 19 |
- {% for i in range(product.minPurchase + 1, product.minPurchase + 5) %}
|
|
| 20 |
- <option value="{{ i }}">{{ i }}</option>
|
|
| 21 |
- {% endfor %}
|
|
| 22 |
- </select> |
|
| 23 |
- |
|
| 24 |
- {% endblock %}
|
|
| 25 |
- {% block page_product_detail_buy_quantity_input_unit %}
|
|
| 26 |
- {% if product.translated.packUnit %}
|
|
| 27 |
- <span class="input-group-text"> |
|
| 28 |
- {% if product.minPurchase > 1 and product.translated.packUnitPlural %}
|
|
| 29 |
- {{ product.translated.packUnitPlural }}
|
|
| 30 |
- {% elseif product.translated.packUnit %}
|
|
| 31 |
- {{ product.translated.packUnit }}
|
|
| 32 |
- {% endif %}
|
|
| 33 |
- </span> |
|
| 34 |
- {% endif %}
|
|
| 35 |
- {% endblock %}
|
|
| 36 |
- </div> |
|
| 37 |
- {% endblock %}
|
|
| 38 |
- {% endblock %}
|
|
| 39 |
- </div> |
|
| 40 |
- {% endif %}
|
|
| 41 |
-{% endblock %}
|
|
| 42 |
- |
|
| 43 |
-{% block page_product_detail_buy_button_container %}
|
|
| 44 |
- <div class="col"> |
|
| 45 |
- {% block page_product_detail_buy_button %}
|
|
| 46 |
- <button class="btn btn-primary d-sm-inline-block d-block btn-buy h-100" |
|
| 47 |
- title="{{ "detail.addProduct"|trans|striptags }}"
|
|
| 48 |
- aria-label="{{ "detail.addProduct"|trans|striptags }}">
|
|
| 49 |
- <i class="fa-kit fa-cart"></i> {{ "detail.addProduct"|trans|sw_sanitize }}
|
|
| 50 |
- </button> |
|
| 51 |
- {% endblock %}
|
|
| 52 |
- </div> |
|
| 53 |
-{% endblock %}
|
|
| 54 | 0 |
\ No newline at end of file |
| 55 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,152 +0,0 @@ |
| 1 |
-{% sw_extends '@Storefront/storefront/page/product-detail/buy-widget-price.html.twig' %}
|
|
| 2 |
- |
|
| 3 |
-{% block page_product_detail_price_inner %}
|
|
| 4 |
- {% if page.product.calculatedPrices|length > 1 %}
|
|
| 5 |
- {% block page_product_detail_price_block %}
|
|
| 6 |
- <div class="product-block-prices"> |
|
| 7 |
- {% block page_product_detail_price_block_table %}
|
|
| 8 |
- <table class="table product-block-prices-grid"> |
|
| 9 |
- {% block page_product_detail_price_block_table_head %}
|
|
| 10 |
- <thead class="product-block-prices-head"> |
|
| 11 |
- {% block page_product_detail_price_block_table_head_inner %}
|
|
| 12 |
- <tr class="product-block-prices-row"> |
|
| 13 |
- <th scope="col" class="product-block-prices-cell"> |
|
| 14 |
- {{ "detail.dataColumnQuantity"|trans|sw_sanitize }}
|
|
| 15 |
- </th> |
|
| 16 |
- <th scope="col" class="product-block-prices-cell"> |
|
| 17 |
- {{ "detail.dataColumnPrice"|trans|sw_sanitize }}
|
|
| 18 |
- </th> |
|
| 19 |
- {% if page.product.calculatedPrice.referencePrice %}
|
|
| 20 |
- <th scope="col" class="product-block-prices-cell"> |
|
| 21 |
- {{ "detail.dataColumnReferencePrice"|trans|sw_sanitize }}
|
|
| 22 |
- </th> |
|
| 23 |
- {% endif %}
|
|
| 24 |
- </tr> |
|
| 25 |
- {% endblock %}
|
|
| 26 |
- </thead> |
|
| 27 |
- {% endblock %}
|
|
| 28 |
- |
|
| 29 |
- {% block page_product_detail_price_block_table_body %}
|
|
| 30 |
- <tbody class="product-block-prices-body"> |
|
| 31 |
- {% block page_product_detail_price_block_table_body_inner %}
|
|
| 32 |
- {% for price in page.product.calculatedPrices %}
|
|
| 33 |
- {% block page_product_detail_price_block_table_body_row %}
|
|
| 34 |
- <tr class="product-block-prices-row" |
|
| 35 |
- itemprop="offers" itemscope |
|
| 36 |
- itemtype="https://schema.org/Offer"> |
|
| 37 |
- |
|
| 38 |
- {% block page_product_detail_price_block_table_body_cell_quantity %}
|
|
| 39 |
- <th scope="row" class="product-block-prices-cell product-block-prices-cell-thin"> |
|
| 40 |
- <meta itemprop="priceCurrency" content="{{ page.header.activeCurrency.translated.shortName }}">
|
|
| 41 |
- <meta itemprop="price" content="{{ price.unitPrice }}">
|
|
| 42 |
- |
|
| 43 |
- {% if loop.last %}
|
|
| 44 |
- {{ "detail.priceDataInfoFrom"|trans|sw_sanitize }}
|
|
| 45 |
- <span class="product-block-prices-quantity">{{ price.quantity }}</span>
|
|
| 46 |
- |
|
| 47 |
- {% else %}
|
|
| 48 |
- {{ "detail.priceDataInfoUntil"|trans|sw_sanitize }}
|
|
| 49 |
- <span class="product-block-prices-quantity">{{ price.quantity }}</span>
|
|
| 50 |
- {% endif %}
|
|
| 51 |
- </th> |
|
| 52 |
- {% endblock %}
|
|
| 53 |
- |
|
| 54 |
- {% block page_product_detail_price_block_table_body_cell_price %}
|
|
| 55 |
- <td class="product-block-prices-cell"> |
|
| 56 |
- {% sw_include '@Storefront/storefront/component/product/block-price.html.twig' with {
|
|
| 57 |
- price: price |
|
| 58 |
- } only %} |
|
| 59 |
- </td> |
|
| 60 |
- {% endblock %}
|
|
| 61 |
- |
|
| 62 |
- {% block page_product_detail_price_block_table_body_cell_reference_price %}
|
|
| 63 |
- {% if price.referencePrice is not null %}
|
|
| 64 |
- <td class="product-block-prices-cell product-block-prices-cell-thin"> |
|
| 65 |
- {{ price.referencePrice.price|currency }}{{ "general.star"|trans|sw_sanitize }} / {{ price.referencePrice.referenceUnit }} {{ price.referencePrice.unitName }}
|
|
| 66 |
- </td> |
|
| 67 |
- {% endif %}
|
|
| 68 |
- {% endblock %}
|
|
| 69 |
- </tr> |
|
| 70 |
- {% endblock %}
|
|
| 71 |
- {% endfor %}
|
|
| 72 |
- {% endblock %}
|
|
| 73 |
- </tbody> |
|
| 74 |
- {% endblock %}
|
|
| 75 |
- </table> |
|
| 76 |
- {% endblock %}
|
|
| 77 |
- </div> |
|
| 78 |
- {% endblock %}
|
|
| 79 |
- {% else %}
|
|
| 80 |
- {% set price = page.product.calculatedPrice %}
|
|
| 81 |
- |
|
| 82 |
- {% if page.product.calculatedPrices|length == 1 %}
|
|
| 83 |
- {% set price = page.product.calculatedPrices.first %}
|
|
| 84 |
- {% endif %}
|
|
| 85 |
- |
|
| 86 |
- <meta itemprop="price" |
|
| 87 |
- content="{{ price.unitPrice }}">
|
|
| 88 |
- |
|
| 89 |
- {% block page_product_detail_price_content %}
|
|
| 90 |
- {% set listPrice = price.listPrice %}
|
|
| 91 |
- {% set isListPrice = listPrice.percentage > 0 %}
|
|
| 92 |
- {% set isRegulationPrice = price.regulationPrice != null %}
|
|
| 93 |
- |
|
| 94 |
- <p class="product-price mb-1 m-md-0 product-detail-price{% if isListPrice %} with-list-price{% endif %}{% if isRegulationPrice %} with-regulation-price{% endif %}">
|
|
| 95 |
- {{ price.unitPrice|currency }}
|
|
| 96 |
- </p> |
|
| 97 |
- |
|
| 98 |
- {% if isListPrice %}
|
|
| 99 |
- {% block page_product_detail_was_price %}
|
|
| 100 |
- |
|
| 101 |
- {% block page_product_detail_was_price_badge %}
|
|
| 102 |
- <span class="list-price-badge">%</span> |
|
| 103 |
- {% endblock %}
|
|
| 104 |
- |
|
| 105 |
- {% set afterListPriceSnippetExists = "listing.afterListPrice"|trans|length > 0 %}
|
|
| 106 |
- {% set beforeListPriceSnippetExists = "listing.beforeListPrice"|trans|length > 0 %}
|
|
| 107 |
- |
|
| 108 |
- {% block page_product_detail_was_price_wrapper %}
|
|
| 109 |
- <span class="product-detail-list-price-wrapper"> |
|
| 110 |
- {% if beforeListPriceSnippetExists %}{{"listing.beforeListPrice"|trans|trim}}{% endif %}
|
|
| 111 |
- |
|
| 112 |
- <span{% if not (afterListPriceSnippetExists or beforeListPriceSnippetExists) %} class="list-price-price"{% endif %}>{{ listPrice.price|currency }}</span>
|
|
| 113 |
- |
|
| 114 |
- {% if afterListPriceSnippetExists %}
|
|
| 115 |
- {{"listing.afterListPrice"|trans|trim}}
|
|
| 116 |
- {% endif %}
|
|
| 117 |
- |
|
| 118 |
- <span class="list-price-percentage">{{ "detail.listPricePercentage"|trans({'%price%': listPrice.percentage })|sw_sanitize }}</span>
|
|
| 119 |
- </span> |
|
| 120 |
- {% endblock %}
|
|
| 121 |
- {% endblock %}
|
|
| 122 |
- {% endif %}
|
|
| 123 |
- {% if isRegulationPrice %}
|
|
| 124 |
- <span class="product-detail-list-price-wrapper"> |
|
| 125 |
- <span class="regulation-price">{{ "general.listPricePreviously"|trans({'%price%': price.regulationPrice.price|currency }) }}</span>
|
|
| 126 |
- </span> |
|
| 127 |
- {% endif %}
|
|
| 128 |
- {% endblock %}
|
|
| 129 |
- |
|
| 130 |
- {% if page.product.purchaseUnit %}
|
|
| 131 |
- {% block page_product_detail_price_unit %}
|
|
| 132 |
- <div class="product-detail-price-unit mt-md-3"> |
|
| 133 |
- {% block page_product_detail_price_unit_label %}{% endblock %}
|
|
| 134 |
- |
|
| 135 |
- {% block page_product_detail_price_unit_content %}
|
|
| 136 |
- <span class="price-unit-content"> |
|
| 137 |
- {{ page.product.purchaseUnit }} {{ page.product.unit.translated.name }}
|
|
| 138 |
- </span> |
|
| 139 |
- {% endblock %}
|
|
| 140 |
- |
|
| 141 |
- {% if price.referencePrice is not null %}
|
|
| 142 |
- {% block page_product_detail_price_unit_reference_content %}
|
|
| 143 |
- <span class="price-unit-reference-content"> |
|
| 144 |
- | {{ price.referencePrice.price|currency }} / {{ price.referencePrice.referenceUnit }} {{ price.referencePrice.unitName }}
|
|
| 145 |
- </span> |
|
| 146 |
- {% endblock %}
|
|
| 147 |
- {% endif %}
|
|
| 148 |
- </div> |
|
| 149 |
- {% endblock %}
|
|
| 150 |
- {% endif %}
|
|
| 151 |
- {% endif %}
|
|
| 152 |
-{% endblock %}
|
| 153 | 0 |
deleted file mode 100644 |
| ... | ... |
@@ -1,206 +0,0 @@ |
| 1 |
-{% sw_extends '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
|
|
| 2 |
- |
|
| 3 |
-{% block page_product_detail_buy_inner %}
|
|
| 4 |
- <div class="js-magnifier-zoom-image-container"> |
|
| 5 |
- {% block page_product_detail_rich_snippets %}
|
|
| 6 |
- <meta itemprop="description" content="{{ page.product.translated.description|raw }}">
|
|
| 7 |
- |
|
| 8 |
- {% block page_product_detail_rich_snippets_brand %}
|
|
| 9 |
- {% if page.product.manufacturer %}
|
|
| 10 |
- <div itemprop="brand" itemtype="https://schema.org/Brand" itemscope> |
|
| 11 |
- <meta itemprop="name" content="{{ page.product.manufacturer.translated.name }}">
|
|
| 12 |
- </div> |
|
| 13 |
- {% endif %}
|
|
| 14 |
- {% endblock %}
|
|
| 15 |
- |
|
| 16 |
- {% block page_product_detail_rich_snippets_gtin13 %}
|
|
| 17 |
- {% if page.product.ean %}
|
|
| 18 |
- <meta itemprop="gtin13" |
|
| 19 |
- content="{{ page.product.ean }}">
|
|
| 20 |
- {% endif %}
|
|
| 21 |
- {% endblock %}
|
|
| 22 |
- |
|
| 23 |
- {% block page_product_detail_rich_snippets_mpn %}
|
|
| 24 |
- {% if page.product.manufacturerNumber %}
|
|
| 25 |
- <meta itemprop="mpn" |
|
| 26 |
- content="{{ page.product.manufacturerNumber }}">
|
|
| 27 |
- {% endif %}
|
|
| 28 |
- {% endblock %}
|
|
| 29 |
- |
|
| 30 |
- {% block page_product_detail_rich_snippets_weight %}
|
|
| 31 |
- {% if page.product.weight %}
|
|
| 32 |
- <meta itemprop="weight" |
|
| 33 |
- content="{{ page.product.weight }} kg">
|
|
| 34 |
- {% endif %}
|
|
| 35 |
- {% endblock %}
|
|
| 36 |
- |
|
| 37 |
- {% block page_product_detail_rich_snippets_height %}
|
|
| 38 |
- {% if page.product.height %}
|
|
| 39 |
- <meta itemprop="height" |
|
| 40 |
- content="{{ page.product.height }} mm">
|
|
| 41 |
- {% endif %}
|
|
| 42 |
- {% endblock %}
|
|
| 43 |
- |
|
| 44 |
- {% block page_product_detail_rich_snippets_width %}
|
|
| 45 |
- {% if page.product.width %}
|
|
| 46 |
- <meta itemprop="width" |
|
| 47 |
- content="{{ page.product.width }} mm">
|
|
| 48 |
- {% endif %}
|
|
| 49 |
- {% endblock %}
|
|
| 50 |
- |
|
| 51 |
- {% block page_product_detail_rich_snippets_depth %}
|
|
| 52 |
- {% if page.product.length %}
|
|
| 53 |
- <meta itemprop="depth" |
|
| 54 |
- content="{{ page.product.length }} mm">
|
|
| 55 |
- {% endif %}
|
|
| 56 |
- {% endblock %}
|
|
| 57 |
- |
|
| 58 |
- {% block page_product_detail_rich_snippets_release_date %}
|
|
| 59 |
- <meta itemprop="releaseDate" |
|
| 60 |
- content="{{ page.product.releaseDate|format_date(pattern='Y-MM-dd') }}">
|
|
| 61 |
- {% endblock %}
|
|
| 62 |
- {% endblock %}
|
|
| 63 |
- |
|
| 64 |
- {% block page_product_detail_buy_container %}
|
|
| 65 |
- <div itemprop="offers" |
|
| 66 |
- itemscope |
|
| 67 |
- itemtype="{% if page.product.calculatedPrices|length > 1 %}http://schema.org/AggregateOffer{% else %}http://schema.org/Offer{% endif %}">
|
|
| 68 |
- {% block page_product_detail_data %}
|
|
| 69 |
- {% block page_product_detail_data_rich_snippet_url %}
|
|
| 70 |
- <meta itemprop="url" |
|
| 71 |
- content="{{ seoUrl('frontend.detail.page', { productId: page.product.id }) }}">
|
|
| 72 |
- {% endblock %}
|
|
| 73 |
- {% block page_product_detail_data_rich_snippet_price_range %}
|
|
| 74 |
- {% if page.product.calculatedPrices|length > 1 %}
|
|
| 75 |
- {% set lowestPrice = false %}
|
|
| 76 |
- {% set highestPrice = false %}
|
|
| 77 |
- |
|
| 78 |
- {% for price in page.product.calculatedPrices %}
|
|
| 79 |
- {% if not lowestPrice or price.unitPrice < lowestPrice %}
|
|
| 80 |
- {% set lowestPrice = price.unitPrice %}
|
|
| 81 |
- {% endif %}
|
|
| 82 |
- {% if not highestPrice or price.unitPrice > highestPrice %}
|
|
| 83 |
- {% set highestPrice = price.unitPrice %}
|
|
| 84 |
- {% endif %}
|
|
| 85 |
- {% endfor %}
|
|
| 86 |
- |
|
| 87 |
- <meta itemprop="lowPrice" content="{{ lowestPrice }}">
|
|
| 88 |
- <meta itemprop="highPrice" content="{{ highestPrice }}">
|
|
| 89 |
- <meta itemprop="offerCount" content="{{ page.product.calculatedPrices|length }}">
|
|
| 90 |
- {% endif %}
|
|
| 91 |
- {% endblock %}
|
|
| 92 |
- {% block page_product_detail_data_rich_snippet_price_currency %}
|
|
| 93 |
- <meta itemprop="priceCurrency" |
|
| 94 |
- content="{{ context.currency.translated.shortName }}">
|
|
| 95 |
- {% endblock %}
|
|
| 96 |
- |
|
| 97 |
- <div class="row flex-md-nowrap"> |
|
| 98 |
- <div class="col-12 col-md-auto"> |
|
| 99 |
- {% block page_product_detail_price %}
|
|
| 100 |
- <div class="product-detail-price-container"> |
|
| 101 |
- {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-price.html.twig' %}
|
|
| 102 |
- </div> |
|
| 103 |
- {% endblock %}
|
|
| 104 |
- </div> |
|
| 105 |
- |
|
| 106 |
- <div class="col-12 col-md mt-3 mb-1 my-md-0"> |
|
| 107 |
- {% block page_product_detail_buy_form %}
|
|
| 108 |
- {% if page.product.active %}
|
|
| 109 |
- <div class="product-detail-form-container mb-0"> |
|
| 110 |
- {% sw_include '@Storefront/storefront/page/product-detail/buy-widget-form.html.twig' %}
|
|
| 111 |
- </div> |
|
| 112 |
- {% endif %}
|
|
| 113 |
- {% endblock %}
|
|
| 114 |
- </div> |
|
| 115 |
- </div> |
|
| 116 |
- |
|
| 117 |
- |
|
| 118 |
- {% block page_product_detail_tax %}
|
|
| 119 |
- <div class="product-detail-tax-container"> |
|
| 120 |
- {% if context.taxState == "gross" %}
|
|
| 121 |
- {% set taxText = "general.grossTaxInformation"|trans|sw_sanitize %}
|
|
| 122 |
- {% else %}
|
|
| 123 |
- {% set taxText = "general.netTaxInformation"|trans|sw_sanitize %}
|
|
| 124 |
- {% endif %}
|
|
| 125 |
- |
|
| 126 |
- <p class="product-detail-tax"> |
|
| 127 |
- {% block page_product_detail_tax_link %}
|
|
| 128 |
- <a class="product-detail-tax-link" |
|
| 129 |
- href="{{ path('frontend.cms.page', { id: config('core.basicInformation.shippingPaymentInfoPage') }) }}"
|
|
| 130 |
- title="{{ taxText }}"
|
|
| 131 |
- data-ajax-modal="true" |
|
| 132 |
- data-url="{{ path('frontend.cms.page', { id: config('core.basicInformation.shippingPaymentInfoPage') }) }}">
|
|
| 133 |
- {{ taxText }}
|
|
| 134 |
- </a> |
|
| 135 |
- {% endblock %}
|
|
| 136 |
- </p> |
|
| 137 |
- </div> |
|
| 138 |
- {% endblock %}
|
|
| 139 |
- |
|
| 140 |
- {% set remoteClickOptions = {
|
|
| 141 |
- selector: "#review-tab", |
|
| 142 |
- scrollToElement: true |
|
| 143 |
- } %} |
|
| 144 |
- |
|
| 145 |
- {% block page_product_detail_reviews %}
|
|
| 146 |
- {% if page.product.ratingAverage > 0 and page.reviews.totalReviews > 0 and config('core.listing.showReview') %}
|
|
| 147 |
- <div class="product-detail-reviews"> |
|
| 148 |
- |
|
| 149 |
- {% sw_include '@Storefront/storefront/component/review/rating.html.twig' with {
|
|
| 150 |
- points: page.product.ratingAverage, |
|
| 151 |
- style: 'text-primary' |
|
| 152 |
- } %} |
|
| 153 |
- <a |
|
| 154 |
- data-bs-toggle="tab" |
|
| 155 |
- class="product-detail-reviews-link" |
|
| 156 |
- {# @deprecated tag:v6.6.0 - Registering plugin on selector "data-offcanvas-tabs" is deprecated. Use "data-off-canvas-tabs" instead #}
|
|
| 157 |
- {% if feature('v6.6.0.0') %}
|
|
| 158 |
- data-off-canvas-tabs="true" |
|
| 159 |
- {% else %}
|
|
| 160 |
- data-offcanvas-tabs="true" |
|
| 161 |
- {% endif %}
|
|
| 162 |
- data-remote-click="true" |
|
| 163 |
- {# ludtwig-ignore html-string-quotation #}
|
|
| 164 |
- data-remote-click-options='{{ remoteClickOptions|json_encode }}'
|
|
| 165 |
- href="#review-tab-pane" |
|
| 166 |
- aria-controls="review-tab-pane" |
|
| 167 |
- > |
|
| 168 |
- {{ page.reviews.totalReviews }}
|
|
| 169 |
- {{ "detail.reviewLinkText"|trans({'%count%': page.reviews.totalReviews})|sw_sanitize }}
|
|
| 170 |
- </a> |
|
| 171 |
- </div> |
|
| 172 |
- {% endif %}
|
|
| 173 |
- {% endblock %}
|
|
| 174 |
- |
|
| 175 |
- {% block page_product_detail_delivery_informations %}
|
|
| 176 |
- <div class="product-detail-delivery-information"> |
|
| 177 |
- {% sw_include '@Storefront/storefront/component/delivery-information.html.twig' %}
|
|
| 178 |
- </div> |
|
| 179 |
- {% endblock %}
|
|
| 180 |
- {% endblock %}
|
|
| 181 |
- |
|
| 182 |
- {% block page_product_detail_configurator_include %}
|
|
| 183 |
- {% if page.product.parentId and page.configuratorSettings|length > 0 %}
|
|
| 184 |
- <div class="product-detail-configurator-container"> |
|
| 185 |
- {% sw_include '@Storefront/storefront/page/product-detail/configurator.html.twig' %}
|
|
| 186 |
- </div> |
|
| 187 |
- {% endif %}
|
|
| 188 |
- {% endblock %}
|
|
| 189 |
- |
|
| 190 |
- |
|
| 191 |
- </div> |
|
| 192 |
- {% endblock %}
|
|
| 193 |
- |
|
| 194 |
- {% if config('core.cart.wishlistEnabled') %}
|
|
| 195 |
- {% block page_product_detail_wishlist %}
|
|
| 196 |
- {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
|
|
| 197 |
- showText: true, |
|
| 198 |
- size: 'md', |
|
| 199 |
- productId: page.product.id |
|
| 200 |
- } %} |
|
| 201 |
- {% endblock %}
|
|
| 202 |
- {% endif %}
|
|
| 203 |
- |
|
| 204 |
- {% block page_product_detail_ordernumber_container %}{% endblock %}
|
|
| 205 |
- </div> |
|
| 206 |
-{% endblock %}
|