Difference between revisions of "Advanced Theme Manager"

From Documentation | Viadat Creations
Jump to: navigation, search
(Usage)
(Min Requirements, Installation)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
== About ==
+
== <span id="About" class="mw-headline">About</span> ==
=== Minimum Requirements ===
+
 
* Store Locator v2.0+
+
=== <span id="Minimum_Requirements" class="mw-headline">Minimum Requirements</span> ===
 +
 
 +
* Store Locator v4.0+ (since Advanced Theme Manager v2.0)
 
* [[Addons_Platform_Lite|Addons Platform Lite]]
 
* [[Addons_Platform_Lite|Addons Platform Lite]]
  
=== Benefits ===
+
=== <span id="Benefits" class="mw-headline">Benefits</span> ===
Design the look and feel of exactly how you want to present your Store Locator to website visitors without needing to directly change the base Store Locator plugin code.
+
 
 +
Design the look and feel of exactly how you want to present your Store Locator to website visitors without needing to directly change the base Store Locator plugin code.
  
 
Advanced Theme Manager gives the flexibility of creating multiple themes that use both HTML and template shortcode that represents different elements of the Store Locator's interface (such as the map, search results, search form, etc).
 
Advanced Theme Manager gives the flexibility of creating multiple themes that use both HTML and template shortcode that represents different elements of the Store Locator's interface (such as the map, search results, search form, etc).
  
 +
<br />
 +
'''[[Main_Page#Addons|«Back List of Addons]] | [http://www.viadat.com/products-page/ Purchase Addons Now»]'''
  
'''[[Main_Page#Addons|&laquo;Back List of Addons]] | [http://www.viadat.com/products-page/ Purchase Addons Platform Now&raquo;]'''
+
== <span id="Usage" class="mw-headline">Usage</span> ==
  
== Usage ==
+
=== <span id="Features" class="mw-headline">Features</span> ===
  
=== Features ===
 
 
# Modify the layout of your Store Locator map(s) by creating and modifying theme templates
 
# Modify the layout of your Store Locator map(s) by creating and modifying theme templates
 
# Modify the layout of the Search Results & the Info Windows (Bubbles) that display when an icon on a map is clicked
 
# Modify the layout of the Search Results & the Info Windows (Bubbles) that display when an icon on a map is clicked
 
# Uses HTML template shortcodes that make it possible to easily display any piece of information desired from the Store Locator's database, including custom fields created by other addons and by the [[Custom_Field_Manager|Custom Field Manager]]
 
# Uses HTML template shortcodes that make it possible to easily display any piece of information desired from the Store Locator's database, including custom fields created by other addons and by the [[Custom_Field_Manager|Custom Field Manager]]
  
=== Installation ===
+
=== <span id="Installation" class="mw-headline">Installation</span> ===
 +
 
 +
'''Advanced Theme Manager v2.0 and later:'''
 +
 
 +
''Note: All addons marked v2.0 and later are now fully WordPress plugins and can be installed as such''
 +
 
 +
# Upload the Advanced Theme Manager zip file (downloaded from your [https://www.viadat.com/account/ account page]) via '''WP Admin > Plugins > Add New > '''click''' 'Upload Plugin' '''button
 +
# Once upload is complete, turn on the addon using 'Activate' button (can also be done on '''WP Admin > Plugins''' page)
 +
# Once turned on, you can validate the addon by submitting your purchase key under '''WP Admin > Store Locator > Addons > Settings'''
 +
# Now you can then manage the addon's settings under '''WP Admin > Store Locator > Addons > Settings > Advanced Theme Manager'''
 +
<br>
 +
'''Before Advanced Theme Manager v2.0:'''
 +
 
 
# Install via the '''Addons > Marketplace''' page (visible with [[Addons_Platform|Addons Platform]] installed & activated). It will automatically be installed in your '''/wp-content/uploads/sl-uploads/addons/''' folder
 
# Install via the '''Addons > Marketplace''' page (visible with [[Addons_Platform|Addons Platform]] installed & activated). It will automatically be installed in your '''/wp-content/uploads/sl-uploads/addons/''' folder
 
# On '''Addons > Settings''', activate this addon using the same key that was used to activate the Addons Platform for that particular website
 
# On '''Addons > Settings''', activate this addon using the same key that was used to activate the Addons Platform for that particular website
 +
 
(Further usage tips & instructions included addon in its readme.txt file)
 
(Further usage tips & instructions included addon in its readme.txt file)
  
'''[[Main_Page#Addons|&laquo;Back List of Addons]] | [http://www.viadat.com/products-page/ Purchase Addons Platform Now&raquo;]'''
+
'''[[Main_Page#Addons|«Back List of Addons]] | [http://www.viadat.com/products-page/ Purchase Addons Now»]'''
  
 +
