theme-elegance/templates/catalog/_partials/facets.tpl

173 lines
8.2 KiB
Smarty

{**
* 2007-2019 PrestaShop and Contributors
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License 3.0 (AFL-3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* https://opensource.org/licenses/AFL-3.0
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to https://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2019 PrestaShop SA and Contributors
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
* International Registered Trademark & Property of PrestaShop SA
*}
{if $facets|count}
<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}
{/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}
*}