Display bug when adding too many product swatches on a mobile device

oggede commented 6 years ago

Hi. This is my first post here but I've been following the cornerstone project for a number of months.

I think I've found a bug when a product has too many swatches and/or if the size of the swatches are too big.

Expected behavior

https://i.imgur.com/ggXrfBt.jpg

Actual behavior

https://i.imgur.com/HZeiRig.jpg

Steps to reproduce behavior

Change the default swatch size from the current 22px wide by 22px high, to a larger size of 50px by 50px. Then add 16 or more swatches to a product. Then view that product on a mobile device. The result is the page format/layout will display incorrectly by adding extra white space to the right hand side. For a working example see this link: https://www.nameitlabels.com/stick-on-name-labels/

junedkazi commented 6 years ago

@oggede can you reproduce it on the latest version of cornerstone ? I am trying to reproduce it on http://cornerstone-light-demo.mybigcommerce.com/ which is our cornerstone demo store but I am not able to reproduce it.

oggede commented 6 years ago

Hi @junedkazi

Yes, I can reproduce it on the new version. I have setup a test account to show the issue. All I did was create a product and add 16 pattern swatches to it. The bug is still there. See details below.

http://demo-test10.mybigcommerce.com/test/

Login and password for the test store is:

https://store-mf76za459i.mybigcommerce.com Login: bc@mt2015.com Password: qwerty22 preview code: edijlizhlz

Also, on doing this test I found out that all you have to do is create a 16 pattern swatches. You don't have to change the size or do anything else.

So to recap, just create a product and add 16 "pattern swatches" (under product options; the one where you upload an image from your computer) and then view the product in the mobile template.

Cheers

On Sat, 30 Jun 2018 at 11:17, Juned Kazi notifications@github.com wrote:

@oggede https://github.com/oggede can you reproduce it on the latest version of cornerstone ? I am trying to reproduce it on http://cornerstone-light-demo.mybigcommerce.com/ which is our cornerstone demo store but I am not able to reproduce it.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bigcommerce/cornerstone/issues/1127#issuecomment-401496550, or mute the thread https://github.com/notifications/unsubscribe-auth/AfdqNwY6nzx4PogpKEq8a7WaTGighxClks5uBrWggaJpZM4QxRme .

oggede commented 6 years ago

Hi @junedkazi

After doing some more testing I have found the cause of the problem. I can confirm that this is a bug.

When you create "pattern" swatches in Bigcommerce it shows a preview when the user clicks on it. When you have 3 or more swatches it runs off the page when the preview is enabled. As seen here:

off-page

Steps to recreate this issue.

1) Create a product with 4 or more "pattern" swatches. 2) View that product on a mobile device. 3) Select the far right swatch. 4) Notice that it runs off the page and causes an error.

Steps to solve this problem:

I would recommend that the swatch preview shows underneath the product options rather than to the bottom right of the selected swatch.

oggede commented 6 years ago

@junedkazi

Did you get a chance to look at this? The demo shop account is expiring soon. Cheers.

oggede commented 6 years ago

As nobody here was contributing I decided to fix this issue myself.

This issue is caused by this:

.form-option-expanded

Located in this file:

cornerstone/assets/scss/layouts/products/_productSwatch.scss

As you can see from this screenshot below. When you have more than 3 image options, the preview runs off the product option area. This is OK in a desktop environment but in mobile (smaller width screens) it causes the page width to widen as explained above in previous posts.

mlv82j8

https://i.imgur.com/mLV82J8.jpg

The solution is to display the preview options in the center, rather than at the bottom right. Adding the code below in the script manager, changes this behavior and fixes the issue:

.form-option-expanded { left:none !important; top:none !important; right: calc(100% - 135px)!important; bottom: calc(100% - 75px) !important; }

However, this is not a complete solution as it's more of a temporary fix. A better solution would be enable some kind of @media code to adapt the change between desktop and mobile screens.

Anyway, I hope the above narrows down this issue in more detail and perhaps someone could come up with a better solution.

@junedkazi

bigcommerce / cornerstone