Pagination

[14Steve14]

This may or may not be a problem with this current version as I think it may have been happening before on 1.0.8.20. Hopefully someone can confirm and that this is posted in the correct place, if not please move it.

On my current test site I am having problems with the pagination links on a page that contains lots of new products on a mobile device. There are more than 5 pages worth of new products. I have attached a screenshot to show what I mean. Its difficult to test on the demo store as there are not enough products to show all the number links. (if that makes sense)

On a large device, computer or laptop it shows correctly. This only looks wrong on a mobile device when looking in portrait. When you turn the device into landscape view it looks fine. Whilst I appreciate that you can use the right arrow to move across from the off screen page one to page two, it may cause some people confusion.

If I go into includes/system/versioned/1.0.8.4/split_page_results.php and change line 85 from

Code: Select all

$display_links_string .= '<ul class="pagination pagination-lg justify-content-end">';

to

Code: Select all

$display_links_string .= '<ul class="pagination justify-content-end">';

Taking out the pagination-lg it obviously shows fine on the mobile page but it is a bit small on a larger computer screen.

Is there another alternative to showing the large sizes pagination on the page without reducing any padding or margins or making the text smaller.

Screenshot_20240409_164737_Chrome.jpg

[14Steve14]

I have also tried reducing the number of pages to view in admin configuration settings and with the number set to three the full thing never shows. You also never get to see the Displaying 1 of what ever page text either unless theat does not show on a small mobile device.

[burt]

Steve, this is something that has come up for attention in the 1.0.9.x series, so it's a long standing issue from early Phoenix. Here's the original Q;

Pagination items go off screen on small viewport

Follow up;

Solved with addition of flex-wrap to the ul class https://github.com/CE-PhoenixCart/Phoen ... ts.php#L85
Although the display is not elegant.

My reply;

You could also try removing pagination-lg (or changing to pagination-sm) in the same file...
That may help. https://getbootstrap.com/docs/4.6/compo ... on/#sizing

Which is basiclly what you've done and is (at this moment) the only thing I can suggest.

[heatherbell]

I have also tried reducing the number of pages to view in admin configuration settings and with the number set to three the full thing never shows. You also never get to see the Displaying 1 of what ever page text either unless theat does not show on a small mobile device.

Our solution, as quoted in previous post, is to add flex-wrap to the ul class https://github.com/CE-PhoenixCart/Phoen ... ts.php#L85
This maintains the recommended button size for clicking on small devices.
Also, Number of Products is d-none by default. Think it should always be shown to customers on all devices, so remove d-none from:
https://github.com/CE-PhoenixCart/Phoen ... ng.php#L27
https://github.com/CE-PhoenixCart/Phoen ... ng.php#L98

[14Steve14]

Thanks for all the info.

I have tried using media queries in the css to swap from pagination-lg to pagination-sm but was unsuccessful in getting that to work although google does think that it should be possible. I couldn't get it to work no matter what I tried, but like most of my coding it was mainly guesswork so may have been something I was doing.

I have now kept it at pagination-lg but in admin - configuration- maximum values- page links changed the setting to 3 which seems to be a compromise but does show better on small devices. I will check to see if that setting also affects anything else.

[heatherbell]

I have tried

So have you tried our solution?

[14Steve14]

I have tried

So have you tried our solution?

Yes we did. We didn't think it looked that nice on a small display hence the reduction of the pages shown. That way it all fitted onto one line and looked better even when the boxes with three dots were in front and behind the page numbers.

We have also reduced the size of the text that displays the 'Displaying blah' so it fits on one line which looks better.

A bit of a compromise which will do for now.