Problem with product page on the Brooklyn theme

Shopify Partner
3 0 3

Hi,

I've just started using the Brooklyn theme on a new shop I'm setting up for a client. Whilst styling the theme I noticed a problem on the product page and thought it was a something I had added that was causing the problem. However I can now see the problem occurs on the demo theme too!

So on the product page when you scroll down the page the product description stays fixed as you scroll down. However if all of the product images haven't loaded into the website before the sticky description code initialises it doesn't stay sticky all the way down the page. If you refresh the page - now that all the images have been cached. It will work as normal. We have relatively fast internet that loads in the images fairly quickly so I imagine it will affect a lot of customers to the website.

Here is an example page on the demo theme: https://brooklyn-theme.myshopify.com/collections/womens/products/whitney-pullover

I've not tested this on every browser but can confirm that the problem occurs on

Chrome - Windows/MacOS
Firefox - Windows

I attempted to try and fix the issue myself, but was struggling to understand theme.js.liquid. Essentially I think the code needs to be initiated on window.load() instead of dom ready? But I obviously can't say for sure.

Appreciate any help.

Thanks,
Adam

1 Like
Shopify Partner
3 0 3

Bump

1 Like
Shopify Partner
3 0 3

Bump

1 Like
Tourist
9 0 3

BUMP

1 Like
Highlighted
Tourist
29 0 3

BUMP

0 Likes
New Member
1 0 0

Hello,

I had the exact crazy problem as yours and I am happy to tell you that after hours of deep internet search, I figured it, the solution is really easy.

Your comments helps a lot beacuase as you said the issue comes from the loading process so if not all the images are completly loaded then the script will not execute correctly.

So you need to change the function that check the loading process from "ready" to "fully loaded"

1- Go to your theme code (the three dots near customize theme in theme section)

2- Scroll down and click on "Assets"

3- Click on theme.js.liquid copy all the content and past it somewhere as a backup

4- Go all down of that page and at the line 2598 when you can read : 

$(document).ready(function() {

5- Replace it with:

window.onload = function () {

6- Remove the last parenthese so we can get something like this };

7- Click on save at the top right

8- Breath, take a good glass of coke... the world is yours again ;)

Best Greetings

Adam​​​​​

 

 

0 Likes
Tourist
3 0 1

this did not fix the problem.  Some of my pages work, and have the description scroll down with the pictures, but many of them , don't scroll and its just a long list of pictures on the left  side with the description not scrolling down with them... This needs a fix... otherwise this theme is useless and extremely difficult to navigate.

0 Likes
Shopify Partner
2522 25 549

Well, the code is dependant on the images height. If images not loaded, the code has no idea when to make the product data sticky.  Recalculation happens on load and on window resize:

    $window
      .on('load' + this.settings.namespace, theme.initStickyProductMeta)
      .on('resize' + this.settings.namespace, theme.debounce(this.initStickyProductMeta, 150).bind(this));

I would consider the following to make the theme more robust:

1. Use progressive jpegs. Not sure if it will help, but maybe the browser will know image dimensions sooner. Go to product.liquid  and replace all img_url: 'grande' with img_url: 'grande', format:'pjpg'

2. If all product images have the same aspect ratio, say square, we can use the padding-botom trick to reserve the space for the image. This can be done by adding this to the bottom of the theme.scss.liquid

@media screen and (min-width:595px) {
    .product-single__photo-wrapper {
        padding-bottom: 100%;
        position: relative;
    }
    img.product-single__photo {
        position: absolute;
    }
}

If image photos are not square,  the padding-bottom: 100%; line should be changed to reflect the aspect ratio. For the 4:3 picture, it should be 75%, etc...

This reliably solves the problem without any script modifications.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Shopify Partner
1 0 0

This might help...

In the theme.js.liquid file, find where this block of code is:

    $window
      .on('load' + this.settings.namespace, theme.initStickyProductMeta)
      .on('resize' + this.settings.namespace, theme.debounce(this.initStickyProductMeta, 150).bind(this));
  }

Then edit it like this:

    $window
      .on('load' + this.settings.namespace, this.initStickyProductMeta.bind(this))
      .on('resize' + this.settings.namespace, theme.debounce(this.initStickyProductMeta, 150).bind(this));
  }

theme.initStickyProductMeta wasn't quite doing its job, so I changed it to this.initStickyProductMeta.bind(this) and it is now sticking on more occassions than not...

0 Likes
Tourist
4 0 1

I have the same problem.

I've tried Mr Adam solution.

It works, but after that hero image on title page disappears.

Solution from Justine doesn't work in my case.

Maybe someone founds some other solution?

0 Likes