Home Page Products Carousel [Support Thread]

This is the official support thread for the ZX Home Page Products Carousel plugin.

For those who want to download it before it is approved and available in the Plugins section, you can find it here.

The official plugin download is here

The plugin allows you to add a rotating slider to your home page and automatically display your latest products, specials, featured, bestsellers or simply a custom list of products.

Attachment 17903


Any questions you may have, please ask here and I'll do my best to reply. No guarantees, but I'll do my best.

This is brilliant, thank you very much!

Thanks for the feedback - glad to hear you like it!

The plugin has been approved and can be found here.

Suggestions and ideas for improvement are always welcome.

Hello Leonard,

I hope you and yours are safe and well. Gotta say that it was difficult to find this thread - your plugin doesn't show up in plugins search for carousel or even zx products carousel ?? I had to go to my hard drive downloaded copy to find the ink in the readme :)

Question - can the slider be used for crawler readable text? - the idea was to use news articles (for my products) that I use lat9 's News Box Manager for posting updates. The news box is on the home page and the crawlers are responding to the keywords in the text so rather than have myriads of news items in a long news box I wondered if rotating the articles/posts via your slider would be helpful. I suppose it might act like an rss feed or similar??

just wondering.

cheers, Mike

see news box on my site here www.dazzlerscliponearrings.com.au

Hey Mike!

Yeah, the plugin doesn't show up in search - I have no idea why... Maybe PM Scott about it?

I'm pretty sure the slider could be used to rotate contents from the News Box Manager, but I'm not familiar with that plugin. It's basically just a matter of adding the correct SQL query to this plugin. I'm currently away, but will see if I can find some time tomorrow and come up with a solution. I'll post the results here.

I'm gonna try it, any words from the wise?
zc157b
posinstorepayment
coinpayments
posinstore
fedexwebservices
ups
No additional modules

Looking specifically at the optional database patch, not sure what it's going to do and what's the line on the deletes might do.

I don't see why it wouldn't work with 1.5.7b, other than maybe requiring a careful merge of tpl_index_categories.php and tpl_index_default.php

As for the optional SQL query - it's optional. Copy/paste from the docs:
In case this automated installation fails for whatever reason, you can run the SQL patch manually.
So, unless for some reason the automated installer fails, there's no need to use the patch. As for the deletes - it would remove any previous database entries from this plugin, and then insert it again. Basically a (dirty) way of reinstalling - it doesn't check for existing entries and updates if necessary, but instead wipes any existing entries and inserts it back. Kinda like a factory reset...

Well, it works pretty good and looks nice on the home page, but it seems to take the center column space on other pages without displaying the carousel. I.E.- when I select a category from the top bar , the center column is filled with white space and the sub-categories (cattopgroup/categorylistboxcontents)are way down at the bottom, I can still select other categories from the top bar. When a category is selected from the sidebox category, I get the white space and the subs on the bottom, but also I am unable to select any different category from the sidebox list. I also have the next/back chevrons of owl_nav_disabled right on top of the sub-category display at the bottom. I've analyzed the tpl_index_default, tpl_index_categories and the tpl_index_slider and the code looks fine as far as I can tell. I know I'm missing something but can't quite pinpoint what. Any ideas?

Well, that's one interesting oversight with the plugin. You should edit the tpl_index_slider.php file and change

Code:

---

