Created: 11/02/2015
By: ThemeStarz
Email: support@themestarz.net
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Spotter loads some external files from assets/external folder, so you need to edit them only
on one place. External folder contains these files:
In order to get JSON loading data you need to install localhost server. You can use XAMPP. Then you need to:
*your-xampp-installation-\htdocslocalhost/spotter (or other path)All data necessary form map are stored in JSON format. For default .json files are renamed to .json.txt
for compatibility with all hosting providers. If you know, that your hosting provider supports JSON files, than you can rename it back to .json.
items.json.txt:
{
"data": [
{
"id": 1,
"category": "real_estate",
"title": "Steak House Restaurant",
"location": "63 Birch Street",
"latitude": 51.541599,
"longitude": -0.112588,
"url": "item-detail.html",
"type": "Apartment",
"type_icon": "assets/icons/store/apparel/umbrella-2.png",
"rating": 4,
"gallery":
[
"assets/img/items/1.jpg",
"assets/img/items/5.jpg",
"assets/img/items/4.jpg"
],
"features":
[
"Free Parking",
"Cards Accepted",
"Wi-Fi",
"Air Condition",
"Reservations",
"Teambuildings",
"Places to seat"
],
"date_created": "2014-11-03",
"price": "$2500",
"featured": 0,
"color": "",
"person_id": 1,
"year": 1980,
"special_offer": 0,
"item_specific":
{
"bedrooms": 2,
"bathrooms": 2,
"rooms": 4,
"garages": 1,
"area": 240
},
"description": "Curabitur odio nibh, luctus non ...",
"last_review": "Curabitur odio nibh, luctus non ...",
"last_review_rating": 5
}
]
}
These data are loaded by the map and displayed in infobox (if you click on marker) and in the left sidebar (if you are using it)
You don't need to use all of these fields that are shown above. Only these are necessary in order to map works properly:
{
"data": [
{
"id": 1,
"category": "real_estate",
"title": "Steak House Restaurant",
"location": "63 Birch Street",
"latitude": 51.541599,
"longitude": -0.112588,
"url": "item-detail.html",
"type": "Apartment",
"type_icon": "assets/icons/store/apparel/umbrella-2.png"
}
]
}
Spotter allows you to use not only Google maps, but also OpenStreetMap and HERE maps, thanks to Leaflet plugin. There are two scripts to load map on page:
To load Google Maps you need to put this code before <body> tag ends:
<script>
var _latitude = 51.541216;
var _longitude = -0.095678;
var jsonPath = 'assets/json/real-estate.json.txt';
$.getJSON(jsonPath)
.done(function(json) {
createHomepageGoogleMap(_latitude,_longitude,json);
})
.fail(function( jqxhr, textStatus, error ) {
console.log(error);
})
;
</script>
Description
Loading OSM or HERE map is similar. Put this code before <body> tag ends:
<script>
var _latitude = 51.541216;
var _longitude = -0.095678;
var jsonPath = 'assets/json/real-estate.json.txt';
var mapProvider = 'Acetate.all';
$.getJSON(jsonPath)
.done(function(json) {
createHomepageOSM(_latitude,_longitude,json,mapProvider);
})
.fail(function( jqxhr, textStatus, error ) {
console.log(error);
})
;
</script>
Description
Leaflet plugin can load variety of maps depending on your needs. To choose your favorite follow these steps:
mapProvider place copied Provider nameModal window is pop-up window that is displayed after click on "Quick view" button when you hover over item, or if you click the item in results sidebar in the map. It displays useful information about item without opening new page.
Modal window function:
function quickView(id){
$.ajax({
type: 'POST',
url: 'assets/external/_modal.html',
data: id,
success: function (data) {
$('body').append(data);
}
});
}
An id variable is ready for case you want to use live AJAX call of PHP script. It should be works this way:
Click on item > Get an ID of item > Ajax call of PHP script > PHP will get data from database for item with number of ID > Ajax is success > Create Modal window
Owl Carousel needs to be manually loaded everywhere you want to use it. It is because you can create multi linguale site with RTL language. So if the script will be loaded from one place and set to RTL, it will not work properly on standard left-to-right pages.
This script needs to be loaded before </body> tag ends:
<script>
$(window).load(function(){
var rtl = false;
initializeOwl(rtl);
});
</script>
Spotter supports RTL languages. It is very easy to set it to RTL. Just add these to lines in <head> tag AFTER the style.css:
<link rel="stylesheet" href="assets/css/bootstrap-rtl.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/rtl.css" type="text/css">
Don't forget to add/modify the Owl Carouse script in the end of page
There are seven pre-defined color schemes:
To set your favorite color scheme just replace style.css with the color CSS listed above. Example for green color:
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
Replace with
<link rel="stylesheet" href="assets/css/green.css" type="text/css">
These classes are useful if you want to build new elements or modify current ones without editing the CSS files.
<div class="block space-under opacity-50 dark-inputs"></div>
This code will create element with 40px padding from top and bottom, with 30px space under, with 50% opacity and with dark inputs fields inside.
The expandable-content class is similar to Bootstrap's collapse, but it allows to show part
of the content. For example you have a long description of an item so you can't display it at all, but you still want to show couple of lines.
You can use expandable-content to set how many pixels from content you want to display. Example:
<div class="expandable-content collapsed show-60" id="detail-sidebar-event">
<div class="content">
<p>Maecenas purus sapien, pellentesque non consectetur eu, rhoncus in mauris.
Duis et nisl metus. Sed ut pulvinar mauris, bibendum ullamcorper ex.
Aliquam vitae ante diam. Nam eu blandit odio. Cras erat lorem, iaculis eu nulla eu, sodales aliquam eros.
</p>
</div>
</div>
<a href="#" class="show-more expand-content" data-expand="#detail-sidebar-event">Show More</a>
expandable-content - tells that inside this element is content which will be expanded
collapsed - tells that content is collapsed on page load
id="detail-sidebar-event" - unique identifier
content - content wrapper class (this class is required for calculating the height of a content)
expand-content - a trigger that will expand the content after click
data-expand - tells which element with unique identifier has to expand
You can also load markers from database using couple of customized files. In this case there are only "id",
"latitude" and "longitude" placed inside a "item.json.txt". Other data should be in database (mySql for example).
So the map loads markers with only necessary data and other data are called after click via Ajax. Right now only Google map is supported.
You can find these modified files in database-loading-files.zip which includes:
You need to create PHP scripts that will call database and generate HTML code for the map. There are two ajax scripts that call external files:
1) If you click the marker, than data for infobox are loaded:
$.ajax({
type: 'POST',
url: 'assets/external/_infobox.html',
data: json.data[i].id,
success: function (data) {
infoboxContent.innerHTML = data;
newMarkers[i].infobox.open(map, marker);
newMarkers[i].infobox.setOptions({ boxClass:'fade-in-marker'});
}
});
ID of the marker is send to "assets/external/_infobox.html" - this has to be PHP file that will output HTML with the structure that you can see in "_infobox.html"
If you move map, than depending of which markers are in currently visible map area are displayed in left "results" sidebar
function pushItemsToArray(json, id, visibleItemsArray, method){
$.ajax({
type: 'POST',
url: 'assets/external/_result.html',
data: id,
success: function (data) {
visibleItemsArray.push(data);
if( method == 'resultsSidebar' ){
$('.items-list .results').html( visibleItemsArray );
rating('.results .item');
}
}
});
}
Again, the ID is posted to "assets/external/_result.html" -> this needs to be PHP, which will send back the code with <li> structure.
There was a problem, that if you have displayed too many markers the browser freeze for couple of times, because the script is creating the <li> structure for "result sidebar". So there is a limit that maximum of 20 items can be displayed in she sidebar. But you can change this limit by changing value in this code:
if ( tempVar < 20 ) { ...
Icons used
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Theme Starz