Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

JcM New products carousel v7.0 Phoenix


JcMagpie

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

 

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...
  • 2 weeks later...

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

 

Link to comment
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

 

Link to comment
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?

Link to comment
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.

 

Link to comment
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

 

Link to comment
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

 

Link to comment
Share on other sites

  • 1 month later...

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.

picture-carousel-2.PNG

Link to comment
Share on other sites

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

image.thumb.png.e4d73b37751fa7f5591a75cfac43e3fe.png

 

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.

 

Link to comment
Share on other sites

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

image.thumb.png.51be93b79d6b7fa8ec300cba936d78c2.png

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.

 

Link to comment
Share on other sites

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?

 

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...