magento ultimate banner module user manual

ULTIMATE BANNER MODULEMAGENTO, V1.0 (BETA)

INSTALLATION & USER MANUAL

V1.0, DECEMBER 13, 2012

TAUROS MEDIA NEDERLAND B.V. POSTBUS 75035, 1077 AA AMSTERDAM [email protected]

USER MANUAL – ULTIMATE BANNER MODULE v1.0 1

1. INDEX

1 Index --------------------------------------------------------------------------------------------------------------- 2

2 Introduction ------------------------------------------------------------------------------------------------------- 3

3 Feature set --------------------------------------------------------------------------------------------------------- 3

4 Package ------------------------------------------------------------------------------------------------------------ 45 Requirements ----------------------------------------------------------------------------------------------------- 4

6 Installation --------------------------------------------------------------------------------------------------------- 4

7 Configuration------------------------------------------------------------------------------------------------------- 6

Create banner ----------------------------------------------------------------------------------------------------- 6

Create slides for banner----------------------------------------------------------------------------------------- 10

Create layers for slides------------------------------------------------------------------------------------------ 11

Insert code to display banner---------------------------------------------------------------------------------- 14

8 Change log ---------------------------------------------------------------------------------------------------------19

9 FAQ -------------------------------------------------------------------------------------------------------- ----------19


2. INTRODUCTION

Tauros Media’s Ultimate Banner module is developed for webshop owners who have a Magento webshop or Magento developers who constantly struggle to implement decent looking banners on their frontend. Currently available free as well as paid banner modules in the marketplace are very limited in their functionalities and/or are very cumbersome to use.

Our Ultimate banner module is a webshop owner’s banner dreams come true. Its simplistic user interface and a very wide range of features make it an ultimate choice when it comes to Magentofrontend banners.

3. FEATURE SET

The Ultimate banner module is highly configurable and hence is only limited by the imagination of its user.You can configure almost every single aspect of your banners.You can put banners on almost any section of your webshop. Homepage, list view pages, CMS pages, product pages, side columns are some of the most widely used positions for banners and with Ultimate banner module you can easily put fancy banners at all these places and more.

The Ultimate banner module has the following set of features:

BANNERS

- Ability to create multiple/unlimited number of banners.- Ability to configure different banner sizes for each banner. - Banners can be easily placed on any page (Product list, Homepage, side columns, CMS pages etc.).- ‘Automatic Rotation’ of sliders can be enabled or disabled individually for banners.- Randomization of sliders can be enabled or disabled individually for banners (Ex. add 20 images to banner but randomly show only 4 at any time).- Banners can also be placed inside frontend custom module blocks made by us or 3rd parties with minimal code changes (Ex. Brands page module, Shops module etc.).

PLAY/PAUSE/STOP BUTTONS

- You can choose from a large selection of play/pause/stop buttons.- You can upload your own custom play/pause/stop buttons to match your design/theme.- You can enable/disable play/pause/stop buttons individually.- You can change/manage position of play/pause/stop buttons individually.

LOADER ANIMATIONS

- Large selection of loader animations available to choose from.- Ability to upload custom loader animation.- Ability to enable/disable loader animation.- Ability to change position of loader animation.

NUMBERS & BOXES/BOXES POSITION MARKERS

- You can choose between ‘Numbers & boxes’ and ‘Boxes’ navigation type.- Ability to enable/disable navigation tabs.- Ability to change position of navigation tabs.


4. PACKAGE

The package contains:

4.1. Ultimate Banner Module.

4.2. Module installation and user manual.

4.3. Quick reference guide.

5. REQUIREMENTS

5.1. Magento webshop (Magento CE 1.5.X and above, EE 1.10.X and above) and working knowledge of Magento backend.

5.2. Cpanel/server ftp access (to upload module files).

5.3. An Up-to-date Test environment (separate from but exact copy of your live setup)*.

5.4. Ioncube should be installed on your live as well as test server. You can get the appropriate version for your server from: http://www.ioncube.com/loaders.php

*As suggested by Magento, new extensions/modules should never be directly installed on live setup. Always try on a Test setup first. Also, it is a good practice to make backups of both Magento and the database before installing any extension.

6. INSTALLATION

At this point we assume that you have no other banner module installed on your webshop.If you have, then kindly disable it from yourrootfolder/app/etc/modules/yourbannermodule.xml

6.1. Download and unzip the Ultimate banner module directory.

6.2. Open the /Ultimate-Banner-Module folder, here you can see the ‘app’, ‘js’, ‘media’ and ‘skin’ folders. These folders contain the module files.

