forked from brooksbingham/theme-elegance
Merge remote-tracking branch 'upstream/main'
commit
1d6f7e98f3
|
|
@ -85,17 +85,30 @@ $(function () {
|
|||
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");
|
||||
// });
|
||||
$("#product-list-top-filters").offcanvas({
|
||||
duration: 100,
|
||||
effect: "slide-in-over",
|
||||
overlay: true,
|
||||
classes: {
|
||||
element: "absolute top-0 z-50",
|
||||
},
|
||||
});
|
||||
|
||||
$("#show-filters").on("click.offcanvas", function () {
|
||||
$("#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").show();
|
||||
});
|
||||
|
||||
$("#product-list-top-filters").on("hide.offcanvas", function () {
|
||||
$("#product-list-top-filters").hide();
|
||||
});
|
||||
|
||||
function ThAccordion() {}
|
||||
|
||||
|
|
|
|||
5724
assets/js/theme.js
5724
assets/js/theme.js
File diff suppressed because one or more lines are too long
|
|
@ -24,6 +24,7 @@
|
|||
*}
|
||||
{if $facets|count}
|
||||
<div id="search_filters">
|
||||
{*
|
||||
<div id="search_filter_buttons" class="flex hidden">
|
||||
{block name='facets_clearall_button'}
|
||||
{if $activeFilters|count}
|
||||
|
|
@ -44,6 +45,7 @@
|
|||
{/if}
|
||||
{/block}
|
||||
</div>
|
||||
*}
|
||||
<div class="th-accordion">
|
||||
{foreach from=$facets item="facet"}
|
||||
{if !$facet.displayed}
|
||||
|
|
@ -76,14 +78,14 @@
|
|||
</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="th-accordion-item-content pt-6 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"
|
||||
class="select-list text-sm w-1/2 p-2 text-center"
|
||||
>
|
||||
{$filter.label}
|
||||
</a>
|
||||
|
|
@ -96,75 +98,3 @@
|
|||
{/foreach}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
{*
|
||||
{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}
|
||||
{/if}
|
||||
{if $facet.widgetType === 'dropdown'}
|
||||
<div class="dropdown relative flex-1 max-w-[140px] group">
|
||||
<button class="dropdown-toggle relative px-4 pr-6 leading-1 w-full text-left">
|
||||
{$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}
|
||||
<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 flex-col position absolute left-0 top-full w-full bg-white z-10">
|
||||
{foreach from=$facet.filters item="filter"}
|
||||
{if !$filter.active}
|
||||
<a
|
||||
rel="nofollow"
|
||||
href="{$filter.nextEncodedFacetsURL}"
|
||||
class="select-list px-4 py-1"
|
||||
>
|
||||
{$filter.label}
|
||||
</a>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
*}
|
||||
|
|
|
|||
|
|
@ -24,48 +24,46 @@
|
|||
*}
|
||||
|
||||
<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">
|
||||
|
||||
<!-- Top Bar With Filter Button and Sort By Selector -->
|
||||
<div class="flex justify-between">
|
||||
<!-- Show Filters Button -->
|
||||
<div class="flex">
|
||||
<button id="show-filters" type="button" class="flex space-x-2 items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-filter" 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="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" />
|
||||
</svg>
|
||||
<span> Filter </span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Sort By Dropdown -->
|
||||
<div class="flex">
|
||||
{block name='sort_by'}
|
||||
{include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
|
||||
{/block}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Off Screen Canvas Menu For Filters -->
|
||||
<div id="product-list-top-filters" class="offcanvas fixed inset-0 flex w-64 hidden" role="dialog" aria-modal="true">
|
||||
<div class="relative mr-auto flex h-full 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>
|
||||
<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>
|
||||
<path d="M18 6l-12 12"></path>
|
||||
<path d="M6 6l12 12"></path>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M18 6l-12 12" /><path d="M6 6l12 12" />
|
||||
</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}
|
||||
<div></div>
|
||||
{/if}
|
||||
{block name='sort_by'}
|
||||
{include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
|
||||
{/block}
|
||||
</div>
|
||||
*}
|
||||
|
|
|
|||
|
|
@ -23,43 +23,7 @@
|
|||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
|
||||
<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">
|
||||
<div class="relative flex-1 max-w-[140px] group">
|
||||
<button
|
||||
class="dropdown-toggle relative px-4 pr-6 leading-1 w-full text-left"
|
||||
|
|
@ -73,7 +37,7 @@
|
|||
<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 z-10">
|
||||
<div class="dropdown-menu hidden group-hover:flex absolute top-full left-0 w-full flex-col bg-white z-10 shadow-lg">
|
||||
{foreach from=$listing.sort_orders item=sort_order}
|
||||
<a
|
||||
rel="nofollow"
|
||||
|
|
@ -86,4 +50,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
{include file='catalog/_partials/product-activation.tpl'}
|
||||
{/block}
|
||||
|
||||
<header class="relative z-30 flex items-center w-full">
|
||||
<header class="relative flex items-center w-full">
|
||||
{block name='header'}
|
||||
{include file='_partials/header.tpl'}
|
||||
{/block}
|
||||
|
|
|
|||
Loading…
Reference in New Issue