A banner extension for Magento 1.9 using NivoSlider and integrated for use with Bootstrap 3.
- Sliding home page banner
- Sliding sidebar banners
- Banner buttons
Needs completely refactoring and updating to make the code more modular, include tests and improve functionality.
Copy the 'app' and 'skin' folders to your Magento root directory.
NOTE: If you are using a custom theme, it's probably best to move the layouts, templates and skin assets to your theme's folder structure, for example:
app/design/frontend/[your-package]/[your-theme]/layout
app/design/frontend/[your-package]/[your-theme]/template
skin/frontend/[your-package]/[your-theme]/affinitycloud/acbanners
skin/frontend/[your-package]/[your-theme]/affinitycloud/acbanners
Once you have copied all files to your Magento root, log out of the admin and log back in to enable the plugin.
To setup the plugin correctly you must make sure that jQuery is setup to use no conflict mode within your themes primary JavaScript file:
$j = jQuery.noConflict();
If you are already using jQuery in no conflict mode, then please ignore this part.
This plugin uses NivoSlider and the default slider theme.
In order to use the plugin, you'll need to include the following within your footer template in order to pull through the plugins JavaScript files.
<?php echo $this->getChildHtml('banner.scripts') ?>
If you want to include the JS elsewhere in your theme (e.g. your head), you'll need to modify the XML layout file located at:
app/design/frontend/[your-package]/[your-theme]/layout/acbanners.xml
To include the banner within your template, simply copy and paste the following code where you'd like it to appear:
<?php echo $this->getChildHtml('slider') ?>
Adding images to the plugin is quite easy. Simply log in to your Magento admin and you'll notice a new menu item called 'Banners'.
NOTE: At the moment the side banners and banner buttons should not be used as they have not yet been updated to use the NivoSlider jQuery plugin or Bootstrap.
Follow these steps to add a banner to the slider:
- Hover over the 'Banners' menu item.
- Click 'Manage Banners'.
- Click 'Add Banner'.
- Give your banner a title, description, a URL if required, a sort order (to allow sorting of banners), and upload an image.
- Set the banner to 'Active' in order to show it on the frontend.
- Click 'Save Banner'
Your new banner should now show on the frontend of your store wherever you chose to include the slider.