Pagination for shop page and pages width


Re: [cregox talk] [support/inbox] Pagination for shop page and pages width

Hey Cass, @Kate forwarded me this. Please, do read

One way to make the other pages fill in the width would be getting a Custom CSS like this:

body main#main {
  width: 80%;

As for the shopping being too big, I agree, it is too big! I think the blog is also too big, but well. I believe you're using a developer template, aren't you? If so, answers have some way to fix it. If not, I'd have to take a closer look.

I think regular pagination is a solution, but I'd like more to do something with json, ajax and another kind of dynamic pagination. The same kind you could find in discourse, the endine that powers this forum. Like on this howtogeek gigantic post. Much more friendly. smile

I could build it for U$321.



Yeah, I can work on adding pagination for you. And, if you let me to choose how it should work, it would be like the already exemplified. Here's a screenshot on two aspects you should focus from my previous example:

See how it says 756 on the side? And how big the scroll bar button is? And how fast that page loads? There's a great dynamic pagination happening there. If you scroll down or up, it will automatically load the other posts, be it on desktop or mobile. Very responsive.

Old pagination method would split that into 75 pages with 10 items each, or something on these lines and page loading time would be worse because then you have to load a full page for each page instead of just the contents, like it's done with this dynamic approach.

Now, this does come with 1 disadvantage... It makes harder to print. An easy solution for that is offering a "print" button.

And I was suggesting you could add yourself the code to make "the margins on all pages to be the same width". That's simple enough. Here's how you could do it:

And you could have found that link by googling for "squarespace custom css", like I did. wink


I like your idea for faster loading, can the design and placement of the 'box' with numbers be different? Or can you simplify the loading without making the box visible? I have also considered switching to Galapagos since it's the only template that does paginate. The default number of products per page in Galapagos is 50, do you still think I would have a loading problem with 50 per page? Or would it be any easier to implement your dynamic loading solution in Galapagos? Thanks!


The solution would work on any template, because it relies on the JSON data, which is equal to all. Keep in mind this minimum cost is just to achieve a minimum working pagination. I'm not sure which one would be easier to build because I'd have to spend time trying to do it first and then I could tell later. So, customizing the design might cost more. And not making the box would sure make it much simpler (and a much worse UX as well).

The way I work is with payment upfront. Once I get paid, usually I'll deliver it within 1 week and I'll then analyze how much I can deliver within what's paid or you can pay more to get more done.

I was not aware of a template that have pagination, I say go for it! 50 might still be a problem, but are you sure it can't go lower than that? I'd sure hope it can.


What do you mean by (and a much worse UX as well)? What is UX?


It's user experience. Without a simple way to control the "page" it makes very hard to navigate to a point you want and you know it exists before hand, for one. Ideally that navigation box would be always visible somewhere. And it would probably be the most difficult thing to build in this solution.

So, to get something done, I can sure appreciate less work needed in not doing it, but it will not be a good UX at very least for some expected usage cases.

Also, the browser scrollbar won't be able to do this job, unfortunately. Because the full page won't be loaded at first, or sometimes at all.


I am not worried about users being able to find older products in the shop. We plan to archive our shop seasonally/annually. There is also a search box is someone wants to find an older item. Could you implement the dynamic loading without the navigation box? What would the cost be for this? Thanks!


Yeah, sure.

It will still be at least U$321 because either way it's something new I'll have to create. If, by any chance, I understand I won't be able to do it for this price, and you're not willing to pay more, I'll give you a full refund.

Unless we can find something ready out of the box, in which case it would be just a matter of implementing what's ready (like one of my scripts here). Then it could go as low as U$123.


Did you change anything on our site?


Our site looks a bit different and I am wondering if you tried to change anything? The margin looks less wide and the product images are now almost running into the text on the product pages.


Nope. I don't have any access to your site. wink

And, unfortunately, there's little we can do to see what or why anything have changed. But if there's only you who have access to your site, you should fire up a support ticket as things changing without you knowing like that are really rare.

There's also always the possibility that our mind is playing a trick on us! I know mine loves doing it. man


I figured out what happened : )
Can you also fix the margin when you work on the dynamic loading? The shop page looks fine, but the other pages have a huge blank portion on the right side. The template is designed to have a thumbnail over there, but we don't like it.

One more question before we proceed with dynamic loading. We have been going around and around about whether or not we should switch to Galapagos(since it paginates), but I fear we will have the same loading problem(since the default is 50 products per page). Does it matter to you if the dynamic loading is implemented in Supply or Galapagos? Would one of those be easier than the other? Fixing the margin is also a critical part of continuing to use Supply, so we would not want to have you do the dynamic loading without being able to fix the margin. Does all of this make sense? Let me know what you think. Thanks again!


I think you may be overthinking too many things. And what did happen?

Yeah, I can. It's probably something as simple as adding this Custom CSS:

main#main {
    width: calc(100% - 240px);

It doesn't matter, and one might be easier than the other but probably in a negligible amount. I wouldn't know before trying both. smile


I have been emailing other developers about the same issues, I gave one of them an admin invitation to look around. I did not know that he would start changing things, I thought he was going to look and them give me a quote. He was trying to change the margin and the site stopped being responsive. In addition, on the Shop page the images started running into the text. I asked him to remove the code and he did.


can we get started with the margin? i need to be sure that will work before spending more on the dynamic loading. did you get my last message? thanks!


I already gave you the code, it probably will work if you apply it on Custom CSS. It should do something, I just can't be sure it's exactly what you had in mind.

As soon as you pay, I can compromise on delivery. Until then, I can only give hints and info. Eventually, if the business keep going well, I shall even make a school and teach how to do it for free... That should be fun! stuck_out_tongue

If that wasn't your last message, I didn't.


I will try adding the code myself, but I am also happy to pay you to do it. I would never expect you to work for free. I just want to make sure the margin is fixed before proceeding with the dynamic loading. I will add the code and let you know how it works. Thanks!


The margin looks good so far, how do I go about paying you for the loading CSS?