Jump to content
JcMagpie

JcM New products carousel v7.0 Phoenix

Recommended Posts

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.

image.png.4da944fd3906e33c07d9fc83c9bdd66c.png


 

Share this post


Link to post
Share on other sites

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


Please do not falsify my words. Are you interested in knowing who does it? Send me a PM.

The Phoenix Club won't allow me to join - why not?

Setting up a new Frozen site with so many nice addons available on the market. 

:heart: Community Oscommerce fan :heart:

 

Share this post


Link to post
Share on other sites

Hello Zahid,

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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


 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.


 

Share this post


Link to post
Share on other sites

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.

image.thumb.png.c6a6d6db5a7f832775ae561638eb0834.png


 

Share this post


Link to post
Share on other sites
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.

image.png.ed1a3b7022d7e5944b28de1f1fa80244.png


 

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

×