Browse code

Style product detail page

Martin Filipovic Hinrichs authored on03/02/2026 14:05:05
Showing5 changed files
... ...
@@ -51,7 +51,7 @@
51 51
         .product-detail-buy {
52 52
           width: 100%;
53 53
           background-color: $light-gray-300;
54
-          padding: 2.5rem;
54
+          padding: 2rem 2.5rem 3rem;
55 55
           line-height: normal;
56 56
 
57 57
           p {
... ...
@@ -105,12 +105,49 @@
105 105
           }
106 106
         }
107 107
       }
108
+
109
+
110
+      .product-detail-delivery-information {
111
+        padding: 2rem 0;
112
+        margin: 0;
113
+
114
+        .delivery-information {
115
+          .delivery-status-indicator {
116
+            border-radius: 0;
117
+            height: 13px;
118
+            width: 13px;
119
+          }
120
+        }
121
+      }
122
+
123
+      ul#buybox-benefits {
124
+        background: white;
125
+        margin: 0;
126
+        padding: 1.5rem;
127
+        list-style: none;
128
+        display: grid;
129
+        gap: 1.5rem;
130
+        grid-template-columns: 1fr 1fr;
131
+        font-size: rfs-value(15px);
132
+        line-height: rfs-value(20px);
133
+
134
+        > li {
135
+          display: flex;
136
+          gap: 0.5rem;
137
+
138
+          svg {
139
+            flex-shrink: 0;
140
+          }
141
+        }
142
+      }
108 143
     }
109 144
   }
145
+
110 146
   .card-tabs {
111 147
     .card-header {
112 148
       padding: 0;
113 149
     }
150
+
114 151
     .nav-item {
115 152
       margin: 0;
116 153
     }
... ...
@@ -48,5 +48,11 @@
48 48
                 "aria-label": "Öffnet Instagram in neuem Tab"
49 49
             }
50 50
         }
51
+    },
52
+  "buybox": {
53
+    "benefits": {
54
+      "shipping": "Kostenloser Versand ab 90€ für unsere <a href=\"/treuekunde-werden\" _target=\"blank\">Treuekunden</a>",
55
+      "returns": "100 Tage Rückgaberecht"
51 56
     }
57
+  }
52 58
 }
53 59
\ No newline at end of file
... ...
@@ -9,13 +9,13 @@
9 9
     {% block block_product_heading_product_name_element %}
10 10
         <div class="col product-heading-name-container" data-cms-element-id="{{ productNameElement.id }}">
11 11
             {% if properties.get(lage) is not empty %}
12
-                <div>{{ properties.get(lage) }}</div>
12
+                <div class="lage">{{ properties.get(lage) }}</div>
13 13
             {% endif %}
14 14
             {% block block_product_heading_product_name_inner %}
15 15
                 {{ parent() }}
16 16
             {% endblock %}
17 17
             {% if properties.get(weinlinie) is not empty %}
18
-                <div>{{ properties.get(weinlinie) }}</div>
18
+                <div class="weinlinie">{{ properties.get(weinlinie) }}</div>
19 19
             {% endif %}
20 20
         </div>
21 21
     {% endblock %}
... ...
@@ -13,11 +13,22 @@
13 13
         {% block buy_widget_configurator_include %}
14 14
             {{ parent() }}
15 15
         {% endblock %}
16
+
17
+        <ul id="buybox-benefits">
18
+            <li>
19
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-van-icon lucide-van"><path d="M13 6v5a1 1 0 0 0 1 1h6.102a1 1 0 0 1 .712.298l.898.91a1 1 0 0 1 .288.702V17a1 1 0 0 1-1 1h-3"/><path d="M5 18H3a1 1 0 0 1-1-1V8a2 2 0 0 1 2-2h12c1.1 0 2.1.8 2.4 1.8l1.176 4.2"/><path d="M9 18h5"/><circle cx="16" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg>
20
+                <span>{{ "buybox.benefits.shipping"|trans|sw_sanitize }}</span>
21
+            </li>
22
+            <li>
23
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package-open-icon lucide-package-open"><path d="M12 22v-9"/><path d="M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"/><path d="M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"/><path d="M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"/></svg>
24
+                <span>{{ "buybox.benefits.returns"|trans|sw_sanitize }}</span>
25
+            </li>
26
+        </ul>
16 27
     </div>
17 28
 {% endblock %}
18 29
 
19 30
 {% block buy_widget_tax_link %}
20
-    <p class="product-detail-tax">Inkl. MWST, zzgl. Versandkosten</p>
31
+    <p class="product-detail-tax">{{ "general.grossTaxInformation"|trans }}</p>
21 32
 {% endblock %}
22 33
 
23 34
 {% block buy_widget_ordernumber_container %}{% endblock %}
24 35
\ No newline at end of file
... ...
@@ -57,7 +57,7 @@
57 57
             </p>
58 58
         {% endblock %}
59 59
 
60
-        <p class="price-taxInfo">Inkl. MWST., zzgl. Versandkosten</p>
60
+        <p class="price-taxInfo">{{ "general.grossTaxInformation"|trans }}</p>
61 61
     </div>
62 62
 
63 63
 {% endblock %}