Moduli

Roba gratis

Servizi

Recent Posts

View All
advertising

Aggiungere Google Maps alla pagina dei contatti in PrestaShop: Guida pratica

Posted On: May 15, 2023

Categories: web design

Fornire ai tuoi potenziali clienti la posizione del tuo negozio tramite Google Maps è ormai obbligatorio. Con l'uso crescente della tecnologia intelligente, i tuoi potenziali clienti potrebbero visitare il tuo negozio tramite smartphone e dispositivi. Puoi anche dotare il tuo negozio PrestaShop delle tendenze moderne. Questo tutorial ti aiuterà ad aggiungere Google Maps con due metodi. Il primo consiste nel copiare il codice che forniamo, il secondo nell'installare il modulo Google Maps di PrestaShop. Esamina entrambi i metodi e scegli quello con cui ti senti più a tuo agio.

Come aggiungere Google Maps di PrestaShop usando un codice?

Per aggiungere Google Maps a una pagina di contatto, è necessario accedere a un client FTP e avere la possibilità di modificare i file HTML. Accedi al client FTP. Vai alla sezione dei temi e seleziona il tuo tema per trovare contact.tpl nella cartella templates.

Copia e incolla il seguente codice in un punto specifico della pagina di contatto. Possiamo aggiungerlo sotto il blocco del contenuto principale.

Il codice nella terza riga rappresenta le impostazioni del contenitore per una corretta visualizzazione su diverse risoluzioni. La quarta riga di codice riguarda larghezza e altezza in modo che una mappa di Google sia posizionata nel posto giusto.

Aggiungi il codice JavaScript. Questo scaricherà la libreria delle mappe e le impostazioni dai server di Google e le conserverà in un file google-map-contact.js. Risiede nella cartella theme del tuo negozio/assets/js/google-map-contacts.js. Aggiungi il file e il seguente codice:

function myMap() {
   var myLatLng = {lat: 50.0928392, lng: 19.9244297};
   var mapOptions = {
       zoom: 15,
       center: myLatLng
   }
   var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

var contentString =

PrestaPros

30-067 Kraków ul. Piastowska 44/4

tel. (+48)574 887 340

;

var infowindow = new google.maps.InfoWindow({
       content: contentString
   });
   var marker = new google.maps.Marker({
       position: myLatLng,
//       icon: '/img/marker.png',
//       title: 'Hello World!'
   });
   marker.addListener('click', function () {
       infowindow.open(map, marker);
   });
   marker.setMap(map);
}

Per rendere efficace il codice, è necessario modificare i dati necessari, ad esempio cambiare l'oggetto myLatLng con le tue coordinate. Prendi questi dati direttamente da Google Maps. Localizzare un sito Web potrebbe richiedere anche la modifica di ContentString con gli stessi dati. Personalizza il percorso dell'immagine del marcatore utilizzando il codice.

Per modificare JavaScript, possiamo sovrascrivere ContactContoller. Accedi al file ContactController.php e modificalo con il percorso override/controller/front. In assenza di un tale file, è necessario crearne uno nuovo e utilizzare questo codice.

class ContactController extends ContactControllerCore {
   private $googleMapsApiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
   public function initContent()
   {
       parent::initContent();
       $this->registerJavascript(
           'google-maps-api',
           'https://maps.googleapis.com/maps/api/js?key='.$this->googleMapsApiKey.'&callback=myMap',
           ['server' => 'remote', 'position' => 'bottom', 'priority' => 999, 'attribute' => 'defer']
       );
       $this->registerJavascript(
           'google-map',
           'themes/TWÓJ_SZABLON/assets/js/google-map-contact.js',
           ['server' => 'remote', 'position' => 'head', 'priority' => 999]
       );        
   }   
}

Qui, ancora una volta, dovrai sostituire i valori di googleMapsApiKey con la chiave che ti è stata fornita. Ottieni la chiave da https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key. Cambia anche il valore di NOME_DEL_TUO_TEMA.

Se il file è stato modificato in precedenza, è necessario aggiungere il codice per JavaScript e la chiave dell'API di Google Map.

$this->registerJavascript(
           'google-maps-api',
           'https://maps.googleapis.com/maps/api/js?key='.$this->googleMapsApiKey.'&callback=myMap',
           ['server' => 'remote', 'position' => 'bottom', 'priority' => 999, 'attribute' => 'defer']
       );
       $this->registerJavascript(
           'google-map',
           'themes/TWÓJ_SZABLON/assets/js/google-map-contact.js',
           ['server' => 'remote', 'position' => 'head', 'priority' => 999]
       );

Sembra essere il metodo più semplice per aggiungere Google Maps alla pagina dei contatti in PrestaShop. Provalo se sei familiare con la modifica del codice, altrimenti potrebbe richiedere l'assistenza di un sviluppatore web. Per risparmiarti la fatica e creare posizioni di negozio multiple, è meglio utilizzare il modulo PrestaShop.

Come aggiungere Google Maps tramite il modulo PrestaShop?

Il modulo Google Maps Contattaci è uno degli strumenti efficaci che ti risparmiano molto tempo nell'aggiungere la posizione della mappa di Google del tuo negozio nella pagina dei contatti. Abiliti Google Recaptcha per impedire agli spammer di utilizzare i moduli di contatto della pagina per scopi malintenzionati. Ci sono molte altre opzioni per personalizzare la pagina dei contatti del tuo sito web di e-commerce.

Segui il tutorial di seguito per aggiungere Google Maps con pochi clic.

Installa il modulo Google Maps sulla pagina dei contatti.

Configura queste impostazioni. Ti consente di aggiungere:

  • Indirizzo email con icona
  • Indirizzo fisico del negozio con icona
  • Numero WhatsApp con icona
  • Chiave dell'API della mappa
  • Chiave del sito di Google Recaptcha
  • Disabilita la colonna sinistra

Salva le impostazioni e tutto è fatto.

Vai alla sezione dei negozi per aggiungere una posizione di Google Map per ciascun negozio. Una sezione mappa aggiuntiva potrebbe apparire nella pagina dei Contatti del tuo negozio. Tutti i tuoi negozi appaiono in un menu a discesa in modo che gli utenti possano selezionare un negozio e trovarne la posizione.

Conclusion

Aggiungere PrestaShop Google Maps non è più un compito difficile. Abbiamo condiviso con te i metodi più semplici. Esamina il primo se sei familiare con il codice open-source di PrestaShop e sei in grado di risolvere i problemi se qualcosa va storto. Il secondo metodo di aggiungere mappe con l'aiuto di un modulo è considerato sicuro e protetto. Coinvolge pochi clic e elimina la probabilità di bug. Se sorge qualche problema, puoi chiedere assistenza gratuita alla società sviluppatrice.