if(ZX_CAROUSEL_STATUS == 'true') {

---

to

Code:

---

if(ZX_CAROUSEL_STATUS == 'true' && $this_is_home_page) {

---

That's it. Sorry about that, I'm surprised this hasn't been reported by now, but then again, if the plugin doesn't show up in search...

Perfect, very nice plugin.
Thank you again!

https://www.thercrv.com NOW LIVE

I now have it setup for as custom with images, but wonder how the order for those scrolling images is determined? I've tried to reorganize the display by spacing the product ID apart from each other to prevent aesthetically similar images from showing up next to each other, but that doesn't seem to work. Is it keyed off of categories? And is there a known way to control the order of display?

The plugin is set to order these products by original products' sort order which you set in admin (although kinda useless if you have products from various categories) and then by products' names in alphabetical order.

If you want to change that and have the products show in the exact order as you entered the IDs in your admin, you'll need to make a change to one file - includes/templates/YOUR_TEMPLATE/templates/tpl_index_slider.php.
Find

Code:

---

case 'custom':
            $products_query = "SELECT DISTINCT p.products_id, pd.products_name, p.products_image, p.master_categories_id FROM "  . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd WHERE p.products_id IN (".ZX_CAROUSEL_MOD_CUSTOM.") AND p.products_status = '1' AND p.products_id = pd.products_id AND pd.language_id = " . (int)$_SESSION['languages_id'] ." ORDER BY p.products_sort_order, pd.products_name";
            if ($products_query != '') $products = $db->Execute($products_query, ZX_CAROUSEL_LIMIT);
            break;

---

and replace with

Code:

---

case 'custom':
            $products_query = "SELECT DISTINCT p.products_id, pd.products_name, p.products_image, p.master_categories_id FROM "  . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd WHERE p.products_id IN (".ZX_CAROUSEL_MOD_CUSTOM.") AND p.products_status = '1' AND p.products_id = pd.products_id AND pd.language_id = " . (int)$_SESSION['languages_id'];
            if ($products_query != '') $products = $db->Execute($products_query, ZX_CAROUSEL_LIMIT);
            break;

---

Quote:

---

Originally Posted by balihr

The plugin is set to order these products by original products' sort order which you set in admin (although kinda useless if you have products from various categories) and then by products' names in alphabetical order.

If you want to change that and have the products show in the exact order as you entered the IDs in your admin, you'll need to make a change to one file - includes/templates/YOUR_TEMPLATE/templates/tpl_index_slider.php.
Find

Code:

---

case 'custom':
            $products_query = "SELECT DISTINCT p.products_id, pd.products_name, p.products_image, p.master_categories_id FROM "  . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd WHERE p.products_id IN (".ZX_CAROUSEL_MOD_CUSTOM.") AND p.products_status = '1' AND p.products_id = pd.products_id AND pd.language_id = " . (int)$_SESSION['languages_id'] ." ORDER BY p.products_sort_order, pd.products_name";
            if ($products_query != '') $products = $db->Execute($products_query, ZX_CAROUSEL_LIMIT);
            break;

---

and replace with

Code:

---

case 'custom':
            $products_query = "SELECT DISTINCT p.products_id, pd.products_name, p.products_image, p.master_categories_id FROM "  . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd WHERE p.products_id IN (".ZX_CAROUSEL_MOD_CUSTOM.") AND p.products_status = '1' AND p.products_id = pd.products_id AND pd.language_id = " . (int)$_SESSION['languages_id'];
            if ($products_query != '') $products = $db->Execute($products_query, ZX_CAROUSEL_LIMIT);
            break;

---

---

Well, that didn't work. The only image it put in the order I entered is the first image, the rest just went back to the same order. Kinda perplexing.

Actually in a second look, it didn't even put the first image in order as entered. It displays all the images I entered, just not in the order I entered.

I have the max increased from 10 to 20, running 15

Looks like what it did is sorted them numerically from low to high, disregarding the custom order.

What I'm trying to do is get them to display by product ID in an order I specify. I.E. 27,3,12,11,45,9........etc
What I get is 3,9,11,12,27,45....etc

Yeah, sorry about that. Please disregards post #13 and use this:
Find

Code:

---

case 'custom':
            $products_query = "SELECT DISTINCT p.products_id, pd.products_name, p.products_image, p.master_categories_id FROM "  . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd WHERE p.products_id IN (".ZX_CAROUSEL_MOD_CUSTOM.") AND p.products_status = '1' AND p.products_id = pd.products_id AND pd.language_id = " . (int)$_SESSION['languages_id'] ." ORDER BY p.products_sort_order, pd.products_name";
            if ($products_query != '') $products = $db->Execute($products_query, ZX_CAROUSEL_LIMIT);
            break;

---

Replace with

Code:

---

case 'custom':
            $products_query = "SELECT DISTINCT p.products_id, pd.products_name, p.products_image, p.master_categories_id FROM "  . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd WHERE p.products_id IN (".ZX_CAROUSEL_MOD_CUSTOM.") AND p.products_status = '1' AND p.products_id = pd.products_id AND pd.language_id = " . (int)$_SESSION['languages_id'] ." ORDER BY FIELD(p.products_id, ".ZX_CAROUSEL_MOD_CUSTOM.")";
            if ($products_query != '') $products = $db->Execute($products_query, ZX_CAROUSEL_LIMIT);
            break;

---

For increased security, you may want to replace both instances of

ZX_CAROUSEL_MOD_CUSTOM
with
zen_db_input(ZX_CAROUSEL_MOD_CUSTOM)

That's the one I was trying to do. Made a great mod even better. Thank you.

Quote:

---

Originally Posted by DrByte

For increased security, you may want to replace both instances of

ZX_CAROUSEL_MOD_CUSTOM
with
zen_db_input(ZX_CAROUSEL_MOD_CUSTOM)

---

Excellent thought. Both instances of it?

Quote:

---

Originally Posted by TheGrimReaper

Excellent thought. Both instances of it?

---

Yup!

Thank you for that one.

I am//was having a problem with the images in the carousel. It seems I was getting a small image that was over-expanded and pretty lossy. I tried resizing in the admin to no avail, even to the point of sizing lower than the small image. I tried several different sizing settings with no change. What I ended up doing was increasing the number of images in admin all the way up to 6 before it became sized right. 6 though, looks pretty good albeit pretty crowded. Any thoughts, ideas, suggestions are welcome

Quote:

---

Originally Posted by TheGrimReaper

I am//was having a problem with the images in the carousel. It seems I was getting a small image that was over-expanded and pretty lossy. I tried resizing in the admin to no avail, even to the point of sizing lower than the small image. I tried several different sizing settings with no change. What I ended up doing was increasing the number of images in admin all the way up to 6 before it became sized right. 6 though, looks pretty good albeit pretty crowded. Any thoughts, ideas, suggestions are welcome

---

Yeah, with Owl Carousel being responsive, it automatically adapts width of the individual item to the size of the container and number of items displayed.

You can try adding a max-width setting in your includes/templates/YOUR_TEMPLATE/css/index_home.css

Code:

---

.sliderItem {
    max-width: 200px;
    margin: 0 auto;
}

---

Of course, change the 200 to what you seem fit.

Quote:

---

Originally Posted by balihr

Yeah, with Owl Carousel being responsive, it automatically adapts width of the individual item to the size of the container and number of items displayed.
....

---

yeah with owl carousel being pretty much dead, it might behoove someone to update this plugin....

https://github.com/OwlCarousel2/OwlCarousel2

certainly needs updating in order to work with the latest version of jQuery....

Quote:

---

Originally Posted by balihr

Yeah, with Owl Carousel being responsive, it automatically adapts width of the individual item to the size of the container and number of items displayed.

You can try adding a max-width setting in your includes/templates/YOUR_TEMPLATE/css/index_home.css

Code:

---

.sliderItem {
    max-width: 200px;
    margin: 0 auto;
}

---

Of course, change the 200 to what you seem fit.

---

OUCH! Hummm, ok! Lets see how badly I can break my home page. Copy, copy, copy. I assume this is new code, not a replacement, so this (I think) is my first exposure to (somewhat) starting something and I best well copy that file many times just in case. Itsa gonna be a cool lesson- To the Batcave Robin!

Quote:

---

Originally Posted by TheGrimReaper

OUCH! Hummm, ok! Lets see how badly I can break my home page. Copy, copy, copy. I assume this is new code, not a replacement, so this (I think) is my first exposure to (somewhat) starting something and I best well copy that file many times just in case. Itsa gonna be a cool lesson- To the Batcave Robin!

---

No need to copy that file, there's only 2 lines in it -
@import url("owl.carousel.css");
@import url("owl.theme.default.css");
There! Copied and stored.

Quote:

---

Originally Posted by balihr

Yeah, with Owl Carousel being responsive, it automatically adapts width of the individual item to the size of the container and number of items displayed.

You can try adding a max-width setting in your includes/templates/YOUR_TEMPLATE/css/index_home.css

Code:

---

.sliderItem {
    max-width: 200px;
    margin: 0 auto;
}

---

Of course, change the 200 to what you seem fit.

---

Well, that did work pretty good!. At first I thought it was a major file, but then realized it was only css - no problem. I learned.

Quote:

---

Originally Posted by carlwhat

yeah with owl carousel being pretty much dead, it might behoove someone to update this plugin....

https://github.com/OwlCarousel2/OwlCarousel2

certainly needs updating in order to work with the latest version of jQuery....

---

Well, uhm... OwlCarousel may be dead, but it's still quite good. The version currently available for download was based on OC 2.3.3, and I've submitted an update about a week ago (takes quite long to get approved). The update uses the latest OC 2.3.4 which definitely does work with jQuery 3.5.1 (tested on ZC 1.5.7b without issues). The one found on my website is updated.

But, you just raised another BIG red flag - I was just about to release ZX Slideshow v2 with much better functionality than the original, but I based it on OwlCarousel... :Flush:

Quote:

---

Originally Posted by balihr

Well, uhm... OwlCarousel may be dead, but it's still quite good. The version currently available for download was based on OC 2.3.3, and I've submitted an update about a week ago (takes quite long to get approved). The update uses the latest OC 2.3.4 which definitely does work with jQuery 3.5.1 (tested on ZC 1.5.7b without issues). The one found on my website is updated.

But, you just raised another BIG red flag - I was just about to release ZX Slideshow v2 with much better functionality than the original, but I based it on OwlCarousel... :Flush:

---

Help me, I can't swim! gurgle, gurgle

Let me know what ya end up doing, always on board with better

Quote:

---

Originally Posted by TheGrimReaper

Let me know what ya end up doing, always on board with better

---

My reply was actually to @carlwhat...

I don't have any plans to improve this plugin - no feedback, no ideas, no requests... I'm assuming it's doing it's job quite well. There is an update already submitted, just not yet available in the Plugins because it's awaiting Moderators' approval (@Scott wakey wakey :wink2:). There's not much in the update so don't expect anything special.

The other thing I was just about to release was an update for ZX Slideshow, which is a similar, but quite different plugin. If you had the chance to check what I PM-ed you the other day, it's already included there...
But, I guess now I have to put that on hold since OwlCarousel is a dead end. Thank you, @carlwhat. Do you get commission from my Recycle Bin, perhaps? :wink2:

Quote:

---

Originally Posted by balihr

My reply was actually to @carlwhat...
:

---

Yup yup! I understood that, just had to resubscribe becasue I accidentally hit the unsubscribe link, and it was a chance to try and stay in the loop.

Quote:

---

Originally Posted by balihr

There is an update already submitted, just not yet available in the Plugins because it's awaiting Moderators' approval

---

Approved.

Quote:

---

Originally Posted by balihr

Well, uhm... OwlCarousel may be dead, but it's still quite good. The version currently available for download was based on OC 2.3.3, and I've submitted an update about a week ago (takes quite long to get approved). The update uses the latest OC 2.3.4 which definitely does work with jQuery 3.5.1 (tested on ZC 1.5.7b without issues)...

---

https://github.com/OwlCarousel2/OwlC...ousel.js#L1015

"jquery-migrate-3.3.2.js:100 JQMIGRATE: jQuery.type is deprecated"

one of many....

thanks for playing! :p

now about that recycle bin commission...

Quote:

---

Originally Posted by carlwhat

https://github.com/OwlCarousel2/OwlC...ousel.js#L1015

"jquery-migrate-3.3.2.js:100 JQMIGRATE: jQuery.type is deprecated"

one of many....

thanks for playing! :p

now about that recycle bin commission...

---

OK, this has gotta be something I'm not familiar with or don't understand. How come it's working just fine on a vanilla ZC 1.5.7b (using jQuery 3.5.1 out of the box)? I'll definitely check that replacement (tiny-slider) when I get a chance, but until then, I guess we're stuck with OwlCarousel.

Maybe https://swiperjs.com ?

Quote:

---

Originally Posted by DrByte

Maybe https://swiperjs.com ?

---

Very nice, love it! I'll see what I can do to convert it, thanks! But sadly, last day in the saddle today, back to work as of Mon so no ETA.

Quote:

---

Originally Posted by balihr

OK, this has gotta be something I'm not familiar with or don't understand. How come it's working just fine on a vanilla ZC 1.5.7b (using jQuery 3.5.1 out of the box)? I'll definitely check that replacement (tiny-slider) when I get a chance, but until then, I guess we're stuck with OwlCarousel.

---

apparently deprecation means, encouragement of other alternatives...

from: https://blog.jquery.com/2018/01/19/j...a-new-feature/


"...These functions have either lost some of their usefulness over time, are considered to be less favorable than available alternatives, or were intended for internal usage from the beginning. While most of these will be removed in jQuery 4.0, it’s worth noting that we do not consider the deprecation of a method to mean that it will be removed; it means that we encourage the use of alternatives."

which is why, still working on a vanilla install using 3.5.1.

but new development using owl.... no. i'm going to remove it from my clients sites.... hopefully....

best.

can i check folks i have version 1.0.4 of this module and im getting issues on google page speed insight indicating an excessive dom size which seems to relate to the items displayed in the carousel with some 1358 elements. I can tell its the carousel or the image just unsure which and if the module perhaps has an updated version that would resolve the issue for me?

If i disable the carousel i have no warning about excessive dom elements and my page speed score increases from 63 to 74 :/ hoping improve load speed to help seo? not sure if thats how it works but it has a terrible score for mobile and the desktop score is 95 or 96 with the carousel disabled?

Quote:

---

Originally Posted by flappingfish

can i check folks i have version 1.0.4 of this module and im getting issues on google page speed insight indicating an excessive dom size which seems to relate to the items displayed in the carousel with some 1358 elements. I can tell its the carousel or the image just unsure which and if the module perhaps has an updated version that would resolve the issue for me?

If i disable the carousel i have no warning about excessive dom elements and my page speed score increases from 63 to 74 :/ hoping improve load speed to help seo? not sure if thats how it works but it has a terrible score for mobile and the desktop score is 95 or 96 with the carousel disabled?

---

Uhm... 1.0.4? Are you sure you're using THIS plugin?

A URL would be helpful to get started. However, 1358 elements in the carousel alone really is excessive - perhaps you're just showing too many products in the carousel? the speed impact shouldn't be THAT significant, unless the images are not optimized, but again, really hard to say anything without the URL in question.

Code:

---

www.crazygamer.uk

---

apologies for that oversight and this seems to be the only module i can find with the name and the filenames match, maybe it has been tweaked when added to my site? i mean i have easy populate 4 update my computing section every hour to keep the stock accurate (possibly more often tbh) so perhaps its loading all of those in the new column?

Quote:

---

Originally Posted by flappingfish

Code:

---

www.crazygamer.uk

---

apologies for that oversight and this seems to be the only module i can find with the name and the filenames match, maybe it has been tweaked when added to my site? i mean i have easy populate 4 update my computing section every hour to keep the stock accurate (possibly more often tbh) so perhaps its loading all of those in the new column?

---

Yeah, it's not this plugin. It may have been used as base, although I'm pretty sure numinix built their own version for the Tableau2 template.

IMO, the way your home page is setup is useless. First of all - tabs. Nowadays people prefer scrolling - tabs require action. You have 3 hidden tabs, meaning a visitor must be interested to click on it to see what's inside. Then, the visitor must click to click-scroll through the items (or die waiting while the autoplay scrolls through all 20 products...). Very bad UX.

Now, you have 20 products in New, 20 in Bestsellers, 9 in Featured and 3 in Specials. Yeah, that's a lot of elements. Ideally, you'd have 4-5 in each, but all visible and without any tabs. Maybe some content in-between...Image optimization seems to be fine, but it's still 52 images being loaded... Perhaps reducing the number of products per carousel will help.

Anyway, this is probably best to discuss with numinix or in the template's thread (not sure if it's this one).

tableau 4 im on now, tableau 2 was a disaster when i installed it, so many issues my log file has about 5600 logs there, one log the otherday being the first one my site has spat out for weeks randomly. this dom size issue is definetly related to the numinix version of this plugin then as my site was formed on tableau 2 and i'm quite aware it need asthetically improving still but its not something i understand how to do.

back to my issue at hand it appears there is no support thread for the numinix revision of the module or ive missed it in my google search after seeing no support thread link to the module, unsure if it was the numinix version or this without the link, perhaps the numinix one was never publicly released as it was template specifically altered? my main issue is the page speed score before visual optimisations, not that i don't agree there needed in the near future but my understanding is people use mobile mainly to browse these day or a tablet, my poor page loading speed therefore is effecting me getting as many web visitors ect?

Without the carousel my home page is just the top graphic. another curious thing and i'm unsure if it is related to the carousel (probably not but it crossed my mind) is the "about us" underneath it, if you read the opening paragraph before clicking to read the rest you will be confused as i updated the about us and it doesnt start the same anymore but zen still remembers it for the homepage about us ghost snippet?

Quote:

---

Originally Posted by flappingfish

tableau 4 im on now, tableau 2 was a disaster when i installed it, so many issues my log file has about 5600 logs there, one log the otherday being the first one my site has spat out for weeks randomly. this dom size issue is definetly related to the numinix version of this plugin then as my site was formed on tableau 2 and i'm quite aware it need asthetically improving still but its not something i understand how to do.

back to my issue at hand it appears there is no support thread for the numinix revision of the module or ive missed it in my google search after seeing no support thread link to the module, unsure if it was the numinix version or this without the link, perhaps the numinix one was never publicly released as it was template specifically altered? my main issue is the page speed score before visual optimisations, not that i don't agree there needed in the near future but my understanding is people use mobile mainly to browse these day or a tablet, my poor page loading speed therefore is effecting me getting as many web visitors ect?

Without the carousel my home page is just the top graphic. another curious thing and i'm unsure if it is related to the carousel (probably not but it crossed my mind) is the "about us" underneath it, if you read the opening paragraph before clicking to read the rest you will be confused as i updated the about us and it doesnt start the same anymore but zen still remembers it for the homepage about us ghost snippet?

---

I don't see tableau4 available for download anywhere. Your site does seem to be using Tableau2, at least it looks like it. Perhaps posting your question in the Tableau thread will be more helpful and you might get a response from either someone else using the template or numinix - I've never had a chance to use that template and don't know how it works. Same goes for the about us snippet, which is probably a standalone thing (perhaps in Define pages?) and not linked to the actual About Us page. But again, probably best to ask in the correct forum thread.

i wont go into detail but the reason i have my template as tableau 4 now is because even numinix could not get it to function, someone in the forum actually helped me out massively on that issue, tableau 4 i guess is his revision model number of the template so to speak. its definetly the carousel though as you disable it and it no longer gives an dom count let alone a warning of an excessive one, all the doms seem to be coming from that one element sadly. I know when i set my site up zen had just been overhauled to 1.57c i believe, when i browsed i could not find any nice templates i liked, i might have to have another look into it or see how i go about altering it a little bit

Would this work with Bootstrap Template?

Thank you

Quote:

---

Originally Posted by nicksab

Would this work with Bootstrap Template?

Thank you

---

Nope, but there is a Bootstrap Homepage slider (https://github.com/lat9/bs4_home_slider) that does ... and I'm planning on including that as part of the template's base for the next release.