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

Merge pull request 'feat: offcanvas menu for product filters' (#2) from tejasc/theme-elegance:main into main 

Reviewed-on: brooksbingham/theme-elegance#2
pagebuilder
dineshsalunke 2023-11-21 10:55:02 +00:00
parent 2d2ea8f10a 61979e0b82
commit 3398569665
15 changed files with 393 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_dev/custom.css Normal file
View File

@ -0,0 +1 @@
@import "./node_modules/jquery-offcanvas/dist/jquery-offcanvas.min.css"

1
_dev/js/facets.js Normal file
View File

@ -0,0 +1 @@
import $ from "jquery";

123
_dev/js/theme.js
View File

@ -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();
});

7
_dev/package.json
View File

@ -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"
}

6
_dev/postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
"postcss-import": {},
tailwindcss: {},
},
};

17
_dev/tailwind.config.js
View File

@ -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")],
};

32
_dev/vite.config.js
View File

@ -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,
},
})
});

25
_dev/yarn.lock
View File

@ -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"

48
assets/css/theme.css
View File

@ -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;
}

10
assets/js/style.css Normal file
View File

@ -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}

2
templates/_partials/footer.tpl
View File

@ -71,7 +71,7 @@
{/block}
</div>
<div class="flex py-8">
<a href="{$shop.url}">
<a href="{$urls.base_url}">
<span class="text-sm">© 2023 Brooksbingham Clothing</span>
</a>
</div>

1
templates/_partials/stylesheets.tpl
View File

@ -26,6 +26,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.36.0/tabler-icons.min.css">
<link rel="stylesheet" href="/themes/elegance/assets/js/style.css">
{foreach $stylesheets.external as $stylesheet}
<link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="{$stylesheet.media}">
{/foreach}

246
templates/catalog/_partials/facets.tpl
View File

