The repo for Purrform's main BigCommerce store.
Cleanup (#52)
Clean up description tabs code and scss for the blogs
authored by
Rogerio Romao
and committed by
GitHub
ac450478
bbaf0e79
+346
-669
-104
assets/js/theme/custom/descriptionTabs.js
-104
assets/js/theme/custom/descriptionTabs.js
···
1
-
export default function () {
2
-
$(() => {
3
-
const descriptionOld =
4
-
document.getElementsByClassName('description-v1');
5
-
if ($('#_product-description').length > 0) {
6
-
// If text is detected within the id _product-description element
7
-
if (
8
-
document
9
-
.getElementById('_product-description')
10
-
.innerHTML.toString()
11
-
.indexOf('<!-- pagebreak -->') !== -1
12
-
) {
13
-
const breaks = $('#_product-description')
14
-
.html()
15
-
.trim()
16
-
.split('<!-- pagebreak -->');
17
-
console.log('description-v2');
18
-
document.getElementById('tab-description').innerHTML =
19
-
breaks[0];
20
-
document.getElementById('tab-composition').innerHTML =
21
-
breaks[1];
22
-
if (document.getElementById('tab-instructions')) {
23
-
document.getElementById('tab-instructions').innerHTML =
24
-
breaks[1];
25
-
}
26
-
if (document.getElementById('tab-supplements-composition')) {
27
-
document.getElementById(
28
-
'tab-supplements-composition',
29
-
).innerHTML = breaks[1];
30
-
}
31
-
document.getElementById('tab-constituents').innerHTML =
32
-
breaks[2];
33
-
if (document.getElementById('tab-health-safety')) {
34
-
document.getElementById('tab-health-safety').innerHTML =
35
-
breaks[2];
36
-
}
37
-
if (document.getElementById('tab-supplements-constituents')) {
38
-
document.getElementById(
39
-
'tab-supplements-constituents',
40
-
).innerHTML = breaks[2];
41
-
}
42
-
if (document.getElementById('tab-supplements-instructions')) {
43
-
document.getElementById(
44
-
'tab-supplements-instructions',
45
-
).innerHTML = breaks[3];
46
-
}
47
-
/* Mobile tabs content allocation */
48
-
document.getElementById('tab-mobile-description').innerHTML =
49
-
breaks[0];
50
-
document.getElementById('tab-mobile-composition').innerHTML =
51
-
breaks[1];
52
-
if (document.getElementById('tab-mobile-instructions')) {
53
-
document.getElementById(
54
-
'tab-mobile-instructions',
55
-
).innerHTML = breaks[1];
56
-
}
57
-
if (
58
-
document.getElementById(
59
-
'tab-mobile-supplements-composition',
60
-
)
61
-
) {
62
-
document.getElementById(
63
-
'tab-mobile-supplements-composition',
64
-
).innerHTML = breaks[1];
65
-
}
66
-
if (document.getElementById('tab-mobile-constituents')) {
67
-
document.getElementById(
68
-
'tab-mobile-constituents',
69
-
).innerHTML = breaks[2];
70
-
}
71
-
if (document.getElementById('tab-mobile-health-safety')) {
72
-
document.getElementById(
73
-
'tab-mobile-health-safety',
74
-
).innerHTML = breaks[2];
75
-
}
76
-
if (
77
-
document.getElementById(
78
-
'tab-mobile-supplements-constituents',
79
-
)
80
-
) {
81
-
document.getElementById(
82
-
'tab-mobile-supplements-constituents',
83
-
).innerHTML = breaks[2];
84
-
}
85
-
if (
86
-
document.getElementById(
87
-
'tab-mobile-supplements-instructions',
88
-
)
89
-
) {
90
-
document.getElementById(
91
-
'tab-mobile-supplements-instructions',
92
-
).innerHTML = breaks[3];
93
-
}
94
-
} else {
95
-
console.log('description-v1');
96
-
/* If no pagebreak is detected, the description-v1 elements are made visible and the old system is used to display description tab content. */
97
-
for (let i = 0; i < descriptionOld.length; i++) {
98
-
// descriptionOld[i].style.display = "block";
99
-
console.log('test');
100
-
}
101
-
}
102
-
}
103
-
});
104
-
}
-2
assets/js/theme/global.js
-2
assets/js/theme/global.js
···
3
3
4
4
import carousel from './common/carousel';
5
5
import './common/select-option-plugin';
6
-
import descriptionTabs from './custom/descriptionTabs';
7
6
import cartPreview from './global/cart-preview';
8
7
import privacyCookieNotification from './global/cookieNotification';
9
8
import currencySelector from './global/currency-selector';
···
29
28
mobileMenuToggle();
30
29
privacyCookieNotification();
31
30
svgInjector();
32
-
descriptionTabs();
33
31
34
32
$(() => {
35
33
function handleImageVisibility() {
+39
assets/js/theme/product.js
+39
assets/js/theme/product.js
···
19
19
}
20
20
21
21
onReady() {
22
+
this.fillDescriptionTabs();
22
23
// Listen for foundation modal close events to sanitize URL after review.
23
24
$(document).on('close.fndtn.reveal', () => {
24
25
if (
···
92
93
if (this.url.indexOf('#bulk_pricing') !== -1) {
93
94
this.$bulkPricingLink.trigger('click');
94
95
}
96
+
}
97
+
98
+
fillDescriptionTabs() {
99
+
const { productDescription: description } = this.context;
100
+
if (!description) return;
101
+
102
+
const fill = (id, content) => {
103
+
const el = document.getElementById(id);
104
+
if (el) el.innerHTML = content;
105
+
};
106
+
107
+
if (!description.includes('<!-- pagebreak -->')) {
108
+
fill('tab-description', description);
109
+
fill('tab-mobile-description', description);
110
+
return;
111
+
}
112
+
113
+
const [overview, composition, constituents, instructions] = description.trim().split('<!-- pagebreak -->');
114
+
115
+
fill('tab-description', overview);
116
+
fill('tab-mobile-description', overview);
117
+
118
+
fill('tab-composition', composition);
119
+
fill('tab-instructions', composition);
120
+
fill('tab-supplements-composition', composition);
121
+
fill('tab-mobile-composition', composition);
122
+
fill('tab-mobile-instructions', composition);
123
+
fill('tab-mobile-supplements-composition', composition);
124
+
125
+
fill('tab-constituents', constituents);
126
+
fill('tab-health-safety', constituents);
127
+
fill('tab-supplements-constituents', constituents);
128
+
fill('tab-mobile-constituents', constituents);
129
+
fill('tab-mobile-health-safety', constituents);
130
+
fill('tab-mobile-supplements-constituents', constituents);
131
+
132
+
fill('tab-supplements-instructions', instructions);
133
+
fill('tab-mobile-supplements-instructions', instructions);
95
134
}
96
135
}
+44
-45
assets/scss/components/stencil/paymentMethods/_paymentMethods.scss
+44
-45
assets/scss/components/stencil/paymentMethods/_paymentMethods.scss
···
3
3
// =============================================================================
4
4
5
5
.paymentMethodsTitle {
6
-
margin: 0 0 spacing("half");
6
+
margin: 0 0 spacing('half');
7
7
padding: 0;
8
8
text-transform: none;
9
9
width: 100%;
···
12
12
.paymentMethodsGrid {
13
13
display: flex;
14
14
flex-wrap: wrap;
15
-
margin: -(spacing("half"));
16
-
margin-bottom: spacing("single");
15
+
margin: -(spacing('half'));
16
+
margin-bottom: spacing('single');
17
17
18
18
&-item {
19
-
padding: spacing("half");
19
+
padding: spacing('half');
20
20
width: 100%;
21
21
22
-
@include breakpoint("small") {
22
+
@include breakpoint('small') {
23
23
width: grid-calc(6, $total-columns);
24
24
}
25
25
}
···
27
27
28
28
.paymentMethod {
29
29
background-color: #e5e5e5;
30
-
border: container("border");
30
+
border: container('border');
31
31
border-radius: remCalc(3px);
32
32
display: flex;
33
33
flex-flow: column nowrap;
···
62
62
justify-content: space-between;
63
63
64
64
&-icon {
65
-
margin-right: spacing("half");
65
+
margin-right: spacing('half');
66
66
width: remCalc(28px);
67
67
68
-
@include breakpoint("large") {
68
+
@include breakpoint('large') {
69
69
width: remCalc(42px);
70
70
}
71
71
}
72
72
73
73
&-title {
74
-
font-size: fontSize("smallest");
75
-
font-weight: fontWeight("semibold");
74
+
font-size: fontSize('smallest');
75
+
font-weight: fontWeight('semibold');
76
76
77
-
@include breakpoint("large") {
78
-
font-size: fontSize("base");
77
+
@include breakpoint('large') {
78
+
font-size: fontSize('base');
79
79
}
80
80
}
81
81
82
82
&-brand {
83
-
font-size: fontSize("smallest");
84
-
font-weight: fontWeight("semibold");
83
+
font-size: fontSize('smallest');
84
+
font-weight: fontWeight('semibold');
85
85
86
-
@include breakpoint("large") {
87
-
font-size: fontSize("base");
86
+
@include breakpoint('large') {
87
+
font-size: fontSize('base');
88
88
}
89
89
}
90
90
···
92
92
display: flex;
93
93
flex-wrap: nowrap;
94
94
margin-left: auto;
95
-
padding-left: spacing("half");
95
+
padding-left: spacing('half');
96
96
}
97
97
98
98
&-default {
99
-
fill: color("greys", "dark");
99
+
fill: color('greys', 'dark');
100
100
height: remCalc(18px);
101
-
margin-left: spacing("half");
101
+
margin-left: spacing('half');
102
102
width: remCalc(18px);
103
103
104
-
@include breakpoint("large") {
104
+
@include breakpoint('large') {
105
105
height: remCalc(20px);
106
106
width: remCalc(20px);
107
107
}
108
108
}
109
109
110
110
&-expiry {
111
-
font-size: fontSize("smaller");
111
+
font-size: fontSize('smaller');
112
112
text-transform: capitalize;
113
113
}
114
114
}
···
119
119
120
120
&-label {
121
121
flex: 1;
122
-
font-weight: fontWeight("semibold");
122
+
font-weight: fontWeight('semibold');
123
123
}
124
124
125
125
&-description {
126
126
flex: 2;
127
-
font-size: fontSize("smallest");
127
+
font-size: fontSize('smallest');
128
128
}
129
129
}
130
130
131
131
.newPaymentMethod {
132
-
align-items: center;
132
+
place-items: center center;
133
133
display: flex;
134
134
flex-direction: column;
135
135
height: 100%;
136
-
justify-items: center;
137
136
min-height: remCalc(186px);
138
137
text-decoration: none;
139
138
140
139
&-icon {
141
140
font-size: 50px;
142
141
line-height: 1;
143
-
margin: auto 0 spacing("half");
142
+
margin: auto 0 spacing('half');
144
143
}
145
144
146
145
&-title {
···
153
152
// -----------------------------------------------------------------------------
154
153
155
154
.paymentMethodForm {
156
-
@include breakpoint("small") {
155
+
@include breakpoint('small') {
157
156
max-width: 60%;
158
157
}
159
158
160
159
&-column {
161
-
@include breakpoint("small") {
160
+
@include breakpoint('small') {
162
161
display: flex;
163
162
164
163
&:first-child .form-field {
165
-
margin-bottom: spacing("half");
164
+
margin-bottom: spacing('half');
166
165
}
167
166
}
168
167
}
169
168
170
169
&-heading {
171
-
color: color("greys", "darker");
172
-
font-family: fontFamily("sans");
173
-
margin-top: spacing("single");
170
+
color: color('greys', 'darker');
171
+
font-family: fontFamily('sans');
172
+
margin-top: spacing('single');
174
173
text-transform: capitalize;
175
174
}
176
175
177
176
&-subheading {
178
177
display: flex;
179
-
font-weight: fontWeight("semibold");
178
+
font-weight: fontWeight('semibold');
180
179
}
181
180
182
181
&-cards {
183
-
@include breakpoint("small") {
182
+
@include breakpoint('small') {
184
183
margin-left: auto;
185
184
}
186
185
}
187
186
188
187
&-cards-icon {
189
-
margin-right: spacing("eighth");
188
+
margin-right: spacing('eighth');
190
189
width: remCalc(34px);
191
190
}
192
191
193
192
&-inputs {
194
193
position: relative;
195
194
196
-
@include breakpoint("small") {
195
+
@include breakpoint('small') {
197
196
&:last-child {
198
-
padding-left: spacing("single");
197
+
padding-left: spacing('single');
199
198
width: 30%;
200
199
}
201
200
···
211
210
top: remCalc(39px);
212
211
213
212
&.icon {
214
-
fill: color("greys", "light");
213
+
fill: color('greys', 'light');
215
214
height: remCalc(21px);
216
215
width: remCalc(21px);
217
216
}
···
220
219
&-details {
221
220
margin-bottom: 0;
222
221
223
-
@include breakpoint("small") {
222
+
@include breakpoint('small') {
224
223
display: inline-block;
225
-
margin: 0 spacing("double") 0 0;
224
+
margin: 0 spacing('double') 0 0;
226
225
}
227
226
}
228
227
229
228
&-details-term {
230
-
font-weight: fontWeight("normal");
231
-
margin-bottom: spacing("half");
229
+
font-weight: fontWeight('normal');
230
+
margin-bottom: spacing('half');
232
231
}
233
232
234
233
&-details-description {
235
-
font-size: fontSize("smaller");
236
-
font-weight: fontWeight("semibold");
237
-
letter-spacing: letterSpacing("large");
234
+
font-size: fontSize('smaller');
235
+
font-weight: fontWeight('semibold');
236
+
letter-spacing: letterSpacing('large');
238
237
}
239
238
}
+2
assets/scss/custom/_variables.scss
+2
assets/scss/custom/_variables.scss
+64
-94
assets/scss/custom/components/_blogs.scss
+64
-94
assets/scss/custom/components/_blogs.scss
···
4
4
margin: auto;
5
5
}
6
6
7
-
/* Blogs Page Grid */
7
+
/* Blogs Page Grid - the thumbnail layout */
8
8
9
9
.blogs-grid {
10
10
display: grid;
···
15
15
border: 1px solid transparent;
16
16
17
17
.blog {
18
-
box-shadow: 0 0 8px 0 #dcdcdc8c;
19
-
border: 1px solid #dcdcdc !important;
18
+
box-shadow: 0 0 8px 0 $color-gray-light;
19
+
border: 1px solid $color-gray-light;
20
20
border-radius: 20px;
21
21
margin: 0 auto 0.5rem;
22
22
padding-top: 0;
···
24
24
width: 95%;
25
25
26
26
a {
27
-
color: $body-color;
27
+
color: $color-gray-darkest;
28
28
text-decoration: none;
29
29
}
30
30
31
31
.blog-small-image {
32
-
display: block !important;
32
+
display: block;
33
33
width: 100%;
34
34
35
35
img {
36
36
width: 100%;
37
+
height: 268px;
38
+
object-fit: cover;
37
39
border-radius: 20px 20px 0 0;
38
40
}
39
41
}
···
57
59
}
58
60
59
61
a {
60
-
color: $body-color;
62
+
color: $color-gray-darkest;
61
63
}
62
64
}
63
65
···
72
74
a {
73
75
font-weight: 700;
74
76
border-radius: 32px;
75
-
border: 1px solid $input-field;
77
+
border: 1px solid $color-gray-light;
76
78
width: fit-content;
77
79
padding: 14px;
78
80
transition: all 0.15s ease;
···
80
82
81
83
&:hover {
82
84
a {
83
-
color: $headingColor;
85
+
color: $color-brand-primary;
84
86
}
85
87
}
86
88
}
···
95
97
}
96
98
}
97
99
98
-
/* Blog page */
100
+
/* Blog page - the individual blog post layout */
99
101
.blog-post-figure {
100
102
.blog-thumbnail {
101
103
display: none;
···
111
113
}
112
114
}
113
115
114
-
.blog {
115
-
margin-bottom: 3rem;
116
-
border: none;
116
+
body.page-type-blog_post {
117
+
.blog {
118
+
margin-bottom: 3rem;
119
+
border: none;
117
120
118
-
.blog-small-image {
119
-
display: none;
120
-
}
121
+
.blog-small-image {
122
+
display: none;
123
+
}
121
124
122
-
.blog-date {
123
-
margin: 1.5rem auto;
124
-
}
125
+
.blog-date {
126
+
margin: 1.5rem auto;
127
+
}
125
128
126
-
.blog-title {
127
-
font-size: 36px;
129
+
.blog-title {
130
+
font-size: 36px;
128
131
129
-
@include breakpoint('medium') {
130
-
font-size: 48px;
131
-
}
132
+
@include breakpoint('medium') {
133
+
font-size: 48px;
134
+
}
132
135
133
-
a {
134
-
color: $headingColor;
135
-
font-weight: 700;
136
-
text-decoration: none;
136
+
a {
137
+
color: $color-brand-primary;
138
+
font-weight: 700;
139
+
text-decoration: none;
140
+
}
137
141
}
138
-
}
139
142
140
-
.blog-post-body {
141
-
@include breakpoint('medium') {
142
-
width: 75%;
143
+
.blog-post-body {
144
+
@include breakpoint('medium') {
145
+
width: 75%;
146
+
}
143
147
}
144
-
}
145
148
146
-
.socialLinks {
147
-
margin-top: 1.5rem;
148
-
text-align: left;
149
+
.socialLinks {
150
+
margin-top: 1.5rem;
151
+
text-align: left;
149
152
150
-
li {
151
-
display: none;
153
+
li {
154
+
display: none;
152
155
153
-
.icon {
154
-
// margin-right: 10px;
155
-
svg {
156
-
fill: $headingColor;
157
-
width: 28px;
158
-
margin-right: 10px;
156
+
.icon {
157
+
svg {
158
+
fill: $color-brand-primary;
159
+
width: 28px;
160
+
margin-right: 10px;
161
+
}
159
162
}
160
163
}
161
-
}
162
164
163
-
.socialLinks-item--twitter,
164
-
.socialLinks-item--facebook {
165
-
display: inline-block;
165
+
.socialLinks-item--twitter,
166
+
.socialLinks-item--facebook {
167
+
display: inline-block;
168
+
}
166
169
}
167
-
}
168
170
169
-
.tags {
170
-
padding-left: 0;
171
-
text-align: left;
172
-
margin-top: 1.5rem;
171
+
.tags {
172
+
padding-left: 0;
173
+
text-align: left;
174
+
margin-top: 1.5rem;
173
175
174
-
.tag {
175
-
margin-right: 10px;
176
+
.tag {
177
+
margin-right: 10px;
176
178
177
-
a {
178
-
font-weight: 700;
179
-
border: 1px solid $headingColor;
180
-
color: $headingColor !important;
181
-
border-radius: 25px;
182
-
padding: 12px 16px;
183
-
text-decoration: none;
179
+
a {
180
+
font-weight: 700;
181
+
border: 1px solid $color-brand-primary;
182
+
color: $color-brand-primary;
183
+
border-radius: 25px;
184
+
padding: 12px 16px;
185
+
text-decoration: none;
186
+
}
184
187
}
185
188
}
186
189
}
187
190
}
188
-
189
-
/* #blogs-tags {
190
-
display: block;
191
-
margin: 4rem auto 2rem;
192
-
width: fit-content;
193
-
justify-content: center;
194
-
grid-gap: 1rem;
195
-
text-align: center;
196
-
p {
197
-
border: 1px solid $text-color;
198
-
margin: auto auto 1rem auto;
199
-
200
-
border-radius: 25px;
201
-
font-weight: 700;
202
-
width: fit-content;
203
-
204
-
padding: 12px 16px;
205
-
a {
206
-
color: $text-color;
207
-
}
208
-
}
209
-
210
-
@include breakpoint("medium") {
211
-
display: flex;
212
-
213
-
justify-content: center;
214
-
grid-gap: 1rem;
215
-
216
-
p {
217
-
margin: auto auto 0 auto;
218
-
}
219
-
}
220
-
} */
-16
assets/scss/layouts/blog/_blog.scss
-16
assets/scss/layouts/blog/_blog.scss
···
6
6
// -----------------------------------------------------------------------------
7
7
8
8
.blog {
9
-
margin-bottom: spacing('single');
10
-
11
9
@include breakpoint('medium') {
12
10
margin: auto;
13
11
width: 100%;
···
19
17
padding-top: spacing('double');
20
18
}
21
19
22
-
.tags {
23
-
margin-top: spacing('double');
24
-
text-align: center;
25
-
}
26
-
27
-
.socialLinks {
28
-
text-align: center;
29
-
}
30
-
31
20
.addthis_toolbox {
32
21
margin-top: spacing('double');
33
22
}
34
23
}
35
24
36
25
.blog-title {
37
-
font-size: fontSize('large');
38
26
margin: 0 spacing('single') spacing('quarter');
39
27
40
28
a {
···
90
78
91
79
@include breakpoint('small') {
92
80
width: grid-calc(10, $total-columns);
93
-
}
94
-
95
-
@include breakpoint('medium') {
96
-
width: grid-calc(8, $total-columns);
97
81
}
98
82
99
83
@include breakpoint('large') {
-22
templates/components/custom/products/accessories-description-tabs.html
-22
templates/components/custom/products/accessories-description-tabs.html
···
1
-
<div class="description-container description-container--accessories">
2
-
3
-
<ul class="tabs" data-tab>
4
-
{{#if product.description}}
5
-
<li class="tab is-active">
6
-
<a class="tab-title" href="#tab-description">{{lang 'products.description'}} </a>
7
-
<div class="mobile-description-tab" id="tab-mobile-description">
8
-
{{{product.description}}}
9
-
</div>
10
-
</li>
11
-
{{/if}}
12
-
</ul>
13
-
<div class="tabs-contents tabs-contents-desktop">
14
-
{{#if product.description}}
15
-
<div class="tab-content is-active" id="tab-description">
16
-
<div class="description-v1">
17
-
{{{product.description}}}
18
-
</div>
19
-
</div>
20
-
{{/if}}
21
-
</div>
22
-
</div>
+97
templates/components/custom/products/description-tabs.html
+97
templates/components/custom/products/description-tabs.html
···
1
+
{{!--
2
+
Tab layout per category:
3
+
- Accessories → Description only (content rendered inline, no JS)
4
+
- Sanitisers → Product Overview | Application | Health and Safety
5
+
- Supplements → Description | Composition & Nutritional Additives | Analytical Constituents | Instructions for use
6
+
- Default → Description | Composition | Analytical Constituents
7
+
8
+
Tab shells are empty on render; product.js receives the description via JS context
9
+
and splits it on "<!-- pagebreak -->" to inject each chunk into the matching tab IDs.
10
+
Accessories skip this — their description is rendered directly into tab-description.
11
+
12
+
Note: Handlebars has no "not contains" helper, so the branching below uses
13
+
{{#contains ...}}{{else}} as a negation pattern to reach non-matching categories.
14
+
--}}
15
+
<div class="description-container">
16
+
<ul class="tabs" data-tab>
17
+
{{!-- Tab 1: shared by all categories; label differs for Sanitisers --}}
18
+
{{#if product.description}}
19
+
<li class="tab is-active">
20
+
{{#contains product.category 'Others/Sanitisers'}}
21
+
<a class="tab-title" href="#tab-description">Product Overview</a>
22
+
{{else}}
23
+
<a class="tab-title" href="#tab-description">{{lang 'products.description'}}</a>
24
+
{{/contains}}
25
+
<div class="mobile-description-tab" id="tab-mobile-description"></div>
26
+
</li>
27
+
{{/if}}
28
+
29
+
{{!-- Remaining tabs: Accessories gets none; others branch by category --}}
30
+
{{#contains product.category 'Others/Accessories'}}
31
+
{{else}}
32
+
{{#contains product.category 'Others/Sanitisers'}}
33
+
<li class="tab">
34
+
<a class="tab-title" href="#tab-instructions">Application</a>
35
+
<div class="mobile-description-tab" id="tab-mobile-instructions"></div>
36
+
</li>
37
+
<li class="tab">
38
+
<a class="tab-title" href="#tab-health-safety">Health and Safety</a>
39
+
<div class="mobile-description-tab" id="tab-mobile-health-safety"></div>
40
+
</li>
41
+
{{else}}
42
+
{{#contains product.category 'Supplements'}}
43
+
<li class="tab">
44
+
<a class="tab-title" href="#tab-supplements-composition">Composition & Nutritional Additives</a>
45
+
<div class="mobile-description-tab" id="tab-mobile-supplements-composition"></div>
46
+
</li>
47
+
<li class="tab">
48
+
<a class="tab-title" href="#tab-supplements-constituents">Analytical Constituents</a>
49
+
<div class="mobile-description-tab" id="tab-mobile-supplements-constituents"></div>
50
+
</li>
51
+
<li class="tab">
52
+
<a class="tab-title" href="#tab-supplements-instructions">Instructions for use</a>
53
+
<div class="mobile-description-tab" id="tab-mobile-supplements-instructions"></div>
54
+
</li>
55
+
{{else}}
56
+
<li class="tab">
57
+
<a class="tab-title" href="#tab-composition">Composition</a>
58
+
<div class="mobile-description-tab" id="tab-mobile-composition"></div>
59
+
</li>
60
+
<li class="tab">
61
+
<a class="tab-title" href="#tab-constituents">Analytical Constituents</a>
62
+
<div class="mobile-description-tab" id="tab-mobile-constituents"></div>
63
+
</li>
64
+
{{/contains}}
65
+
{{/contains}}
66
+
{{/contains}}
67
+
</ul>
68
+
69
+
<div class="tabs-contents tabs-contents-desktop">
70
+
{{!-- tab-description: Accessories render inline; all others are JS-filled shells --}}
71
+
{{#if product.description}}
72
+
<div class="tab-content is-active" id="tab-description">
73
+
{{#contains product.category 'Others/Accessories'}}
74
+
<div class="description-v1">{{{product.description}}}</div>
75
+
{{/contains}}
76
+
</div>
77
+
{{/if}}
78
+
79
+
{{!-- Remaining content shells mirror the tab structure above --}}
80
+
{{#contains product.category 'Others/Accessories'}}
81
+
{{else}}
82
+
{{#contains product.category 'Others/Sanitisers'}}
83
+
<div class="tab-content" id="tab-instructions"></div>
84
+
<div class="tab-content" id="tab-health-safety"></div>
85
+
{{else}}
86
+
{{#contains product.category 'Supplements'}}
87
+
<div class="tab-content" id="tab-supplements-composition"></div>
88
+
<div class="tab-content" id="tab-supplements-constituents"></div>
89
+
<div class="tab-content" id="tab-supplements-instructions"></div>
90
+
{{else}}
91
+
<div class="tab-content" id="tab-composition"></div>
92
+
<div class="tab-content" id="tab-constituents"></div>
93
+
{{/contains}}
94
+
{{/contains}}
95
+
{{/contains}}
96
+
</div>
97
+
</div>
-67
templates/components/custom/products/sanitisers-description-tabs.html
-67
templates/components/custom/products/sanitisers-description-tabs.html
···
1
-
<div class="description-container">
2
-
<ul class="tabs" data-tab>
3
-
{{#if product.description}}
4
-
<li class="tab is-active">
5
-
<a class="tab-title" href="#tab-description">Product Overview </a>
6
-
<div class="mobile-description-tab" id="tab-mobile-description">
7
-
{{!--<div class="description-v1">
8
-
{{{product.description}}}
9
-
</div>--}}
10
-
</div>
11
-
</li>
12
-
{{/if}} {{#if product.description}}
13
-
<li class="tab {{#if product.description}} {{else}} is-active{{/if}}">
14
-
<a class="tab-title" href="#tab-instructions">Application </a>
15
-
<div class="mobile-description-tab" id="tab-mobile-instructions">
16
-
{{!-- <div class="description-v1">
17
-
{{{product.description}}}
18
-
</div>--}}
19
-
</div>
20
-
</li>
21
-
{{/if}} {{#if product.description}}
22
-
<li
23
-
class="tab {{#if product.description}} {{else if product.composition}} {{else if product.constituents}}is-active{{/if}}">
24
-
<a class="tab-title" href="#tab-health-safety">Health and Safety</a>
25
-
<div class="mobile-description-tab" id="tab-mobile-health-safety">
26
-
{{!-- <div class="description-v1">
27
-
{{{product.description}}}
28
-
</div>--}}
29
-
</div>
30
-
</li>
31
-
{{/if}} {{#all product.custom_fields theme_settings.show_custom_fields_tabs}}
32
-
<li class="tab">
33
-
<a class="tab-title"
34
-
href="#tab-{{dashcase (lowercase (sanitize theme_settings.pdp-custom-fields-tab-label))}}">
35
-
{{sanitize theme_settings.pdp-custom-fields-tab-label}}
36
-
</a>
37
-
</li>
38
-
{{/all}}
39
-
</ul>
40
-
<div class="tabs-contents tabs-contents-desktop">
41
-
{{#if product.description}}
42
-
<div class="tab-content is-active" id="tab-description">
43
-
{{!--<div class="description-v1">
44
-
{{{product.description}}}
45
-
</div>--}}
46
-
</div>
47
-
{{/if}} {{#if product.description}}
48
-
<div class="tab-content {{#if product.composition}} is-active {{else }} {{/if}}" id="tab-instructions">
49
-
{{!--<div class="description-v1">
50
-
{{{product.description}}}
51
-
</div>--}}
52
-
</div>
53
-
{{/if}} {{#if product.description}}
54
-
<div class="tab-content {{#if product.description}} {{else if product.composition}} {{else if product.constituents}}is-active{{/if}}"
55
-
id="tab-health-safety">
56
-
{{!--<div class="description-v1">
57
-
{{{product.description}}}
58
-
</div>--}}
59
-
</div>
60
-
{{/if}} {{#all product.custom_fields theme_settings.show_custom_fields_tabs}}
61
-
<div class="tab-content"
62
-
id="tab-{{dashcase (lowercase (sanitize theme_settings.pdp-custom-fields-tab-label))}}">
63
-
<dl class="productView-info">{{> components/products/custom-fields }}</dl>
64
-
</div>
65
-
{{/all}}
66
-
</div>
67
-
</div>
-49
templates/components/custom/products/supplements-description-tabs.html
-49
templates/components/custom/products/supplements-description-tabs.html
···
1
-
<div class="description-container">
2
-
<ul class="tabs" data-tab>
3
-
{{#if product.description}}
4
-
<li class="tab is-active">
5
-
<a class="tab-title" href="#tab-description">{{lang 'products.description'}} </a>
6
-
<div class="mobile-description-tab" id="tab-mobile-description">
7
-
</div>
8
-
</li>
9
-
{{/if}} {{#if product.description}}
10
-
<li class="tab {{#if product.description}} {{else}} is-active{{/if}}">
11
-
<a class="tab-title" href="#tab-supplements-composition">Composition & <br> Nutritional Additives</a>
12
-
<div class="mobile-description-tab" id="tab-mobile-supplements-composition">
13
-
</div>
14
-
</li>
15
-
{{/if}} {{#if product.description}}
16
-
<li
17
-
class="tab {{#if product.description}} {{else if product.composition}} {{else if product.constituents}}is-active{{/if}}">
18
-
<a class="tab-title" href="#tab-supplements-constituents">Analytical Constituents</a>
19
-
<div class="mobile-description-tab" id="tab-mobile-supplements-constituents">
20
-
</div>
21
-
</li>
22
-
{{/if}}
23
-
<li
24
-
class="tab {{#if product.description}} {{else if product.composition}} {{else if product.constituents}}is-active{{/if}}">
25
-
<a class="tab-title" href="#tab-supplements-instructions">Instructions for use</a>
26
-
<div class="mobile-description-tab" id="tab-mobile-supplements-instructions">
27
-
</div>
28
-
</li>
29
-
</ul>
30
-
<div class="tabs-contents tabs-contents-desktop">
31
-
{{#if product.description}}
32
-
<div class="tab-content is-active" id="tab-description">
33
-
</div>
34
-
{{/if}} {{#if product.description}}
35
-
<div class="tab-content {{#if product.composition}} is-active {{else}} {{/if}}"
36
-
id="tab-supplements-composition">
37
-
</div>
38
-
{{/if}} {{#if product.description}}
39
-
<div class="tab-content {{#if product.description}} {{else if product.composition}} {{else if product.constituents}}is-active{{/if}}"
40
-
id="tab-supplements-constituents">
41
-
</div>
42
-
{{/if}}
43
-
{{#if product.description}}
44
-
<div class="tab-content {{#if product.description}} {{else if product.composition}} {{else if product.constituents}} {{else if product.instructions}}is-active{{/if}}"
45
-
id="tab-supplements-instructions">
46
-
</div>
47
-
{{/if}}
48
-
</div>
49
-
</div>
-107
templates/components/products/description-tabs.html
-107
templates/components/products/description-tabs.html
···
1
-
<div class="description-container">
2
-
<ul class="tabs" data-tab>
3
-
{{#if product.description}}
4
-
<li class="tab is-active">
5
-
<a class="tab-title" href="#tab-description"
6
-
>{{lang 'products.description'}} </a
7
-
>
8
-
9
-
<div class="mobile-description-tab" id="tab-mobile-description">
10
-
<div class="description-v1" >
11
-
{{{product.description}}}
12
-
</div>
13
-
</div>
14
-
15
-
</li>
16
-
{{/if}} {{#if product.description}}
17
-
<li class="tab {{#if product.description}} {{else}} is-active{{/if}}">
18
-
<a class="tab-title" href="#tab-composition">Composition </a>
19
-
20
-
<div class="mobile-description-tab" id="tab-mobile-composition">
21
-
<div class="description-v1" >
22
-
{{{product.description}}}
23
-
</div>
24
-
</div>
25
-
26
-
</li>
27
-
28
-
{{/if}} {{#if product.description}}
29
-
<li
30
-
class="tab {{#if product.description}} {{else if product.composition}} {{else if product.constituents}}is-active{{/if}}"
31
-
>
32
-
<a class="tab-title" href="#tab-constituents"
33
-
>Analytical Constituents</a
34
-
>
35
-
36
-
<div class="mobile-description-tab" id="tab-mobile-constituents">
37
-
<div class="description-v1" >
38
-
{{{product.description}}}
39
-
</div>
40
-
</div>
41
-
42
-
</li>
43
-
{{/if}} {{#all product.custom_fields theme_settings.show_custom_fields_tabs}}
44
-
<li class="tab">
45
-
<a
46
-
class="tab-title"
47
-
href="#tab-{{dashcase (lowercase (sanitize theme_settings.pdp-custom-fields-tab-label))}}"
48
-
>
49
-
{{sanitize theme_settings.pdp-custom-fields-tab-label}}
50
-
</a>
51
-
</li>
52
-
{{/all}}
53
-
54
-
<!--{{#all settings.show_product_reviews
55
-
theme_settings.show_product_reviews product.reviews.total}}
56
-
<li class="tab">
57
-
<a class="tab-title productView-reviewTabLink" href="#tab-reviews"
58
-
>{{lang 'products.reviews.header' total=product.reviews.total}}</a
59
-
>
60
-
</li>
61
-
{{/all}}-->
62
-
</ul>
63
-
64
-
<div class="tabs-contents tabs-contents-desktop">
65
-
{{#if product.description}}
66
-
<div class="tab-content is-active" id="tab-description">
67
-
68
-
<div class="description-v1">
69
-
{{{product.description}}}
70
-
</div>
71
-
</div>
72
-
{{/if}} {{#if product.description}}
73
-
<div
74
-
class="tab-content {{#if product.composition}} is-active {{else }} {{/if}}"
75
-
id="tab-composition"
76
-
>
77
-
<div class="description-v1">
78
-
{{{product.description}}}
79
-
</div>
80
-
</div>
81
-
{{/if}} {{#if product.description}}
82
-
<div
83
-
class="tab-content {{#if product.description}} {{else if product.composition}} {{else if product.constituents}}is-active{{/if}}"
84
-
id="tab-constituents"
85
-
>
86
-
<div class="description-v1">
87
-
{{{product.description}}}
88
-
</div>
89
-
</div>
90
-
{{/if}} {{#all product.custom_fields theme_settings.show_custom_fields_tabs}}
91
-
<div
92
-
class="tab-content"
93
-
id="tab-{{dashcase (lowercase (sanitize theme_settings.pdp-custom-fields-tab-label))}}"
94
-
>
95
-
<dl class="productView-info">{{> components/products/custom-fields }}</dl>
96
-
</div>
97
-
{{/all}}
98
-
99
-
<!--{{#all settings.show_product_reviews
100
-
theme_settings.show_product_reviews}}
101
-
<div class="tab-content" id="tab-reviews">
102
-
{{> components/products/reviews reviews=product.reviews product=product
103
-
urls=urls}}
104
-
</div>
105
-
{{/all}}-->
106
-
</div>
107
-
</div>
+4
-68
templates/components/products/product-view.html
+4
-68
templates/components/products/product-view.html
···
118
118
<div class="productView-rating">
119
119
{{#if settings.show_product_rating}}
120
120
{{> components/products/ratings rating=product.rating}}
121
-
<!-- {{#if product.num_reviews '>' 0}}
122
-
<a href="{{product.url}}{{#if is_ajax}}#product-reviews{{/if}}" id="productReview_link">
123
-
{{lang 'products.reviews.link_to_review' total=product.num_reviews}}
124
-
</a>
125
-
{{else}}
126
-
<span>{{lang 'products.reviews.link_to_review' total=product.num_reviews}}</span>
127
-
{{/if}} -->
128
121
{{/if}}
129
122
{{#if settings.show_product_reviews}}
130
123
<span>[{{product.num_reviews}}]</span>
···
168
161
<dt class="productView-info-name">{{lang 'products.condition'}}</dt>
169
162
<dd class="productView-info-value">{{product.condition}}</dd>
170
163
{{/if}}
171
-
<!--{{#if product.availability}}
172
-
<dt class="productView-info-name">{{lang 'products.availability'}}</dt>
173
-
<dd class="productView-info-value">{{product.availability}}</dd>
174
-
{{/if}} -->
175
164
{{#all product.weight theme_settings.show_product_weight}}
176
165
<dt class="productView-info-name">{{lang 'products.weight'}}</dt>
177
166
<dd class="productView-info-value" data-product-weight>{{product.weight}}</dd>
···
205
194
{{/if}}
206
195
</dd>
207
196
{{/all}}
208
-
<!-- {{#if product.min_purchase_quantity}}
209
-
<dt class="productView-info-name">{{lang 'products.min_purchase_quantity'}}</dt>
210
-
<dd class="productView-info-value">{{lang 'products.purchase_units' quantity=product.min_purchase_quantity}} test 1</dd>
211
-
{{/if}}-->
212
197
{{#if product.max_purchase_quantity}}
213
198
<dt class="productView-info-name">{{lang 'products.max_purchase_quantity'}}</dt>
214
199
<dd class="productView-info-value">{{lang 'products.purchase_units' quantity=product.max_purchase_quantity}} test 2</dd>
···
275
260
</p>
276
261
</div>
277
262
<div class="purchase-container">
278
-
279
-
{{!--{{#if product.availability}} --}}
280
263
<div class="availability-notice">
281
264
{{#if product.can_purchase}}
282
265
<p class="available">
283
266
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
284
267
<path d="M16.0938 6.17833L7.70217 14.5708L3.33301 10.2017L4.51134 9.02333L7.70217 12.2142L14.9155 5L16.0938 6.17833Z" fill="#687D6A"/>
285
268
</svg>
286
-
<strong>{{lang 'products.available'}} {{!--{{product.availability}}--}}</strong>
269
+
<strong>{{lang 'products.available'}}</strong>
287
270
</p>
288
271
{{else}}
289
272
<p class="not-available">
···
292
275
</p>
293
276
{{/if}}
294
277
</div>
295
-
{{!--{{/if}} --}}
296
-
297
-
298
278
{{> components/products/add-to-cart with_wallet_buttons=false}}
299
279
</div>
300
280
{{#if product.custom_fields }}
···
332
312
</section>
333
313
334
314
<article class="productView-description">
335
-
{{!-- {{#contains product.description "<p><!-- pagebreak --></p>" }}
336
-
{{> components/products/description}}
337
-
<div id="accordion-container"></div>
338
-
339
-
{{else}}--}}
340
-
341
-
<div id="_product-description" style="display: none;">
342
-
{{{product.description}}}
343
-
</div>
344
-
{{#if theme_settings.show_product_details_tabs}}
345
-
346
-
{{#contains product.category 'Others/Sanitisers'}}
347
-
{{> components/custom/products/sanitisers-description-tabs}}
348
-
{{/contains}}
349
-
350
-
{{#contains product.category 'Others/Accessories'}}
351
-
{{> components/custom/products/accessories-description-tabs}}
352
-
{{/contains}}
353
-
354
-
{{#contains product.category 'Supplements'}}
355
-
{{> components/custom/products/supplements-description-tabs}}
356
-
{{/contains}}
357
-
358
-
{{!--{{#contains product.title 'Trial Pack'}}
359
-
{{> components/custom/products/supplements-description-tabs}}
360
-
{{/contains}}--}}
361
-
362
-
{{> components/products/description-tabs}}
315
+
{{#if theme_settings.show_product_details_tabs}}
316
+
{{> components/custom/products/description-tabs}}
363
317
{{{region name="product _description"}}}
364
-
365
-
366
-
367
-
368
318
{{else}}
369
319
{{> components/products/description}}
370
-
371
320
{{/if}}
372
-
373
-
{{!--{{/contains}}--}}
374
-
375
-
376
-
</article>
321
+
</article>
377
322
</div>
378
-
379
-
{{!--<article>
380
-
<h1> new description tester</h1>
381
-
382
-
<div class="productView-description-container"{{#if schema}} itemprop="description"{{/if}}>
383
-
{{> components/products/description}}
384
-
</div>
385
-
386
-
</article>--}}
387
323
388
324
<div id="previewModal" class="modal modal--large" data-reveal>
389
325
{{> components/common/modal/modal-close-btn }}