=== <span id="Creating_Templates_for_the_Store_Locator.27s_Main_Layout" class="mw-headline">Creating Templates for the Store Locator's Main Layout</span> ===
  
=== Creating Templates for the Store Locator's Main Layout ===
 
 
1. As of version 2.0, you can create your own template for the layout of the store locator(s) on your website.
 
1. As of version 2.0, you can create your own template for the layout of the store locator(s) on your website.
  
Line 34: Line 51:
 
3. The Store Locator main layout template can use HTML and 10 shortcode labels: '''&#91;&#91;sl_map_header&#93;&#93;''', '''&#91;&#91;sl_map_body&#93;&#93;''', '''&#91;&#91;sl_map_results&#93;&#93;''', '''&#91;&#91;sl_form_search&#93;&#93;''', '''&#91;&#91;sl_form_button&#93;&#93;''', '''&#91;&#91;sl_form_cities&#93;&#93;''', '''&#91;&#91;sl_form_radius&#93;&#93;''', '''&#91;&#91;hook_sl_header&#93;&#93;''', '''&#91;&#91;sl_form_start&#93;&#93;''', '''&#91;&#91;sl_form_end&#93;&#93;'''
 
3. The Store Locator main layout template can use HTML and 10 shortcode labels: '''&#91;&#91;sl_map_header&#93;&#93;''', '''&#91;&#91;sl_map_body&#93;&#93;''', '''&#91;&#91;sl_map_results&#93;&#93;''', '''&#91;&#91;sl_form_search&#93;&#93;''', '''&#91;&#91;sl_form_button&#93;&#93;''', '''&#91;&#91;sl_form_cities&#93;&#93;''', '''&#91;&#91;sl_form_radius&#93;&#93;''', '''&#91;&#91;hook_sl_header&#93;&#93;''', '''&#91;&#91;sl_form_start&#93;&#93;''', '''&#91;&#91;sl_form_end&#93;&#93;'''
  
* '''&#91;&#91;sl_map_header&#93;&#93;''' : contains the opening & closing HTML '&lt;form&gt;' tags, search input field, search button, city dropdown, radius dropdown, and all hooks placed there (represented by '''&#91;&#91;sl_form_search&#93;&#93;''', '''&#91;&#91;sl_form_button&#93;&#93;''', '''&#91;&#91;sl_form_cities&#93;&#93;''', '''&#91;&#91;sl_form_radius&#93;&#93;''', '''&#91;&#91;hook_sl_header&#93;&#93;''' shortcodes -- use these shortcodes for more control of the layout instead of '''&#91;&#91;sl_map_header&#93;&#93;''' when creating a template. Enclose form-related shortcodes between '''&#91;&#91;sl_form_start&#93;&#93;''' & '''&#91;&#91;sl_form_end&#93;&#93;''')
+
<ul>
* '''&#91;&#91;sl_map_body&#93;&#93;''' : contains the map of results icons and the map footer div
+
<li>'''&#91;&#91;sl_map_header&#93;&#93;''' : contains the opening & closing HTML '&lt;form&gt;' tags, search input field, search button, city dropdown, radius dropdown, and all hooks placed there (represented by '''&#91;&#91;sl_form_search&#93;&#93;''', '''&#91;&#91;sl_form_button&#93;&#93;''', '''&#91;&#91;sl_form_cities&#93;&#93;''', '''&#91;&#91;sl_form_radius&#93;&#93;''', '''&#91;&#91;hook_sl_header&#93;&#93;''' shortcodes -- use these shortcodes for more control of the layout instead of '''&#91;&#91;sl_map_header&#93;&#93;''' when creating a template. Enclose form-related shortcodes between '''&#91;&#91;sl_form_start&#93;&#93;''' & '''&#91;&#91;sl_form_end&#93;&#93;''')</li>
* '''&#91;&#91;sl_map_results&#93;&#93;''' : contains the listing of search results after a search is performed
+
<li>'''&#91;&#91;sl_map_body&#93;&#93;''' : contains the map of results icons and the map footer div</li>
 +
<li>'''&#91;&#91;sl_map_results&#93;&#93;''' : contains the listing of search results after a search is performed</li></ul>
 +
 
 +
=== <span id="Creating_Templates_for_the_Location_Bubble_.28InfoWindow.29_and_Search_Results" class="mw-headline">Creating Templates for the Location Bubble (InfoWindow) and Search Results</span> ===
  
=== Creating Templates for the Location Bubble (InfoWindow) and Search Results ===
 
 
1. You can create a template for the layout of the Location Information Bubble attached to each icon on the Store Locator map by creating a '''bubble.php''' file in the '''/wp-content/uploads/sl-uploads/themes/{your-theme}/''' directory
 