6.3. Upload the ‘app, js, media & skin’ folders to your Magento shop directory using your favorite FTP client. This will not overwrite any files from your webshop folders.

6.4. Additionally, if you have a custom theme implemented in your webshop (you most probably have) then you will have to manually upload the following files from module package to custom theme folder of your Magento installation:

Copy all files/folders from following module file path:Ultimate-banner-module\app\design\frontend\default\default\...to your webshop file path: …/app/design/frontend/default/yourcustomthemefolder/…

There are 2 folders (layout and templates) that need to be copied to your customer theme folder.


On some systems if you get a prompt asking whether to overwrite the folder, please select merge instead

6.5. Now log in to your Magento backend. Go to System > Cache management.

6.6. Click ‘Select All’. Select ‘Refresh all’ from the ‘Actions’ drop-down menu and click ‘Submit’.

Refresh the ‘Cache’ irrespective of them being enabled or disabled.

6.7. Log out of the admin panel and login again.

You will see a new tab ‘Ultimate banner’ in top menu of your admin panel.

Now your Ultimate Banner module is ready to be used.

We will now explain how you can create, configure and display awesome banners on your frontend using our Ultimate Banner Module.


7. CONFIGURATION

There are 4 major stages of creating and displaying banners using this module:

7.1. Create banner and configure navigation buttons (required).7.2. Create multiple sliders for the banner you just created (required).7.3. Create layer content for each of these sliders (can be skipped if you want simple banners).7.4. Insert the banner code snippet at correct places in backend to display it on frontend (required).

Let’s take up each stage one by one.

7.1. CREATE BANNER AND CONFIGURE NAVIGATION BUTTONS.

To create banners go to Ultimate Banner > Manage Banners > Click on ‘Add new banner’ button.

It will open a blank ‘New banner’ page.This page will have 4 subsections which can be accessed via its left column.

7.1.A ITEM INFORMATION: This section controls the basic settings of a banner. You have to always set values in this section as all these fields are required to make your banner functional.

FIELD EXPLANATION

NAME: You can fill in your banner name here. Fill in something meaning full which you can refer to later on. Ex: ‘Homepage banner’ or ‘Shoes category page banner’.

ENABLE BANNER: You can enable or disable the banner from here. Keep it on ‘enabled’ when creating a new banner.

BANNER WIDTH AND HEIGHT: You can set your banner dimensions on frontend from these 2 fields. Enter only numeric values (in pixels). Do not add units (px or xm or pt or mm etc.) after the


value.ENABLE AUTO ROTATE: You can enable or disable auto rotation of slides from here.If you keep it ‘enabled’ then the slides will transition to next one on their own (after time set in slide time field) on frontend.If it is ‘disabled’ then it will load the first slide and that slide will be displayed till the visitor clicks on next, previous or navigation buttons.

SHOW RANDOM IMAGES: You can choose to display fixed number of slides selected randomly out of all available slides. If you keep it on disabled then it will display all slides in the order they were created.

NO. OF RANDOM IMAGES: From this field you can choose the number of slides that it will randomly select and display.Ex. You can add 20 slides to a banner but randomly show only 4 at any time.

SELECT BANNER TRANSITION: This is the most exciting field of the setup. You can select your favorite slide transition effect from here. Try different transition effect before selecting the one which suits your webshop’s character the best.You already have multiple amazing transition effects to choose from and we will be adding more new exciting effects in later version of the module.

TOTAL VIEWS: From this field you can control how many times each banner is displayed.Fill in ‘0’ to display it unlimited number of times.

SLIDE TIME: This field controls the time for which each slide is displayed on frontend. Fill in values in seconds without any suffix line ‘secs’ or ‘mins’.Keep a lower value like ‘1’ if you are displaying simple slide images.Keep a higher value if you plan to display dynamic content as layers on slide images.Users will need time to notice and read the layer content as they unfold on frontend.

Once you configure this section you can jump to stage 7.2 of creating sliders if you want plain banner without any navigation.Continue to section B, C and D if you want to display navigation components on your banner.

7.1.B SELECT BUTTONS: In this section you can choose from a wide collection of available play pause next previous buttons. You need to choose the buttons in pairs (play-pause & next-previous).


7.1.C LOADING ANIMATIONS: In this section you can choose from a wide collection of available loading animations to display on your banners.


7.1.D POSITION MARKERS: In this section you can configure position markers for all your navigation components (play/pause, next previous, slide tab etc.).


