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.
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)
Offline
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?
Offline
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)
Offline
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:
.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):
.kslide {margin-left: 4em; margin-right: 4em;}
Offline
Sadly adding that and the previously recommended
.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
Offline
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)
Offline
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.
Offline
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)
Offline
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)?
Offline
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.
Offline