Jump to content
Latest News: (loading..)
JcMagpie

Support thread for Specials carousel with Ribbon v2.3.4.1 CE

Recommended Posts

27 minutes ago, valquiria23 said:

Dear Zahid, good morning!!

It was 1 Special item that did not appear. I deleted it and loaded another one and now it shows me all the selected items correctly. No idea what happened ...

Where do I have to put that code in the ext / directory?

I am also using the Carousel addons:

Product_info_Carousel_Fade

Cataloge - JC-Carousel

Best regards

Valqui

 

No these all use Bootstrap not Owl, Only the 3 zip files use Owl js


 

Share this post


Link to post
Share on other sites

thank you very much Zahid,

Where do I have to put that code in the ext / directory or only I have to use the new file?

 

<!-- Important Owl stylesheet -->

<link rel="stylesheet" href="/ext/owl-carousel/owl.carousel.css">

<!-- Default Theme -->

<link rel="stylesheet" href="ext/owl-carousel/owl.theme.css">

<!-- Include js plugin -->

<script src="ext/owl-carousel/owl.carousel.js"></script>

<!-- jQuery 1.7+ -->

<script src="ext/jquery/jquery-3.1.1.min.js"></script>


I'm using oscommerce Edge v2.3.4.1

Get here the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

Share this post


Link to post
Share on other sites

First go to admin / modules/ heder_tags    and check for jQuery Owl Carousel v1.3.3  if it is installed turn it off and  unistall it as its probably not working as it should.

Then go to ext/  and check that you have all the directorys with files shown , you should have them but  just make sure path is corect. That should be all, now they should work with no issues with other scripts running.

ext/owl-carousel/owl.carousel.css

ext/owl-carousel/owl.theme.css

ext/owl-carousel/owl.carousel.js

ext/jquery/jquery-3.1.1.min.js


 

Share this post


Link to post
Share on other sites
vor 1 Minute schrieb valquiria23:

This addon needs the Community Bootstrap Edition version v2.3.4.1 CE, it does not work for the standard version.

i don't have this ... oki .... easy come easy go .... 😉

Share this post


Link to post
Share on other sites

Using more than one owl carousel can cause conflicts on some websites. This is mainly due to the scripts being loaded more than once by each carousel.

To be honest I did not consider that more than one would be used on the same site!

A simple solution is to remove the script from each add-on and simply install it once as a footer script. This will then hopefully prevent any conflicts.

On my add-on’s simply go to the template file and find this code and remove or comment out.

<head>
       <!-- Important Owl stylesheet -->
    <!--<link rel="stylesheet" href="/ext/owl-carousel/owl.carousel.css">-->
     
    <!-- Default Theme -->
   <!-- <link rel="stylesheet" href="ext/owl-carousel/owl.theme.css">-->
     
    <!--  jQuery 1.7+  -->
    <!--<script src="ext/jquery/jquery-3.1.1.min.js"></script>-->
     
    <!-- Include js plugin -->
    <!--<script src="ext/owl-carousel/owl.carousel.js"></script>-->
	</head>

Then simply install the JcM Owl Header Tags , header_tags addon and turn on. The carousels should now work with out any funny overlaping of text and images.

If you have other carousels using Owl then they too will conflict if they are loading the script a second time! Turn it off and see if it fixes the problem, if it does then remove the script from the add-on as well.

Please note this is just for the scripts listed in the code above.

JcM Owl Header Tags.zip


 

Share this post


Link to post
Share on other sites

Sorry was error in Header Tags file. Use the updated one bleow.

It would appear that owl carousel has issues when more than one is running on the same site. The header Tags will only fix this if no other owl carousel is running with script being loaded locally.

However what I have found is if I remove the script from the header altogether I can load as many as I like with the script locally and they work fine with no text over images!

JcM Owl Header Tags-V1.2.zip


 

Share this post


Link to post
Share on other sites
Posted (edited)