@ -23,27 +23,107 @@
* International Registered Trademark & Property of PrestaShop SA
*}
{if $facets|count}
<div id="search_filters" class="flex gap-4 flex-1 flex-col lg:flex-row lg:items-center">
{block name='facets_clearall_button'}
{if $activeFilters|count}
<button id="_desktop_search_filters_clear_all" data-search-url="{$clear_all_link}" class="flex w-6 h-6 flex items-center justify-center select-none js-search-filters-clear-all">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter-off hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M8 4h12v2.172a2 2 0 0 1 -.586 1.414l-3.914 3.914m-.5 3.5v4l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227"></path>
<path d="M3 3l18 18"></path>
</svg>
</button>
{else}
<div class="flex w-6 h-6 items-center justify-center select-none">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z"></path>
</svg>
<div id="search_filters">
<div id="search_filter_buttons" class="flex hidden">
{block name='facets_clearall_button'}
{if $activeFilters|count}
<button id="_desktop_search_filters_clear_all" data-search-url="{$clear_all_link}" class="flex w-6 h-6 flex items-center justify-center select-none js-search-filters-clear-all">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter-off hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M8 4h12v2.172a2 2 0 0 1 -.586 1.414l-3.914 3.914m-.5 3.5v4l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227"></path>
<path d="M3 3l18 18"></path>
</svg>
</button>
{else}
<button id="_desktop_search_filters" class="flex w-6 h-6 items-center justify-center select-none">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z"></path>
</svg>
</button>
{/if}
{/block}
</div>
<div class="th-accordion">
{foreach from=$facets item="facet"}
{if !$facet.displayed}
{continue}
{/if}
{if $facet.widgetType === 'dropdown'}
<div class="th-accordion-item border-t border-gray-200 px-4 py-4">
<h3 class="-mx-2 -my-3 flow-root">
<!-- Expand/collapse section button -->
<button id="show-filters-{$facet.label}" data-filter-name="{$facet.label}" type="button" class="th-accordion-item-trigger flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false">
<span class="font-medium text-gray-900">
{$active_found = false}
{foreach from=$facet.filters item="filter"}
{if $filter.active}
{$filter.label}
{$active_found = true}
{/if}
{/foreach}
{if !$active_found}
{$facet.label}
{/if}
</span>
<span class="ml-6 flex items-center">
<!-- Expand icon, show/hide based on section open state. -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 9l6 6l6 -6"></path>
</svg>
</span>
</button>
</h3>
<!-- Filter section, show/hide based on section state. -->
<div class="th-accordion-item-content pt-6 px-4 hidden" id="filter-section-{$facet.label}" data-filter-name="{$facet.label}">
<div class="flex flex-wrap w-full">
{foreach from=$facet.filters item="filter"}
{if !$filter.active}
<a
rel="nofollow"
href="{$filter.nextEncodedFacetsURL}"
class="select-list text-sm w-1/4 mb-4"
>
{$filter.label}
</a>
{/if}
{/foreach}
</div>
</div>
</div>
{/if}
{/block}
{/foreach}
</div>
{/if}
<div class="flex gap-4 flex-1 flex-col lg:flex-row">
{*
{if $facets|count}
<div id="products_top_sidebar" class="sidebar lg:left-0 p-2 overflow-y-auto text-center bg-white h-screen w-56">
<div id="search_filters">
<div id="search_filter_buttons" class="flex">
{block name='facets_clearall_button'}
{if $activeFilters|count}
<button id="_desktop_search_filters_clear_all" data-search-url="{$clear_all_link}" class="flex w-6 h-6 flex items-center justify-center select-none js-search-filters-clear-all">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter-off hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M8 4h12v2.172a2 2 0 0 1 -.586 1.414l-3.914 3.914m-.5 3.5v4l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227"></path>
<path d="M3 3l18 18"></path>
</svg>
</button>
{else}
<button id="_desktop_search_filters" class="flex w-6 h-6 items-center justify-center select-none">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter hover:stroke-2 cursor-pointer" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z"></path>
</svg>
</button>
{/if}
{/block}
</div>
<div class="flex gap-4 flex-1 flex-col">
{foreach from=$facets item="facet"}
{if !$facet.displayed}
{continue}
@ -66,7 +146,7 @@
<path d="M6 9l6 6l6 -6"></path>
</svg>
</button>
<div class="dropdown-menu hidden group-hover:flex flex-col position absolute left-0 top-full w-full bg-white">
<div class="dropdown-menu hidden group-hover:flex flex-col position absolute left-0 top-full w-full bg-white z-10">
{foreach from=$facet.filters item="filter"}
{if !$filter.active}
<a
@ -83,132 +163,8 @@
{/if}
{/foreach}
</div>
</div>
</div>
{/if}
{**
{if !$facet.displayed}
{continue}
{/if}
<section class="facet clearfix">
<p class="h6 facet-title hidden-sm-down">{$facet.label}</p>
{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}
<div class="title hidden-md-up" data-target="#facet_{$_expand_id}" data-toggle="collapse"{if !$_collapse} aria-expanded="true"{/if}>
<p class="h6 facet-title">{$facet.label}</p>
<span class="float-xs-right">
<span class="navbar-toggler collapse-icons">
<i class="material-icons add">&#xE313;</i>
<i class="material-icons remove">&#xE316;</i>
</span>
</span>
</div>
{if $facet.widgetType !== 'dropdown'}
{block name='facet_item_other'}
<ul id="facet_{$_expand_id}" class="collapse{if !$_collapse} in{/if}">
{foreach from=$facet.filters key=filter_key item="filter"}
{if !$filter.displayed}
{continue}
{/if}
<li>
<label class="facet-label{if $filter.active} active {/if}" for="facet_input_{$_expand_id}_{$filter_key}">
{if $facet.multipleSelectionAllowed}
<span class="custom-checkbox">
<input
id="facet_input_{$_expand_id}_{$filter_key}"
data-search-url="{$filter.nextEncodedFacetsURL}"
type="checkbox"
{if $filter.active }checked{/if}
>
{if isset($filter.properties.color)}
<span class="color" style="background-color:{$filter.properties.color}"></span>
{elseif isset($filter.properties.texture)}
<span class="color texture" style="background-image:url({$filter.properties.texture})"></span>
{else}
<span {if !$js_enabled} class="ps-shown-by-js" {/if}><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
{/if}
</span>
{else}
<span class="custom-radio">
<input
id="facet_input_{$_expand_id}_{$filter_key}"
data-search-url="{$filter.nextEncodedFacetsURL}"
type="radio"
name="filter {$facet.label}"
{if $filter.active }checked{/if}
>
<span {if !$js_enabled} class="ps-shown-by-js" {/if}></span>
</span>
{/if}
<a
href="{$filter.nextEncodedFacetsURL}"
class="_gray-darker search-link js-search-link"
rel="nofollow"
>
{$filter.label}
{if $filter.magnitude}
<span class="magnitude">({$filter.magnitude})</span>
{/if}
</a>
</label>
</li>
{/foreach}
</ul>
{/block}
{else}
{block name='facet_item_dropdown'}
<ul id="facet_{$_expand_id}" class="collapse{if !$_collapse} in{/if}">
<li>
<div class="col-sm-12 col-xs-12 col-md-12 facet-dropdown dropdown">
<a class="select-title" rel="nofollow" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{$active_found = false}
<span>
{foreach from=$facet.filters item="filter"}
{if $filter.active}
{$filter.label}
{if $filter.magnitude}
({$filter.magnitude})
{/if}
{$active_found = true}
{/if}
{/foreach}
{if !$active_found}
{l s='(no filter)' d='Shop.Theme.Global'}
{/if}
</span>
<i class="material-icons float-xs-right">&#xE5C5;</i>
</a>
<div class="dropdown-menu">
{foreach from=$facet.filters item="filter"}
{if !$filter.active}
<a
rel="nofollow"
href="{$filter.nextEncodedFacetsURL}"
class="select-list"
>
{$filter.label}
{if $filter.magnitude}
({$filter.magnitude})
{/if}
</a>
{/if}
{/foreach}
</div>
</div>
</li>
</ul>
{/block}
{/if}
</section>
*}

37
templates/catalog/_partials/products-top.tpl
View File

@ -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
*}
<div id="js-product-list-top" class="bg-white">
<div class="relative z-40" role="dialog" aria-modal="true">
<div class="fixed inset-0 z-50 flex">
<div id="product-list-top-filters" class="relative mr-auto flex h-full w-screen md:w-64 flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl">
<div class="flex items-center justify-between px-4">
<h2 class="text-lg font-medium text-gray-900">Filters</h2>
<button id="hide_filters" type="button" class="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400">
<span class="sr-only">Close menu</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
<form class="mt-4 border-t border-gray-200">
{block name='sort_by'}
{include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
{/block}
{if !empty($listing.rendered_facets)}
{include file='catalog/_partials/facets.tpl'}
{else}
<div></div>
{/if}
</form>
</div>
</div>
</div>
</div>
{*
<div id="js-product-list-top" class="flex w-full flex-col lg:flex-row lg:justify-between">
<button id="show_filters" class=""> Filter </button>
{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}
</div>
*}

48
templates/catalog/_partials/sort-orders.tpl
View File

@ -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
*}
<div class="relative flex gap-2 lg:items-center">
<div class="relative w-48 dropdown group">
<div class="th-accordion">
<div class="th-accordion-item border-t border-gray-200 px-4 py-4">
<h3 class="-mx-2 -my-3 flow-root">
<!-- Expand/collapse section button -->
<button id="show-sort-by" type="button" class="th-accordion-item-trigger flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500" aria-controls="filter-section-mobile-0" aria-expanded="false">
<span class="font-medium text-gray-900">
Sort By
</span>
<span class="ml-6 flex items-center">
<!-- Expand icon, show/hide based on section open state. -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 9l6 6l6 -6"></path>
</svg>
</span>
</button>
</h3>
<!-- Filter section, show/hide based on section state. -->
<div class="pt-6 hidden th-accordion-item-content" id="filter-section-sort-by">
<div class="flex flex-col w-full gap-4">
{foreach from=$listing.sort_orders item=sort_order}
<a
rel="nofollow"
href="{$sort_order.url}"
class="select-list text-sm shrink-0 {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
>
{$sort_order.label}
</a>
{/foreach}
</div>
</div>
</div>
</div>
{*
<div class="relative flex gap-2 lg:items-center top-4 lg:top-0">
<div class="relative flex-1 max-w-[140px] group">
<button
class="w-full px-4 pr-8 py-1 gap-4 relative text-left h-8 hover:text-yellow-700 dropdown-toggle"
class="dropdown-toggle relative px-4 pr-6 leading-1 w-full text-left"
type="button"
rel="nofollow"
aria-haspopup="true"
aria-expanded="false">
{if isset($listing.sort_selected)}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if}
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 9l6 6l6 -6"></path>
</svg>
</button>
<div class="dropdown-menu hidden group-hover:flex absolute top-full left-0 w-full flex-col bg-white">
<div class="dropdown-menu hidden group-hover:flex absolute top-full left-0 w-full flex-col bg-white z-10">
{foreach from=$listing.sort_orders item=sort_order}
<a
rel="nofollow"
@ -49,3 +86,4 @@
</div>
</div>
</div>
*}