From 3d1ef1b400ca2a73dcd9202854756ea9afe5ae9b Mon Sep 17 00:00:00 2001 From: Tejas Chari <tejasc@consultbop.com> Date: Tue, 7 Nov 2023 20:28:13 +0530 Subject: [PATCH] refactor: added a off menu canvas for mobiule screens for product filters --- templates/catalog/_partials/facets.tpl | 77 ++++++++++++++++++++ templates/catalog/_partials/products-top.tpl | 35 +++++++++ templates/catalog/_partials/sort-orders.tpl | 36 +++++++++ 3 files changed, 148 insertions(+) diff --git a/templates/catalog/_partials/facets.tpl b/templates/catalog/_partials/facets.tpl index 32f4f1f..c414b71 100644 --- a/templates/catalog/_partials/facets.tpl +++ b/templates/catalog/_partials/facets.tpl @@ -22,6 +22,82 @@ * @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"> + {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> + {foreach from=$facets item="facet"} + {if !$facet.displayed} + {continue} + {/if} + {if $facet.widgetType === 'dropdown'} + <div class="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="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="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"> @@ -90,3 +166,4 @@ </div> </div> {/if} +*} diff --git a/templates/catalog/_partials/products-top.tpl b/templates/catalog/_partials/products-top.tpl index 459b49b..e301e5b 100644 --- a/templates/catalog/_partials/products-top.tpl +++ b/templates/catalog/_partials/products-top.tpl @@ -22,6 +22,40 @@ * @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 lg:hidden" 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"> + {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} + </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)} @@ -33,3 +67,4 @@ {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders} {/block} </div> +*} diff --git a/templates/catalog/_partials/sort-orders.tpl b/templates/catalog/_partials/sort-orders.tpl index 4b71b8b..f8b44f8 100644 --- a/templates/catalog/_partials/sort-orders.tpl +++ b/templates/catalog/_partials/sort-orders.tpl @@ -22,6 +22,41 @@ * @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="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="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" id="filter-section-sort-by"> + <div class="flex flex-wrap w-full"> + {foreach from=$listing.sort_orders item=sort_order} + <a + rel="nofollow" + href="{$sort_order.url}" + class="select-list text-sm w-1/4 mb-4 {['current' => $sort_order.current, 'js-search-link' => true]|classnames}" + > + {$sort_order.label} + </a> + {/foreach} + </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 @@ -49,3 +84,4 @@ </div> </div> </div> +*}