diff --git a/_dev/custom.css b/_dev/custom.css new file mode 100644 index 0000000..48cfc9d --- /dev/null +++ b/_dev/custom.css @@ -0,0 +1 @@ +@import "./node_modules/jquery-offcanvas/dist/jquery-offcanvas.min.css" diff --git a/_dev/js/facets.js b/_dev/js/facets.js new file mode 100644 index 0000000..4913f92 --- /dev/null +++ b/_dev/js/facets.js @@ -0,0 +1 @@ +import $ from "jquery"; diff --git a/_dev/js/theme.js b/_dev/js/theme.js index 633249f..e64d3c8 100644 --- a/_dev/js/theme.js +++ b/_dev/js/theme.js @@ -23,28 +23,33 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) */ /* eslint-disable */ -import 'bootstrap-touchspin'; -import 'jquery-touchswipe'; -import './selectors'; +import "jquery-offcanvas/dist/jquery.offcanvas.min.css"; +import touchspin from "bootstrap-touchspin"; +import "jquery-touchswipe"; +import "./selectors"; -import './responsive'; -import './checkout'; -import './customer'; -import './listing'; -import './product'; -import './cart'; +import "./responsive"; +import "./checkout"; +import "./customer"; +import "./listing"; +import "./product"; +import "./cart"; +import "./facets"; -import prestashop from 'prestashop'; -import EventEmitter from 'events'; -import DropDown from './components/drop-down'; -import Form from './components/form'; -import usePasswordPolicy from './components/usePasswordPolicy'; -import ProductMinitature from './components/product-miniature'; -import ProductSelect from './components/product-select'; -import TopMenu from './components/top-menu'; +import prestashop from "prestashop"; +import EventEmitter from "events"; +import DropDown from "./components/drop-down"; +import Form from "./components/form"; +import usePasswordPolicy from "./components/usePasswordPolicy"; +import ProductMinitature from "./components/product-miniature"; +import ProductSelect from "./components/product-select"; +import TopMenu from "./components/top-menu"; -import './components/block-cart'; -import $ from 'jquery'; +import "./components/block-cart"; +import $ from "jquery"; +import jo from "jquery-offcanvas"; +jo(window, $); +touchspin(window, $); /* eslint-enable */ // "inherit" EventEmitter @@ -53,8 +58,8 @@ for (const i in EventEmitter.prototype) { prestashop[i] = EventEmitter.prototype[i]; } -$(document).ready(() => { - const dropDownEl = $('.js-dropdown'); +$(function () { + const dropDownEl = $(".js-dropdown"); const form = new Form(); const topMenuEl = $('.js-top-menu ul[data-depth="0"]'); const dropDown = new DropDown(dropDownEl); @@ -66,17 +71,81 @@ $(document).ready(() => { topMenu.init(); productMinitature.init(); productSelect.init(); - usePasswordPolicy('.field-password-policy'); + usePasswordPolicy(".field-password-policy"); $('.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", }); + + // $("#products_top_sidebar").offcanvas({ + // effect: "slide-in-over", + // overlay: true, + // classes: { + // element: "absolute top-0 z-50", + // }, + // }); + // + // $("#show_filters").on("click", function () { + // $("#products_top_sidebar").offcanvas("toggle"); + // }); + + function ThAccordion() {} + + $.extend(ThAccordion.prototype, { + init() {}, + }); + + $.fn["thaccordion"] = function () { + var selectors = { + root: ".th-accordion", + item: ".th-accordion-item", + trigger: ".th-accordion-item-trigger", + content: ".th-accordion-item-content", + }; + let selection = null; + let items = this.find(selectors.item); + + function collapseAll() { + items.each(function () { + $(this).find(selectors.content).hide(500); + }); + } + + function open() { + collapseAll(); + $(selection).find(selectors.content).show(500); + } + + function isOpen(item) { + return $(item).find(selectors.content).is(":visible"); + } + + collapseAll(); + + items.each(function () { + var self = this; + $(this) + .find(selectors.trigger) + .on("click", function () { + if (selection === self) { + selection = null; + } else { + selection = self; + if (!isOpen(selection)) { + open(); + } + } + }); + }); + }; + + $(".th-accordion").thaccordion(); }); diff --git a/_dev/package.json b/_dev/package.json index 75d4631..59efccd 100644 --- a/_dev/package.json +++ b/_dev/package.json @@ -11,14 +11,17 @@ "scripts": { "dev:tailwind": "tailwindcss -i ./elegance.css -o ../assets/css/theme.css --watch", "dev:livereload": "livereload \"../templates/, ../modules/, ../assets/\"", - "dev:js": "vite dev", + "dev:js": "vite build --watch", "dev": "yarn run dev:livereload & yarn run dev:tailwind & yarn run dev:js" }, "dependencies": { + "@tailwindcss/forms": "^0.5.6", "bootstrap-touchspin": "^4.7.3", "events": "^3.3.0", - "jquery": "^3.7.1", + "jquery": "3.5.1", + "jquery-offcanvas": "^3.4.7", "jquery-touchswipe": "^1.6.19", + "postcss-import": "^15.1.0", "sprintf-js": "^1.1.3", "velocity-animate": "^1.5.2" } diff --git a/_dev/postcss.config.js b/_dev/postcss.config.js new file mode 100644 index 0000000..8f7c3f5 --- /dev/null +++ b/_dev/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + "postcss-import": {}, + tailwindcss: {}, + }, +}; diff --git a/_dev/tailwind.config.js b/_dev/tailwind.config.js index c2ef0e9..455fa67 100644 --- a/_dev/tailwind.config.js +++ b/_dev/tailwind.config.js @@ -1,12 +1,11 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["../templates/**/*.tpl", "../modules/**/*.tpl"], - theme: { - fontFamily: { - sans: ["Cairo"], - serif: ["Cairo"] - } + content: ["../templates/**/*.tpl", "../modules/**/*.tpl"], + theme: { + fontFamily: { + sans: ["Cairo"], + serif: ["Cairo"], }, - plugins: [], -} - + }, + plugins: [require("@tailwindcss/forms")], +}; diff --git a/_dev/vite.config.js b/_dev/vite.config.js index 75ab635..a7ae609 100644 --- a/_dev/vite.config.js +++ b/_dev/vite.config.js @@ -1,26 +1,28 @@ -import { defineConfig } from 'vite' +import { defineConfig } from "vite"; export default defineConfig({ build: { + sourcemap: "inline", + minify: false, lib: { entry: "./js/theme.js", - name: 'theme', - formats: ['iife'], - fileName: function() { - return 'theme.js' - } + name: "theme", + formats: ["iife"], + fileName: function () { + return "theme.js"; + }, }, - outDir: '../assets/js/', + outDir: "../assets/js/", rollupOptions: { - external: ['$', 'jquery', 'prestashop'], + external: ["$", "jquery", "prestashop"], output: { globals: { - $: '$', - jquery: 'jQuery', - prestashop: 'prestashop' - } - } + $: "$", + jquery: "jQuery", + prestashop: "prestashop", + }, + }, }, - write: true + write: true, }, -}) +}); diff --git a/_dev/yarn.lock b/_dev/yarn.lock index dbdb93f..f461601 100644 --- a/_dev/yarn.lock +++ b/_dev/yarn.lock @@ -170,6 +170,13 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@tailwindcss/forms@^0.5.6": + version "0.5.6" + resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.6.tgz#29c6c2b032b363e0c5110efed1499867f6d7e868" + integrity sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA== + dependencies: + mini-svg-data-uri "^1.2.3" + any-promise@^1.0.0: version "1.3.0" resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f" @@ -418,15 +425,20 @@ jiti@^1.19.1: resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d" integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q== +jquery-offcanvas@^3.4.7: + version "3.4.7" + resolved "https://registry.yarnpkg.com/jquery-offcanvas/-/jquery-offcanvas-3.4.7.tgz#dde1f492f5904ff76bdd98ba42f1e514fa52ed70" + integrity sha512-5E3ITQNKgyzJfXqa80Nm9QBCVng4IpbrlGqAuCMSll7yPjoqJgTBl4akZE5rZXJrIpPrp1wPIjPF8tAyuhTD6g== + jquery-touchswipe@^1.6.19: version "1.6.19" resolved "https://registry.yarnpkg.com/jquery-touchswipe/-/jquery-touchswipe-1.6.19.tgz#dfd5ddaec0b78212dd500d29707129b9c7fd6cd4" integrity sha512-b0BGje9reNRU3u6ksAK9QqnX7yBRgLNe/wYG7DOfyDlhBlYjayIT8bSOHmcuvptIDW/ubM9CTW/mnZf9Rohuow== -jquery@^3.7.1: - version "3.7.1" - resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de" - integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg== +jquery@3.5.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5" + integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg== lilconfig@^2.0.5, lilconfig@^2.1.0: version "2.1.0" @@ -466,6 +478,11 @@ micromatch@^4.0.4, micromatch@^4.0.5: braces "^3.0.2" picomatch "^2.3.1" +mini-svg-data-uri@^1.2.3: + version "1.4.4" + resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939" + integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg== + minimatch@^3.0.4: version "3.1.2" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b" diff --git a/assets/css/theme.css b/assets/css/theme.css index d08887c..5c53134 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -584,6 +584,10 @@ video { visibility: collapse; } +.fixed { + position: fixed; +} + .absolute { position: absolute; } @@ -604,6 +608,10 @@ video { left: 0px; } +.left-\[-300px\] { + left: -300px; +} + .left-\[100\%\] { left: 100%; } @@ -632,10 +640,18 @@ video { top: 50%; } +.top-4 { + top: 1rem; +} + .top-full { top: 100%; } +.z-10 { + z-index: 10; +} + .z-30 { z-index: 30; } @@ -754,8 +770,8 @@ video { height: 6rem; } -.h-48 { - height: 12rem; +.h-5 { + height: 1.25rem; } .h-5 { @@ -778,8 +794,8 @@ video { height: 100%; } -.w-1\/3 { - width: 33.333333%; +.h-screen { + height: 100vh; } .w-1\/4 { @@ -798,6 +814,10 @@ video { width: 6rem; } +.w-40 { + width: 10rem; +} + .w-48 { width: 12rem; } @@ -925,6 +945,10 @@ video { gap: 2rem; } +.overflow-y-auto { + overflow-y: auto; +} + .truncate { overflow: hidden; text-overflow: ellipsis; @@ -979,6 +1003,10 @@ video { object-fit: cover; } +.p-2 { + padding: 0.5rem; +} + .p-3 { padding: 0.75rem; } @@ -1167,6 +1195,10 @@ video { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.duration-1000 { + transition-duration: 1000ms; +} + body { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1265,6 +1297,10 @@ a:hover .icon-tabler { width: 50%; } + .md\:w-1\/3 { + width: 33.333333%; + } + .md\:w-24 { width: 6rem; } @@ -1299,6 +1335,10 @@ a:hover .icon-tabler { position: static; } + .lg\:left-0 { + left: 0px; + } + .lg\:right-0 { right: 0px; } diff --git a/assets/js/style.css b/assets/js/style.css new file mode 100644 index 0000000..fbef532 --- /dev/null +++ b/assets/js/style.css @@ -0,0 +1,10 @@ +/** + * jQuery.offcanvas v3.4.7 - Easy to use jQuery offcanvas plugin. + * Copyright 2016 Lars Graubner - http://lgraubner.github.io/jquery-offcanvas/ + * License: MIT + */ +.offcanvas{position:relative} +.offcanvas-outer{left:0;overflow-x:hidden;position:absolute;top:0;width:100%} +.offcanvas-inner{position:relative} +.offcanvas-element{margin:0;overflow:hidden;position:absolute;top:0;z-index:2} +.offcanvas-overlay{display:none;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;z-index:1} \ No newline at end of file diff --git a/templates/_partials/footer.tpl b/templates/_partials/footer.tpl index f07111b..030b58c 100644 --- a/templates/_partials/footer.tpl +++ b/templates/_partials/footer.tpl @@ -71,7 +71,7 @@ {/block}
- + © 2023 Brooksbingham Clothing
diff --git a/templates/_partials/stylesheets.tpl b/templates/_partials/stylesheets.tpl index d8b838f..f3186e3 100644 --- a/templates/_partials/stylesheets.tpl +++ b/templates/_partials/stylesheets.tpl @@ -26,6 +26,7 @@ + {foreach $stylesheets.external as $stylesheet} {/foreach} diff --git a/templates/catalog/_partials/facets.tpl b/templates/catalog/_partials/facets.tpl index a3078ee..337d1a0 100644 --- a/templates/catalog/_partials/facets.tpl +++ b/templates/catalog/_partials/facets.tpl @@ -23,27 +23,107 @@ * International Registered Trademark & Property of PrestaShop SA *} {if $facets|count} -
- {block name='facets_clearall_button'} - {if $activeFilters|count} - - {else} -
- - - - +
+ +
+ {foreach from=$facets item="facet"} + {if !$facet.displayed} + {continue} + {/if} + {if $facet.widgetType === 'dropdown'} +
+

