eSales Media Git repositories
Browse code

Update price-unit template, style price display

Martin Filipovic Hinrichs authored on02/02/2026 18:32:27
Showing3 changed files
src/Resources/app/storefront/src/scss/scopes/_listing.scss
History View file @97fce90
... ... 
@@ -6,44 +6,5 @@
6 6 
   .cms-listing-col{
7 7 
     margin-bottom: 0;
8 8 
   }
9 
-
10 
-  //Product-Price
11 
-
12 
-  .product-price {
13 
-    font-family: $font-secondary;
14 
-    @include font-size(30px);
15 
-    margin: .75rem 0 1.5rem 0;
16 
-    display: block;
17 
-    line-height: 1;
18 
-    white-space: nowrap;
19 
-  }
20 
-
21 
-
22 
-  //Product-Title
23 
-
24 
-  .product-manufacturer {
25 
-    display: block;
26 
-    @include font-size(18px);
27 
-    line-height: 1.15;
28 
-    margin-bottom: .25rem;
29 
-  }
30 
-
31 
-  .product-name {
32 
-    @include font-size(25px);
33 
-    font-family: $font-secondary;
34 
-    font-weight: $font-weight-normal;
35 
-    height: auto;
36 
-    text-transform: uppercase;
37 
-    margin: 0;
38 
-    display: block;
39 
-    line-height: 1.15;
40 
-  }
41 
-
42 
-  .product-taste {
43 
-    display: block;
44 
-    @include font-size(18px);
45 
-    margin-top: .75rem;
46 
-    line-height: 1.15;
47 
-  }
48 9 
 }