1. You can create a template for the layout of the Location Information Bubble attached to each icon on the Store Locator map by creating a '''bubble.php''' file in the '''/wp-content/uploads/sl-uploads/themes/{your-theme}/''' directory
  
Line 45: Line 64:
 
3. Templates (for the Location Information Bubble & the Search Results) can use HTML and a template shortcode that represents data from the Store Locator database (template shortcode should not be confused with the main shortcode '''[STORE-LOCATOR]''' that you place in a page or post)
 
3. Templates (for the Location Information Bubble & the Search Results) can use HTML and a template shortcode that represents data from the Store Locator database (template shortcode should not be confused with the main shortcode '''[STORE-LOCATOR]''' that you place in a page or post)
  
=== Using Template Shortcode ===
+
=== <span id="Using_Template_Shortcode" class="mw-headline">Using Template Shortcode</span> ===
 +
 
 
1. There are two types of template shortcode: basic & conditional
 
1. There are two types of template shortcode: basic & conditional
  
Line 52: Line 72:
 
* '''Format:''' '''&#91;&#91;{data_label}&#93;&#93;''', where {data_label} is any available label for database information such as '''sl_city''', '''sl_state''', '''sl_zip''', etc.
 
* '''Format:''' '''&#91;&#91;{data_label}&#93;&#93;''', where {data_label} is any available label for database information such as '''sl_city''', '''sl_state''', '''sl_zip''', etc.
 
* '''Example:''' '''&#91;&#91;sl_city&#93;&#93;, &#91;&#91;sl_state&#93;&#93; &#91;&#91;sl_zip&#93;&#93;''' in your template would display something such as '''Washington, DC 20001'''
 
* '''Example:''' '''&#91;&#91;sl_city&#93;&#93;, &#91;&#91;sl_state&#93;&#93; &#91;&#91;sl_zip&#93;&#93;''' in your template would display something such as '''Washington, DC 20001'''
 
+
<br>
 
3. '''Conditional Template Shortcode:'''
 
3. '''Conditional Template Shortcode:'''
  
* '''Format:''' '''&#91;&#91;if:{data_label}||{your text or html here}&#93;&#93;''' or '''&#91;&#91;if:{data_label}||sl_details.{data_label_2}, {your text or html}&#93;&#93;'''. This allows you to show information depending on whether another piece of information exists. {data_label} and {data_label_2} can be the same label, but don't need to be.
+
* '''Format:''' '''&#91;&#91;if:{data_label}||{your text or html here}&#93;&#93;''' or '''&#91;&#91;if:{data_label}||sl_details.{data_label_2}, {your text or html}&#93;&#93;'''. This allows you to show information depending on whether another piece of information exists. {data_label} and {data_label_2} can be the same label, but don't need to be.
* '''Example:''' '''&#91;&#91;sl_address&#93;&#93;&#91;&#91;if:sl_address||&lt;br&gt;&#93;&#93;''' would display something such '''100 Constitution Ave&lt;br&gt;''', but if a location's '''sl_address''' attribute is empty or undefined, it will output nothing (in this example, the HTML line break '''&lt;br&gt;''' only occurs if '''sl_address''' is defined for a specific location).
+
* '''Example:''' '''&#91;&#91;sl_address&#93;&#93;&#91;&#91;if:sl_address||&lt;br&gt;&#93;&#93;''' would display something such '''100 Constitution Ave&lt;br&gt;''', but if a location's '''sl_address''' attribute is empty or undefined, it will output nothing (in this example, the HTML line break '''&lt;br&gt;''' only occurs if '''sl_address''' is defined for a specific location).
* '''Example #2:''' '''&#91;&#91;if:sl_city||sl_details.sl_city,&#93;&#93;''' would display something such as '''Washington,''' if '''sl_city''' is defined for a specific location, and nothing otherwise. In this conditional, a variable with the format of '''sl_details.{data_label_2}''' is combined with a comma ''' , ''' (all data labels after the '''||''' should be preceded with '''sl_details.''', otherwise is will be interpretted literally to show 'sl_city' instead of the actual city value of a specific location).
+
* '''Example #2:''' '''&#91;&#91;if:sl_city||sl_details.sl_city,&#93;&#93;''' would display something such as '''Washington,''' if '''sl_city''' is defined for a specific location, and nothing otherwise. In this conditional, a variable with the format of '''sl_details.{data_label_2}''' is combined with a comma ''',''' (all data labels after the '''||''' should be preceded with '''sl_details.''', otherwise is will be interpretted literally to show 'sl_city' instead of the actual city value of a specific location).

Latest revision as of 21:44, 30 November 2018

About

Minimum Requirements

Benefits

Design the look and feel of exactly how you want to present your Store Locator to website visitors without needing to directly change the base Store Locator plugin code.