+ + +

+ +
{/if} - {/block} - -
+ {/foreach} +
+{/if} + + + {* +{if $facets|count} +
+
+
+ {block name='facets_clearall_button'} + {if $activeFilters|count} + + {else} + + {/if} + {/block} +
+ +
{foreach from=$facets item="facet"} {if !$facet.displayed} {continue} @@ -66,7 +146,7 @@ - {/if} - -{** - - {if !$facet.displayed} - {continue} - {/if} - -
-

{$facet.label}

- {assign var=_expand_id value=10|mt_rand:100000} - {assign var=_collapse value=true} - {foreach from=$facet.filters item="filter"} - {if $filter.active}{assign var=_collapse value=false}{/if} - {/foreach} - -
-

{$facet.label}

- - - - - - -
- - {if $facet.widgetType !== 'dropdown'} - {block name='facet_item_other'} - - {/block} - - {else} - - {block name='facet_item_dropdown'} - - {/block} - {/if} -
*} diff --git a/templates/catalog/_partials/products-top.tpl b/templates/catalog/_partials/products-top.tpl index eb74cfa..b55d513 100644 --- a/templates/catalog/_partials/products-top.tpl +++ b/templates/catalog/_partials/products-top.tpl @@ -22,7 +22,43 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * International Registered Trademark & Property of PrestaShop SA *} + +
+ +
+ + + +{*
+ {if !empty($listing.rendered_facets)} {include file='catalog/_partials/facets.tpl'} {else} @@ -32,3 +68,4 @@ {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders} {/block}
+*} diff --git a/templates/catalog/_partials/sort-orders.tpl b/templates/catalog/_partials/sort-orders.tpl index fb963c6..f300fe8 100644 --- a/templates/catalog/_partials/sort-orders.tpl +++ b/templates/catalog/_partials/sort-orders.tpl @@ -22,21 +22,58 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * International Registered Trademark & Property of PrestaShop SA *} -
-
+ +
+
+

+ + +

+ + +
+
+ + +{* +
+
- +*}