For exact positioning of each component/button we have used top-edge and left-edge of the banners as reference points. You will have to get these button position values (in pixels) from either your designer/developer or you can try out different values to get the perfect location for these buttons yourself.

Following image explains how to configure position of buttons for your banner:

Here you may choose to display or not display different navigation components like you may want to show play-pause buttons but not loading animation or vice-versa.Configure only the buttons that you want to display and have set as enabled.

Do not forget to save your work every now and then using ‘Save and continue’ buttons present in top right corner.

Following images explains Tab settings section: All field names are self-explanatory.

Configure the last 9 fields only if you have selected navigation type as ‘Boxes and numbers’.They are not required for ‘Boxes’ type navigation.

You can fill in any custom values as per your design/requirement but make sure that you fill only numbers in numeric fields and color codes in color fields.


EX. Output of example values shown in above 2 images will look like this on frontend:

Ignore the background image, it’s just one of the slides. Notice the navigation block:Here navigation type was selected as ‘Boxes and numbers’.Tabs were of 30X30 px (widthXheight) dimension. Display of Play-Pause button was enabled.Font colors and sizes are shown above.

You can upload custom button images (play, pause, next, previous & loading animations) for your banners from ‘Upload custom buttons’ section.

Ask your designer to create custom button images that complement your webshop theme/color-palate.

Do not forget to save all your work at all stages.

This completes the stage 1 of banner creation. Now you have to create multiple slides and associate them with this or any other banner.


7.2. CREATE SLIDES FOR THE BANNER

To create new slides go to Ultimate Banner > Manage Slides > and click on ‘Add New Slide’ button.

The page will load with ‘slide information’ section already open:

Fill in name of your slide.Upload slide image using ‘File browse’ field. You can upload jpg or png images of proportionate dimensions.Select banner: You have to select a banner in which you want to display this slide.You can associate a slide to multiple banners if those banners are of same dimensions.You can enable/disable this slide from status field.Save the slide.

Repeat this process for all the slides that you want to display in your banner(s).ie. If you want to display 4 different images in your banner then you will have to create 4 slides and upload respective images.

We will come back to ‘layers list’ section later on when we have covered ‘Create layers for your slides’ topic which is next.

At this step your ‘simple banner with multiple slides’ is ready to be displayed on frontend.You can skip step 7.2 and jump to 7.3 if you want to display simple banners (without content layer).

Now, if you wish to display active content like text, other smaller images, links, flash banners, videos etc. on your slides then you will have to create layers for those slides.

7.3. CREATE LAYERS FOR YOUR SLIDES


To create layers you need to first insert your content in a static block.Go to CMS > Static Blocks > Add new static block.

Creating static blocks is a standard Magento admin process and you should be comfortable with html or using Magento wysiwyg editor.

Once on fresh static block page,

Fill in block name and identifier. Use something meaningful that you can recognize later on.Select store view where your banner will be displayed eventually.Put the status as enabled.You can code/design/insert any content in this content field using the inbuilt editor or html.

There is no limit to what you can display as layer over your banner slides.You can insert flash banners, videos, other smaller images, text, hyperlinks etc. as content of layers.

All this content will be displayed as a layer over your banner slides.

Don’t forget to ‘Save’ the static block.

Ex: Code that displays the layer content shown in above shot is:


<div style="background: green; opacity: 0.4; filter: alpha(opacity=40); width: 300px; height: 100px;"><p><span style="font-size: xx-large;">This is text layer over slider images</span></p></div>

Its output on frontend looks like this:

This is just an example of a layer, you can display amazing content and completely design it as per your requirements.

Now that your static block is ready, we can create a new layer and associate it to this static block.

Go to Ultimate Banner > Manage Layers > Add new layer

Once on this new layer page:Fill in name of your layer.Select the static block you just created for this layer.

Save the layer.

Now your layer is ready to be associated with any slide of your choice.

To associate a layer to any slide you need to go back to your slides section.

Go to Ultimate Banner > Manage slides > Click on slide which you want to edit/associate a layer to.


Once the selected slide page loads:

Go to ‘Layers list’ section from left column.Click on ‘Reset filter’ button, this will list all available layers below.Tick/select the layer you had created for this slide.Mention layer location on slider in pixels (from top and left edge of the slide) in position fields.You can leave these blank if you want the layer to take default position (top-left corner).

Save slide.

You need to repeat these steps for all layers that you created for all your slides.

Now your ‘banner with multiple slides with layers’ is ready to be displayed on frontend.

All you have to do is insert the required code snippet at correct places in backend.

This takes us to last stage of the process.

