-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathproduct-detail.html
More file actions
218 lines (200 loc) · 13.8 KB
/
Copy pathproduct-detail.html
File metadata and controls
218 lines (200 loc) · 13.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WACO Product Detail Page Swiper Version</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="assets/css/waco-pages.css?v=2.2.0" />
</head>
<body>
<main class="waco-page waco-product-detail-page waco-product-detail-swiper-page">
<section class="waco-inner-hero waco-product-detail-hero" style="background: linear-gradient(90deg, rgba(14, 24, 19, 0.82) 0%, rgba(14, 24, 19, 0.58) 50%, rgba(14, 24, 19, 0.22) 100%), url('assets/images/product-detail/detail-hero.jpg') center / cover no-repeat;">
<div class="waco-container">
<div class="waco-inner-hero-content waco-reveal">
<nav class="waco-breadcrumb" aria-label="Breadcrumb">
<a href="/">Home</a><span>/</span><a href="/products/">Products</a><span>/</span><span>Product Detail 02</span>
</nav>
<h1>Product Detail 02</h1>
</div>
</div>
</section>
<section class="waco-section waco-product-detail-section">
<div class="waco-container">
<div class="waco-product-detail-layout">
<div class="waco-product-gallery waco-reveal" data-waco-swiper-gallery>
<div class="swiper waco-pd2-main-swiper" data-waco-pd2-main-swiper>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="waco-pd2-main-image" data-zoom-image="assets/images/product-detail/product-main-01.jpg" style="background: url('assets/images/product-detail/product-main-01.jpg') center / cover no-repeat;"></div>
</div>
<div class="swiper-slide">
<div class="waco-pd2-main-image" data-zoom-image="assets/images/product-detail/product-main-02.jpg" style="background: url('assets/images/product-detail/product-main-02.jpg') center / cover no-repeat;"></div>
</div>
<div class="swiper-slide">
<div class="waco-pd2-main-image" data-zoom-image="assets/images/product-detail/product-main-03.jpg" style="background: url('assets/images/product-detail/product-main-03.jpg') center / cover no-repeat;"></div>
</div>
<div class="swiper-slide">
<div class="waco-pd2-main-image" data-zoom-image="assets/images/product-detail/product-main-04.jpg" style="background: url('assets/images/product-detail/product-main-04.jpg') center / cover no-repeat;"></div>
</div>
<div class="swiper-slide">
<div class="waco-pd2-main-image" data-zoom-image="assets/images/product-detail/product-main-05.jpg" style="background: url('assets/images/product-detail/product-main-05.jpg') center / cover no-repeat;"></div>
</div>
</div>
<button class="waco-detail-gallery-arrow waco-detail-gallery-prev waco-pd2-prev" type="button" aria-label="Previous product image">←</button>
<button class="waco-detail-gallery-arrow waco-detail-gallery-next waco-pd2-next" type="button" aria-label="Next product image">→</button>
<button class="waco-wc-zoom-trigger waco-pd2-zoom-trigger" type="button" data-waco-pd2-lightbox-open aria-label="Open product image">⌕</button>
</div>
<div class="swiper waco-pd2-thumb-swiper" data-waco-pd2-thumb-swiper>
<div class="swiper-wrapper">
<div class="swiper-slide" data-pd2-index="0">
<div class="waco-pd2-thumb-image" style="background: url('assets/images/product-detail/product-main-01.jpg') center / cover no-repeat;"></div>
</div>
<div class="swiper-slide" data-pd2-index="1">
<div class="waco-pd2-thumb-image" style="background: url('assets/images/product-detail/product-main-02.jpg') center / cover no-repeat;"></div>
</div>
<div class="swiper-slide" data-pd2-index="2">
<div class="waco-pd2-thumb-image" style="background: url('assets/images/product-detail/product-main-03.jpg') center / cover no-repeat;"></div>
</div>
<div class="swiper-slide" data-pd2-index="3">
<div class="waco-pd2-thumb-image" style="background: url('assets/images/product-detail/product-main-04.jpg') center / cover no-repeat;"></div>
</div>
<div class="swiper-slide" data-pd2-index="4">
<div class="waco-pd2-thumb-image" style="background: url('assets/images/product-detail/product-main-05.jpg') center / cover no-repeat;"></div>
</div>
</div>
</div>
</div>
<div class="waco-product-summary waco-reveal">
<span class="waco-product-badge">Composite Decking</span>
<h2>Classic Composite Decking</h2>
<p>Product short description placeholder. This area is prepared for WooCommerce product summary, main selling points and brief product explanation.</p>
<div class="waco-product-detail-price">$19.90</div>
<div class="waco-product-option-group">
<h3>Colour</h3>
<div class="waco-product-options">
<button class="is-active" type="button" data-waco-pd2-color="0">Teak</button>
<button type="button" data-waco-pd2-color="1">Walnut</button>
<button type="button" data-waco-pd2-color="2">Grey</button>
<button type="button" data-waco-pd2-color="3">Charcoal</button>
</div>
</div>
<div class="waco-product-option-group">
<h3>Length</h3>
<div class="waco-product-options">
<button class="is-active" type="button">2.2m</button>
<button type="button">2.9m</button>
<button type="button">3.6m</button>
<button type="button">Custom</button>
</div>
</div>
<div class="waco-product-purchase">
<div class="waco-quantity-control" aria-label="Quantity">
<button type="button" data-waco-qty-minus>-</button>
<input type="number" value="1" min="1" data-waco-qty-input />
<button type="button" data-waco-qty-plus>+</button>
</div>
<a class="waco-cart-btn waco-detail-cart-btn" href="/cart/">Add to Cart</a>
<a class="waco-view-link waco-detail-inquiry-btn" href="/quote/">Request Quote</a>
</div>
<ul class="waco-product-summary-list">
<li><strong>SKU:</strong> WACO-DECKING-001</li>
<li><strong>Category:</strong> Composite Decking</li>
<li><strong>Application:</strong> Garden, balcony, terrace, commercial outdoor area</li>
</ul>
</div>
</div>
</div>
</section>
<section class="waco-section waco-product-info-section">
<div class="waco-container">
<div class="waco-product-tabs waco-reveal" data-waco-tabs>
<div class="waco-tab-nav">
<button class="is-active" type="button" data-tab="description">Description</button>
<button type="button" data-tab="specifications">Specifications</button>
<button type="button" data-tab="installation">Installation</button>
</div>
<div class="waco-tab-panel is-active" data-tab-panel="description">
<div class="waco-tab-content-grid">
<div>
<h2>Description layout title placeholder.</h2>
<p>Long description placeholder. This area can be used for product introduction, material explanation, outdoor application scenarios, surface finish and product benefits.</p>
<p>Additional paragraph placeholder. Keep this area suitable for WooCommerce product description or future custom fields.</p>
</div>
<div class="waco-tab-image" style="background: url('assets/images/product-detail/product-texture.jpg') center / cover no-repeat;"></div>
</div>
</div>
<div class="waco-tab-panel" data-tab-panel="specifications">
<div class="waco-spec-table">
<div><span>Material</span><strong>Wood Plastic Composite</strong></div>
<div><span>Surface</span><strong>Embossed / Brushed</strong></div>
<div><span>Length</span><strong>2.2m / 2.9m / 3.6m</strong></div>
<div><span>Application</span><strong>Outdoor Decking</strong></div>
<div><span>Colour</span><strong>Teak / Walnut / Grey / Charcoal</strong></div>
<div><span>Maintenance</span><strong>Low Maintenance</strong></div>
</div>
</div>
<div class="waco-tab-panel" data-tab-panel="installation">
<div class="waco-installation-grid">
<article><span>01</span><h3>Prepare Substructure</h3><p>Installation note placeholder. Keep spacing and drainage in mind before laying boards.</p></article>
<article><span>02</span><h3>Fix Boards</h3><p>Installation note placeholder. Use clips or recommended fixing accessories.</p></article>
<article><span>03</span><h3>Finish Edges</h3><p>Installation note placeholder. Finish the visible edges with matching trims or accessories.</p></article>
</div>
</div>
</div>
</div>
</section>
<section class="waco-section waco-related-products-section">
<div class="waco-container">
<div class="waco-section-heading waco-heading-split waco-reveal">
<div>
<span class="waco-eyebrow">Related Products</span>
<h2>Related product layout title placeholder.</h2>
</div>
<p>Related product description placeholder. Prepared for WooCommerce related products or manually selected products.</p>
</div>
<div class="waco-product-grid waco-shop-product-grid">
<article class="waco-product-card waco-shop-card waco-reveal">
<a class="waco-product-card-media" href="/composite-decking/" style="background: url('assets/images/product-detail/related-01.jpg') center / cover no-repeat;"></a>
<div class="waco-product-card-body"><h3><a href="/composite-decking/">Co-extrusion Decking</a></h3><p>Related product description placeholder. Suitable for product recommendation area.</p><div class="waco-product-price">$24.90</div><div class="waco-product-actions"><a class="waco-cart-btn" href="/cart/">Add to Cart</a><a class="waco-view-link" href="/composite-decking/">View Details</a></div></div>
</article>
<article class="waco-product-card waco-shop-card waco-reveal">
<a class="waco-product-card-media" href="/wall-cladding/" style="background: url('assets/images/product-detail/related-02.jpg') center / cover no-repeat;"></a>
<div class="waco-product-card-body"><h3><a href="/wall-cladding/">Slat Wall Cladding</a></h3><p>Related product description placeholder. Suitable for wall and facade projects.</p><div class="waco-product-price">$18.90</div><div class="waco-product-actions"><a class="waco-cart-btn" href="/cart/">Add to Cart</a><a class="waco-view-link" href="/wall-cladding/">View Details</a></div></div>
</article>
<article class="waco-product-card waco-shop-card waco-reveal">
<a class="waco-product-card-media" href="/quote/" style="background: url('assets/images/product-detail/related-03.jpg') center / cover no-repeat;"></a>
<div class="waco-product-card-body"><h3><a href="/quote/">Colour Sample Kit</a></h3><p>Related product description placeholder. Prepared for customers to compare options.</p><div class="waco-product-price">$0.00</div><div class="waco-product-actions"><a class="waco-cart-btn" href="/cart/">Add to Cart</a><a class="waco-view-link" href="/quote/">View Details</a></div></div>
</article>
</div>
</div>
</section>
<section class="waco-section waco-cta-section">
<div class="waco-container">
<div class="waco-cta-box waco-reveal">
<div class="waco-cta-content">
<h2>CTA layout title placeholder.</h2>
<p>CTA description placeholder. This area guides customers to request samples, compare colours or ask for product recommendations.</p>
<div class="waco-btn-group">
<a class="waco-btn waco-btn-light" href="/quote/">Request Samples</a>
<a class="waco-btn waco-btn-ghost-light" href="/products/">Back to Products</a>
</div>
</div>
<div class="waco-cta-side">
<div class="waco-cta-panel"><ul class="waco-check-list"><li>Support item placeholder</li><li>Support item placeholder</li><li>Support item placeholder</li><li>Support item placeholder</li></ul></div>
<div class="waco-cta-image" style="background: url('assets/images/product-detail/product-texture.jpg') center / cover no-repeat;"></div>
</div>
</div>
</div>
</section>
</main>
<div class="waco-product-lightbox waco-pd2-lightbox" data-waco-pd2-lightbox aria-hidden="true">
<button class="waco-product-lightbox-close" type="button" data-waco-pd2-lightbox-close aria-label="Close image preview">×</button>
<button class="waco-product-lightbox-arrow waco-product-lightbox-prev" type="button" data-waco-pd2-lightbox-prev aria-label="Previous image">←</button>
<div class="waco-product-lightbox-image" data-waco-pd2-lightbox-image></div>
<button class="waco-product-lightbox-arrow waco-product-lightbox-next" type="button" data-waco-pd2-lightbox-next aria-label="Next image">→</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="assets/js/waco-pages.js?v=2.2.0"></script>
</body>
</html>