10.0.x
541 201 9965 Email Website
Contents
:
Search:

Home > Add-Ons > Responsive Templates

Responsive Templates

Installation Guide

Before You Begin

  • In order to safely complete this installation on a live website you need to be able to backup your site files and database, and have a plan and permission to restore them should you encounter a problem during the installation process.
  • Different hosting providers and environments will have different methods of backing up and restoring databases. Please work with your hosting company to discuss the backup and restore tools that are available to you.
  • This installation process requires a level of technical expertise. Specifically, you will need to edit SQL.
  • Please read through the entire installation guide and make sure you understand the installation process before you begin an installation on your live site. If there are any steps of this installation process that are unclear, please submit a ticket to http://support.aspdotnetstorefront.com to request assistance.
  • Before you begin please ensure that:
    • You have file access to the root of your website (FTP or RDC are the most common).
    • You have SuperAdmin Access to your AspDotNetStorefront site.
    • You are running AspDotNetStorefront version 10.0.2.

Installation

  1. Backup your database.
  2. Backup your site files.
  3. Copy the Web/Skins/Skin_1 folder into the /Skins folder on your live site.
  4. ​Open the /Schema/Skinning.sql file in a text editor, edit as needed, then copy the contents into your admin console under Configuration > Run SQL. Click Submit to execute the script.
  5. Click Refresh Store.

Editing Skinning.sql

​In Step 4 of the Installation procedure, you may want to edit the Skinning script before executing. Below is a breakdown of each section of the script with further explanation. The actual contents of the skinning script included in your installation package may vary. The below example uses Dean (Skin 1).

Skin ID

--Set the Skin ID here
DECLARE @SkinID INT
SET @SkinID = 1

 

This section defines the Skin ID variable, which can optionally be used further down in the script. By default, this isn't used in most scripts, so this can typically be left as-is.

If, for example, your current live site skin is in the folder Skin_7, and you install the new skin into the Skin_1 folder, you might want to set all of your stores and customers to use the new skin. You could use the SkinID variable to add the following script just below this section:

 

UPDATE Store SET SkinID = @SkinID
UPDATE Customer SET SkinID = @SkinID

Dev / Staging Environment

--Set Dev/Staging
--Images will work in Dev Environment as long as references DO NOT include a leading '/' character. If you're running this script in a dev environment, set @Environment = ''.
--Images will work in Staging Environment as long as references DO include a leading '/' character. If you're running this script in a staging environment, set @Environment = '/'.
DECLARE @Environment NVARCHAR(MAX)
SET @Environment = ''
 
DECLARE @ImagesPath NVARCHAR(MAX)
SET @ImagesPath = CAST(@Environment AS NVARCHAR(MAX))+'(!SkinPath!)/images/'

 

This section defines whether you're running the script in a development or staging environment. If you plan to run this in a local/development environment first, to test out and modify the skin before applying to your live site, you'll want to leave this as-is. If you're running this on your staging or live site, set the @Environment variable to SET @Environment = '/'

Adjusting this setting to '/' will allow the images included in topics to appear correctly in the admin console. Images, when referenced correctly in topics, will appear on the front-end of the site regardless of this setting.

 

XmlPackage Settings

--Set XmlPackages
UPDATE Product SET XmlPackage = 'product.tabbed-responsive.xml.config'
UPDATE Category SET XmlPackage = 'entity.responsivegrid.xml.config'
UPDATE Manufacturer SET XmlPackage = 'entity.responsivegrid.xml.config'
UPDATE Section SET XmlPackage = 'entity.responsivegrid.xml.config'

 

This section defines the product & entity xmlpackages (page layouts) used for all products & entities on the store. Adjust these to include the filenames of the XmlPackages you'd like to set globally throughout the store. Or delete these lines to keep your XmlPackage settings as they are. You can find the available filenames in the files on your live site under XmlPackages, and Skins/Skin_1/XmlPackages. If the same filename exists in both locations, the Skins/Skin_1/XmlPackages file will be used.

 

Update Store Settings

--Update AppConfigs
UPDATE AppConfig SET ConfigValue = 'true' WHERE Name = 'UseImagesForMultiNav';
UPDATE AppConfig SET ConfigValue = 'true' WHERE Name = 'RatingsEnabled';
UPDATE AppConfig SET ConfigValue = 'false' WHERE Name = 'Mobile.isEnabled';
UPDATE AppConfig SET ConfigValue = 'true' WHERE Name = 'ValidateCreditCardNumbers';
UPDATE AppConfig SET ConfigValue = '0' WHERE Name = 'FeaturedProducts.NumberOfItems';
UPDATE AppConfig SET ConfigValue = 'false' WHERE Name = 'Show404SuggestionLinks';
 
--Google AppConfigs    
UPDATE AppConfig SET ConfigValue = '' WHERE Name = 'Google.AnalyticsAccount';
UPDATE AppConfig SET ConfigValue = 'true' WHERE Name = 'Google.EcomOrderTrackingEnabled';

This section adjusts your store Settings (referred to as "AppConfigs" in the database). More information on each of these settings can be found in your live site admin console under Configuration > Settings.

 

Create New Store Settings

