Promokit Helpdesk Alysum

Hi, Thanks.

I'd like the filter button to take up the whole width and the filters to be hidden by default until the button is pressed (it's currently the other way round). And only on mobile. Like the attached photo.

No, that's not what I want to do. The desktop view is fine for me, and I don't want to change it. However, in mobile view, there's a button to show and hide the filters. By default, the filters are visible, but I want them to be hidden until the button is pressed. Like in my picture attached. Please check this page on a mobile device to see what I mean: https://www.mercury-parts-france.fr/37-huiles

Is it something you can do? If yes, what would it cost?

Hi, I’m following up to see if you have a solution for making the filters hidden by default in mobile view so that they only expand when the user clicks the "Filter" button.

Hi,

We don’t use AMP but rather Creative Elements’ responsive mode.

To better illustrate our issue, I recorded a video that you can view here : https://www.dropbox.com/scl/fi/mewc3gfkddbibiuzu4i5z/ibs_mobile_filter_issue.mov?rlkey=95stcdkibaoh6b728ubndeik0&dl=0

Regards.

No, I don't hide it.
Just check this page in mobile mode (make sure to refresh the page if you don’t see the button in the mobile browser emulator the first time): https://www.mercury-parts-france.fr/37-huiles

You need to refresh (F5) the page. See this new short video I just recorded : https://www.dropbox.com/scl/fi/ni8nq4i3ji40mts4148p6/ibs_mobile_filter_issue_2.mov?rlkey=kxylb06zub0pv29s9swsytzir&dl=0

(Note: on a smartphone, the button appears immediately without the need for refresh.)

Hello, just following up to see if you've made any progress or noticed anything new regarding the issue?

My support expires at the end of the month. Do you think you'll have a solution by then?

That doesn't solve the problem : it just adds the button in desktop mode.
The problem is that, in mobile mode, we have to press this button twice to make the filters list disappear.
In mobile mode, the filters list should be hidden by default and only appear if the button is clicked once (like in the image herewith).
This is what I explained in my video: https://www.dropbox.com/scl/fi/ni8nq4i3ji40mts4148p6/ibs_mobile_filter_issue_2.mov?rlkey=kxylb06zub0pv29s9swsytzir&dl=0

I'm trying to change the code in ps_facetedsearch.tpl to the one the console gives me when the filters are hidden so that it's the default display when the page is opened, but it doesn't work (see image herewith). Any idea why ?

ChatGPT helped me find the solution, and I'm sharing it with you here:

{if isset($listing.rendered_facets) && ($listing.rendered_facets != "")}
<div id="search_filters_wrapper">
  
  {if Context::getContext()->isMobile()}
    <!-- Affichage mobile : bouton + filtres repliables -->
    <button class="btn filter-btn collapsed" type="button" data-toggle="collapse" data-target="#search_filters" aria-expanded="false" aria-controls="search_filters">
      {l s='Products Filter' d='Shop.Theme.Actions'}
    </button>
    <div id="search_filters" class="collapse">
      {block name='product_list_active_filters'}
        {$listing.rendered_active_filters nofilter}
      {/block}
      {$listing.rendered_facets nofilter}
    </div>
  {else}
    <!-- Affichage desktop : filtres directement visibles -->
    <div id="search_filters">
      {block name='product_list_active_filters'}
        {$listing.rendered_active_filters nofilter}
      {/block}
      {$listing.rendered_facets nofilter}
    </div>
  {/if}
  
</div>
{/if}

Thank you for pointing me in the right direction.