The repo for Purrform's main BigCommerce store.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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
··· 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 }
+81 -85
assets/scss/components/stencil/navPages/_navPages.scss
··· 1 1 // Page Navigation 2 2 // ----------------------------------------------------------------------------- 3 - // 4 3 // Purpose: Contains the styles for the page navigation, deals with 2 viewsdue to 5 4 // responsive layout of that navigation 6 - // 7 5 // 1. It's not exactly a grid row, as it's a little further down the DOM tree, but 8 6 // I use it here to grab the max width centering. 9 7 // 2. Prevent document scrolling by clipping its body 10 8 // 3. Prevent inertia scrolling of document 11 - // 12 9 // ----------------------------------------------------------------------------- 13 10 14 - 15 - // 16 11 // Shared styles for sub page navigation 17 12 // ----------------------------------------------------------------------------- 18 13 19 14 %navPage-childList { 20 15 border-left: 1px solid $navPage-childList-borderColor; 21 - margin: spacing("quarter") spacing("half"); 22 - padding-left: spacing("half"); 16 + margin: spacing('quarter') spacing('half'); 17 + padding-left: spacing('half'); 23 18 } 24 19 25 - // 26 20 // When navPages is open 27 21 // ----------------------------------------------------------------------------- 28 22 ··· 31 25 -webkit-overflow-scrolling: auto; // 3 32 26 } 33 27 34 - // 35 28 // Top level Pages navigation container 36 29 // ----------------------------------------------------------------------------- 37 30 ··· 43 36 -webkit-overflow-scrolling: touch; 44 37 position: absolute; 45 38 right: 0; 46 - z-index: zIndex("lower"); 39 + z-index: zIndex('lower'); 47 40 48 - @include breakpoint("medium") { 41 + @include breakpoint('medium') { 49 42 background: transparent; 50 43 display: block; 51 44 height: auto; ··· 60 53 } 61 54 } 62 55 63 - // 64 56 // Top level Pages navigation list styles 65 57 // ----------------------------------------------------------------------------- 66 58 ··· 68 60 background-color: $navPages-backgroundColor; 69 61 height: 100%; 70 62 overflow-y: auto; 71 - padding: spacing("single"); 63 + padding: spacing('single'); 72 64 73 - @include breakpoint("medium") { 65 + @include breakpoint('medium') { 74 66 @include grid-row(); // 1 75 - @include nav($style: "navBar", $wrapper: "nav"); 67 + @include nav($style: 'navBar', $wrapper: 'nav'); 68 + 76 69 background: none; 77 70 font-size: 0; // 1 78 71 overflow-y: visible; ··· 92 85 margin-left: 0; 93 86 padding-left: 0; 94 87 95 - @include breakpoint("medium") { 88 + @include breakpoint('medium') { 96 89 @include grid-row(); 90 + 97 91 border-left: 0; 98 92 margin: auto; 99 93 padding-left: 0; ··· 104 98 .navPages-list { 105 99 margin: 0; 106 100 107 - @include breakpoint("medium") { 101 + @include breakpoint('medium') { 108 102 display: inline-block; 109 103 float: none; 110 104 } 111 105 112 106 + .navPages-list { 113 107 border-top: 1px solid $navPages-list--user-borderColor; 114 - margin-top: spacing("half"); 115 - padding-top: spacing("half"); 108 + margin-top: spacing('half'); 109 + padding-top: spacing('half'); 116 110 } 117 111 } 118 112 ··· 120 114 .is-hidden { 121 115 display: none; 122 116 123 - @include breakpoint("medium") { 117 + @include breakpoint('medium') { 124 118 display: inline-block; 125 119 } 126 120 } ··· 128 122 .navPages-item-page { 129 123 display: none; 130 124 131 - @include breakpoint("medium") { 125 + @include breakpoint('medium') { 132 126 display: inline-block; 133 127 } 134 128 } ··· 136 130 137 131 .navPages-action-depth-max.has-subMenu.is-root.is-open { 138 132 .navPages-action-moreIcon { 139 - @include breakpoint("medium") { 133 + @include breakpoint('medium') { 140 134 transform: rotate(0); 141 135 } 142 136 } ··· 146 140 border-bottom: 1px solid $navPages-list--user-borderColor; 147 141 text-align: center; 148 142 149 - @include breakpoint("medium") { 143 + @include breakpoint('medium') { 150 144 border-bottom: 0; 151 145 text-align: left; 152 146 } ··· 161 155 transform: rotate(90deg); 162 156 width: 35px; 163 157 164 - @include breakpoint("medium") { 158 + @include breakpoint('medium') { 165 159 @include square(8px); 160 + 166 161 border: 0; 167 162 border-radius: 0; 168 163 float: none; ··· 176 171 height: 9.6px; 177 172 width: 9.6px; 178 173 179 - @include breakpoint("medium") { 174 + @include breakpoint('medium') { 180 175 height: 100%; 181 176 width: 100%; 182 177 } ··· 184 179 } 185 180 186 181 .navPages-action { 187 - color: stencilColor("navPages-color"); 182 + color: stencilColor('navPages-color'); 188 183 display: block; 189 - font-size: fontSize("smaller"); 190 - font-weight: fontWeight("bold"); 191 - padding: spacing("half") 0; 184 + font-size: fontSize('smaller'); 185 + font-weight: fontWeight('bold'); 186 + padding: spacing('half') 0; 192 187 text-decoration: none; 193 188 text-transform: uppercase; 194 189 195 - @include breakpoint("medium") { 190 + @include breakpoint('medium') { 196 191 display: inline-block; 197 - padding: spacing("half") (spacing("half") + spacing("quarter")) (spacing("half") + spacing("quarter")); 192 + padding: spacing('half') (spacing('half') + spacing('quarter')) 193 + (spacing('half') + spacing('quarter')); 198 194 199 195 &.is-open { 200 196 background-color: $navPage-subMenu-item--is-highlighted-background; ··· 228 224 } 229 225 230 226 svg { 231 - fill: stencilColor("navPages-color"); 232 - stroke: stencilColor("navPages-color"); 227 + fill: stencilColor('navPages-color'); 228 + stroke: stencilColor('navPages-color'); 233 229 transition: all 0.15s ease; 234 230 } 235 231 } 236 232 237 233 .navPages-action--storeCredit { 238 - color: stencilColor("color-textSecondary"); 234 + color: stencilColor('color-textSecondary'); 239 235 } 240 236 241 237 .navPages-action--compare { ··· 248 244 249 245 .navPages-action-moreIcon { 250 246 @include square(8px); 251 - margin-left: spacing("half"); 247 + 248 + margin-left: spacing('half'); 252 249 transform: rotate(-90deg); 253 250 254 - @include breakpoint("medium") { 251 + @include breakpoint('medium') { 255 252 transform: none; 256 253 } 257 254 ··· 262 259 263 260 .navPages-list:not(.navPages-list-depth-max) & { 264 261 @include square(11px); 265 - margin: 0 spacing("single"); 266 262 267 - @include breakpoint("medium") { 263 + margin: 0 spacing('single'); 264 + 265 + @include breakpoint('medium') { 268 266 @include square(8px); 269 - margin: 0 0 0 spacing("half"); 267 + 268 + margin: 0 0 0 spacing('half'); 270 269 } 271 270 } 272 271 } 273 - 274 272 275 273 // Sub page navigation and children of sub pages 276 274 // ----------------------------------------------------------------------------- 277 275 278 276 .navPage-childList { 279 277 @extend %navPage-childList; 278 + 280 279 display: none; 281 280 282 - @include breakpoint("medium") { 281 + @include breakpoint('medium') { 283 282 border: 0; 284 283 display: block; 285 284 } ··· 289 288 } 290 289 291 290 .navPage-subMenu-action:not(.navPages-action-depth-max) + & { 292 - margin-left: spacing("double"); // 291 + margin-left: spacing('double'); 293 292 294 - @include breakpoint("medium") { 293 + @include breakpoint('medium') { 295 294 margin-left: 0; 296 295 } 297 296 } 298 297 } 299 - 300 298 301 299 // Sub menu, first level down from top level categories 302 300 // ----------------------------------------------------------------------------- 303 - // 304 301 // 1. navBar mixin has lots of decendant child selectors to deal with 305 - // 306 302 // ----------------------------------------------------------------------------- 307 303 308 304 .navPage-subMenu { 309 305 display: none; 310 306 outline: 0; 311 307 312 - @include breakpoint("medium") { 313 - background-color: stencilColor("navPages-subMenu-backgroundColor"); 314 - padding: spacing("single") spacing("single") (spacing("single") + spacing("half")) !important; 308 + @include breakpoint('medium') { 309 + background-color: stencilColor('navPages-subMenu-backgroundColor'); 310 + padding: spacing('single') spacing('single') 311 + (spacing('single') + spacing('half')) !important; 315 312 position: absolute; 316 313 text-align: left; 317 314 ··· 330 327 display: block; 331 328 } 332 329 333 - .navPages-list:not(.navPages-list-depth-max) .navPages-action.has-subMenu + & { 330 + .navPages-list:not(.navPages-list-depth-max) 331 + .navPages-action.has-subMenu 332 + + & { 334 333 .navPage-subMenu-list { 335 334 margin-right: 0; 336 335 337 - @include breakpoint("medium") { 336 + @include breakpoint('medium') { 338 337 margin-right: auto; 339 338 } 340 339 } ··· 342 341 } 343 342 344 343 .has-subMenu.is-root + .navPage-subMenu-horizontal { 345 - @include breakpoint("medium") { 344 + @include breakpoint('medium') { 346 345 border-left: 0; 347 346 height: $navPage-subMenu-horizontal-height; 348 347 left: inherit; ··· 354 353 355 354 .navPage-subMenu-horizontal { 356 355 &.is-open { 357 - @include breakpoint("medium") { 358 - border-left: 1px solid stencilColor("navPages-subMenu-separatorColor"); 356 + @include breakpoint('medium') { 357 + border-left: 1px solid 358 + stencilColor('navPages-subMenu-separatorColor'); 359 359 display: inherit; 360 360 height: $navPage-subMenu-horizontal-height; 361 361 margin-left: $navPage-subMenu-horizontal-width; ··· 366 366 } 367 367 368 368 .navPages-action-moreIcon { 369 - @include breakpoint("medium") { 369 + @include breakpoint('medium') { 370 370 display: inline-block; 371 371 transform: rotate(-90deg); 372 372 } ··· 374 374 } 375 375 376 376 .navPage-subMenu-item { 377 - padding: spacing("half") 0; 377 + padding: spacing('half') 0; 378 378 379 - @include breakpoint("medium") { 379 + @include breakpoint('medium') { 380 380 @include grid-column(3); 381 + 381 382 padding: 0 0.75rem !important; // 1 382 383 383 384 .navPages-action { ··· 386 387 } 387 388 388 389 > .navPage-subMenu-action { 389 - border-bottom: 1px solid stencilColor("navPages-subMenu-separatorColor"); 390 - margin-bottom: spacing("half") + spacing("quarter"); 390 + border-bottom: 1px solid 391 + stencilColor('navPages-subMenu-separatorColor'); 392 + margin-bottom: spacing('half') + spacing('quarter'); 391 393 } 392 394 } 393 395 } ··· 396 398 .navPage-subMenu-item-parent { 397 399 width: 100%; 398 400 399 - @include breakpoint("medium") { 401 + @include breakpoint('medium') { 400 402 .navPage-subMenu-action { 401 - padding-left: spacing("single"); 402 - padding-right: spacing("single"); 403 + padding-left: spacing('single'); 404 + padding-right: spacing('single'); 403 405 width: 100%; 404 406 } 405 407 } 406 408 } 407 409 408 410 .navPage-subMenu-action { 409 - padding: spacing("half") 0; 411 + padding: spacing('half') 0; 410 412 411 - @include breakpoint("medium") { 412 - padding: spacing("half") 0 (spacing("half") + spacing("quarter")); 413 + @include breakpoint('medium') { 414 + padding: spacing('half') 0 (spacing('half') + spacing('quarter')); 413 415 } 414 416 415 417 .navPages-list:not(.navPages-list-depth-max) & { 416 - padding: 0 0 0 spacing("single"); 418 + padding: 0 0 0 spacing('single'); 417 419 418 - @include breakpoint("medium") { 419 - padding: spacing("half") 0 (spacing("half") + spacing("quarter")); 420 + @include breakpoint('medium') { 421 + padding: spacing('half') 0 (spacing('half') + spacing('quarter')); 420 422 } 421 423 } 422 424 ··· 427 429 text-align: right; 428 430 width: 100%; 429 431 430 - @include breakpoint("medium") { 432 + @include breakpoint('medium') { 431 433 display: none; 432 434 } 433 435 } 434 436 } 435 437 436 - 437 - // 438 438 // Child pages of sub pages navigation lists 439 439 // ----------------------------------------------------------------------------- 440 440 .navPage-childList-action { 441 - font-weight: fontWeight("normal"); 442 - padding: 0 0 spacing("quarter"); 441 + font-weight: fontWeight('normal'); 442 + padding: 0 0 spacing('quarter'); 443 443 } 444 444 445 - 446 - // 447 445 // Quick search inside the mobile nav 448 446 // ----------------------------------------------------------------------------- 449 447 450 448 .navPages-quickSearch { 451 - border-bottom: container("border"); 452 - margin-bottom: spacing("half"); 449 + border-bottom: container('border'); 450 + margin-bottom: spacing('half'); 453 451 454 - @include breakpoint("medium") { 452 + @include breakpoint('medium') { 455 453 display: none; 456 454 } 457 455 ··· 468 466 } 469 467 } 470 468 471 - 472 - // 473 469 // NavPages user section for mobile nav panel 474 470 // ----------------------------------------------------------------------------- 475 471 476 472 .navPages-list--user { 477 - @include breakpoint("medium") { 473 + @include breakpoint('medium') { 478 474 display: none; 479 475 } 480 476 481 477 #currencySelection2 { 482 - background-color: color("whites", "bright"); 483 - border: container("border"); 478 + background-color: color('whites', 'bright'); 479 + border: container('border'); 484 480 485 481 .dropdown-menu-item { 486 482 padding: 0; 487 483 488 484 &:not(:last-child) { 489 - border-bottom: container("border"); 485 + border-bottom: container('border'); 490 486 } 491 487 } 492 488 493 489 a { 494 - padding: spacing("half") spacing("single"); 490 + padding: spacing('half') spacing('single'); 495 491 } 496 492 } 497 493 }
+14 -10
assets/scss/components/stencil/navUser/_navUser.scss
··· 1 1 // ============================================================================= 2 2 // USER NAVIGATION (CSS) 3 3 // ============================================================================= 4 - // 5 4 // 1. Corrects the spacing added by .navUser-or 6 5 // 2. Can't use top: 50% because its container `.header` changes its height to 7 6 // 100% when mobile menu is expanded ··· 13 12 // position, nudge dropdown away from the side of viewport in mobile viewport. 14 13 // 8. This corrects mini cart dropdown arrow alignment in mobile viewport by 15 14 // setting the previous styles to medium breakpoint and adjusts for nudge in (7). 16 - // 17 15 // ----------------------------------------------------------------------------- 18 16 19 17 .navUser { 20 18 @include nav($style: 'navBar', $wrapper: 'nav'); 21 19 @include verticalPositionMiddle('absolute'); 20 + 22 21 right: 0; 23 22 top: 26px; // 2 24 23 width: 100%; // 4 ··· 44 43 @include css-triangle( 45 44 $triangle-direction: 'bottom', 46 45 $triangle-size: 10px, 47 - $triangle-color: 48 - stencilColor('navUser-dropdown-borderColor') 46 + $triangle-color: stencilColor( 47 + 'navUser-dropdown-borderColor' 48 + ) 49 49 ); 50 + 50 51 bottom: 100%; 51 52 left: spacing('half'); 52 53 position: absolute; ··· 56 57 @include css-triangle( 57 58 $triangle-direction: 'bottom', 58 59 $triangle-size: 8px, 59 - $triangle-color: 60 - stencilColor('navUser-dropdown-backgroundColor') 60 + $triangle-color: stencilColor( 61 + 'navUser-dropdown-backgroundColor' 62 + ) 61 63 ); 64 + 62 65 bottom: 100%; 63 66 left: spacing('half') + remCalc(2px); 64 67 position: absolute; ··· 92 95 93 96 .icon { 94 97 @include square(8px); 98 + 95 99 margin: -1px 0 0 spacing('eighth'); 96 100 } 97 101 ··· 180 184 left: auto !important; // 7 181 185 right: remCalc(5px); // 7 182 186 top: auto !important; // 7 187 + 183 188 @include breakpoint('medium') { 184 189 right: 0; // 7 185 190 } ··· 191 196 192 197 &::before { 193 198 right: spacing('half') - remCalc(5px); // 8 199 + 194 200 @include breakpoint('medium') { 195 201 right: spacing('half'); // 8 196 202 } ··· 198 204 199 205 &::after { 200 206 right: spacing('half') - remCalc(3px); // 8 207 + 201 208 @include breakpoint('medium') { 202 209 right: spacing('half') + remCalc(2px); // 8 203 210 } ··· 246 253 247 254 // Quick search 248 255 // ----------------------------------------------------------------------------- 249 - // 250 256 // 1. Overriding the inline styles from Foundation as this is a unique dropdown. 251 - // 252 257 // ----------------------------------------------------------------------------- 253 258 254 259 .navUser-action--quickSearch { ··· 261 266 $triangle-size: 10px, 262 267 $triangle-color: color('greys', 'lightest') 263 268 ); 269 + 264 270 bottom: 0; 265 271 left: 50%; 266 272 position: absolute; ··· 313 319 314 320 // Counter Pill 315 321 // ----------------------------------------------------------------------------- 316 - // 317 322 // 1. Hardcoded intentionally for precise pixels. 318 - // 319 323 // ----------------------------------------------------------------------------- 320 324 321 325 .countPill {
+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
··· 8 8 /* Colors */ 9 9 $color-brand-primary: #687d6a; 10 10 $color-error: #721c24; 11 + $color-gray-darkest: #232524; 12 + $color-gray-darkest: #232524; 11 13 $color-grey-dark: #666; 12 14 $color-gray-dark: #666; 13 15 $color-grey-medium: #8f8f8f;
+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
··· 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
··· 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
··· 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 &amp; 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
··· 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
··· 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
··· 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
··· 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 }}
+1
templates/pages/product.html
··· 10 10 limit: {{theme_settings.productpage_similar_by_views_count}} 11 11 --- 12 12 {{inject 'productId' product.id}} 13 + {{inject 'productDescription' product.description}} 13 14 14 15 {{#partial "page"}} 15 16