I have looked into this display issue quite a bit now and sorry bu thave not been able ot find a stable fix for this. The problem is that owl carousel no matter which version you use

( I have recoded the addon to use the latest 2.3.4 version of owl and it still behaves the same) has no built in equal heights function. This is a known issue with no date for fix.

Several people have found a way to get round this mainly by using some sort of custom function but none appearer to work in a stable manner.

The problem is caused when you try to display several items which are of different in size. In osC this is caused by the product name being of different lengths or images sizes not being the same.

 

The description can also be an issue if it is too short! Long descriptions are cropped to 40 words or letter.

image.png

 

So if you are having this issue then your options are.

 

1) Don’t use the add-on. Sorry but I don’t have a fix currently or time to make a fix.

 

2) Keep using it and accept the fact that occasionally it look odd on some displays

 

3) remove the equal heights function and let it display as normal. It will look like this ( this is owl 2.3.4 with equal heights removed).

image.thumb.png.fef19c33c402651a9f612cb34f97a374.png

As you can see each box is a different size but all stay in the frame and it display fine with no issues.

4) If it's critical to your site then ask  a developer to make a fix for you. ( Not me I'm not a developer)

So sorry but that’s as far as I was able to debug this in the time I have available. I will look at this again to see if I can get a fix using the new 2.3.4 owl carousel as this issupposed to be fully responsive so the fix should be possible, It may even be easy, perhaps I’m just not seeing it? If you have a fix feel free to post it.

 

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

Ok may have found a solution! I came across a forum discussing this problem, They think its down to a cahe problem. The images and other content may be beeing loaded after the js script.

Simple solution is to change the function from $(document).ready(function() to

$(window).load(function()  this allows the images / content to load first before the jQuery loads.

So I have tested on one site and it worked! did over 20 reload / refreshes in 2 browsers and could not get images and text to overlay as before.

It needs to be done on all owl carousels for it to work. For my add-ons In each template file find the following line of code around line 147 ( shoud be the same in most others)

$(document).ready(function() {
  var owl = $("#i-featured-products");

Replace it with,

$(window).on("load",function() {
  var owl = $("#i-featured-products");

Remember line 2 will be different for each add-on.

Lets hope this fix works for your site also.

 

 

 


 

Share this post


Link to post
Share on other sites

The Add-on has been updated to use owl carousel 2.3.4 and include the above  display issue fix.

It no longer requires the owl_carousel 2.3.4 script to be loaded locally. These are now loaded to the header and footer using Header_Tags and use CDN rather than local install.

Owl requires the owl style sheets and jQuery to be loaded in a specific order to work properly. See the recommendations here

https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html

If you are using any other add-on using owl it may cause issues if it’s not installed correctly.

It is still a no core change add-on.

Install and turn on both Header_Tags then simply install the other files and install and turn on the new add-on.

It has been tested on the v2.3.4.1 CE Only.

 


 

Share this post


Link to post
Share on other sites

Has been updated to fix error as i loaded up old files, they will work but just with default Owl2 settings.

Bug fix to make speed controls work.

If you want to edit then in template file,

Find line autoPlay: and copy it and replace autoPlay: with autoplayTimeout:

Find paginationSpeed: and replace with autoplaySpeed:

Find slideSpeed: and replace with navSpeed:

Find navigationText and replace with navText

 


 

Share this post


Link to post
Share on other sites

greetings,

any chance of making this appear using the footer area (width) instead of the index one? It would be cool to see it scrooling bellow the left and right boxes aswell.

Edited by Owl Sauron
bug fixed

Share this post


Link to post
Share on other sites
On 10/15/2018 at 11:06 PM, Owl Sauron said:

any chance of making this appear using the footer area (width) instead of the index one?

I'm not a developer, the add-ons I do are done for my site or just for fun! , but if you need it then simply post in the comercial section and I am sure one of the developers will be happy to help. Sorry but busy with other stuff at the moment.


 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×