49 10
src/Resources/app/storefront/src/scss/widgets/_product-box.scss
History View file @97fce90
... ... 
@@ -1,90 +1,170 @@
1 
-.product-box {
2 
-  background: none;
1 
+.card.product-box {
2 
+  border: 0;
3 
+  box-shadow: 3px 3px 6px #00000029;
3 4 
   text-align: center;
4 
-  transition: all .3s ease-in-out;
5 
-  border: 1px solid transparent;
6 
-
7 
-  &:hover {
8 
-    background-color: $lighter;
9 
-    border-color: $light;
10 
-
11 
-    .product-info .product-action .btn-buy {
12 
-      --bs-btn-color: var(--bs-btn-hover-color);
13 
-      --bs-btn-bg: var(--bs-btn-hover-bg);
14 
-      --bs-btn-border-color: var(--bs-primary);
15 
-    }
16 
-  }
17 5
18 6 
   .card-body {
19 
-    padding: 0;
20 
-    display: flex;
21 
-    flex-flow: column nowrap;
7 
+    padding-bottom: 0.5rem;
8 
+  }
22 9
23 
-    .product-badges {
24 
-      .badge {
25 
-        --bs-badge-border-radius: 0;
26 
-        border-radius: var(--bs-badge-border-radius);
27 
-        font-family: $font-secondary;
28 
-        font-weight: $font-weight-normal;
29 
-      }
30 
-    }
10 
+  .badge-discount, .badge-topseller {
11 
+    display: none;
31 12 
   }
32 13
33 14 
   .product-image-wrapper {
34 
-    margin: 0;
35 
-    padding: 1.25rem;
36 
-    background-color: $body-bg;
37 
-    height: 350px;
38 
-    flex-grow: initial;
39 
-    flex-shrink: initial;
40 
-    flex-basis: initial;
15 
+    height: 270px;
16 
+    margin-bottom: 2rem;
17 
+  }
18 
+  .product-image {
19 
+    max-height: 270px;
20 
+  }
21 
+  .product-image.is-standard {
22 
+    object-fit: contain;
41 23 
   }
42 24
43 
-  .product-info {
44 
-    padding: 1.75rem;
45 
-    display: flex;
46 
-    flex-flow: column nowrap;
47 
-    flex: 1;
48 
-
49 
-
50 
-    .product-price-info {
51 
-      margin: auto 0 0 0;
52 
-
53 
-      .product-price-wrapper {
25 
+  .product-name {
26 
+    font-size: rfs-value(18px);
27 
+    font-family: $font-secondary;
28 
+    font-weight: $font-weight-normal;
29 
+    height: auto;
30 
+    text-transform: uppercase;
31 
+    margin: 0;
32 
+    display: block;
33 
+    line-height: 1.15;
34 
+  }
54 35
55 
-      }
36 
+  .product-taste {
37 
+    font-size: rfs-value(13px);
38 
+    color: $dark;
39 
+    margin-top: .5rem;
40 
+    line-height: 1.15;
41 
+  }
56 42
57 
-      p.product-price-unit {
58 
-        height: auto;
43 
+  .product-price-info {
44 
+    //margin-top: .5rem;
59 45
60 
-        span.price-taxInfo {
61 
-          display: block;
62 
-        }
63 
-      }
46 
+    .product-cheapest-price {
47 
+      display: none;
64 48 
     }
65 49
66 
-    .product-action {
67 
-      margin-top: 0;
68 
-      padding-top: 1.5rem;
50 
+    .list-price-label, .list-price-price {
51 
+      text-decoration: line-through;
52 
+      font-size: rfs-value(15px);
53 
+      color: $black;
54 
+    }
69 55
70 
-      .btn-buy {
71 
-        --bs-btn-color: var(--bs-primary);
72 
-        --bs-btn-bg: transparent;
73 
-        --bs-btn-border-color: var(--bs-btn-color);
74 
-        --bs-btn-hover-color: #fff;
75 
-        --bs-btn-hover-bg: var(--bs-primary);
76 
-        --bs-btn-hover-border-color: var(--bs-primary);
77 
-        --bs-btn-focus-shadow-rgb: 175, 148, 108;
78 
-        --bs-btn-active-color: var(--bs-btn-hover-color);
79 
-        --bs-btn-active-bg: var(--bs-btn-hover);
80 
-        --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
81 
-        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
82 
-        --bs-btn-disabled-color: var(--bs-btn-color);
83 
-        --bs-btn-disabled-bg: var(--bs-btn-bg);
84 
-        --bs-btn-disabled-border-color: var(--bs-btn-border-color);
56 
+    .product-price-inner {
57 
+      font-family: $font-secondary;
58 
+      @include font-size(30px);
59 
+      margin: .75rem 1rem 0.5rem;
60 
+      line-height: 1;
61 
+      font-weight: 400;
62 
+      white-space: nowrap;
63 
+    }
85 64
65 
+    .product-price.with-list-price .product-price-inner {
66 
+      font-weight: bold;
67 
+    }
86 68
87 
-      }
69 
+    .product-price-unit, .price-taxInfo {
70 
+      color: $dark;
71 
+      font-size: rfs-value(9px);
72 
+      height: auto;
73 
+      margin: 0;
88 74 
     }
89 75 
   }
90 
-}
91 76 
\ No newline at end of file
77 
+
78 
+  .product-action {
79 
+    margin-top: 0.5rem;
80 
+  }
81 
+}
82 
+
83 
+//  background: none;
84 
+//  text-align: center;
85 
+//  transition: all .3s ease-in-out;
86 
+//  border: 1px solid transparent;
87 
+//
88 
+//  &:hover {
89 
+//    background-color: $lighter;
90 
+//    border-color: $light;
91 
+//
92 
+//    .product-info .product-action .btn-buy {
93 
+//      --bs-btn-color: var(--bs-btn-hover-color);
94 
+//      --bs-btn-bg: var(--bs-btn-hover-bg);
95 
+//      --bs-btn-border-color: var(--bs-primary);
96 
+//    }
97 
+//  }
98 
+//
99 
+//  .card-body {
100 
+//    padding: 0;
101 
+//    display: flex;
102 
+//    flex-flow: column nowrap;
103 
+//
104 
+//    .product-badges {
105 
+//      .badge {
106 
+//        --bs-badge-border-radius: 0;
107 
+//        border-radius: var(--bs-badge-border-radius);
108 
+//        font-family: $font-secondary;
109 
+//        font-weight: $font-weight-normal;
110 
+//      }
111 
+//    }
112 
+//  }
113 
+//
114 
+//  .product-image-wrapper {
115 
+//    margin: 0;
116 
+//    padding: 1.25rem;
117 
+//    background-color: $body-bg;
118 
+//    height: 350px;
119 
+//    flex-grow: initial;
120 
+//    flex-shrink: initial;
121 
+//    flex-basis: initial;
122 
+//  }
123 
+//
124 
+//  .product-info {
125 
+//    padding: 1.75rem;
126 
+//    display: flex;
127 
+//    flex-flow: column nowrap;
128 
+//    flex: 1;
129 
+//
130 
+//
131 
+//    .product-price-info {
132 
+//      margin: auto 0 0 0;
133 
+//
134 
+//      .product-price-wrapper {
135 
+//
136 
+//      }
137 
+//
138 
+//      p.product-price-unit {
139 
+//        height: auto;
140 
+//
141 
+//        span.price-taxInfo {
142 
+//          display: block;
143 
+//        }
144 
+//      }
145 
+//    }
146 
+//
147 
+//    .product-action {
148 
+//      margin-top: 0;
149 
+//      padding-top: 1.5rem;
150 
+//
151 
+//      .btn-buy {
152 
+//        --bs-btn-color: var(--bs-primary);
153 
+//        --bs-btn-bg: transparent;
154 
+//        --bs-btn-border-color: var(--bs-btn-color);
155 
+//        --bs-btn-hover-color: #fff;
156 
+//        --bs-btn-hover-bg: var(--bs-primary);
157 
+//        --bs-btn-hover-border-color: var(--bs-primary);
158 
+//        --bs-btn-focus-shadow-rgb: 175, 148, 108;
159 
+//        --bs-btn-active-color: var(--bs-btn-hover-color);
160 
+//        --bs-btn-active-bg: var(--bs-btn-hover);
161 
+//        --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
162 
+//        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
163 
+//        --bs-btn-disabled-color: var(--bs-btn-color);
164 
+//        --bs-btn-disabled-bg: var(--bs-btn-bg);
165 
+//        --bs-btn-disabled-border-color: var(--bs-btn-border-color);
166 
+//
167 
+//
168 
+//      }
169 
+//    }
170 
+//  }
171 
+//}
92 172 
\ No newline at end of file
src/Resources/views/storefront/component/product/card/price-unit.html.twig
History View file @97fce90
... ... 
@@ -16,50 +16,19 @@
16 16 
     {% if displayParent %}
17 17 
         {% set displayFromVariants = displayParent and real.unitPrice !== cheapest.unitPrice %}
18 18 
         {% set real = cheapest %}
19 
+        {% set totalVariants = product.cheapestPriceContainer.value %}
20 
+        {% set hasDifferentPrice = totalVariants|filter(variant => variant.default != null)|length > 0 %}
21 
+        {% set hasRange = product.cheapestPrice.hasRange %}
19 22 
     {% endif %}
20 23
21 24 
     <div class="product-price-info">
25 
+        {#
26 
+        Main price display. Always used, can also include list prices.
27 
+        Example: $150.00"
28 
+        Example with list price: €400.00 <s>€500.00</s> (20% saved)"
29 
+        #}
22 30 
         {% block component_product_box_price %}
23 
-            <div class="product-price-wrapper">
24 
-                {% set price = real %}
25 
-                {% set isListPrice = price.listPrice.percentage > 0 %}
26 
-                {% set isRegulationPrice = price.regulationPrice != null %}
27 
-                {% if cheapest.unitPrice != real.unitPrice and cheapest.variantId != product.id %}
28 
-                    <div class="product-cheapest-price{% if isListPrice and isRegulationPrice and not displayFrom and not displayFromVariants %} with-list-price{% endif %}{% if isRegulationPrice and not displayFrom and displayFromVariants %} with-regulation-price{% endif %}{% if displayFrom and isRegulationPrice %} with-from-price{% endif %}">
29 
-                        <div>{{ "listing.cheapestPriceLabel"|trans|sw_sanitize }}
30 
-                            <span class="product-cheapest-price-price"> {{ cheapest.unitPrice|currency }}</span>
31 
-                        </div>
32 
-                    </div>
33 
-                {% endif %}
34 
-                {% if displayFrom or (displayParent and displayFromVariants) %}
35 
-                    {{ "listing.listingTextFrom"|trans|sw_sanitize }}
36 
-                {% endif %}
37 
-
38 
-                <span class="product-price{% if isListPrice and not displayFrom and not displayFromVariants %} with-list-price{% endif %}">
39 
-                    {{ price.unitPrice|currency }}
40 
-
41 
-                    {% if isListPrice and not displayFrom and not displayFromVariants %}
42 
-                        {% set afterListPriceSnippetExists = "listing.afterListPrice"|trans|length > 0 %}
43 
-                        {% set beforeListPriceSnippetExists = "listing.beforeListPrice"|trans|length > 0 %}
44 
-                        {% set hideStrikeTrough = beforeListPriceSnippetExists or afterListPriceSnippetExists %}
45 
-
46 
-                        <span class="list-price{% if hideStrikeTrough %} list-price-no-line-through{% endif %}">
47 
-                            {% if beforeListPriceSnippetExists %}{{ "listing.beforeListPrice"|trans|trim|sw_sanitize }}{% endif %}
48 
-
49 
-                            <span class="list-price-price">{{ price.listPrice.price|currency }}</span>
50 
-
51 
-                            {% if afterListPriceSnippetExists %}{{ "listing.afterListPrice"|trans|trim|sw_sanitize }}{% endif %}
52 
-
53 
-                            <span class="list-price-percentage">{{ "detail.listPricePercentage"|trans({'%price%': price.listPrice.percentage })|sw_sanitize }}</span>
54 
-                        </span>
55 
-                    {% endif %}
56 
-                </span>
57 
-                {% if isRegulationPrice %}
58 
-                    <span class="product-price with-regulation-price">
59 
-                        {% if isListPrice %}<br>{% endif %}<span class="regulation-price">{{ "general.listPricePreviously"|trans({'%price%': price.regulationPrice.price|currency }) }}</span>
60 
-                    </span>
61 
-                {% endif %}
62 
-            </div>
31 
+            {{ parent() }}
63 32 
         {% endblock %}
64 33
65 34 
         {% block component_product_box_price_unit %}
... ... 
@@ -72,19 +41,50 @@
72 41 
                         </span>
73 42 
                     {% endif %}
74 43 
                 {% endblock %}
75 
-
44 
+                <span> | </span>
76 45 
                 {# Item price is based on a reference unit #}
77 46 
                 {% block component_product_box_price_reference_unit %}
78 47 
                     {% if referencePrice is not null %}
79 48 
                         <span class="price-unit-reference">
80 
-                            | {{ referencePrice.price|currency }} / {{ referencePrice.referenceUnit }} {{ referencePrice.unitName }}
81 
-                        </span>
49 
+                        {% if referencePrice.referenceUnit == '1' and referencePrice.unitName =='Liter' %}
50 
+                            {{ referencePrice.price|currency }}/l
51 
+                        {% else %}
52 
+                            ({{ referencePrice.price|currency }} / {{ referencePrice.referenceUnit }} {{ referencePrice.unitName }})
53 
+                        {% endif %}
54 
+                    </span>
82 55 
                     {% endif %}
83 56 
                 {% endblock %}
84 
-
85 
-                <span class="price-taxInfo">Inkl. MWST., zzgl. Versandkosten</span>
86 57 
             </p>
87 58 
         {% endblock %}
88 59
60 
+        <p class="price-taxInfo">Inkl. MWST., zzgl. Versandkosten</p>
89 61 
     </div>
62 
+
90 63 
 {% endblock %}
64 
+
65 
+
66 
+{#
67 
+Main price display. Always used, can also include list prices.
68 
+Example: $150.00"
69 
+Example with list price: €400.00 <s>€500.00</s> (20% saved)"
70 
+#}
71 
+{% block component_product_box_main_price %}
72 
+    <span class="product-price{% if isListPrice and not displayFrom and not displayFromVariants %} with-list-price{% endif %}">
73 
+
74 
+        {% if isListPrice and not displayFrom and not displayFromVariants %}
75 
+            {% set afterListPriceSnippetExists = 'listing.afterListPrice'|trans|length > 0 %}
76 
+            {% set beforeListPriceSnippetExists = 'listing.beforeListPrice'|trans|length > 0 %}
77 
+            {% set hideStrikeTrough = beforeListPriceSnippetExists or afterListPriceSnippetExists %}
78 
+
79 
+            <span class="list-price{% if hideStrikeTrough %} list-price-no-line-through{% endif %}">
80 
+                {% if beforeListPriceSnippetExists %}{{ 'listing.beforeListPrice'|trans|trim|sw_sanitize }}{% endif %}
81 
+
82 
+                <span class="list-price-label">{{ 'listing.regularPriceLabel'|trans|sw_sanitize }} </span
83 
+                ><span class="list-price-price">{{ price.listPrice.price|currency }}</span>
84 
+
85 
+                {% if afterListPriceSnippetExists %}{{ 'listing.afterListPrice'|trans|trim|sw_sanitize }}{% endif %}
86 
+            </span>
87 
+        {% endif %}
88 
+        <span class="product-price-inner">{{ price.unitPrice|currency }}</span>
89 
+    </span>
90 
+{% endblock %}
91 91 
\ No newline at end of file