Filter order history in customer account / frontend

[Martin511]

Hello.

If a customer has placed more than 20 orders in the shop and is looking for a former order himself, it quickly becomes confusing.

I find it almost a basic requirement that customers can filter or search through their orders in an online shop - but I have learned that nothing is a matter of course at Pretashop.

Now I've been looking for a really long time, but I can't even find a paid module for this.
Can it really be that you have to have something like this programmed individually?

I am grateful for any tips. I am using Prestashop 1.7.7.

Regards
Martin

[ps8modules.com]

The explanation is simple.
Prestashop does not have an environment created for displaying tables in the same way as in Backoffice.
In Frontoffice, everything is displayed in HTML tables.
Each TPL template can have its own solution for filtering in an HTML table.
You can build your own search in the HTML table with very simple JavaScript, which is inserted into the TPL template.
Prestashop is an open source system.

Modify file:

./themes/classic/templates/customer/history.tpl

[Martin511]

Thank you for this hint.

Unfortunately my programming skills are bad, so I´m still looking for a module.

[ps8modules.com]

No module needed.
This is a simple adjustment.
Result:

 

and filtered:

[ps8modules.com]

6 minutes ago, Martin511 said:

Thank you for this hint.

Unfortunately my programming skills are bad, so I´m still looking for a module.

Module?
A module to rewrite the TPL of your layout template?
You won't find it.

[ps8modules.com]

Just such a short adjustment is enough:

[Martin511]

Ok, that looks good already. THANK YOU for this tip!
However, I also need a filter function for the ordered products and not only for order status or time.
So it will be a bit more complex...

Edited March 11, 2022 by Martin511 (see edit history)

[ps8modules.com]

If you want such modifications, the extension is the JOB section.
It is also good to create a picture of your idea of what you need.
Description of functionality is often not enough.

https://www.prestashop.com/forums/forum/235-job-offers/

[Martin511]

And again a very good tip from you.
Thank you for taking so much time and effort to help me!

[Martin511]

16 minutes ago, 4you.software said:

Just such a short adjustment is enough:

Is it rude to ask you for the adjustment code for the standard filters that I can paste in so I don't have to type it out by hand?

[ps8modules.com]

Prestashop forum is paranoid and blocks codes in tag CODE 😄

Unable to load source code:

Edited March 11, 2022 by 4you.software (see edit history)

[Martin511]

😂

What is that??

[ps8modules.com]

Just now, Martin511 said:

😂

What is that??

Prestashop forum is paranoid and blocks codes in tag CODE 😄

 

[ps8modules.com]

{literal}
  <script>
    function myCustomFilterFunction(e) {
      const input = document.getElementById(e);
      const inputStr = input.value.toUpperCase();
      document.querySelectorAll('#tableOrderHiostory tr:not(.filters)').forEach((tr) => {
        const anyMatch = [...tr.children].some(td => td.textContent.toUpperCase().includes(inputStr));
        if (anyMatch) tr.style.removeProperty('display');
        else tr.style.display = 'none';
      });
    }
  </script>
{/literal}

 

 <tr class="filters">
          <th><input id="order_reference" onkeyup="myCustomFilterFunction('order_reference')" type="text" style="width: 100%;" placeholder="{l s='Order reference' d='Shop.Theme.Checkout'}"></th>
          <th><input id="date" onkeyup="myCustomFilterFunction('date')" type="text" style="width: 100%;" placeholder="{l s='Date' d='Shop.Theme.Checkout'}"></th>
          <th><input id="total_price" onkeyup="myCustomFilterFunction('total_price')" type="text" style="width: 100%;" placeholder="{l s='Total price' d='Shop.Theme.Checkout'}"></th>
          <th><input id="payment" onkeyup="myCustomFilterFunction('payment')" type="text" style="width: 100%;" placeholder="{l s='Payment' d='Shop.Theme.Checkout'}"></th>
          <th><input id="status" onkeyup="myCustomFilterFunction('status')" type="text" style="width: 100%;" placeholder="{l s='Status' d='Shop.Theme.Checkout'}"></th>
          <th><input id="invoice" onkeyup="myCustomFilterFunction('invoice')" type="text" style="width: 100%;" placeholder="{l s='Invoice' d='Shop.Theme.Checkout'}"></th>
          <th></th>
        </tr>

 

[Martin511]

THANK YOU!!!!

🙏

[Martin511]

14 minutes ago, 4you.software said:

{literal}
  <script>
    function myCustomFilterFunction(e) {
      const input = document.getElementById(e);
      const inputStr = input.value.toUpperCase();
      document.querySelectorAll('#tableOrderHiostory tr:not(.filters)').forEach((tr) => {
        const anyMatch = [...tr.children].some(td => td.textContent.toUpperCase().includes(inputStr));
        if (anyMatch) tr.style.removeProperty('display');
        else tr.style.display = 'none';
      });
    }
  </script>
{/literal}

 

 <tr class="filters">
          <th><input id="order_reference" onkeyup="myCustomFilterFunction('order_reference')" type="text" style="width: 100%;" placeholder="{l s='Order reference' d='Shop.Theme.Checkout'}"></th>
          <th><input id="date" onkeyup="myCustomFilterFunction('date')" type="text" style="width: 100%;" placeholder="{l s='Date' d='Shop.Theme.Checkout'}"></th>
          <th><input id="total_price" onkeyup="myCustomFilterFunction('total_price')" type="text" style="width: 100%;" placeholder="{l s='Total price' d='Shop.Theme.Checkout'}"></th>
          <th><input id="payment" onkeyup="myCustomFilterFunction('payment')" type="text" style="width: 100%;" placeholder="{l s='Payment' d='Shop.Theme.Checkout'}"></th>
          <th><input id="status" onkeyup="myCustomFilterFunction('status')" type="text" style="width: 100%;" placeholder="{l s='Status' d='Shop.Theme.Checkout'}"></th>
          <th><input id="invoice" onkeyup="myCustomFilterFunction('invoice')" type="text" style="width: 100%;" placeholder="{l s='Invoice' d='Shop.Theme.Checkout'}"></th>
          <th></th>
        </tr>

 

Unfortunately it does not work in my shop...

The table fields appear but no filtering is possible.

[ps8modules.com]

Clear cache and recompile template.

Admin =>Advanced Parameters => Performance

[Martin511]

2 minutes ago, 4you.software said:

Clear cache and recompile template.

Admin =>Advanced Parameters => Performance

Yes, I did that already without success.

 

[ps8modules.com]

And how can I help if I don't see what and where you copied, if you really changed everything the way I wrote, etc.?
I don't see what you see !!!
Make a screen .....

[Martin511]

[ps8modules.com]

[ps8modules.com]

<table class="table table-striped table-bordered table-labeled hidden-sm-down" id="tableOrderHiostory">

are you missing id="tableOrderHiostory"

[Martin511]

7 minutes ago, 4you.software said:

<table class="table table-striped table-bordered table-labeled hidden-sm-down" id="tableOrderHiostory">

are you missing id="tableOrderHiostory"

That´s it!

Now it works!

Thank you!!!