Pagination for shop page and pages width


#48

monday is fine for the video. i am going to re-read your messages and see if i can more clearly understand : )


#49

Video done:

The last piece of code needed to get on the shop page and fix the product item < SHOP "back" button is simplified below (to allow making the print link):

<script name="endless scrolling" author="cregox.com">
  Y.use('node', function()
  {
    Y.on('domready', function()
    {
      Y.all('a[href$="/shop/"]').set('href', '/new-shop/');
    });
  });
</script>

Keep in mind the scripts have a few lines that rely on both /shop and /new-shop page names, or URL Slug as it's called under page settings. If you rename any of the two pages, please remember to rename it there in the code too. Fortunately that shouldn't happen that often!


#50

I noticed on my iphone and ipad that i can look at a product page then go back to where i was in the new-shop with the back button. It works perfectly as long as i don't hit the 'shop' link at the top of the text on the product page. when i try it on my laptop there seems to either be a loading delay or page does not finish loading. i also noticed sometimes when i hit the back button i land at the top of the shop page. is there a way to fix this? i do not want the product page to open in a separate tab. from your video is sounded like it would be very difficult or time intensive to fix. why is it working fine on my iphone and ipad, but not on my laptop? thanks


#51

Well, the < SHOP link at the top would have this exact same issue on the old shop. And most dynamic webpages are and always were like that. Stateless. Navigating back and forward will break each history page state, especially by using the browser history navigation.

That's why some browsers try to solve that issue.

iOS Safari's have an awesome persistent caching that the desktop or any Chrome doesn't. Some developers even think that's a problem, I consider it quite an awesome feature. Opera is another browser which used to have this feature and it was blazing fast but now it's the same. Firefox, for another instance, have it all different. It will cache the DOM, but not the images so it looks like it's reloading everything while it's just loading the images and the page rendering. Tor have the same feature as firefox but it loads so fast that it looks like iOS Safari.

Back to the < SHOP link issue, you may notice it's not the same function as pressing back on the browser. If you do press on the link, you'll see you can use the history back to go back to the product and then again to go back even further to the previous page, which coincidentally is the same link. Coincidentally.

In any case, we'll leave it not open in a separate tab (I also hate that in fact) and as I meant/told you before, when I get the time I'll continue improving the endless scrolling as my own investment. When I do, I update it for you.

And then even the shop link will work as a much better back button there! You see, if you open a new TAB and paste straight on an item address on the URL (such as this), you can't go back to the shop without that link. wink


#52

I appreciate your effort to create a work around. At this point I am ready to have our shop function differently that most shops out there. I am considering switching to a template that paginates, like Galapagos. Since I don't think the template allows me to choose how many products to show on each page...is that something you could fix without altering any other function/look of the template?

I really liked the idea of dynamic loading, but losing the history of the main shop page and/or opening a separate tab are not options I want. I really want the shop to function like it does currently.


#53

I actually just had an idea, but even this I initially thought would be simple, just was not.

You can see the idea implemented there right now. It's basically making a huge height so the browser can scroll down. The problem is the loading was already not working expecting for this, so it needed some tweaks to consider it. And when I've done then, I found some very weird bugs... Sometimes coding can become a real pain!

I've seen many endless scrolls implemented, but none as interesting as on google images, I just noticed (which hinted me the idea). Most of other infinite paging even on google can't go back as well. Ideally an endless scroll would be a mix of that with this of discourse here.

If you scroll down on google images, click an image and go back, it will just work. That's because it loads up the full page height before the images, just so the browser can do its magic. But if you scroll down, copy the link and paste it anywhere else, it won't work. Here in discourse it will. And so would in my next implementation...

I'm all forward for finding an easy solution or a simple fix that works for you here, but I don't think there is any. At this point, I'm willing to just give your money back if you're unable to wait more.


Quote for functionality in Squarespace Website
#54

Well, I got some time off today to focus on this and spent all morning trying to resolve this. In the end it didn't work out... Slowly I ended coming up with this idea, trying to use lazy loading instead of endless pagination. Two complete core rewrites. This last one (thanks to yet another web lib now being used) made code smaller and it's almost working perfectly now!

Please, do take a look: http://www.outstyled.com/new-shop/

As usual, I found a few bugs already (actually just on iPad safari and chrome), but please let me know if this is the right path, just to be sure before I try to fix those.


#55

I whole heartedly appreciate the work you have done and would not ask for my money back. Your solutions have been very creative. At this point I still think switching to Galapagos might be our best option. This option will only work if you can alter the default number of products per page...is that possible?

I am concerned about the amount of custom code and bug fixing that is necessary to fix up Supply. I am not sure what will happen when SS updates their platform/templates. I am more comfortable with a solution that is simpler. I am hopeful that switching to Galapagos will be a simpler fix. Let me know what you think.


#56

