refactor: dropdown for the sort order working

pagebuilder
Dinesh Salunke 2023-11-03 16:28:34 +05:30
parent c3bae354aa
commit 4106adbd65
1 changed files with 26 additions and 21 deletions

View File

@ -22,26 +22,31 @@
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
<span class="col-sm-3 col-md-3 hidden-sm-down sort-by">{l s='Sort by:' d='Shop.Theme.Global'}</span> <div class="relative flex gap-2 items-center">
<div class="{if !empty($listing.rendered_facets)}col-sm-9 col-xs-8{else}col-sm-12 col-xs-12{/if} col-md-9 products-sort-order dropdown"> <span class="text-base">{l s='Sort by:' d='Shop.Theme.Global'}</span>
<div class="relative w-48 dropdown group">
<button <button
class="btn-unstyle select-title" class="w-full px-4 pr-8 py-1 gap-4 relative text-left h-8 hover:text-yellow-700 dropdown-toggle"
type="button"
rel="nofollow" rel="nofollow"
data-toggle="dropdown"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false"> aria-expanded="false">
{if isset($listing.sort_selected)}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if} {if isset($listing.sort_selected)}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if}
<i class="material-icons float-xs-right">&#xE5C5;</i> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" 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="M6 9l6 6l6 -6"></path>
</svg>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu hidden group-hover:flex absolute top-full left-0 w-full flex-col bg-white">
{foreach from=$listing.sort_orders item=sort_order} {foreach from=$listing.sort_orders item=sort_order}
<a <a
rel="nofollow" rel="nofollow"
href="{$sort_order.url}" href="{$sort_order.url}"
class="select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}" class="px-4 py-1 hover:text-yellow-700 select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
> >
{$sort_order.label} {$sort_order.label}
</a> </a>
{/foreach} {/foreach}
</div> </div>
</div> </div>
</div>