--Create New AppConfigs
DELETE FROM dbo.AppConfig WHERE Name = 'promo-window-enabled'
INSERT INTO AppConfig (SuperOnly,Name,ValueType,GroupName,[Description],ConfigValue) VALUES(0,'promo-window-enabled', 'boolean', 'DISPLAY','Set this to true to show the promo popup window, set this to false to turn it off completely', 'false')
DELETE FROM dbo.AppConfig WHERE Name = 'promo-window-cookie-expiration'
INSERT INTO AppConfig (SuperOnly,Name,ValueType,GroupName,[Description],ConfigValue) VALUES(0,'promo-window-cookie-expiration', 'integer', 'DISPLAY','Number of days until the promo window will show again for a visitor who has previously dismissed it.', '7')
DELETE FROM dbo.AppConfig WHERE Name = 'promo-window-time-delay'
INSERT INTO AppConfig (SuperOnly,Name,ValueType,GroupName,[Description],ConfigValue) VALUES(0,'promo-window-time-delay', 'integer', 'DISPLAY','Amount of time delay (in milliseconds) until the promo displays. For example: to delay for 5 seconds after page load, set this to 5000.', '5000')
 
DELETE FROM dbo.AppConfig WHERE Name = 'Show.Variant.Image'
INSERT INTO AppConfig (SuperOnly,Name,ValueType,GroupName,[Description],ConfigValue) VALUES(0,'Show.Variant.Image', 'boolean', 'DISPLAY','Show variant images on ''Responsive Variants in a List'' (product.variants-in-list.xml.config)', 'true')
DELETE FROM dbo.AppConfig WHERE Name = 'ShowSubcategoryImages'
INSERT INTO AppConfig (SuperOnly,Name,ValueType,GroupName,[Description],ConfigValue) VALUES(0,'ShowSubcategoryImages', 'boolean', 'DISPLAY','Show subcategory images on ''Responsive Entity Grid'' (entity.responsivegrid.xml.config)', 'false')
DELETE FROM dbo.AppConfig WHERE Name = 'ShowSkuOnProductPage'
INSERT INTO AppConfig (SuperOnly,Name,ValueType,GroupName,[Description],ConfigValue) VALUES(0,'ShowSkuOnProductPage', 'boolean', 'DISPLAY','Show SKU on product pages.', 'true')

Your responsive template includes some new settings which are used by some of the features specific to each of the Responsive Templates. This section of code will create the Settings on your store. After the script has been run, you can edit these new settings under Configuration > Settings in your store.

 

Create New Prompts

--String Resources
DECLARE @Locale VARCHAR(20)
SET @Locale = (SELECT ConfigValue FROM AppConfig WHERE Name = 'DefaultLocale')
IF @Locale IS NULL BEGIN SET @Locale = 'en-US' END
DELETE FROM dbo.StringResource WHERE Name = 'product.tablabels.Description' AND LocaleSetting = @Locale
INSERT INTO StringResource (Name,ConfigValue,LocaleSetting) VALUES('product.tablabels.Description', 'Description', @Locale)
DELETE FROM dbo.StringResource WHERE Name = 'product.tablabels.Reviews' AND LocaleSetting = @Locale
INSERT INTO StringResource (Name,ConfigValue,LocaleSetting) VALUES('product.tablabels.Reviews', 'Reviews', @Locale)
DELETE FROM dbo.StringResource WHERE Name = 'product.tablabels.ExtensionData' AND LocaleSetting = @Locale
INSERT INTO StringResource (Name,ConfigValue,LocaleSetting) VALUES('product.tablabels.ExtensionData', 'Other Info', @Locale)
DELETE FROM dbo.StringResource WHERE Name = 'product.tablabels.InventoryTable' AND LocaleSetting = @Locale
INSERT INTO StringResource (Name,ConfigValue,LocaleSetting) VALUES('product.tablabels.InventoryTable', 'Inventory', @Locale)
DELETE FROM dbo.StringResource WHERE Name = 'ContactUs.Page.Header' AND LocaleSetting = @Locale
INSERT INTO StringResource (Name,ConfigValue,LocaleSetting) VALUES('ContactUs.Page.Header', 'Contact Us', @Locale)
DELETE FROM dbo.StringResource WHERE Name = 'ResponsiveSkin.PhoneNumber' AND LocaleSetting = @Locale
INSERT INTO StringResource (Name,ConfigValue,LocaleSetting) VALUES('ResponsiveSkin.PhoneNumber', '1.800.123.4567', @Locale)

This section creates Prompts (referred to as "StringResources" in the database) that are used by some of the new Responsive Template features. Specifically, the product.tabbed-responsive.xml.config product page layout uses the product.tablabels... prompts to determine the tab names on the page just below the main product information. After the script has been run, you can edit these new prompts under Content > Manage Prompts in your store.

 

Topics

--Topics
DELETE FROM dbo.Topic WHERE Name = 'hometopintro'
INSERT INTO Topic (Name, Title, [Description], ShowInSiteMap) VALUES
(
    'hometopintro',
    'hometopintro',
    '
    (!TOPIC Name="0-home-content"!)
    <div class="clearfix"></div>
    ',
    0
);

Near the bottom of the skinning script, there are several sections of code that create and insert HTML descriptions into topics. These topics are embedded throughout your responsive template and are used to display things like your store's logo, phone number, social media icons, top navigation, footer, etc. 

 

For more information, or to get help with installing your new skin, please submit a ticket to our  Help Desk .



Actions
Print This Article
Bookmark
Email This Article
Previous Article
Next Article

Was this page helpful?YesNo