Advanced Theme Manager gives the flexibility of creating multiple themes that use both HTML and template shortcode that represents different elements of the Store Locator's interface (such as the map, search results, search form, etc).


«Back List of Addons | Purchase Addons Now»

Usage

Features

  1. Modify the layout of your Store Locator map(s) by creating and modifying theme templates
  2. Modify the layout of the Search Results & the Info Windows (Bubbles) that display when an icon on a map is clicked
  3. Uses HTML template shortcodes that make it possible to easily display any piece of information desired from the Store Locator's database, including custom fields created by other addons and by the Custom Field Manager

Installation

Advanced Theme Manager v2.0 and later:

Note: All addons marked v2.0 and later are now fully WordPress plugins and can be installed as such

  1. Upload the Advanced Theme Manager zip file (downloaded from your account page) via WP Admin > Plugins > Add New > click 'Upload Plugin' button
  2. Once upload is complete, turn on the addon using 'Activate' button (can also be done on WP Admin > Plugins page)
  3. Once turned on, you can validate the addon by submitting your purchase key under WP Admin > Store Locator > Addons > Settings
  4. Now you can then manage the addon's settings under WP Admin > Store Locator > Addons > Settings > Advanced Theme Manager


Before Advanced Theme Manager v2.0:

  1. Install via the Addons > Marketplace page (visible with Addons Platform installed & activated). It will automatically be installed in your /wp-content/uploads/sl-uploads/addons/ folder
  2. On Addons > Settings, activate this addon using the same key that was used to activate the Addons Platform for that particular website

(Further usage tips & instructions included addon in its readme.txt file)

«Back List of Addons | Purchase Addons Now»

Creating Templates for the Store Locator's Main Layout

1. As of version 2.0, you can create your own template for the layout of the store locator(s) on your website.

2. You can create a template for the main layout of the Store Locator interface by creating a layout-template.php file in the /wp-content/uploads/sl-uploads/themes/{your-theme}/ directory

3. The Store Locator main layout template can use HTML and 10 shortcode labels: [[sl_map_header]], [[sl_map_body]], [[sl_map_results]], [[sl_form_search]], [[sl_form_button]], [[sl_form_cities]], [[sl_form_radius]], [[hook_sl_header]], [[sl_form_start]], [[sl_form_end]]

  • [[sl_map_header]] : contains the opening & closing HTML '<form>' tags, search input field, search button, city dropdown, radius dropdown, and all hooks placed there (represented by [[sl_form_search]], [[sl_form_button]], [[sl_form_cities]], [[sl_form_radius]], [[hook_sl_header]] shortcodes -- use these shortcodes for more control of the layout instead of [[sl_map_header]] when creating a template. Enclose form-related shortcodes between [[sl_form_start]] & [[sl_form_end]])
  • [[sl_map_body]] : contains the map of results icons and the map footer div
  • [[sl_map_results]] : contains the listing of search results after a search is performed

Creating Templates for the Location Bubble (InfoWindow) and Search Results

1. You can create a template for the layout of the Location Information Bubble attached to each icon on the Store Locator map by creating a bubble.php file in the /wp-content/uploads/sl-uploads/themes/{your-theme}/ directory

2. You can create a template for the layout of the Search Results listings by creating a search-results.php file under /wp-content/uploads/sl-uploads/themes/{your-theme}/

3. Templates (for the Location Information Bubble & the Search Results) can use HTML and a template shortcode that represents data from the Store Locator database (template shortcode should not be confused with the main shortcode [STORE-LOCATOR] that you place in a page or post)

Using Template Shortcode

1. There are two types of template shortcode: basic & conditional

2. Basic Template Shortcode:

  • Format: [[{data_label}]], where {data_label} is any available label for database information such as sl_city, sl_state, sl_zip, etc.
  • Example: [[sl_city]], [[sl_state]] [[sl_zip]] in your template would display something such as Washington, DC 20001


3. Conditional Template Shortcode:

  • Format: [[if:{data_label}||{your text or html here}]] or [[if:{data_label}||sl_details.{data_label_2}, {your text or html}]]. This allows you to show information depending on whether another piece of information exists. {data_label} and {data_label_2} can be the same label, but don't need to be.
  • Example: [[sl_address]][[if:sl_address||<br>]] would display something such 100 Constitution Ave<br>, but if a location's sl_address attribute is empty or undefined, it will output nothing (in this example, the HTML line break <br> only occurs if sl_address is defined for a specific location).
  • Example #2: [[if:sl_city||sl_details.sl_city,]] would display something such as Washington, if sl_city is defined for a specific location, and nothing otherwise. In this conditional, a variable with the format of sl_details.{data_label_2} is combined with a comma , (all data labels after the || should be preceded with sl_details., otherwise is will be interpretted literally to show 'sl_city' instead of the actual city value of a specific location).