apurvab
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

Compare commits

base: apurvab:4e434d72d703d6658326b9f51c80324b0a85d8c7
Branches Tags
apurvab:main
apurvab:fix/facets
apurvab:marketing-experiment
apurvab:staging
apurvab:update
apurvab:dev
...
compare: apurvab:adcda7f84891aec2a16da98e67d296048237d92a
Branches Tags
apurvab:main
apurvab:fix/facets
apurvab:marketing-experiment
apurvab:staging
apurvab:update
apurvab:dev

9 Commits
4e434d72d7 ... adcda7f848

Author SHA1 Message Date
jatin adcda7f848 chore: add gtag script for ads 2024-11-28 17:48:07 +05:30
jatiny 77430f1882 fix: close filters on changing page 2024-11-28 11:52:29 +00:00
jatin eaf7015013 chore: update home-page banner image and add link to sports jacket configurator 2024-11-28 15:57:26 +05:30
jatin fdb189472b chore: apply no-underline styling on product miniature tpl to keep it consistent with the product catalog styling on hover 2024-11-28 09:49:44 +05:30
jatin dfd9f154e3 chore: update product card styling to keep it consistent with the catalog pages 
custom clothing section
 2024-11-27 22:19:44 +05:30
jatin 96590099d2 chore: update product miniature to change discount and original price positioning 2024-11-27 21:49:17 +05:30
jatin 3df8252f70 chore: update prices to match discount on home page custom section 2024-11-27 21:48:58 +05:30
jatiny 9ea53bb81e chore: disabled btn styling 2024-11-27 15:52:07 +00:00
jatiny d76c9be47e chore: styling notfication tpl file 2024-11-27 15:51:02 +00:00
9 changed files with 314 additions and 246 deletions
Show Stats Expand all files Collapse all files

15
_dev/js/listing.js
View File

