JcM New products carousel v7.0 Phoenix

[♥JcMagpie 1,693]

JcM New products carousel v7.0 Phoenix

Let you place a new products carousel the index page. It is based on an existing add-on so all credit goes to the original author.

You can display 3 overlays onto the carousel.

1) New ribbon

2) Sale ribbon (animated)

3) % discount card (animated)

You can have all 3 or any combination simply select which in admin.

The Carousel animation is set in admin and can be slide or instant switch.

Updated for Phoenix and loads scripts using hooks.

It is still a no core change add-on.

Simply copy over the files and install and turn on the new add-on.

It has been tested on Phoenix 1.0.4.0 only

can be seen working on the normal test sites.

[domiosc 44]

Thanks. Great work 👌

[valquiria23 240]

Thank you very much for this magnificent addon, I LOVE yours carusels !!!

[artfulweb 26]

Hello Zahid,

Have you not noticed that the carousel does not show up on small devices like the smartphone?

[yahalimu 43]

I have changed all colours to match my site but I cannot find where to change the shadow colour of the cards. Still purple. Below are the color settings.

percentage card
#006691

percentage text
#ffffff

percentage card hover
#006691

percentage text hover
#ff

Card Margin top
4px

Card Margin left
-.4375rem

Card Text size
1rem

Card box shadow
2px 2px 4px 1px rgba(0,0,0,.20)

Card Margin top hover
4px

Card Margin left hover
-.4375rem

Card Text size hover
3rem

Card box shadow hover
2px 2px 4px 1px rgba(0,0,0,.2)

percentage card opacity
0.6

Sales Ribbon color 1
#006691

Sales Ribbon color 2
#006691

 

I see no purple!

 

Iain

 

[♥JcMagpie 1,693]

2 hours ago, yahalimu said:

I have changed all colours to match my site but I cannot find where to change the shadow colour of the cards. Still purple. Below are the color settings.

Sorry some of them are hardcoded did not get time to make them all admin edit. It's just css you can do it in your user.css just change box-shadow color as required.

#i-new-products .item {
  margin: 0.9375rem 0.625rem 0.9375rem 0.625rem!important;
  border: 1px solid #BBBBBB;
  box-shadow: 2px 2px 10px 0 #6c5391;

Or just edit css in public_html/includes/modules/content/index/templates/tpl_cm_i_jcm_new_products_carousel.php

[yahalimu 43]

Yep, edited php file, worked fine..

Thanks.

 

[yahalimu 43]

Hi,

One more issue I'm afraid.

I have the carasol working OK in the index, but it seems to mess up the bootstrap when I shrink the page. (Left and right columns drop at different points and do not take up full width until in mobile size. (very small))

When I disable the carousel all is good again.

Can you re-produce this?

[yahalimu 43]

Also does it on the demo site kuuza.co.uk at certain resolution.

 

[♥JcMagpie 1,693]

Yes you can have problems with the carousel  on some screen sizes, You just have to use the right media brakes in your owl script. The main issues is with tablet sizes but these have been an issue with boostrap for a long time. I have not found a good working solution so far.

You will find it works fine on phones.

[♥JcMagpie 1,693]

If you look at the test site now you will see it works fine, only checked it on one tablet size.

small change to css in file  public_html/includes/modules/content/index/templates/tpl_cm_i_jcm_new_products_carousel.php

change width in both places.

#i_new_products_carousel {
    width:0rem;    /*width:53.75rem;*/
    padding: 0.9rem!important;
    margin-left: 0rem!important;
}	
#i_new_products_carousel .card-body {
    width:96%;    /*width:53.75rem;*/
    padding: 0.9rem!important;
    margin-left: 1rem;!important;
}

That looks like it fixes what your seeing. The carousel  is inserting items in side a card so it's a compromise geting both to flex on every screen size corectly. Depending on other settings your using you may have to play with the 2 settings.

[yahalimu 43]

Yep that fixed it, thanks..

 

[♥JcMagpie 1,693]

On 1/3/2020 at 4:07 PM, artfulweb said:

Hello Zahid,

Have you not noticed that the carousel does not show up on small devices like the smartphone?

Sorry @artfulweb  I must have missed your post as I was busy traveling over the holidays overseas.

Yes I know I turned it of on small screens as it's not much use as it either one slide or very small slides that are not readable. If you wish to turn it back on then you need to change the class used in the following file

public_html/includes/modules/content/index/templates/tpl_cm_i_jcm_new_products_carousel.php

around line 283 find

<!-- carousel slide output -->
 <div id="i_new_products_carousel" class="col-sm-12 mb-2 d-none d-md-block">

and change to,

<!-- carousel slide output -->
      <div id="i_new_products_carousel" class="col-12 mb-2">

Then it will show on small devices.

[toughmama 1]

When adding to cart...Picture does not load into the Modul cart

[toughmama 1]

When viewing reducing screen, last picture has problem with jumbled info.
 When viewing on smartphone, no carousel, but viewing SIDEWAYS, you you do get to see 2 products in carousel, but last image is also jumbled.

[♥JcMagpie 1,693]

Which version of each add-on?

Which version of osC or Phoenix?

 

[♥JcMagpie 1,693]

34 minutes ago, toughmama said:

When adding to cart...Picture does not load into the Modul cart

Then you have done something wrong! uninstall and remove old files, upload latest version and install again.

Working fine on Phoenix 1.0.5.3

 

The  carousel , It has been tested on Phoenix 1.0.4.0 only and works fine on that, no idea when or if it will be updated for anything higher.

[burt 5,612]

40 minutes ago, toughmama said:

When adding to cart...Picture does not load into the Modul cart

This is not the addon of jcMagpie.
This is one of My addons, so you should contact me via email.

[♥JcMagpie 1,693]

48 minutes ago, toughmama said:

 When viewing on smartphone, no carousel, but viewing SIDEWAYS, you you do get to see 2 products in carousel, but last image is also jumbled.

Again you have a problem with your install, Working fine on Phoenix 1.0.5.3

On the latest version it is blocked on small screens, if you select to display it then you need to spens time to configure it properly for each screen size the settings are all in the css in the add-on.

[♥JcMagpie 1,693]

So if you take the time to set it up properly for small screens you get,

landscape,

[toughmama 1]

Phoenix 1.0.5.3  - using latest version downloaded today... 
 - Note - It only happens on the furthest right image

1 hour ago, JcMagpie said:

Which version of each add-on?

Which version of osC or Phoenix?

 

 

[♥JcMagpie 1,693]

Nothing to do with the add-on as I said it's working fine on 1.0.5.3. You got some other issue or just a bad install.

[♥JcMagpie 1,693]

Backup first, then rename your public_html/includes/modules/content/index/templates/tpl_cm_i_jcm_new_products_carousel.php

to

public_html/includes/modules/content/index/templates/tpl_cm_i_jcm_new_products_carousel.old

and then copy over this version from my test site it's been set up for small screens.

 

tpl_cm_i_jcm_new_products_carousel.php