Jump to content

Welcome screen Banner


Mike

Recommended Posts

I am just testing out the site before I go live with it and I have deleted the scrolling pictures from the Documents section.

Can anyone tell me how I add pictures in to the Welcome to store, document, content.

I have placed pictures in the content under each other but they don't act as a scrolling banner on the front screen of the store.

Many thanks in advance.

Mike

Link to comment
Share on other sites

Welcome Mike! Glad to see you made it to the forums.

When editing the Homepage document, switch the editor to Source mode. It's easier.

The code you will want to use, as an example, is:

<ul class="bxslider">
	<li><a href="{$STORE_URL}/tesa31.html"><img src="{$STORE_URL}/skins/foundation/images/examples/slide4.jpg" title="Promotional Message One" /></a></li>
	<li><img src="skins/foundation/images/examples/slide5.jpg" /></li>
	<li><img src="skins/foundation/images/examples/slide6.jpg" title="Promotional Message Two" /></li>
	<li><img src="skins/foundation/images/examples/slide7.jpg" title="Promotional Message Three" /></li>
</ul>

This is an unordered list. The first list item shows how the image can be a clickable link. It also shows how to make the image source an absolute (as opposed to relative) URL.

The last two list items show how to add some textual material to the image.

The images should be 1000x300 pixels. Any other dimensions will require some additional CSS changes to the slider area.

Link to comment
Share on other sites

  • 2 months later...
  • 1 year later...

Hi,

I've just copied the code bsmither provided and have managed to get the images and links to work, using the correct image size, but it doesn't seem to "scroll" at all. It just puts one picture underneath the last, and so on, on the same page.

I'm using Cube Cart 6.4.2. with the e-tone skin

Am I doing something wrong? I assumed this would be a rotating banner type thing? Any help would be appreciated.

Thank you

Link to comment
Share on other sites

The slideshow uses a system called bxslider and this needs to be included within the skin files fir it to work.  E-tone is a very old and unsupported skin and really shouldn’t be used by anyone unless they are a very competent programmer willing to spend a lot of time upgrading and configuring it to work with the latest CubeCart version which IMHO is a complete waste of time and money.

Choose a skin that is currently actively supported and developed  such as ours or those from @NiteFox- for a little bit of initial outlay you will get a modern skin that works and is supported

Ian

Link to comment
Share on other sites

In admin, editing the Homepage document, General tab, have "Parse Smarty Tags" enabled.

In the Content tab editor, this code will need to be entered:

<!--
{* Set the 'url' to an actual web page if desired.
   Clicking on the image will go there.
   The 'large' value is the relative URL for the image of normal size.
   The 'source' value is the relative URL for the image of a low-compressed size.
   The 'alt' value is a phrase to show when there is no image available.
   The last array does not have a trailing comma. *}
{assign scope="global" var="SLIDES" value=[
  [
    'url' => '',
    'large' => 'skins/e-tone/images/examples/slide1.jpg',
    'source' => 'skins/e-tone/images/examples/slide1.jpg',
    'alt' => ''
  ],
  [
    'url' => '',
    'large' => 'skins/e-tone/images/examples/slide2.jpg',
    'source' => 'skins/e-tone/images/examples/slide2.jpg',
    'alt' => ''
  ]
]}
{assign scope="global" var="SLIDE_SPEED" value=500}
{assign scope="global" var="SLIDE_TIMEOUT" value=2000}
-->

OR...

You can copy the BXSlider javascript file from Foundation, and edit the main.php template to include it in the list of scripts to load (see near line 157) and add the following statement just above the </script> tag:

$('.bxslider').bxSlider({auto:true,captions:true});

 

Link to comment
Share on other sites

18 hours ago, bsmither said:

In admin, editing the Homepage document, General tab, have "Parse Smarty Tags" enabled.

In the Content tab editor, this code will need to be entered:


<!--
{* Set the 'url' to an actual web page if desired.
   Clicking on the image will go there.
   The 'large' value is the relative URL for the image of normal size.
   The 'source' value is the relative URL for the image of a low-compressed size.
   The 'alt' value is a phrase to show when there is no image available.
   The last array does not have a trailing comma. *}
{assign scope="global" var="SLIDES" value=[
  [
    'url' => '',
    'large' => 'skins/e-tone/images/examples/slide1.jpg',
    'source' => 'skins/e-tone/images/examples/slide1.jpg',
    'alt' => ''
  ],
  [
    'url' => '',
    'large' => 'skins/e-tone/images/examples/slide2.jpg',
    'source' => 'skins/e-tone/images/examples/slide2.jpg',
    'alt' => ''
  ]
]}
{assign scope="global" var="SLIDE_SPEED" value=500}
{assign scope="global" var="SLIDE_TIMEOUT" value=2000}
-->

OR...

