chore: updated the product list top bar

pagebuilder
Tejas Chari 2023-11-22 13:49:09 +05:30
parent e707255653
commit f07f5ad4e2
1 changed files with 21 additions and 15 deletions

View File

@ -24,8 +24,11 @@
*} *}
<div id="js-product-list-top" class="bg-white"> <div id="js-product-list-top" class="bg-white">
<!-- Top Bar With Filter Button and Sort By Selector -->
<div class="flex justify-between">
<!-- Show Filters Button --> <!-- Show Filters Button -->
<div class="flex flex-row-reverse"> <div>
<button id="show-filters" type="button" class="flex space-x-2 items-center"> <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"> <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 stroke="none" d="M0 0h24v24H0z" fill="none"/>
@ -35,11 +38,14 @@
</button> </button>
</div> </div>
<!-- Sort By Dropdown --> <!-- Sort By Dropdown -->
<div class="flex flex-row-reverse gap-2"> <div>
{block name='sort_by'} {block name='sort_by'}
{include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders} {include file='catalog/_partials/sort-orders.tpl' sort_orders=$listing.sort_orders}
{/block} {/block}
</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">