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

chore: add banner and interactive widget on home page

Browse Source
This commit is contained in:
jatin 2024-12-06 16:36:19 +05:30
parent 3633ec28ac
commit 1047ccc249
3 changed files with 76 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
_dev/js/theme.js
View File

@ -66,7 +66,7 @@ for (const i in EventEmitter.prototype) {
} }
$(() => { $(() => {
const dropDownEl = $('.js-dropdown'); const dropDownEl = $(".js-dropdown");
const form = new Form(); const form = new Form();
const topMenuEl = $('.js-top-menu ul[data-depth="0"]'); const topMenuEl = $('.js-top-menu ul[data-depth="0"]');
const dropDown = new DropDown(dropDownEl); const dropDown = new DropDown(dropDownEl);
@ -78,54 +78,53 @@ $(() => {
topMenu.init(); topMenu.init();
productMinitature.init(); productMinitature.init();
productSelect.init(); productSelect.init();
usePasswordPolicy('.field-password-policy'); usePasswordPolicy(".field-password-policy");
$(document).ready(function () { $(document).ready(function () {
if ($('.add-to-cart').is(':disabled')) { if ($(".add-to-cart").is(":disabled")) {
$('.add-to-cart').css({ $(".add-to-cart").css({
'background-color': 'grey', "background-color": "grey",
'color': 'white', color: "white",
'cursor': 'not-allowed' cursor: "not-allowed",
}); });
} }
}); });
$('.easyzoom').easyZoom({ $(".easyzoom").easyZoom({});
});
$('.carousel[data-touch="true"]').swipe({ $('.carousel[data-touch="true"]').swipe({
swipe(event, direction) { swipe(event, direction) {
if (direction === 'left') { if (direction === "left") {
$(this).carousel('next'); $(this).carousel("next");
} }
if (direction === 'right') { if (direction === "right") {
$(this).carousel('prev'); $(this).carousel("prev");
} }
}, },
allowPageScroll: 'vertical', allowPageScroll: "vertical",
}); });
$('#product-list-top-filters').offcanvas({ $("#product-list-top-filters").offcanvas({
duration: 100, duration: 100,
effect: 'slide-in-over', effect: "slide-in-over",
classes: { classes: {
element: 'absolute top-0 z-50', element: "absolute top-0 z-50",
}, },
}); });
$('#show-filters').on('click.offcanvas', () => { $("#show-filters").on("click.offcanvas", () => {
$('#overlay').show(); $("#overlay").show();
$('#product-list-top-filters').show(); $("#product-list-top-filters").show();
}); });
$('#hide-filters').on('click.offcanvas', () => { $("#hide-filters").on("click.offcanvas", () => {
$('#product-list-top-filters').hide(); $("#product-list-top-filters").hide();
$('#overlay').hide(); $("#overlay").hide();
}); });
$('#overlay').on('click', function() { $("#overlay").on("click", function () {
$('#product-list-top-filters').hide(); $("#product-list-top-filters").hide();
$('#overlay').hide(); $("#overlay").hide();
}); });
function ThAccordion() {} function ThAccordion() {}
@ -136,15 +135,15 @@ $(() => {
$.fn.thaccordion = function () { $.fn.thaccordion = function () {
const selectors = { const selectors = {
root: '.th-accordion', root: ".th-accordion",
item: '.th-accordion-item', item: ".th-accordion-item",
trigger: '.th-accordion-item-trigger', trigger: ".th-accordion-item-trigger",
svg: '.th-accordion-item-trigger-svg', svg: ".th-accordion-item-trigger-svg",
content: '.th-accordion-item-content', content: ".th-accordion-item-content",
}; };
let selection = null; let selection = null;
const items = this.find(selectors.item); const items = this.find(selectors.item);
const rotateClass = 'rotate-90 duration-500'; const rotateClass = "rotate-90 duration-500";
function collapseAll() { function collapseAll() {
items.each(function () { items.each(function () {
@ -154,7 +153,7 @@ $(() => {
} }
function close() { function close() {
$(selection).find(selectors.content).hide(500); $(selection).find(selectors.content).hide(500);
$(selection).find(selectors.svg).removeClass('rotate-90'); $(selection).find(selectors.svg).removeClass("rotate-90");
} }
function open() { function open() {
@ -164,7 +163,7 @@ $(() => {
} }
function isOpen(item) { function isOpen(item) {
return $(item).find(selectors.content).is(':visible'); return $(item).find(selectors.content).is(":visible");
} }
collapseAll(); collapseAll();
@ -173,7 +172,7 @@ $(() => {
const self = this; const self = this;
$(this) $(this)
.find(selectors.trigger) .find(selectors.trigger)
.on('click', () => { .on("click", () => {
if (selection === self) { if (selection === self) {
if (isOpen(selection)) { if (isOpen(selection)) {
close(); close();
@ -190,9 +189,9 @@ $(() => {
}); });
}; };
$('.th-accordion').thaccordion(); $(".th-accordion").thaccordion();
$('.tooltip').tooltipster({ $(".tooltip").tooltipster({
theme: 'tooltipster-shadow', theme: "tooltipster-shadow",
triggerOpen: { triggerOpen: {
click: true, click: true,
mouseenter: true, mouseenter: true,
@ -201,9 +200,12 @@ $(() => {
delayTouch: [0, 2000], delayTouch: [0, 2000],
}); });
$('.toggle-main-menu').on('click', () => { $(".toggle-main-menu").on("click", () => {
$('.mobile-main-menu').toggle(); $(".mobile-main-menu").toggle();
}); });
// Widget instructions overlay
$("#widget-instructions-overlay").on("click", () => {
$("#widget-instructions-overlay").hide();
});
}); });

9
assets/js/theme.js
View File

File diff suppressed because one or more lines are too long

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

@ -51,7 +51,6 @@
{/block} {/block}
</header> </header>
{block name='displayBeforeWrapper'} {block name='displayBeforeWrapper'}
{hook h='displayBeforeWrapper'} {hook h='displayBeforeWrapper'}
{/block} {/block}
@ -72,7 +71,8 @@
{if $page.page_name == 'index'} {if $page.page_name == 'index'}
<div class="relative flex items-center"> <div class="container">
<div style="height: 100vh;" class="relative flex items-center">
<a href="https://brooksbingham.com/3d-configurator?id_product=76"> <a href="https://brooksbingham.com/3d-configurator?id_product=76">
<img <img
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/brooks_bingham_site_banner_compressed.png" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/brooks_bingham_site_banner_compressed.png"
@ -83,7 +83,6 @@
<h3 class="lg:text-5xl md:text-3xl text-2xl lg:font-bold font-semibold">Black Friday Sale</h3> <h3 class="lg:text-5xl md:text-3xl text-2xl lg:font-bold font-semibold">Black Friday Sale</h3>
</div> </div>
</div> </div>
<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
Start Customization</h2> Start Customization</h2>
<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>
@ -144,12 +143,17 @@
</div> </div>
<div class="lg:mb-32 mb-20"> <div class="lg:mb-32 mb-20">
<h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1> <h1 class="text-2xl font-bold text-center">Design and Visualize what you need</h1>
<h3 class="text-lg font-semibold text-center mb-12">Choose what looks good on you</h3> <h3 class="text-lg font-semibold text-center mb-2">Choose what looks good on you</h3>
<a href="https://brooksbingham.com/module/thob/configurator?id_product=75"> <div class="relative w-full" style="height: calc(100vh - 80px);">
<video autoplay="autoplay" muted loop width="100%" height="auto"> <iframe class="w-full h-full" src="https://widget.thob.studio/project/dc0fadc7-9dc3-4299-b3f7-4c8b34aeead6"></iframe>
<source src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/brooksbingham_configurator_demo_video_compressed.mp4" /> <div id="widget-instructions-overlay" class="absolute top-0 w-full h-full bg-gray-500 bg-opacity-75 flex justify-center items-center cursor-pointer z-20">
</video> <div class="flex flex-col items-center text-white stroke-white gap-4 ">
</a> <h3 class="text-xl font-semibold">Click to unlock</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icons-tabler-outline icon-tabler-hand-move"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5" /><path d="M11 11.5v-2a1.5 1.5 0 0 1 3 0v2.5" /><path d="M14 10.5a1.5 1.5 0 0 1 3 0v1.5" /><path d="M17 11.5a1.5 1.5 0 0 1 3 0v4.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7l-.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" /><path d="M2.541 5.594a13.487 13.487 0 0 1 2.46 -1.427" /><path d="M14 3.458c1.32 .354 2.558 .902 3.685 1.612" /></svg>
<h3 class="text-xl font-semibold">3D Experience</h3>
</div>
</div>
</div>
</div> </div>
<div class="text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-1"> <div class="text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-1">
<div class="row-span-3 col-start-1 row-end-2 relative"> <div class="row-span-3 col-start-1 row-end-2 relative">