You can copy the BXSlider javascript file from Foundation, and edit the main.php template to include it in the list of scripts to load (see near line 157) and add the following statement just above the </script> tag:


$('.bxslider').bxSlider({auto:true,captions:true});

 

Thank you very much for all this.

I have attempted plan B (after I couldn't get plan A to work)- copying the javascript and editing the main.php adding in the statement as shown below - but it doesn't seem to be working. Do I need to edit main.php somewhere else to include it in the list of scripts to load?

I really appreciate you helping me with this.

Adam

image.png.7ce765dd22163294dff8d739ff5f3785.png

21 hours ago, havenswift-hosting said:

The slideshow uses a system called bxslider and this needs to be included within the skin files fir it to work.  E-tone is a very old and unsupported skin and really shouldn’t be used by anyone unless they are a very competent programmer willing to spend a lot of time upgrading and configuring it to work with the latest CubeCart version which IMHO is a complete waste of time and money.

Choose a skin that is currently actively supported and developed  such as ours or those from @NiteFox- for a little bit of initial outlay you will get a modern skin that works and is supported

Ian

Thank you Ian.

As you can probably tell, I'm not a very competent programmer. 

I wasn't aware e-tone was so old and unsupported.  I chose it because it popped up in the extensions options and I liked the look of it when compared to the "foundation" "kurouto" and "minimaliser" skins I've tried before.

I'm just trying to make my site look a little more professional, and don't have the money to buy some of the newer, or more supported skins at the moment, so am taking the opportunity to learn as I go along.  E-tone seems to be working ok for my needs, I just want to jazz it up a bit if possible!

I'll have a look at some of the skins you have suggested, I certainly understand the value they offer, and maybe I'll find one I can switch to in the future.

Thanks again for your reply.

Adam

Link to comment
Share on other sites

Assuming you put the BXSlider plugin in the skin's /js/ folder, there are three more things to do:

1. Edit the skin template main.php:

From:

    {/literal}
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/enquire.min.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/superfish.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js"
    {literal}
]);

To:

    {/literal}
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/enquire.min.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/superfish.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/jquery.bxslider.js"
    {literal}
]);$('.bxslider').bxSlider({auto:true,captions:true});

Also in this file, near the top:

From:

<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-vertical.css" media="screen" />
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-mobile.css" media="screen and (max-width:650px)" />
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/icomoon/style.css" />

To:

<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-vertical.css" media="screen" />
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-mobile.css" media="screen and (max-width:650px)" />
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/jquery.bxslider.css" media="screen" />
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/icomoon/style.css" />

Need to have the template load the BXSlider javascript file, then a statement to start the BXSlider. The template also needs to load the BXSlider CSS file.

2. Copy the jquery.bxslider.css file from Foundation's /css/ folder to e-Tone's /styles/ folder.

3. Copy the /bxslider/ folder from Foundation's /images/ folder to e-Tone's /images/ folder.

That should be it.

Link to comment
Share on other sites

12 hours ago, bsmither said:

Assuming you put the BXSlider plugin in the skin's /js/ folder, there are three more things to do:

1. Edit the skin template main.php:


From:

    {/literal}
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/enquire.min.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/superfish.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js"
    {literal}
]);

To:

    {/literal}
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/enquire.min.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/superfish.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/jquery.bxslider.js"
    {literal}
]);$('.bxslider').bxSlider({auto:true,captions:true});

Also in this file, near the top:

From:

<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-vertical.css" media="screen" />
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-mobile.css" media="screen and (max-width:650px)" />
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/icomoon/style.css" />

To:

<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-vertical.css" media="screen" />
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-mobile.css" media="screen and (max-width:650px)" />
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/jquery.bxslider.css" media="screen" />
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/icomoon/style.css" />

Need to have the template load the BXSlider javascript file, then a statement to start the BXSlider. The template also needs to load the BXSlider CSS file.

2. Copy the jquery.bxslider.css file from Foundation's /css/ folder to e-Tone's /styles/ folder.

3. Copy the /bxslider/ folder from Foundation's /images/ folder to e-Tone's /images/ folder.

That should be it.

Hi bsmither,

Thanks a lot for all that. 

I've followed each step, and double checked everything is correct and in the right place, but it still just seems to be just stacking images going down the page.

Link to comment
Share on other sites

On 12/11/2020 at 9:25 PM, Adam Shaw said:

I liked the look of it when compared to the "foundation" "kurouto" and "minimaliser" skins I've tried before.

Foundation is free and is continuously updated for new CubeCart releases but it was never designed to be used as it is but rather as a starting point for development.  Kurouto and minimaliser are just as old and unsupported

 

On 12/11/2020 at 9:25 PM, Adam Shaw said:

don't have the money to buy some of the newer, or more supported skins at the moment, so am taking the opportunity to learn as I go along.

