6/04/2010

How can I create a flash banner for my nopcommerce

A flash banner on your homepage enables your nopcommerce more business friendly and stylish.

Example link:
http://www.ruochigroup.com/main/bcastr-example/

Example download:
http://bcastr.googlecode.com/svn/trunk/bcastr4/release/example/example.zip

Source code:
http://bcastr.googlecode.com/svn/trunk/bcastr4/release/src.zip

This tutorial is to let you know how to create one within 10 mins. You dont need to have any knowledge of html and flash, just do it step by step.

We're working based on an open source rotate project called "Bcastr"

Step1: Download and install nopcommerce on your local machine or hosting.
download and put bcastr4.swf into root folder

We'll change the Welcome to our store section into a flash banner.(click to view full image)
Step2: login to adminstration panel, go to Content Management -> Topics -> Homepage Text, click edit topic content

Step3: Click "<>" button between "pen" and "zoom in" button on the left bottom corner of the editor, remove all the text there.

Step4: copy and paste the following code, and make sure you have 3 images named slideshow1.jpg, slideshow2.jpg and slideshow3.jpg


I can't paste the code here it will automatically disappear for security reasons.
please copy it from here:
http://www.nopcommerce.com/boards/t/3126/ajax-your-nopcommerce-nopcommerce-themes5-total-computer2handbag-theme-free.aspx?p=8#18742
(click to view full image)



Step5: Click save and refresh the storefront

Result:(click to view full image)

FAQ:
1. how can I change the size of the flash?


change the width and height property here. make sure you the same size images to fit in, otherwise the images will be cut.

2. how can I change the nativagtion url when people click the banner

change (link)(link) ()-><>property

3. how can I add a new flash slice?

Add a new item below, be careful you need to add twice.the code is repeated twice for browser compatability.
4. How can I change the button color?
change the btnFocusColor

5. How can I change the rotate size
change the AutoPlayTime

6. If i have more problems how can you help?
Please leave a message here.


this tutorial is written by LarryLan www.osshop.biz
Posted by at
Labels:

6 comments:

  1. Spare Parts Pro14 February 2011 at 21:27

    Thanks for the tutorial. It's great start to learning nop.
    One question though on htmloutput. How to we prevent html encoding on the tags. The output ends up looking like this.
    <p>Some text.</>

    ReplyDelete
  2. Anonymous25 June 2011 at 21:30

    Very interesting post...I do have a question however. In this demo, you are displaying static image, i.e. I would love to display dynamic images such as displaying top 5 recent products. How can I dynamically display recent product in the flash file instead of just static images?

    ReplyDelete
  3. Anonymous17 August 2011 at 00:53

    I added a new slice, as directed, in two sections, but now nothing displays.....

    Help please

    ReplyDelete
  4. Sarvesh15 December 2011 at 12:01

    I folowed all steps but just blank section appears on home page

    ReplyDelete
  5. Anonymous29 February 2012 at 04:13

    Hi is there anyway to add an to these images?

    ReplyDelete

Subscribe to: Post Comments (Atom)