How To: Install and Manage Vibe Banner Rotator Add-On Mod for AspDotNetStoreFront

How To: Install and Manage Vibe Banner Rotator Add-On Mod for AspDotNetStoreFront

Applies To: Banner Rotator Add-Ons for AspDotNetStoreFront v8.0.0.0 to v9.2.000

The Banner Rotator is a simple utility to assign and manage multiple banner images to entities like categories, manufacturers and departments or the home page. When an entity or home page has multiple banners assigned to them, they will cycle through each. Additionally, a small visual indicates to the user how many slides there are and allows clicking to advance to the corresponding banner.

Before Installing Banner Rotator:

1. It is advised that you take a database backup, as well as a backup of your entire active skin folder before installing. This insures that any changes made are easily revocable. There are no core files overwritten by this update.

2. Note that general style and integration instructions have been provided, however some additional work - especially style adjustment - may be necessary to achieve a proper fit within your particular site.

INSTALLING BANNER ROTATOR

1. Run the SQL script in the /db folder. This automatically creates a new Library entity for the home page banner management, assigns the proper values to the corresponding AppConfigs, and creates necessary String Resources for Admin. Typically there is no reason to edit these AppConfig or String Resource values.

2. Copy files in /Web folder over to your web root. If you have customized your Admin menu, you will want to copy in the change from the provided Web\Admin\controls\AdminMenu.ascx.cs instead of overwriting it. Changes are notated, simply search the file for "vibe."

3. Edit your Web/App_Templates/skin_#/template.master file(s) (this file is not included with the add on) to include the following references above the stock core.js script tag in the <head> section. The css file will be dynamically loaded into the masterpage, however, ensure that the file name for the css file is alphabetically last following your other site css files.

<!-- Vibe Commerce Banner Rotator -->
<br><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><br><script type="text/javascript" src="jscripts/vibe/vibe.br.js"></script><br>
<!-- End -->
<br>

Note: If you wish to host jQuery locally, please download from: http://www.jquery.com and reference accordingly. If you already have a current reference to jQuery in your masterpage, you may either swap it with the one above or just omit it.

Note: You only need one reference to jQuery in your template. If you are using another Vibe Commerce add on, chances are, you already have this reference in your template file(s).



4. It is important to note that in version 9, several components that we relied upon to make the installation easier for the store admin were removed from the stock ASPDNSF software inadvertently. They plan on fixing this in version 9.1. For now, the method of integration involves pasting the code snippet below into your entity XMLPackage. It requires the parameters EntityName and EntityID. Many stock XmlPackages have this information already. We have provided an example of integration in the stock  entity.grid(sample).xml.config XmlPackage. If you need assistance with integration, please contact support@vibecommerce.com.

<!-- Vibe.BR code to inject Banner Rotator -->
<br><div id="bannerImage"></div><br><script type="text/javascript"><br>jQuery.post('vibe_bannerimage.aspx',{'entityname':'<xsl:value-of select="$EntityName"/<br>>','entityid':'<xsl:value-of select="$EntityID"/>'},function(data){showBanner(data)},'html')<br></script><br>
<!-- End -->

HOW TO SETUP BANNER ROTATOR


Initial Setup for an Entity Page:

1. To use the banner rotator in the content area of an entity page, ensure that the code from step 4 is integrated into your entity XmlPackage(s). If your XmlPackage is missing the EntityName and EntityID parameters, your banners will not show. Please see "How to Add Entity Parameters" in the Reference section below.

Initial Setup for a Home Page:

1. To use the banner rotator in the content area of the home page, do one of the following:
a. Paste this token into the topic hometopintro or other home page content topic:
(!XmlPackage Name="vibe.br-home.xml.config"!)

b. Paste this line into your page.default xmlpackage where you want the banner to display:
<xsl:value-of select="aspdnsf:XmlPackage('vibe.br-home.xml.config')" disable-output-escaping="yes"/>

CONFIGURATION FOR ENTITY PAGES

1. Navigate in Admin to the Banner Rotator page



2. Select the entity type and entity name to manage the banner assets for. e.g. Entity: Category, Category: Lighting


3. Browse for your image, input URL (optional) and input Alt Text (recommended)
4. Click Submit to save your data
5. Clicking Edit next to the banner record just provides the ability to overwrite the existing banner record's data.
6. Click Delete to delete the banner record



CONFIGURATION FOR HOME PAGE BANNERS
1. Follow steps 1 through 6 above, however, in step 2, choose Entity: Library, Library: Homebanner



STYLE FOR BANNER ROTATOR

1. Style for BR is managed in stylesheet style-vibe.br.css located in the skin folder of App_Themes

2. The default dimensions are 700 x 199px. Simply edit the corresponding values in the css file to change the width and height to match your site and banners

REFERENCE

App Configs:

Vibe.BR.EntityID: ID of the entity designated for your home page banner.
Vibe.BR.EntityName: Name of entity (Category,Manufacturer,Section,Genre,Vector,Library) containing the designated entity
for your home page banner.

How to Add Entity Parameters to your Entity XmlPackage:

1. Open your entity XmlPackage

2. After the <xsl:output method="html" omit-xml-declaration="yes" /> node, but before <xsl:template match="/">, insert the following code:

<xsl:param name="EntityName"><xsl:value-of select="/root/Runtime/EntityName" /></xsl:param><br><xsl:param name="EntityID"><xsl:value-of select="/root/Runtime/EntityID" /></xsl:param>

3. If this code already exists in the XmlPackage, it will throw an error.

For support questions, please email us at support@vibecommerce.com

Add Feedback