Fornecer a localização da sua loja aos potenciais clientes com o Google Maps é agora obrigatório. Com o aumento do uso de tecnologia inteligente, os seus potenciais clientes podem estar a visitar a sua loja através dos seus telemóveis e dispositivos. Também pode equipar a sua loja PrestaShop com as tendências modernas. Este tutorial vai ajudá-lo a adicionar o Google Maps de duas formas. A primeira é copiar o código que fornecemos, a segunda é instalar o módulo PrestaShop Google Maps. Reveja ambas as formas e escolha aquela com a qual se sinta mais confortável.

Como adicionar o Google Maps do PrestaShop usando um código?

Para adicionar o Google Maps a uma página de contacto, precisa de aceder ao Cliente FTP e de ter a capacidade de editar ficheiros HTML. Aceda ao cliente FTP. Navegue até à secção de temas e selecione o seu tema para encontrar o contact.tpl sob modelos.

Copie e cole o seguinte código num local específico na página de contacto. Podemos adicioná-lo abaixo do bloco de conteúdo principal.

O código na terceira linha representa as configurações do contentor para serem exibidas bem em diferentes resoluções. A quarta linha de código diz respeito à largura e altura para que o mapa do Google seja colocado no local certo.

Adicione o código JavaScript. Ele irá baixar a biblioteca de mapas e as definições dos servidores do Google e preservá-lo num ficheiro google-map-contact.js. Ele reside em theme/assets/js/google-map-contacts.js da sua loja. Adicione o ficheiro e o código seguinte:

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 Cracóvia 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);

}

Para tornar o código eficaz, precisa de alterar os dados necessários, como a substituição do objeto myLatLng pelas suas coordenadas. Obtenha esses dados diretamente do Google Maps. Localizar um site pode também requerer a alteração de ContentString com os mesmos dados. Personalize o caminho da imagem do marcador usando o código.

Para modificar o JavaScript, podemos substituir o ContactController. Aceda ao ficheiro ContactController.php e edite-o com a substituição override/controller/front. Na ausência de tal ficheiro, precisa de criar um novo e usar este código.

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]

       );        

   }   

}

Aqui, novamente, precisará de substituir os valores googleMapsApiKey pela chave que lhe foi fornecida. Obtenha a chave em https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key. Altere também o valor de NOME_DO_SEU_TEMA.

Se o ficheiro já estiver modificado, precisa de adicionar o código para JavaScript e a chave da API do Google Maps.

$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]

       );  

Parece ser o método mais fácil para adicionar o Google Maps à página de contacto no PrestaShop. Experimente-o se estiver familiarizado com a edição de código, caso contrário, pode requerer a assistência de um desenvolvedor web. Para poupar esforços e criar várias localizações de loja, é melhor utilizar o módulo PrestaShop.

Ainda com dificuldades? Clique aqui e entre em contato com o nosso desenvolvedor dedicado agora

Como adicionar o Google Maps usando o Módulo PrestaShop?

O módulo Google Maps Contact Us é uma das ferramentas eficazes que lhe poupará muito tempo ao adicionar a localização do mapa do Google da sua loja à página de contacto. Pode ativar o Google Recaptcha para evitar que os spammers usem os formulários da página de contacto para fins maliciosos. Existem muitas outras opções para personalizar a página de contacto do seu site de comércio eletrónico.

Siga o tutorial abaixo para adicionar o Google Maps com apenas alguns cliques.

Instale o módulo Google Maps no Contact Us.

Configure estas definições. Permite-lhe adicionar:

• Endereço de email com ícone
• Endereço físico da loja com ícone
• Número do WhatsApp com ícone
• Chave da API do mapa
• Chave do site do Captcha
• Desativar coluna esquerda

Guarde as definições e está feito.

Vá para a secção de lojas para adicionar a localização do Google Maps para cada loja. Uma secção adicional de mapa pode aparecer na página de Contact Us da sua loja. Todas as suas lojas aparecem num menu suspenso para que os utilizadores possam selecionar uma loja e encontrar a sua localização.

Conclusão

Adicionar o Google Maps do PrestaShop já não é uma tarefa difícil. Partilhámos os métodos mais fáceis consigo. Reveja o primeiro se estiver familiarizado com o código open-source do PrestaShop e capaz de depurá-lo se algo correr mal. O segundo método de adicionar mapas com a ajuda de um módulo é considerado seguro. Envolve apenas alguns cliques e elimina a probabilidade de bugs. Se surgir algum problema, pode procurar assistência gratuita junto da empresa desenvolvedora.

Obtenha o Módulo PrestaShop Adicionar Google Maps à Página de Contacto a partir do PrestaShop Addons

Obtenha o Módulo PrestaShop Adicionar Google Maps à Página de Contacto a partir do site oficial da FME Modules