@ -32,6 +32,11 @@ import ProductMinitature from "./components/product-miniature";
$(document).ready(() => { $(document).ready(() => {
let pageFilter = false;
$("#pagination-anchor.js-search-link").on('click', function() {
pageFilter = true
} )
const move = (direction) => { const move = (direction) => {
const THUMB_MARGIN = 20; const THUMB_MARGIN = 20;
const $thumbnails = $(".js-qv-product-images"); const $thumbnails = $(".js-qv-product-images");
@ -235,7 +240,10 @@ $(document).ready(() => {
$('#overlay').show(); $('#overlay').show();
}); });
$('#product-list-top-filters').show(); $("#pagination-anchor.js-search-link").on('click', function() {
pageFilter = true
} )
function checkAndShowOverlay() { function checkAndShowOverlay() {
if ($('#product-list-top-filters').is(':visible')) { if ($('#product-list-top-filters').is(':visible')) {
@ -245,15 +253,20 @@ $(document).ready(() => {
} }
} }
if ( !pageFilter ) {
$('#product-list-top-filters').show(function() { $('#product-list-top-filters').show(function() {
checkAndShowOverlay(); checkAndShowOverlay();
}); });
} else {
$('#product-list-top-filters').hide();
}
$('#overlay').on('click', function() { $('#overlay').on('click', function() {
$('#product-list-top-filters').hide(); $('#product-list-top-filters').hide();
$('#overlay').hide(); $('#overlay').hide();
}); });
pageFilter = false
$('.th-accordion').thaccordion(); $('.th-accordion').thaccordion();

9
_dev/js/theme.js
View File

@ -80,6 +80,15 @@ $(() => {
productSelect.init(); productSelect.init();
usePasswordPolicy('.field-password-policy'); usePasswordPolicy('.field-password-policy');
$(document).ready(function() {
if ($('.add-to-cart').is(':disabled')) {
$('.add-to-cart').css({
'background-color': 'grey',
'color': 'white',
'cursor': 'not-allowed'
});
}
});
$('.easyzoom').easyZoom({ $('.easyzoom').easyZoom({
}); });

389
assets/css/theme.css
View File

@ -1,113 +1,5 @@
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
/* /*
! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com ! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
*/ */
/* /*
@ -140,11 +32,9 @@
4. Use the user's configured `sans` font-family by default. 4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default. 5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default. 6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/ */
html, html {
:host {
line-height: 1.5; line-height: 1.5;
/* 1 */ /* 1 */
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
@ -160,8 +50,6 @@ html,
/* 5 */ /* 5 */
font-variation-settings: normal; font-variation-settings: normal;
/* 6 */ /* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
} }
/* /*
@ -233,10 +121,8 @@ strong {
} }
/* /*
1. Use the user's configured `mono` font-family by default. 1. Use the user's configured `mono` font family by default.
2. Use the user's configured `mono` font-feature-settings by default. 2. Correct the odd `em` font sizing in all browsers.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/ */
code, code,
@ -245,12 +131,8 @@ samp,
pre { pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */ /* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em; font-size: 1em;
/* 4 */ /* 2 */
} }
/* /*
@ -319,8 +201,6 @@ textarea {
/* 1 */ /* 1 */
line-height: inherit; line-height: inherit;
/* 1 */ /* 1 */
letter-spacing: inherit;
/* 1 */
color: inherit; color: inherit;
/* 1 */ /* 1 */
margin: 0; margin: 0;
@ -344,9 +224,9 @@ select {
*/ */
button, button,
input:where([type='button']), [type='button'],
input:where([type='reset']), [type='reset'],
input:where([type='submit']) { [type='submit'] {
-webkit-appearance: button; -webkit-appearance: button;
/* 1 */ /* 1 */
background-color: transparent; background-color: transparent;
@ -550,7 +430,7 @@ video {
/* Make elements with the HTML hidden attribute stay hidden by default */ /* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) { [hidden] {
display: none; display: none;
} }
@ -725,6 +605,106 @@ select {
outline: 1px auto -webkit-focus-ring-color; outline: 1px auto -webkit-focus-ring-color;
} }
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.container { .container {
width: 100%; width: 100%;
} }
@ -924,6 +904,11 @@ select {
margin-right: auto; margin-right: auto;
} }
.my-0 {
margin-top: 0px;
margin-bottom: 0px;
}
.my-0\.5 { .my-0\.5 {
margin-top: 0.125rem; margin-top: 0.125rem;
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
@ -967,10 +952,6 @@ select {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.mb-16 {
margin-bottom: 4rem;
}
.mb-2 { .mb-2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -1203,6 +1184,11 @@ select {
width: 40%; width: 40%;
} }
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full { .w-full {
width: 100%; width: 100%;
} }
@ -1460,62 +1446,62 @@ select {
.border-blue-300 { .border-blue-300 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity, 1)); border-color: rgb(147 197 253 / var(--tw-border-opacity));
} }
.border-blue-950 { .border-blue-950 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(23 37 84 / var(--tw-border-opacity, 1)); border-color: rgb(23 37 84 / var(--tw-border-opacity));
} }
.border-gray-100 { .border-gray-100 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)); border-color: rgb(243 244 246 / var(--tw-border-opacity));
} }
.border-gray-200 { .border-gray-200 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); border-color: rgb(229 231 235 / var(--tw-border-opacity));
} }
.border-gray-300 { .border-gray-300 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); border-color: rgb(209 213 219 / var(--tw-border-opacity));
} }
.border-gray-500 { .border-gray-500 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity, 1)); border-color: rgb(107 114 128 / var(--tw-border-opacity));
} }
.border-gray-600 { .border-gray-600 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)); border-color: rgb(75 85 99 / var(--tw-border-opacity));
} }
.border-gray-800 { .border-gray-800 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(31 41 55 / var(--tw-border-opacity, 1)); border-color: rgb(31 41 55 / var(--tw-border-opacity));
} }
.border-gray-900 { .border-gray-900 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(17 24 39 / var(--tw-border-opacity, 1)); border-color: rgb(17 24 39 / var(--tw-border-opacity));
} }
.border-red-100 { .border-red-100 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(254 226 226 / var(--tw-border-opacity, 1)); border-color: rgb(254 226 226 / var(--tw-border-opacity));
} }
.border-red-300 { .border-red-300 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(252 165 165 / var(--tw-border-opacity, 1)); border-color: rgb(252 165 165 / var(--tw-border-opacity));
} }
.border-white { .border-white {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); border-color: rgb(255 255 255 / var(--tw-border-opacity));
} }
.bg-black\/70 { .bg-black\/70 {
@ -1524,50 +1510,42 @@ select {
.bg-blue-100 { .bg-blue-100 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); background-color: rgb(219 234 254 / var(--tw-bg-opacity));
} }
.bg-blue-500 { .bg-blue-500 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); background-color: rgb(59 130 246 / var(--tw-bg-opacity));
} }
.bg-blue-950 { .bg-blue-950 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1)); background-color: rgb(23 37 84 / var(--tw-bg-opacity));
} }
.bg-gray-100 { .bg-gray-100 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); background-color: rgb(243 244 246 / var(--tw-bg-opacity));
} }
.bg-gray-200 { .bg-gray-200 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); background-color: rgb(229 231 235 / var(--tw-bg-opacity));
} }
.bg-red-100 { .bg-red-100 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); background-color: rgb(254 226 226 / var(--tw-bg-opacity));
} }
.bg-red-50 { .bg-red-50 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); background-color: rgb(254 242 242 / var(--tw-bg-opacity));
} }
.bg-white { .bg-white {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-cover {
background-size: cover;
}
.bg-center {
background-position: center;
} }
.stroke-black { .stroke-black {
@ -1705,6 +1683,10 @@ select {
padding-right: 0px; padding-right: 0px;
} }
.pr-1 {
padding-right: 0.25rem;
}
.pr-1\.5 { .pr-1\.5 {
padding-right: 0.375rem; padding-right: 0.375rem;
} }
@ -1821,87 +1803,87 @@ select {
.text-\[\#4B5563\] { .text-\[\#4B5563\] {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1)); color: rgb(75 85 99 / var(--tw-text-opacity));
} }
.text-blue-500 { .text-blue-500 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity, 1)); color: rgb(59 130 246 / var(--tw-text-opacity));
} }
.text-blue-600 { .text-blue-600 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity, 1)); color: rgb(37 99 235 / var(--tw-text-opacity));
} }
.text-blue-900 { .text-blue-900 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity, 1)); color: rgb(30 58 138 / var(--tw-text-opacity));
} }
.text-blue-950 { .text-blue-950 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(23 37 84 / var(--tw-text-opacity, 1)); color: rgb(23 37 84 / var(--tw-text-opacity));
} }
.text-gray-400 { .text-gray-400 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1)); color: rgb(156 163 175 / var(--tw-text-opacity));
} }
.text-gray-50 { .text-gray-50 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity, 1)); color: rgb(249 250 251 / var(--tw-text-opacity));
} }
.text-gray-500 { .text-gray-500 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1)); color: rgb(107 114 128 / var(--tw-text-opacity));
} }
.text-gray-600 { .text-gray-600 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1)); color: rgb(75 85 99 / var(--tw-text-opacity));
} }
.text-gray-700 { .text-gray-700 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity, 1)); color: rgb(55 65 81 / var(--tw-text-opacity));
} }
.text-gray-900 { .text-gray-900 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity, 1)); color: rgb(17 24 39 / var(--tw-text-opacity));
} }
.text-gray-950 { .text-gray-950 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(3 7 18 / var(--tw-text-opacity, 1)); color: rgb(3 7 18 / var(--tw-text-opacity));
} }
.text-red-400 { .text-red-400 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity, 1)); color: rgb(248 113 113 / var(--tw-text-opacity));
} }
.text-red-500 { .text-red-500 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity, 1)); color: rgb(239 68 68 / var(--tw-text-opacity));
} }
.text-red-600 { .text-red-600 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity, 1)); color: rgb(220 38 38 / var(--tw-text-opacity));
} }
.text-red-900 { .text-red-900 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(127 29 29 / var(--tw-text-opacity, 1)); color: rgb(127 29 29 / var(--tw-text-opacity));
} }
.text-white { .text-white {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
.underline { .underline {
@ -1951,20 +1933,20 @@ select {
body { body {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1)); color: rgb(75 85 99 / var(--tw-text-opacity));
font-weight: 300; font-weight: 300;
} }
a { a {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity, 1)); color: rgb(75 85 99 / var(--tw-text-opacity));
} }
a:hover { a:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity, 1)); color: rgb(30 58 138 / var(--tw-text-opacity));
text-decoration-line: underline; text-decoration-line: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
} }
@ -1973,7 +1955,7 @@ a:hover {
stroke-width: 1px; stroke-width: 1px;
fill: none; fill: none;
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1)); color: rgb(107 114 128 / var(--tw-text-opacity));
stroke: #6b7280; stroke: #6b7280;
} }
@ -2074,6 +2056,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
padding-right: 1rem; padding-right: 1rem;
} }
.file\:py-1::file-selector-button {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.file\:py-1\.5::file-selector-button { .file\:py-1\.5::file-selector-button {
padding-top: 0.375rem; padding-top: 0.375rem;
padding-bottom: 0.375rem; padding-bottom: 0.375rem;
@ -2090,7 +2077,7 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.file\:text-blue-950::file-selector-button { .file\:text-blue-950::file-selector-button {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(23 37 84 / var(--tw-text-opacity, 1)); color: rgb(23 37 84 / var(--tw-text-opacity));
} }
.last\:hidden:last-child { .last\:hidden:last-child {
@ -2103,22 +2090,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.even\:bg-gray-200:nth-child(even) { .even\:bg-gray-200:nth-child(even) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); background-color: rgb(229 231 235 / var(--tw-bg-opacity));
} }
.hover\:border-blue-900:hover { .hover\:border-blue-900:hover {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(30 58 138 / var(--tw-border-opacity, 1)); border-color: rgb(30 58 138 / var(--tw-border-opacity));
} }
.hover\:bg-blue-600:hover { .hover\:bg-blue-600:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); background-color: rgb(37 99 235 / var(--tw-bg-opacity));
} }
.hover\:bg-blue-900:hover { .hover\:bg-blue-900:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1)); background-color: rgb(30 58 138 / var(--tw-bg-opacity));
} }
.hover\:stroke-blue-900:hover { .hover\:stroke-blue-900:hover {
@ -2127,37 +2114,37 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.hover\:text-blue-700:hover { .hover\:text-blue-700:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity, 1)); color: rgb(29 78 216 / var(--tw-text-opacity));
} }
.hover\:text-blue-900:hover { .hover\:text-blue-900:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity, 1)); color: rgb(30 58 138 / var(--tw-text-opacity));
} }
.hover\:text-gray-50:hover { .hover\:text-gray-50:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity, 1)); color: rgb(249 250 251 / var(--tw-text-opacity));
} }
.hover\:text-gray-500:hover { .hover\:text-gray-500:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1)); color: rgb(107 114 128 / var(--tw-text-opacity));
} }
.hover\:text-gray-950:hover { .hover\:text-gray-950:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(3 7 18 / var(--tw-text-opacity, 1)); color: rgb(3 7 18 / var(--tw-text-opacity));
} }
.hover\:text-white:hover { .hover\:text-white:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
.hover\:text-yellow-700:hover { .hover\:text-yellow-700:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(161 98 7 / var(--tw-text-opacity, 1)); color: rgb(161 98 7 / var(--tw-text-opacity));
} }
.hover\:underline:hover { .hover\:underline:hover {
@ -2170,7 +2157,7 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.hover\:file\:text-blue-900::file-selector-button:hover { .hover\:file\:text-blue-900::file-selector-button:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity, 1)); color: rgb(30 58 138 / var(--tw-text-opacity));
} }
.focus\:border-0:focus { .focus\:border-0:focus {
@ -2196,7 +2183,7 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.focus\:ring-blue-500:focus { .focus\:ring-blue-500:focus {
--tw-ring-opacity: 1; --tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
} }
.active\:ring-0:active { .active\:ring-0:active {
@ -2207,17 +2194,17 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.disabled\:bg-gray-600:disabled { .disabled\:bg-gray-600:disabled {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1)); background-color: rgb(75 85 99 / var(--tw-bg-opacity));
} }
.disabled\:bg-gray-700:disabled { .disabled\:bg-gray-700:disabled {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); background-color: rgb(55 65 81 / var(--tw-bg-opacity));
} }
.disabled\:text-gray-300:disabled { .disabled\:text-gray-300:disabled {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1)); color: rgb(209 213 219 / var(--tw-text-opacity));
} }
.group:hover .group-hover\:flex { .group:hover .group-hover\:flex {
@ -2226,7 +2213,7 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
.group:hover .group-hover\:text-blue-900 { .group:hover .group-hover\:text-blue-900 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity, 1)); color: rgb(30 58 138 / var(--tw-text-opacity));
} }
.group.-complete .group-\[\.-complete\]\:block { .group.-complete .group-\[\.-complete\]\:block {

24
assets/js/theme.js
View File

File diff suppressed because one or more lines are too long

13
templates/_partials/head.tpl
View File

@ -134,6 +134,19 @@ gtag('config', 'G-4MD1MZN5TY');
</script> </script>
{/literal} {/literal}
{literal}
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-16651196774">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-16651196774');
</script>
{/literal}
{block name='hook_header'} {block name='hook_header'}
{$HOOK_HEADER nofilter} {$HOOK_HEADER nofilter}

2
templates/_partials/notifications.tpl
View File

@ -27,7 +27,7 @@
<div id="notifications" class="notifications-container container"> <div id="notifications" class="notifications-container container">
{if $notifications.error} {if $notifications.error}
{block name='notifications_error'} {block name='notifications_error'}
<article class="alert alert-danger" role="alert" data-alert="danger"> <article class="alert alert-danger text-center w-fit flex mt-12 p-2 bg-red-100 border border-red-300 " role="alert" data-alert="danger">
<ul> <ul>
{foreach $notifications.error as $notif} {foreach $notifications.error as $notif}
<li>{$notif nofilter}</li> <li>{$notif nofilter}</li>

1
templates/_partials/pagination.tpl
View File

@ -36,6 +36,7 @@
{foreach from=$pagination.pages item="page"} {foreach from=$pagination.pages item="page"}
<li {if $page.current} class="current font-bold" {/if}> <li {if $page.current} class="current font-bold" {/if}>
<a <a
id="pagination-anchor"
rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}" rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
href="{$page.url}" href="{$page.url}"
disabled disabled

10
templates/catalog/_partials/miniatures/product.tpl
View File

@ -23,7 +23,7 @@
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
{block name='product_miniature_item'} {block name='product_miniature_item'}
<a href="{$product.url}" class="group w-full md:w-1/2 lg:w-1/3 xl:w-1/4 flex flex-col p-4"> <a href="{$product.url}" class="group w-full md:w-1/2 lg:w-1/3 xl:w-1/4 flex flex-col p-4 hover:no-underline hover:text-blue-900">
{block name='product_thumbnail'} {block name='product_thumbnail'}
{if $product.cover} {if $product.cover}
<div class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"> <div class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100">
@ -42,15 +42,15 @@
{/block} {/block}
<div class="product-description flex flex-col pt-4 group-hover:text-blue-900 gap-1"> <div class="product-description flex flex-col pt-4 group-hover:text-blue-900 gap-1">
{block name='product_price_and_shipping'} {block name='product_price_and_shipping'}
<div class="flex w-full justify-between items-center"> <div class="flex flex-col w-full items-start">
{if $product.has_discount}
<span class="regular-price line-through leading-none font-medium">{$product.regular_price}</span>
{/if}
{if $product.show_price} {if $product.show_price}
<div class="font-bold text-lg"> <div class="font-bold text-lg">
<span>{$product.price}</span> <span>{$product.price}</span>
</div> </div>
{/if} {/if}
{if $product.has_discount}
<span class="regular-price line-through leading-none text-sm font-medium">{$product.regular_price}</span>
{/if}
</div> </div>
{/block} {/block}
{block name='product_name'} {block name='product_name'}

83
templates/layouts/layout-both-columns.tpl
View File

@ -72,11 +72,16 @@
{if $page.page_name == 'index'} {if $page.page_name == 'index'}
<div class="relative flex items-center"><img <div class="relative flex items-center">
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/banner.png" <a href="https://brooksbingham.com/3d-configurator?id_product=76">
<img
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/bb_websitebanner_black_friday_sale_compressed.png"
alt="banner.png" /> alt="banner.png" />
<h3 class="lg:text-5xl md:text-3xl text-lg absolute lg:font-bold font-semibold right-8 w-[40%]">Elevate your </a>
style with BrooksBingham!</h3> <div class="hidden flex flex-col left-8 w-[40%] absolute">
<h3 class="lg:text-lg md:text-3xl text-sm lg:font-bold font-semibold">Brooks Bingham</h3>
<h3 class="lg:text-5xl md:text-3xl text-2xl lg:font-bold font-semibold">Black Friday Sale</h3>
</div>
</div> </div>
<div class="container"> <div class="container">
<h2 class="products-section-title text-2xl font-bold mt-20 text-center">Design in 3D - Choose a product to <h2 class="products-section-title text-2xl font-bold mt-20 text-center">Design in 3D - Choose a product to
@ -84,36 +89,56 @@
<h3 class="text-lg font-semibold text-center mb-12">Tailored to you, at no extra cost.</h3> <h3 class="text-lg font-semibold text-center mb-12">Tailored to you, at no extra cost.</h3>
<div class="flex md:flex-row flex-col gap-8 lg:mb-32 mb-20"> <div class="flex md:flex-row flex-col gap-8 lg:mb-32 mb-20">
<div> <div>
<a href="https://brooksbingham.com/module/thob/configurator?id_product=74"> <a class="hover:no-underline hover:text-blue-900" href="https://brooksbingham.com/module/thob/configurator?id_product=74">
<img id="shirtImage" class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://brooksbingham.com/111-home_default/business-shirt.jpg" alt="business-shirt.jpg" /></a> <img id="shirtImage" class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://brooksbingham.com/111-home_default/business-shirt.jpg" alt="business-shirt.jpg" />
<div class="flex flex-col pt-4 items-start"> <div class="flex flex-col pt-4 items-start">
<h3 class="text-center text-lg font-bold">$99.00</h3> <div class="flex flex-col items-start">
<h3 class="text-center text-lg font-semibold">Shirts</h3> <h3 class="text-center text-lg font-bold">$66.33</h3>
<h3 class="text-center line-through text-sm font-medium">$99.00</h3>
</div> </div>
<h3 class="text-center text-lg font-light">Shirts</h3>
</div> </div>
<div><a href="https://brooksbingham.com/module/thob/configurator?id_product=75"> <img id="suitImage"
class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
src="https://brooksbingham.com/107-home_default/business-suit.jpg" alt="business-suit.jpg" /></a>
<div class="flex flex-col pt-4 items-start">
<h3 class="text-center text-lg font-bold">$795.00</h3>
<h3 class="text-center text-lg font-semibold">Suits</h3>
</div>
</div>
<div><a href="https://brooksbingham.com/module/thob/configurator?id_product=76"> <img id="sportsjacketImage"
class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
src="https://brooksbingham.com/108-home_default/sports-jacket.jpg" alt="sports-jacket.jpg" /></a>
<div class="flex flex-col pt-4 items-start">
<h3 class="text-center text-lg font-bold">$495.00</h3>
<h3 class="text-center text-lg font-semibold">Sports Jackets</h3>
</div>
</div>
<div><a href="https://brooksbingham.com/module/thob/configurator?id_product=77">
<img id="tuxImage" class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://brooksbingham.com/112-home_default/tuxedo.jpg" alt="tuxedo.jpg" />
</a> </a>
<div class="flex flex-col pt-4 items-start">
<h3 class="text-center text-lg font-bold">$995.00</h3>
<h3 class="text-center text-lg font-semibold">Tuxedos</h3>
</div> </div>
<div>
<a class="hover:no-underline hover:text-blue-900" href="https://brooksbingham.com/module/thob/configurator?id_product=75">
<img id="suitImage"
class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
src="https://brooksbingham.com/107-home_default/business-suit.jpg" alt="business-suit.jpg" />
<div class="flex flex-col pt-4 items-start">
<div class="flex flex-col items-start">
<h3 class="text-center text-lg font-bold">$532.65</h3>
<h3 class="text-center line-through text-sm font-medium">$795.00</h3>
</div>
<h3 class="text-center text-lg font-light">Suits</h3>
</div>
</a>
</div>
<div>
<a class="hover:no-underline hover:text-blue-900" href="https://brooksbingham.com/module/thob/configurator?id_product=76">
<img id="sportsjacketImage"
class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100"
src="https://brooksbingham.com/108-home_default/sports-jacket.jpg" alt="sports-jacket.jpg" />
<div class="flex flex-col pt-4 items-start">
<div class="flex flex-col items-start">
<h3 class="text-center text-lg font-bold">$331.65</h3>
<h3 class="text-center line-through text-sm font-medium">$495.00</h3>
</div>
<h3 class="text-center text-lg font-light">Sports Jackets</h3>
</div>
</a>
</div>
<div>
<a class="hover:no-underline hover:text-blue-900" href="https://brooksbingham.com/module/thob/configurator?id_product=77">
<img id="tuxImage" class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100" src="https://brooksbingham.com/112-home_default/tuxedo.jpg" alt="tuxedo.jpg" />
<div class="flex flex-col pt-4 items-start">
<div class="flex flex-col items-start">
<h3 class="text-center text-lg font-bold">$666.65</h3>
<h3 class="text-center line-through text-sm font-medium">$995.00</h3>
</div>
<h3 class="text-center text-lg font-light">Tuxedos</h3>
</div>
</a>
</div> </div>
</div> </div>
</div> </div>