eSales Media Git repositories
Browse code

Style product box

Martin Filipovic Hinrichs authored on03/02/2026 06:38:13
Showing3 changed files
src/Resources/app/storefront/src/scss/widgets/_product-box.scss
History View file @fd47f93
... ... 
@@ -4,7 +4,9 @@
4 4 
   text-align: center;
5 5
6 6 
   .card-body {
7 
-    padding-bottom: 0.5rem;
7 
+    display: flex;
8 
+    flex-flow: column nowrap;
9 
+    padding-bottom: 2.5rem;
8 10 
   }
9 11
10 12 
   .badge-discount, .badge-topseller {
... ... 
@@ -12,73 +14,91 @@
12 14 
   }
13 15
14 16 
   .product-image-wrapper {
15 
-    height: 270px;
17 
+    flex: 0 0 270px;
16 18 
     margin-bottom: 2rem;
17 
-  }
18 
-  .product-image {
19 
-    max-height: 270px;
20 
-  }
21 
-  .product-image.is-standard {
22 
-    object-fit: contain;
23 
-  }
24 19
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 
-  }
20 
+    .product-image {
21 
+      max-height: 270px;
22 
+    }
35 23
36 
-  .product-taste {
37 
-    font-size: rfs-value(13px);
38 
-    color: $dark;
39 
-    margin-top: .5rem;
40 
-    line-height: 1.15;
24 
+    .product-image.is-standard {
25 
+      object-fit: contain;
26 
+    }
41 27 
   }
