Pagination for shop page and pages width


#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.


#68

So, I've reached my limit here. At least for now.

I won't be able to develop this any further and I really hope it's satisfactory the way it is now.

The image blurring is basically fixed by using a bigger default size. Before it was 300px, now it is 750px. Squarespace shop dynamically sets it, and it can go up to 1500px, but even for big screens nowadays 750 is enough. Also, I'm using srcset which will allow for the browser to properly choose a size. This works fine with chrome already, but not many others.

I'm not sure when and if I'll be able to go back into building more on this. There are still somethings that could be improved.

So please, just answer me the last question about the video and what else you may be missing and I'll do my best to wrap this up.

I'm very proud of the results here so far and the way it is today. Really hope you've enjoyed it. wink

The new code also have reduced significantly:

<script src="https://cdn.rawgit.com/cregox/endless-scrolling/1.0/endless-scrolling.min.js"></script>

<style name="endless scrolling" author="cregox.com">
  .summary-item-list {
    display: none;
  }
</style>
<script name="endless scrolling" author="cregox.com">
  Y.use('node', function()
  {
    Y.on('domready', function()
    {
      // enable Custom CSS to work on editor
      Y.one('main#main').addClass('endless-scrolling');

      // prevent script from running in squarespace editor
      if (window.top.document !== window.document)
      {
        // with style, prevented summary to appear
        Y.one('main#main .summary-item-list').setStyle('display', 'block');
        return;
      }
    
      Y.one('footer#footer').hide().setStyles({
        'position': 'absolute',
        'bottom': 0,
        'left': '50px',
        'right': '50px'
      });

      // settings
      endlessScrolling({
        'ajaxString': '/shop?format=json',
        'loadingMargin': 500,
        'container': 'main#main .wrapper',
        'list': '.summary-item-list',
        'item': '.summary-item',
        'onComplete': setMouseHover,
        'jsonAjax': jsonAjax
      });

      function jsonAjax (ajaxString, callback)
      {
        var json;
        Y.io(ajaxString, {
          on: {
            success: function (x, o) {
              try {
                json = Y.JSON.parse(o.responseText);
              } catch (e) {
                console.log("JSON Parse failed!");
                return;
              }

              // when done loading json
              callback(json);
            }
          }
        });
      } // function cacheAjaxRequest

      // make it look like the original shop
      function setMouseHover ()
      {
        var Ynode = Y.all('main#main .wrapper div .summary-item a img');
        Ynode.on('mouseenter', function(e)
        {
          e.currentTarget.transition(
            {
              duration:0.5,
              opacity:0.5
            });
        });
        Ynode.on('mouseleave', function(e)
        {
          e.currentTarget.transition(
            {
              duration:0.5,
              opacity:1
            });
        });
      } // function setMouseHover
    })
  });
</script>

#69

I think we are all set except for the new video. It's fine if you make the new-shop live while you make the video. Just so I understand, our new-shop is a summary of the old shop...is that correct? You mentioned that we can't delete it and I'm not sure I understand why.


#70

Yes, I am happy with your work. I hope I can confidently duplicate it, I may have some questions once I try to do it myself. Thank you for taking the time to answer them all : )


#71

I noticed today that not all of the products are showing up in the new-shop, any idea why this is happening?


#72

Yeah, the new shop is using a summary block of the current one, reason why we can't delete it on the config. But it sure can be removed from sight.

Which products aren't showing up? I couldn't reproduce. From what I could see they both have exactly same number of items (153 right now).

I'll record the video while making it live this week. Then I'll wait for your questions.


#73

I checked the new-shop today and everything is there...fixed : )


#74

I noticed the same problem mentioned before, not all the products are showing up in the new-shop when the page is originally loaded. Once the page is refreshed the missing product is there. Have any idea why this might be happening?


#75

I really can't see the problem here. From your description, I suppose it's a browser cache related issue. Whenever you want to see how customers will see your site, use a completely cleaned browser or something like Chrome's Incognito mode or Safari's Private Window. Maybe that's it.


#76

Okay, I will check that out. Thanks


#77

Just a note: I couldn't make the video yet. frowning
Hopefully next week will be smoother.
At least looks like you're testing the new-shop to be stable, right? blush


#78

Yes, it still looks good.


#79

Continuing from the last video, I'll basically just copy the steps needed here, with mostly updated code and a few other updates, for better visualization.

First some technical self reference: I took this as a personal project to evolve my business there, as I said before. So most of the code is now on its own CDN ( by using rawgit as exposed in the first line ) and on a new repository. Just compiling this post alone, despite being mostly copied from previous ones, took me about 1 hour. Then little less than 1 extra hour to tweak scripts a bit more, polish it, and finally another one for the video production! open_mouth

Instead of renaming the old shop, I've left it with the same name and created a new page called shop-list (instead of using the new-shop, which I left there).

Keep in mind

The scripts have a few lines that rely on both /shop and /shop-list page names, the 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!

There are a few things needed to recreate it from scratch, in case you do need to do it:

Steps

1) A page with a grid summary block inside and displaying thumbnail and price only (haven't even tested with other options). Column width here won't matter and there is no more paging abstraction, so number of items also won't matter (better just leave it at 1).

2) That page need to have an animated GIF with the loading image animation, and a clickthrough URL link set to javascript:endlessScrollingLoading();

3) Still on the same page, copy and paste the file endless-scrolling.html to that page's advanced settings, under page header code injection

4) Apply endless-scrolling-print.html on the shop page to fix the product item < SHOP "back" button. I've uncommented the line from before so there will be no "print" function this time. Also replaced new-shop by shop-list as advised under "keep in mind" up there:

<!--meta http-equiv="refresh" content="0; url=/shop-list"-->
<script name="endless scrolling" author="cregox.com">
  // main settings 
  // change this to the correspondent URL Slug
  var shopList = '/shop-list';
  
  //////////////////
  
  var thisPage = Static.SQUARESPACE_CONTEXT.collection.fullUrl;
  if (location.pathname === thisPage)
  {
    location.replace(shopList);
  }
  Y.use('node', function()
  {
    Y.on('domready', function()
    {
      var pageId = window.location.href.split('/').pop();
      Y.all('a[href$="'+ thisPage +'"]').set('href', shopList + '/#p@' + pageId);
    });
  });
</script>

5) Copy and paste the endless-scrolling.less file into Custom CSS, tweak it at your will, and have fun! yum


Here's the video of me applying those steps:


Lazy loading for squarespace grid gallery
#80

Thank you for the new video, we may have some questions once we try to recreate what you did ourselves.