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

feat: hide filters button on the offcanvas menu

staging
Tejas Chari 2023-11-22 15:24:12 +05:30
parent 1d40c4f141
commit d23729846a
3 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_dev/js/theme.js
View File

@ -94,7 +94,11 @@ $(function () {
}); });
$("#show-filters").on("click.offcanvas", function () { $("#show-filters").on("click.offcanvas", function () {
$("#product-list-top-filters").offcanvas("toggle"); $("#product-list-top-filters").offcanvas("show");
});
$("#hide-filters").on("click.offcanvas", function () {
$("#product-list-top-filters").offcanvas("hide");
}); });
$("#product-list-top-filters").on("shown.offcanvas", function () { $("#product-list-top-filters").on("shown.offcanvas", function () {

7
assets/js/theme.js
View File

File diff suppressed because one or more lines are too long

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

@ -45,12 +45,17 @@
</div> </div>
</div> </div>
<!-- Off Screen Canvas Menu For Filters --> <!-- Off Screen Canvas Menu For Filters -->
<div id="product-list-top-filters" class="offcanvas fixed inset-0 flex w-96 hidden" role="dialog" aria-modal="true"> <div id="product-list-top-filters" class="offcanvas fixed inset-0 flex w-96 hidden" role="dialog" aria-modal="true">
<div class="relative mr-auto flex h-full md:w-64 flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl"> <div class="relative mr-auto flex h-full 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"> <div class="flex items-center justify-between px-4">
<h2 class="text-lg font-medium text-gray-900">Filters</h2> <h2 class="text-lg font-medium text-gray-900">Filters</h2>
<button id="hide-filters" type="button">
<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 d="M18 6l-12 12" /><path d="M6 6l12 12" />
</svg>
</button>
</div> </div>
<form class="mt-4 border-t border-gray-200"> <form class="mt-4 border-t border-gray-200">
{if !empty($listing.rendered_facets)} {if !empty($listing.rendered_facets)}