42 28
43 
-  .product-price-info {
44 
-    //margin-top: .5rem;
29 
+  .product-info {
30 
+    flex: 1 0;
31 
+    display: flex;
32 
+    flex-flow: column nowrap;
45 33
46 
-    .product-cheapest-price {
47 
-      display: none;
34 
+    .product-name {
35 
+      font-size: rfs-value(18px);
36 
+      font-family: $font-secondary;
37 
+      font-weight: $font-weight-normal;
38 
+      height: auto;
39 
+      text-transform: uppercase;
40 
+      margin: 0;
41 
+      display: block;
42 
+      line-height: 1.15;
48 43 
     }
49 44
50 
-    .list-price-label, .list-price-price {
51 
-      text-decoration: line-through;
52 
-      font-size: rfs-value(15px);
53 
-      color: $black;
45 
+    .product-taste {
46 
+      font-size: rfs-value(13px);
47 
+      color: $dark;
48 
+      margin-top: .5rem;
49 
+      line-height: 1.15;
54 50 
     }
55 51
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;
52 
+    .spacer {
53 
+      flex-grow: 1;
63 54 
     }
64 55
65 
-    .product-price.with-list-price .product-price-inner {
66 
-      font-weight: bold;
67 
-    }
56 
+    .product-price-info {
57 
+      .product-cheapest-price {
58 
+        display: none;
59 
+      }
68 60
69 
-    .product-price-unit, .price-taxInfo {
70 
-      color: $dark;
71 
-      font-size: rfs-value(9px);
72 
-      height: auto;
73 
-      margin: 0;
61 
+      .list-price-label, .list-price-price {
62 
+        text-decoration: line-through;
63 
+        font-size: rfs-value(15px);
64 
+        color: $black;
65 
+      }
66 
+
67 
+      .product-price-inner {
68 
+        font-family: $font-secondary;
69 
+        @include font-size(30px);
70 
+        margin: .75rem 1rem 0.5rem;
71 
+        line-height: 1;
72 
+        font-weight: 400;
73 
+        white-space: nowrap;
74 
+      }
75 
+
76 
+      .product-price.with-list-price .product-price-inner {
77 
+        font-weight: bold;
78 
+      }
79 
+
80 
+      .product-price-unit, .price-taxInfo {
81 
+        color: $dark;
82 
+        font-size: rfs-value(9px);
83 
+        height: auto;
84 
+        margin: 0;
85 
+      }
74 86 
     }
75 87 
   }
76 
-
77 88 
   .product-action {
78 
-    margin-top: 0.5rem;
89 
+    margin-top: 1rem;
90 
+
91 
+    .btn-buy {
92 
+      font-size: rfs-value(12px);
93 
+      line-height: 100%;
94 
+      font-weight: bold;
95 
+      padding: .5rem 1rem;
96 
+    }
79 97 
   }
80 98 
 }
81 99
100 
+
101 
+//
82 102 
 //  background: none;
83 103 
 //  text-align: center;
84 104 
 //  transition: all .3s ease-in-out;
src/Resources/views/storefront/component/product/card/action.html.twig
History View file @fd47f93
... ... 
@@ -1,63 +1,69 @@
1 1 
 {% sw_extends '@Storefront/storefront/component/product/card/action.html.twig' %}
2 2
3 
+{% block component_product_box_action_buy_button %}
4 
+    <button class="btn btn-buy">
5 
+        {% block page_product_detail_product_buy_button_label %}
6 
+            {{ parent() }}
7 
+        {% endblock %}
8 
+    </button>
9 
+{% endblock %}
3 10
4 11
5 
-{% block component_product_box_action_form %}
6 
-
7 
-    {% block component_product_box_action_buy_redirect_input %}
8 
-        {# fallback redirect back to detail page is deactivated via js #}
9 
-        <input type="hidden"
10 
-               name="redirectTo"
11 
-               value="frontend.detail.page">
12 
-
13 
-        <input type="hidden"
14 
-               name="redirectParameters"
15 
-               data-redirect-parameters="true"
16 
-                {# ludtwig-ignore html-string-quotation #}
17 
-               value='{"productId": "{{ product.id }}"}'>
18 
-    {% endblock %}
19 
-
20 
-    {% block page_product_detail_buy_product_buy_info %}
21 
-        <input type="hidden"
22 
-               name="lineItems[{{ id }}][id]"
23 
-               value="{{ id }}">
24 
-        <input type="hidden"
25 
-               name="lineItems[{{ id }}][referencedId]"
26 
-               value="{{ id }}">
27 
-        <input type="hidden"
28 
-               name="lineItems[{{ id }}][type]"
29 
-               value="product">
30 
-        <input type="hidden"
31 
-               name="lineItems[{{ id }}][stackable]"
32 
-               value="1">
33 
-        <input type="hidden"
34 
-               name="lineItems[{{ id }}][removable]"
35 
-               value="1">
36 
-
37 
-    {% endblock %}
38 
-
39 
-    {% block page_product_detail_product_buy_meta %}
40 
-        <input type="hidden"
41 
-               name="product-name"
42 
-               value="{{ product.translated.name }}">
43 
-    {% endblock %}
44 
-
45 
-    {% block page_product_detail_product_buy_button %}
46 
-        <div class="row gx-3 flex-nowrap">
47 
-            <div class="col-auto">
48 
-
49 
-                <select class="form-select" name="lineItems[{{ id }}][quantity]">
50 
-                    <option selected="selected" value="{{ product.minPurchase }}">{{ product.minPurchase }}</option>
51 
-                    {% for i in range(product.minPurchase + 1, product.minPurchase + 5) %}
52 
-                        <option value="{{ i }}">{{ i }}</option>
53 
-                    {% endfor %}
54 
-                </select>
55 
-            </div>
56 
-            <div class="col">
57 
-                <button class="btn btn-buy w-100 h-100" title="{{ "listing.boxAddProduct"|trans|striptags }}">
58 
-                    <i class="fa-kit d-xl-none d-xxl-inline-block fa-cart"></i> {{ "listing.boxAddProduct"|trans|sw_sanitize }}
59 
-                </button>
60 
-            </div>
61 
-        </div>
62 
-    {% endblock %}
63 
-{% endblock %}
64 12 
\ No newline at end of file
13 
+
14 
+{#    {% block component_product_box_action_buy_redirect_input %}#}
15 
+{#        #}{# fallback redirect back to detail page is deactivated via js #}
16 
+{#        <input type="hidden"#}
17 
+{#               name="redirectTo"#}
18 
+{#               value="frontend.detail.page">#}
19 
+
20 
+{#        <input type="hidden"#}
21 
+{#               name="redirectParameters"#}
22 
+{#               data-redirect-parameters="true"#}
23 
+{#                #}{# ludtwig-ignore html-string-quotation #}
24 
+{#               value='{"productId": "{{ product.id }}"}'>#}
25 
+{#    {% endblock %}#}
26 
+
27 
+{#    {% block page_product_detail_buy_product_buy_info %}#}
28 
+{#        <input type="hidden"#}
29 
+{#               name="lineItems[{{ id }}][id]"#}
30 
+{#               value="{{ id }}">#}
31 
+{#        <input type="hidden"#}
32 
+{#               name="lineItems[{{ id }}][referencedId]"#}
33 
+{#               value="{{ id }}">#}
34 
+{#        <input type="hidden"#}
35 
+{#               name="lineItems[{{ id }}][type]"#}
36 
+{#               value="product">#}
37 
+{#        <input type="hidden"#}
38 
+{#               name="lineItems[{{ id }}][stackable]"#}
39 
+{#               value="1">#}
40 
+{#        <input type="hidden"#}
41 
+{#               name="lineItems[{{ id }}][removable]"#}
42 
+{#               value="1">#}
43 
+
44 
+{#    {% endblock %}#}
45 
+
46 
+{#    {% block page_product_detail_product_buy_meta %}#}
47 
+{#        <input type="hidden"#}
48 
+{#               name="product-name"#}
49 
+{#               value="{{ product.translated.name }}">#}
50 
+{#    {% endblock %}#}
51 
+
52 
+{#    {% block page_product_detail_product_buy_button %}#}
53 
+{#        <div class="row gx-3 flex-nowrap">#}
54 
+{#            <div class="col-auto">#}
55 
+
56 
+{#                <select class="form-select" name="lineItems[{{ id }}][quantity]">#}
57 
+{#                    <option selected="selected" value="{{ product.minPurchase }}">{{ product.minPurchase }}</option>#}
58 
+{#                    {% for i in range(product.minPurchase + 1, product.minPurchase + 5) %}#}
59 
+{#                        <option value="{{ i }}">{{ i }}</option>#}
60 
+{#                    {% endfor %}#}
61 
+{#                </select>#}
62 
+{#            </div>#}
63 
+{#            <div class="col">#}
64 
+{#                <button class="btn btn-buy w-100 h-100" title="{{ "listing.boxAddProduct"|trans|striptags }}">#}
65 
+{#                    <i class="fa-kit d-xl-none d-xxl-inline-block fa-cart"></i> {{ "listing.boxAddProduct"|trans|sw_sanitize }}#}
66 
+{#                </button>#}
67 
+{#            </div>#}
68 
+{#        </div>#}
69 
+{#    {% endblock %}#}
70 
+{#{% endblock %}#}
65 71 
\ No newline at end of file
src/Resources/views/storefront/component/product/card/box-standard.html.twig
History View file @fd47f93
... ... 
@@ -13,6 +13,7 @@
13 13 
       {% if properties.get(geschmack) is not empty %}
14 14 
           <span class="product-taste">{{ properties.get(geschmack)  }}</span>
15 15 
       {% endif %}
16 
+    <div class="spacer"></div>
16 17 
  {% endblock %}
17 18
18 19 
 {% block component_product_box_description %}{% endblock %}