Kryptronic Software Support Forum

You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.

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

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 808

Related Products Display Issue

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)


Simon

Offline

 

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

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19357
Website

Re: Related Products Display Issue

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?


Nick Hendler

Offline

 

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

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 808

Re: Related Products Display Issue

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)


Simon

Offline

 

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

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19357
Website

Re: Related Products Display Issue

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;}

Nick Hendler

Offline

 

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

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 808

Re: Related Products Display Issue

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


Simon

Offline

 

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

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19357
Website

Re: Related Products Display Issue

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.


Nick Hendler

Offline

 

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

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 808

Re: Related Products Display Issue

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)


Simon

Offline

 

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

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19357
Website

Re: Related Products Display Issue

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.


Nick Hendler

Offline

 

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

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 808

Re: Related Products Display Issue

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)


Simon

Offline

 

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

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19357
Website

Re: Related Products Display Issue

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


Nick Hendler

Offline

 

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

sdn
Member
From: UK
Registered: 05-29-2007
Posts: 808

Re: Related Products Display Issue

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)?


Simon

Offline

 

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

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19357
Website

Re: Related Products Display Issue

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.


Nick Hendler

Offline

 

Board footer