While learning is always good and to be commended, unfortunately using old skins that arent supported and dont contain most updates from the last 2/3/4 years will cost you a lot more in the medium / long run and in addition most of these old skins, look well, OLD !

Link to comment
Share on other sites

I see in the main.php template, where the addition of the jquery.bxslider.php line was added to the list of scripts to load, the statement above it does not have a trailing comma. Please add a trailing comma after the ending quote mark.

"{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js",   <--- comma!

That should be the fix.

 

Link to comment
Share on other sites

35 minutes ago, bsmither said:

I see in the main.php template, where the addition of the jquery.bxslider.php line was added to the list of scripts to load, the statement above it does not have a trailing comma. Please add a trailing comma after the ending quote mark.


"{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js",   <--- comma!

That should be the fix.

 

Thanks for looking at that so quickly.  I've added the comma, but it's still just stacked.

7 hours ago, havenswift-hosting said:

Foundation is free and is continuously updated for new CubeCart releases but it was never designed to be used as it is but rather as a starting point for development.  Kurouto and minimaliser are just as old and unsupported

 

While learning is always good and to be commended, unfortunately using old skins that arent supported and dont contain most updates from the last 2/3/4 years will cost you a lot more in the medium / long run and in addition most of these old skins, look well, OLD !

You see...you learn something every day!  I thought, as I was taking these things straight from the CubeCart extension marketplace that they would be up to date.

I've had a look at your website, and would like to see some examples of the 3 skins you offer.  I've located them on your site, but I can't find any way to see them "in action".

My current hosting package is paid until August 2021, but i'd be interested in finding out more about your hosting, the levels of support for things like SEO and the advice on "other plugins and code snippets which might meet my requirements"

Thanks

Adam

Link to comment
Share on other sites

25 minutes ago, Adam Shaw said:

I've had a look at your website, and would like to see some examples of the 3 skins you offer.  I've located them on your site, but I can't find any way to see them "in action".

Thanks

Adam

Please disregard this bit, I've found the example website via extensions, but couldn't work out how to change the skin from "Retail Therapy"

Link to comment
Share on other sites

I see the problem now is that the command to start the BXSlider:

$('.bxslider').bxSlider({auto:true,captions:true});

is being executed before Modernizr loads the actual script, even though the loader is above the start command.

So, let's do it this way instead:

In the file script.js, make this edit:

From:
$(document).ready(function(){
	$('ul.sf-menu').superfish();
});

To:
$(document).ready(function(){
	$('ul.sf-menu').superfish();
	$('.bxslider').bxSlider({auto:true,captions:true});
});

Then, in main.php, remove the recently added:
$('.bxslider').bxSlider({auto:true,captions:true});

and change the order of filenames:

    "https://www.diffgif.co.uk/skins/e-tone/js/enquire.min.js",
    "https://www.diffgif.co.uk/skins/e-tone/js/superfish.js",
    "https://www.diffgif.co.uk/skins/e-tone/js/jquery.bxslider.js",
    "https://www.diffgif.co.uk/skins/e-tone/js/script.js"

Because script.js has changed, you may need to force your browser to reload page resources.

 

Link to comment
Share on other sites

1 hour ago, bsmither said:

I see the problem now is that the command to start the BXSlider:


$('.bxslider').bxSlider({auto:true,captions:true});

is being executed before Modernizr loads the actual script, even though the loader is above the start command.

So, let's do it this way instead:


In the file script.js, make this edit:

From:
$(document).ready(function(){
	$('ul.sf-menu').superfish();
});

To:
$(document).ready(function(){
	$('ul.sf-menu').superfish();
	$('.bxslider').bxSlider({auto:true,captions:true});
});

Then, in main.php, remove the recently added:
$('.bxslider').bxSlider({auto:true,captions:true});

and change the order of filenames:

    "https://www.diffgif.co.uk/skins/e-tone/js/enquire.min.js",
    "https://www.diffgif.co.uk/skins/e-tone/js/superfish.js",
    "https://www.diffgif.co.uk/skins/e-tone/js/jquery.bxslider.js",
    "https://www.diffgif.co.uk/skins/e-tone/js/script.js"

Because script.js has changed, you may need to force your browser to reload page resources.

 

Its working!!!!

Thank you so much bsmither for sticking with me and getting this going, it's much appreciated.

Link to comment
Share on other sites

14 hours ago, Adam Shaw said:

You see...you learn something every day!  I thought, as I was taking these things straight from the CubeCart extension marketplace that they would be up to date.

There is absolutely no guarantee that any extension in the marketplace (skins or plugins) are updated or supported - there are a great number that had an initial release and the developer has disappeared.  You always need to check the date it was last updated - it is possible for plugins to sometimes go many months (or longer) without needing an update but skins should really be updated with many CubeCart core updates, especially major version changes for example the recent 6.2.X to 6.4.X update

I will contact you via PM regarding the other questions

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...