Guida sviluppo temi

Attivazione

Questa funzionalità è attivabile su richiesta; scrivici a help@teamsystemcommerce.com per richiederne l'attivazione.

Una volta attivata, sarà necessario creare un file storelocator.html dedicato e proseguire con la configurazione sotto indicata.

Google maps Api

Recuperare l'api key di google maps

Impostazione pagina Storelocator sul tema

Configurazione mappa

Attraverso il file schema.json, all’interno dei “pages”, inserire il field per l’api_key:

"pages":{
    "storelocator": { 
        "label": "Storelocator settings",
        "id" : "storelocator",
        "icon" : "fa-map-pin",
	"settings": [
	     { 	
		"label" : "Api key",
		"fields" : [
		    {	
			"type" : "text",
			"id" : "api_key",
			"label" : "API key (Google Maps)",
			"multilang" : "no",
			"default" : ""
		    }      
		]
	     }
	]
    },
}

All’interno della pagina di personalizzazione del tema, l’utente potrà gestire in autonomia l’api_key.

Impostazione HTML della mappa

All’interno della pagina Modifica html/css del tema, creare un file html denominato storelocator.html:

Impostazione Javascript

Recupero dell’api_key dalla configurazione:

{% set map_key = theme.settings.storelocator.api_key %}

Utilizzo di google maps con l’api_key impostata:

• key: inserire l’api key, inserire anche fallback se necessario
• callback: funzione da chiamare per inizializzare la mappa e gli store points
• altri parametri: leggere docs di google maps api

Documentazione google maps api

Funzione initMap()

function initMap(){

}

La funzione initMap avrà al suo interno, questi elementi:

Inizializzazione della mappa

var map = {};

map = new google.maps.Map(document.getElementById('maps_show'), {
        center: {lat: 41.89193, lng: 12.51133},
	zoom: 6,
	mapTypeControl: true,
        mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
              position: google.maps.ControlPosition.TOP_CENTER
        },
        zoomControl: true,
        zoomControlOptions: {
              position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
              position: google.maps.ControlPosition.LEFT_TOP
        },
        fullscreenControl: true
});

Store points

Impostazione Javascript degli store points

Definizione dei points

// recupero dei points dal backoffice
var points = {{ getStorePoints() | json_encode | raw }};

// variabile per i points
var markers = [];

// inserimento dei points all'interno della mappa
$.each(points, function(a,b){
	markers[b._id.$id] = new google.maps.Marker({
		position: new google.maps.LatLng(b.geo.lat, b.geo.long),
		title: b.name,
		map: map,
		icon: red_point
	});
}

Inserimento di un popup al click del point

// variabile per i popup
var infowindows = [];

$.each(points, function(a,b){

// definizione del contenuto del popup
	var point_html = '
'+
		'
'+
		'
'+
		'
'+(b.name).toUpperCase()+'
'+
		'
'+
		'
'+b.address+'
';
	
		if (b.data.phone != '') {
			point_html += '
Telefono: '+b.data.phone+'
';
		}
		if (b.data.email != '') {
			point_html += '
Email: '+b.data.email+'
';
		}
		if (b.data.website!=''){		
			point_html += '
'+b.data.website+'';
		}
		
	point_html +=	'
';

	// salvataggio del contenuto all'interno di una variabile
	infowindows[a] = new google.maps.InfoWindow({
		content: point_html
    });

	// evento al click del point
	google.maps.event.addListener(markers[a], 'click', function(innerKey) {
		return function() {
			infowindows[innerKey].open(map, markers[innerKey]);
		}
	}(a));
}

Risultato previsto del file storelocator.html:

{% set map_key = *** %}


    

Metodi per il recupero di dati da backoffice

• getStorePoint
• getStorePoints
• getStorePointsByTags

getStorePoint(id)

getStorePoints(tag)

{
   "cb9cf1a16f46abb147b23c9":{
      "_id":{
         "$id":"5cb9cf1a16f46abb147b23c9"
      },
      "groupUID":114501,
      "name":"Nome del punto vendita",
      "address":"VIA BERTHOUD 133, 15069 SERRAVALLE SCRIVIA - AL - Italy",
      "geo":{
         "lat":44.693,
         "long":8.659
      },
      "data":{
         "contactname":"Nome del punto vendita",
         "email":"info@...",
         "website":"https://www.puntovendita.com",
         "phone":"34567890",
         "code":"2"
      },
      "tags":[
         "dealers",
         "italia"
      ],
      "custom":[],
      "is_disabled":0
   },
   ...
}

getStorePointsByTags(tagsList)

{
   "cb9cf1a16f46abb147b23c9":{
      "_id":{
         "$id":"5cb9cf1a16f46abb147b23c9"
      },
      "groupUID":114501,
      "name":"Nome del punto vendita",
      "address":"VIA BERTHOUD 133, 15069 SERRAVALLE SCRIVIA - AL - Italy",
      "geo":{
         "lat":44.693,
         "long":8.659
      },
      "data":{
         "contactname":"Nome del punto vendita",
         "email":"info@...",
         "website":"https://www.puntovendita.com",
         "phone":"34567890",
         "code":"2"
      },
      "tags":[
         "dealers",
         "italia"
      ],
      "custom":[],
      "is_disabled":0
   },
   ...
}