Kryptronic Software Support Forum

sdn · 08-23-2019 06:38:44

If there are 2 or 3 related products on a product page they are displayed stacked one on top of the other in the mobile view rather than having the slider. If there are four or more related products the slider appears so you can scroll through them. I assume there is some code error but where to look for it?

We have discovered that the pages Google is highlighting as not mobile friendly have 4 or more related products (so the slider is active). It would appear that the slider is causing the "Clickable elements too close together" and/or "Content wider than screen" errors.

At https://search.google.com/test/mobile-friendly?, I repeatedly tested one of our product pages with 4 related products. 9 out of 10 tests came back "unfriendly". I then reduced the number of related products on the same page to 3 (so no slider in mobile view) and got 10 "friendly" results back in a row. For my final test, I added back the 4th related product to the page and it came back "unfriendly".

The test results list "page loading issues". This was reported on both unfriendly and friendly results. I gave up trying to see a pattern in the data although on the final test it did report that "/media/jquery-plugins/fancybox/jquery.fancybox.min.css" was not loaded.

Last edited by sdn (08-23-2019 08:02:32)

webmaster · 08-23-2019 08:20:39

Sounds like the slider controls are too close together and when the slider is active the site gets dinged with that item. I assume you have product listings displayed typically at 3-wide in desktop mode. That would activate a slider on any product listing with 4 items or more. That's why you see a slider with 4 related items, but not 3. That would also account for the clickable elements too close together error on your homepage, if you have a slider activated there.

Does that sound like a plausible theory (slider controls are too close together) based on the info above and your test results?

sdn · 08-23-2019 08:50:04

Yes, we use 3-wide but they should not stack one on top of the other in mobile view should they (1st issue mentioned) when only 2 or 3 xprods are present?

As for the Google issue, I think that is about the size of it. Would this be a css change and if so which one?

Also, can you confirm if the 9.03 version of media/skins/css/all.min.css should or should not have the following under the Sliders heading ".kthemeinvert .kslidecontl {background-image: url('../images/slide-left-invert.png'); }
.kthemeinvert .kslidecontr {background-image: url('../images/slide-right-invert.png');}". Maybe the software version number and file location could be added to the CSS file headers for easy identification as it is quite easy to get them muddled.

Last edited by sdn (08-26-2019 05:15:57)

webmaster · 08-26-2019 09:22:17

The mobile/desktop behavior is working as programmed when viewing lists with less than the number of items to display in a row in the list (no slider).

Yes, that CSS is correct for the slider controls. Here's all of it:

Code:

.kslidecontl {background-image: url('../images/slide-left.png'); }
.kslidecontr {background-image: url('../images/slide-right.png'); right: 0;}

.kthemeinvert .kslidecontl {background-image: url('../images/slide-left-invert.png'); }
.kthemeinvert .kslidecontr {background-image: url('../images/slide-right-invert.png');}

I just tested this and it seems to work to avert the Google issue for the slider controls (add to your skin's all.css file):

Code:

.kslide {margin-left: 4em; margin-right: 4em;}

sdn · 08-27-2019 06:48:19

Sadly adding that and the previously recommended

Code:

.core_skinwidget_social--CONTENT .kicon {margin-right: .5em !important;}

has not appeased the Google god. It is frustrating that they report errors but give no info that helps to identify what is upsetting them. And then the testing tool is very fickle.

We really need to fix this since we are now on "mobile first" indexing as described at https://webmasters.googleblog.com/2018/ … exing.html

webmaster · 08-27-2019 08:33:15

What if you bump that margin up and re-test? I noticed their testing tool tended to cache results unless you did two tests in a row.

sdn · 08-27-2019 14:37:41

I have suppressed the slider for xprod images and that is being validated by Google (the quick validation was failing before). I will change the above if that fails to cure the problem.

Where do I change the 3-wide product images setting?

Can you clarify if the "Send Order Completed Mail Messages" setting is for the initial confirmation sent immediately after customer has placed an order or after we have processed and marked it as completed?

Last edited by sdn (08-27-2019 14:40:08)

webmaster · 08-28-2019 08:15:01

Where do I change the 3-wide product images setting?

Edit 'Product Listing: Display per Row' under Store / Component / Settings / Categories: Standard View.

Can you clarify if the "Send Order Completed Mail Messages" setting is for the initial confirmation sent immediately after customer has placed an order or after we have processed and marked it as completed?

Every customer gets an order confirmation email (immediately following the order). If you have 'Send Order Completed Mail Messages' on (found under Store / Component / Settings / Order Manager), the customer will also get a mail message when the order is completed (fully shipped) with shipping/tracking info.

sdn · 09-06-2019 02:28:11

Thanks for the clarification.

I am still trying to get to the bottom of this but making some progress.

If I set "Product List: Activate Slider*" to false at "Dashboard / Store / Component / Settings / Store Splash Page" the sliders are still present on the home page. ECOM_Prod.php is at 9.0.2.

Last edited by sdn (09-06-2019 02:42:13)

webmaster · 09-06-2019 08:11:00

To control the slider on the store splash page, edit the settings for the splash page using Store / Component / Settings / Store Splash Page.

sdn · 09-07-2019 02:58:35

I already said I had tried doing just that. Setting "Product List: Activate Slider*" to false does not make the sliders go away. Maybe you can try your stock version to see if there is a coding issue somewhere. Is the code in ECOM_Prod.php (at 9.0.2 on our server)?

webmaster · 09-09-2019 11:07:58

I missed splash page versus homepage. To control the sliders on the homepage, which are featured products displays, adjust the settings under Store / Component / Settings / Featured Products Display.

Kryptronic Software Support Forum

#1 08-23-2019 06:38:44

Related Products Display Issue

#2 08-23-2019 08:20:39

Re: Related Products Display Issue

#3 08-23-2019 08:50:04

Re: Related Products Display Issue

#4 08-26-2019 09:22:17

Re: Related Products Display Issue

Code:

Code:

#5 08-27-2019 06:48:19

Re: Related Products Display Issue

Code:

#6 08-27-2019 08:33:15

Re: Related Products Display Issue

#7 08-27-2019 14:37:41

Re: Related Products Display Issue

#8 08-28-2019 08:15:01

Re: Related Products Display Issue

#9 09-06-2019 02:28:11

Re: Related Products Display Issue

#10 09-06-2019 08:11:00

Re: Related Products Display Issue

#11 09-07-2019 02:58:35

Re: Related Products Display Issue

#12 09-09-2019 11:07:58

Re: Related Products Display Issue

Board footer