Well, I suppose you can wait then, right? Because I can't keep giving priority to this. My quote was completely off the mark and I'm not even working with that model anymore ( I've updated www.cregox.com/your-home ).

I don't know. Probably not. I'd have to dig deeper. If you want to switch templates, though, might worth it much more going with developer platform. It's way easier to customize things there.

I do give lifetime support for bug fixes and 2 years of updates (I should state that on the site), so those shouldn't worry you that much.

We came so close to a nice solution. You didn't say anything about this last one. I wouldn't like going back to a old style pagination, I've always found it quite dreadful...

I'd like to know what you think of how it is currently. At least on my desktop chrome it seems to be already working perfectly fine. The code is also cleaner, so fixing the bugs on mobile (and now I noticed, desktop safari as well) shouldn't take much longer.


#57

I looked at the latest new-shop on my desktop and did not love the initial loading sequence. It looked like every product page was stacked on top of each other, but when it was finally done it looked nice. It also gets blurry when I scroll down the page. The page history worked well when I used the back arrow.

Do you think we should continue with Supply and not switch to Galapagos? You are the expert.


#58

On a better thought, how about this: I'll just give up on making this a job (saying this because I'm not sure you've read my edit there). I could eventually take a project like this and turn it into my own featured open source project. From the past 6 months, I can't remember a single job that required to build something to fix a completely broken behaviour on squarespace.

I guess that's why I was already so dragged into this to begin with anyway! stuck_out_tongue_winking_eye

What matters most to you from my decision there is I'll try to focus more on it and probably end up much earlier than if I kept my previous mindset.

So...

I've fixed (actually hide) the loading sequence (which was one bug I had seen, just not on my chrome), and I can remove the "blurred" images (actually low resolution ones) if you insist. But keep in mind Google just release a new photos on Google I/O just yesterday and coincidentally that blurring is one nice feature it has!

You see, loading quality images take resources. Loading smaller ones takes much much less, makes things faster. Instead of the low-res img I could put nothing or leave the product price there, but neither will look as cool as this. At least technically speaking. I'm not so much expert in designing arts and layout, but I can understand why you might not like this. smile

Thanks to the lazy loading, I fairly easily implemented the paging number I've mentioned in the video and many times since the beginning. Then added that into the shop item page, so even the < BACK button will go back to the proper scrolled place (once we implement it there).

Right now, I'm only missing reloading and 1 bug I can see only on mobile, which keeps scrolling back to top. I'm also still not satisfied with loading speed on my android, which maybe improved by removing the small res images after all. Only reason I haven't tried it yet is, as so many things here, it's not that simple. stuck_out_tongue


#59

It sounds like you think we should continue fixing/debugging Supply. Not switch to Galapagos. Shall I get the Developer platform set up? If so, how do I do that?


#60

Fixing/debugging/improving. Mostly just been improving. I've mentioned the dev platform because you've mentioned switching. But I think right now switching templates would be unnecessary and have more overhead than benefits. And I can't seen to reproduce the bug anymore.

How do you like it now?


#61

The new-shop is looking better. Still a bit of blurring and stacking of images...but certainly improved : )

I noticed the other pages in the navigation are looking odd on my iphone, they are pushed to the left side. It looks better on my ipad, they are a little pushed to the left but not bad.

We are happy to stay with Supply and work thru the bugs. Would you mind making a another video with instructions once your work is complete? The one you made already is a bit confusing and I am not sure if anything has changed with your recent work.


#62

Check again, I've just changed the "blurred image" to no image loaded at first. I was hoping it would also make it load faster, but unfortunately I think it didn't.

Which other pages? Sorry I have no iPhone to try.

Nothing from the video will change, except it will be different code to apply. What you found confusing in specific? I actually thought it was too long, so maybe you want me to get into more details but less technical. Is that it?


#63

On my laptop, it still blurs and stacks when I go from a product page back to the new-shop with the browser back button. It's not working correctly on my iphone and ipad at the moment, the first image is clear and the rest are blurry. When I refresh the page it goes blank.

In terms of the video, I thought there were a couple of spots where you were showing how to do something and then after you did it you would change your mind and do it another way. It was a bit hard to follow.


#64

All of the pages except the shop are pushed to one side. Shall I email you a screen shot? It was not like this before, not sure what changed.


#65

A screenshot would be helpful, as I'm not sure what you mean.

In any case, I did see something that might be related and I've added this code on CSS to fix it:

@media screen and (max-width: 1024px) {
  body main#main {
    width: 100% !important;
  }
}

Was this it? If it was, this have been an issue for quite a while.

As for the new blur, I was testing with trying to speed things on mobile, but it ended up "blurring" all loaded images (not related to the previous blurring behaviour, which would then load a higher quality when on screen). Also already easily fixed.

And sure, I can record a new video when you think it's in a final satisfying result. I understand I was a bit confusing at some parts, I haven't even watched it again, I'll probably be able to see it when I do.

In any case, please see it again now! I just realized it actually is quite faster without loading the low quality images first.


#66

Everything is looking really good. The margin thing seems to be fixed. The only thing I noticed was on my iphone the first image was clear and the rest of them were blurry...but not as blurry as before. Once everything is fixed, how do we switch the new-shop to be the main shop?

I would also like to understand how to make the Steals page into a shop like the new-shop. Perhaps I can do it on my own with your new video : )

Will we have to do anything special with the Archives? The older seasons are set up as our regular Shop currently.


#67

Cool! Coincidentally I could access the site on a much bigger screen just now and realised what I should have known before, about that new "blurriness" issue there. Probably the big reason why the original squarespace shop crash on mobile is precisely that high quality image multiplied by 100. I'll fix that later on.

Will that be all?! smile

Switching is just a matter of renaming the pages. shop should become shop-print or anything else (can't delete it). If there's no link to it, only way to access would be direct link, which is fine. Whatever the new name is have to be also set on the script. And new-shop becomes shop. I can show that on the new video and then quickly revert back, but then it will become live for that little while if that's fine for you.

If steals are all items duplicated from shop, you could make it very much like the new-shop simply by using a summary filter such as category. You could also just make a new products page and make it separated.

If you want to apply it to archives, it will all be the same thing. Have a products page, make a regular page with a summary block and code injected to its advanced settings.