7.4. INSERT ‘BANNER CODE SNIPPET’ AT CORRECT PLACES TO DISPLAY IT ON FRONTEND.

By this time your banner is ready to be displayed on frontend, but Magento does not know where it has to display these banners.You need to specify this by inserting required code snippet at correct places.

Before you start this, you need to have your ‘Banner ID’.


You can use same banner at a single place or multiple places, there is no restriction to that (as long as it fits your design).

7.4.A Now, if you want to display a banner on homepage or any other CMS page (text pages) then you need to insert this code snippet (replace ‘X’ with correct banner id) in your CMS page content area:

{{block type='bannerslider/banner' name='bannerslider' banner_id='X' template='bannerslider/bannerslider.phtml'}}

7.4.B. If you want to display banners on category/sub category pages then:

Create a static block for the banner from CMS > Static blocks > Insert the following code line (replace 'X' with your banner ID number) in content section:

{{block type='bannerslider/banner' name='bannerslider' banner_id='X' template='bannerslider/bannerslider.phtml'}}

Save block. Now go to 'Catalog > Manage Categories. Open the category you want to display the banner on. Go to 'Display Settings' tab and select the static block you just created in 'CMS Block' dropdown.


Save Category.

7.4.C. If you want to display banners in side columns of category pages then:

- Banner in left column:

Go to Catalog > Manage Categories. Open the category on which you want to display the side column banner. Go to 'custom design' tab. Insert the following code snippet with the correct banner id (replace 'X' with your banner id):

<reference name='left'> <block type='bannerslider/banner' name='bannerslider' template='bannerslider/bannerslider.phtml'> <action method='setData'> <name>banner_id</name> <value>X</value> </action> </block> </reference>

- Similarly for banner in right column:

Insert the following code snippet with the correct banner id (replace 'X' with your banner id)

<reference name='right'> <block type='bannerslider/banner' name='bannerslider' template='bannerslider/bannerslider.phtml'> <action method='setData'> <name>banner_id</name> <value>X</value> </action> </block> </reference>


7.4.D. You can also display banners in side columns of text pages.

Go to CMS > Pages > Page to which you want to add side column banner > Design.Here select appropriate layout from layout field.Insert the following code snippet with the correct banner id (replace 'X' with your banner id)

<reference name='right or left'> <block type='bannerslider/banner' name='bannerslider' template='bannerslider/bannerslider.phtml'> <action method='setData'> <name>banner_id</name> <value>X</value> </action> </block> </reference>

You can also request your developer to display the banners at any section of your webshop by adding the code snippet in related phtml files.

This covers all basic applications of the Ultimate Banner module.

As we said earlier, the applications of this module are only limited by imagination of its user.

We hope our Ultimate Banner Module makes all your banner dreams come true.

Feel free to write to us at [email protected] if you have any query, feedback or suggestions regarding the Ultimate Banner Module.


HELPWe have also created an on-board help section which has all basic instructions that you may need while creating banners for your webshop. You can access this help section from:Ultimate Banner > Help > Ultimate Banner Help.


8. CHANGE LOG

V 1.0. * Module launched, Manual created, Demo installed.

9. FAQ

1 CAN I SEE THE MODULE IN ACTION SOMEWHERE?

Yes, we have setup a demo to showcase capabilities of Ultimate Banner Module.You can access it at: Frontend: http://www.webshopmagento.nl/ultimatebanner/

2 HOW TO GET OPTIMAL PERFORMANCE FROM ULTIMATE BANNER MODULE?

Ultimate banner module upto a certain extent depends on quality of images you upload.Here are some suggestions that you may follow while creating slide images for your webshop:

- If you are using banners on homepage then we suggest that you keep the width of the image nearly equal to width of your webpage.

- Try to limit the size of the slide images to 1 MB. Large sized images take longer to load hence make your page load slower.

- Preferably use images in 'png' or jpg formats.- Do not use swf/flash files directly as a slide, use them as content in layers.- Do not try to upload video files directly in slides, use them as content inside layers.

3 IT SHOWS A 404 ERROR MESSAGE IN BACKEND AFTER UPLOADING THE MODULE FILES. WHY?

Please refresh Magento cache and log-out of the admin. Login again and continue using the Ultimate Banner Module.

4 I UPLOADED AND CONFIGURED EVERYTHING BUT MY BANNER DID NOT SHOW UP ON MY FRONTEND. WHY?

Make sure that you have completed basic steps of creating banners and slides.Also, copy the theme related files to your custom theme folder. Refer to installation section for more information.


magento ultimate banner module user manual

Internet