forked from brooksbingham/theme-elegance
chore: add banner and interactive widget on home page
This commit is contained in:
parent
3633ec28ac
commit
1047ccc249
@ -66,7 +66,7 @@ for (const i in EventEmitter.prototype) {
|
||||
}
|
||||
|
||||
$(() => {
|
||||
const dropDownEl = $('.js-dropdown');
|
||||
const dropDownEl = $(".js-dropdown");
|
||||
const form = new Form();
|
||||
const topMenuEl = $('.js-top-menu ul[data-depth="0"]');
|
||||
const dropDown = new DropDown(dropDownEl);
|
||||
@ -78,54 +78,53 @@ $(() => {
|
||||
topMenu.init();
|
||||
productMinitature.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'
|
||||
$(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({});
|
||||
|
||||
$('.carousel[data-touch="true"]').swipe({
|
||||
swipe(event, direction) {
|
||||
if (direction === 'left') {
|
||||
$(this).carousel('next');
|
||||
if (direction === "left") {
|
||||
$(this).carousel("next");
|
||||
}
|
||||
if (direction === 'right') {
|
||||
$(this).carousel('prev');
|
||||
if (direction === "right") {
|
||||
$(this).carousel("prev");
|
||||
}
|
||||
},
|
||||
allowPageScroll: 'vertical',
|
||||
allowPageScroll: "vertical",
|
||||
});
|
||||
|
||||
$('#product-list-top-filters').offcanvas({
|
||||
$("#product-list-top-filters").offcanvas({
|
||||
duration: 100,
|
||||
effect: 'slide-in-over',
|
||||
effect: "slide-in-over",
|
||||
classes: {
|
||||
element: 'absolute top-0 z-50',
|
||||
element: "absolute top-0 z-50",
|
||||
},
|
||||
});
|
||||
|
||||
$('#show-filters').on('click.offcanvas', () => {
|
||||
$('#overlay').show();
|
||||
$('#product-list-top-filters').show();
|
||||
$("#show-filters").on("click.offcanvas", () => {
|
||||
$("#overlay").show();
|
||||
$("#product-list-top-filters").show();
|
||||
});
|
||||
|
||||
$('#hide-filters').on('click.offcanvas', () => {
|
||||
$('#product-list-top-filters').hide();
|
||||
$('#overlay').hide();
|
||||
$("#hide-filters").on("click.offcanvas", () => {
|
||||
$("#product-list-top-filters").hide();
|
||||
$("#overlay").hide();
|
||||
});
|
||||
|
||||
$('#overlay').on('click', function() {
|
||||
$('#product-list-top-filters').hide();
|
||||
$('#overlay').hide();
|
||||
$("#overlay").on("click", function () {
|
||||
$("#product-list-top-filters").hide();
|
||||
$("#overlay").hide();
|
||||
});
|
||||
|
||||
function ThAccordion() {}
|
||||
@ -136,15 +135,15 @@ $(() => {
|
||||
|
||||
$.fn.thaccordion = function () {
|
||||
const selectors = {
|
||||
root: '.th-accordion',
|
||||
item: '.th-accordion-item',
|
||||
trigger: '.th-accordion-item-trigger',
|
||||
svg: '.th-accordion-item-trigger-svg',
|
||||
content: '.th-accordion-item-content',
|
||||
root: ".th-accordion",
|
||||
item: ".th-accordion-item",
|
||||
trigger: ".th-accordion-item-trigger",
|
||||
svg: ".th-accordion-item-trigger-svg",
|
||||
content: ".th-accordion-item-content",
|
||||
};
|
||||
let selection = null;
|
||||
const items = this.find(selectors.item);
|
||||
const rotateClass = 'rotate-90 duration-500';
|
||||
const rotateClass = "rotate-90 duration-500";
|
||||
|
||||
function collapseAll() {
|
||||
items.each(function () {
|
||||
@ -154,7 +153,7 @@ $(() => {
|
||||
}
|
||||
function close() {
|
||||
$(selection).find(selectors.content).hide(500);
|
||||
$(selection).find(selectors.svg).removeClass('rotate-90');
|
||||
$(selection).find(selectors.svg).removeClass("rotate-90");
|
||||
}
|
||||
|
||||
function open() {
|
||||
@ -164,7 +163,7 @@ $(() => {
|
||||
}
|
||||
|
||||
function isOpen(item) {
|
||||
return $(item).find(selectors.content).is(':visible');
|
||||
return $(item).find(selectors.content).is(":visible");
|
||||
}
|
||||
|
||||
collapseAll();
|
||||
@ -173,7 +172,7 @@ $(() => {
|
||||
const self = this;
|
||||
$(this)
|
||||
.find(selectors.trigger)
|
||||
.on('click', () => {
|
||||
.on("click", () => {
|
||||
if (selection === self) {
|
||||
if (isOpen(selection)) {
|
||||
close();
|
||||
@ -190,9 +189,9 @@ $(() => {
|
||||
});
|
||||
};
|
||||
|
||||
$('.th-accordion').thaccordion();
|
||||
$('.tooltip').tooltipster({
|
||||
theme: 'tooltipster-shadow',
|
||||
$(".th-accordion").thaccordion();
|
||||
$(".tooltip").tooltipster({
|
||||
theme: "tooltipster-shadow",
|
||||
triggerOpen: {
|
||||
click: true,
|
||||
mouseenter: true,
|
||||
@ -201,9 +200,12 @@ $(() => {
|
||||
delayTouch: [0, 2000],
|
||||
});
|
||||
|
||||
$('.toggle-main-menu').on('click', () => {
|
||||
$('.mobile-main-menu').toggle();
|
||||
$(".toggle-main-menu").on("click", () => {
|
||||
$(".mobile-main-menu").toggle();
|
||||
});
|
||||
|
||||
// Widget instructions overlay
|
||||
$("#widget-instructions-overlay").on("click", () => {
|
||||
$("#widget-instructions-overlay").hide();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -51,7 +51,6 @@
|
||||
{/block}
|
||||
</header>
|
||||
|
||||
|
||||
{block name='displayBeforeWrapper'}
|
||||
{hook h='displayBeforeWrapper'}
|
||||
{/block}
|
||||
@ -72,18 +71,18 @@
|
||||
|
||||
{if $page.page_name == 'index'}
|
||||
|
||||
<div class="relative flex items-center">
|
||||
<a href="https://brooksbingham.com/3d-configurator?id_product=76">
|
||||
<img
|
||||
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/brooks_bingham_site_banner_compressed.png"
|
||||
alt="banner.png" />
|
||||
</a>
|
||||
<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 class="container">
|
||||
<div style="height: 100vh;" class="relative flex items-center">
|
||||
<a href="https://brooksbingham.com/3d-configurator?id_product=76">
|
||||
<img
|
||||
src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/brooks_bingham_site_banner_compressed.png"
|
||||
alt="banner.png" />
|
||||
</a>
|
||||
<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>
|
||||
<h2 class="products-section-title text-2xl font-bold mt-20 text-center">Design in 3D - Choose a product to
|
||||
Start Customization</h2>
|
||||
<h3 class="text-lg font-semibold text-center mb-12">Tailored to you, at no extra cost.</h3>
|
||||
@ -144,12 +143,17 @@
|
||||
</div>
|
||||
<div class="lg:mb-32 mb-20">
|
||||
<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>
|
||||
<a href="https://brooksbingham.com/module/thob/configurator?id_product=75">
|
||||
<video autoplay="autoplay" muted loop width="100%" height="auto">
|
||||
<source src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/brooksbingham_configurator_demo_video_compressed.mp4" />
|
||||
</video>
|
||||
</a>
|
||||
<h3 class="text-lg font-semibold text-center mb-2">Choose what looks good on you</h3>
|
||||
<div class="relative w-full" style="height: calc(100vh - 80px);">
|
||||
<iframe class="w-full h-full" src="https://widget.thob.studio/project/dc0fadc7-9dc3-4299-b3f7-4c8b34aeead6"></iframe>
|
||||
<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">
|
||||
<div class="flex flex-col items-center text-white stroke-white gap-4 ">
|
||||
<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 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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user