[RESOLU]Création d'un nouveau champ dans Coordonnées & magasins

Cedric31 · November 23, 2014

Bonjour,

Dans le backoffice de prestashop, je souhaite ajouter le champs "site internet" au niveau

du menu Préférences > Coordonnées & magasins > Créer

Je ne trouve pas le fichier me permettant d'ajouter ce lien à ce formulaire pour le gérer en backoffice et l'afficher en frontoffice

J'ai fait une capture d'écran pour que cela soit plus clair

Merci pour votre retour,

Edited November 24, 2014 by Cedric31 (see edit history)

Cedric31 · November 23, 2014

Pour info, j'ai déjà fait les actions ci-dessous :

- ajouter un nouveau champ "website" dans la table ps_store

- enrichi le fichier dans ./classes/Store

et là je calle ....

Edited November 23, 2014 by Cedric31 (see edit history)

Cedric31 · November 23, 2014

Une petite aide ne serait pas de refus

Eolia · November 23, 2014

Si vous n'avez pas une adresse sur 2 lignes il suffit de modifier cette ligne dans stores.php

'address1' => 		array('type' => self::TYPE_STRING, 'validate' => 'isCleanHtml', 'size' => 128),

Et vous rentrez l'adresse internet en adresse1

En étudiant votre question je me rends compte qu'il y a un bug presta dans le controller concernant les états...

Cedric31 · November 23, 2014

Bonjour Eolia,

Votre proposition est astucieuse mais j'ai besoin du champ adresse 2 donc je dois enrichir le formulaire en ajoutant un champ supplémentaire

j'ai avancé sur le sujet, je récapitule depuis le début :

1. Ajouter un nouveau champ "website" dans la table ps_store

2. Modification du fichier dans ./classes/Store

Ligne 71

	/** @var string website */
	public $website;

Ligne 104

'website' => array('type' => self::TYPE_STRING, 'validate' => 'isWebsite', 'size' => 255),

3. Modification du fichier dans ./controllers/admin/AdminStoresController

Ligne 245

       array(
                    'type' => 'text',
                    'label' => $this->l('website'),
                    'name' => 'website',
                    'size' => 33
                    'required' => true
                ),

Ligne 435

'PS_SHOP_WEBSITE' => array('title' => $this->l('Shop website'),
				'desc' => $this->l('Displayed in website sent to customers'),
				'validation' => 'isWebsite',
				'required' => true,
				'size' => 30,
				'type' => 'text'
			),

Ligne 523

// 'PS_SHOP_WEBSITE' => 'website');

4. Modification du fichier dans ./themes/votre_theme/store.tpl

Ligne 43

{$store.website|escape:'htmlall':'UTF-8'}<br />

Mon champ website apparait bien en backoffice mais lorsque je veux insérer un lien web, je rencontre cette erreur,

Validation function not found. isWebsite

j'ai oublié quelque chose mais je ne sais pas quoi

Edited November 23, 2014 by Cedric31 (see edit history)

Cedric31 · November 23, 2014

J'ai corrigé l'erreur en backoffice

Validation function not found. isWebsite

en modifiant le fichier dans ./classes/Store

'website' => array('type' => self::TYPE_STRING, 'validate' => 'isWebsite', 'size' => 255),

par

'website' => array('type' => self::TYPE_STRING, 'validate' => 'isCleanHtml', 'size' => 255),

Mon lien est bien sauvegardé en BDD mais il ne s'affiche pas en front-office

Edited November 23, 2014 by Cedric31 (see edit history)

Eolia · November 24, 2014

Ok, tout cela est logique validate permet de vérifier/nettoyer les données saisies. Si votre propriété "isWebsite" n'existe pas dans la classe Validate vous avez forcément une erreur. C'est pour cela que je vous avais proposé "iscleanHtml" qui est plus généraliste et se contente de nettoyer (en échappant les caractères spéciaux) l'entrée avant de l'insérer en base de données.

Maintenant que vous avez votre donnée enregistrée, il faut l'afficher en FO, donc transmettre au fichier tpl la variable correspondante et l'afficher si elle existe.

Le controller récupère les infos de la table ps_store et les transmet à smarty dans la variable {$stores} (ensemble des magasins)

La boucle foreach permet de récupérer les infos de chaque magasin dans la variable {$store} (sans s )

Vous devriez pouvoir afficher votre adresse de site web en utilisant:

{$store.website|escape:'htmlall':'UTF-8'}

Dans stores.tpl de votre site

Cedric31 · November 24, 2014

Merci pour tes explications, j'y vois plus clair dans le fonctionnement de prestashop , je vais garder tes explications très précieusement pour la prochaine fois.

En ce qui concerne stores.tpl, j'ai déjà ajouter cette ligne de code dans le fichier store.tpl présent dans mon dossier theme

4. Modification du fichier dans ./themes/votre_theme/store.tpl

Ligne 43

{$store.website|escape:'htmlall':'UTF-8'}<br />

je remets tout le code

{foreach $stores as $store}
		<div class="store-small span2">
			{if $store.has_picture}<p><img src="{$img_store_dir}{$store.id_store}-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" /></p>{/if}
			<p>
				<b>{$store.name|escape:'htmlall':'UTF-8'}</b><br />
				{$store.address1|escape:'htmlall':'UTF-8'}<br />
				{if $store.address2}{$store.address2|escape:'htmlall':'UTF-8'}{/if}<br />
				{$store.postcode} {$store.city|escape:'htmlall':'UTF-8'}{if $store.state}, {$store.state}{/if}<br />
				{$store.country|escape:'htmlall':'UTF-8'}<br />
				{$store.website|escape:'htmlall':'UTF-8'}<br />
				{if $store.phone}{l s='Phone:' js=0} {$store.phone}{/if}
			</p>
				{if isset($store.working_hours)}{$store.working_hours}{/if}
		</div>
{/foreach}

Mais je n'ai toujours l'affichage en FO, je vais revérifier mon code pour voir si je n'ai pas laisser une coquille quelque part

Edited November 24, 2014 by Cedric31 (see edit history)

Eolia · November 24, 2014

Tu as vidé le cache smarty avant de recharger la page ?

Active l'affichage des erreurs également pour voir si tu n'as pas un warning concernant {$store.website} si elle n'existait pas.

D'ailleurs un {if $store.website|escape:'htmlall':'UTF-8'}{l s='Website:' js=0} {$store.website}{/if} serait préférable au cas où cette valeur n'existe pas en bdd

Cedric31 · November 24, 2014

Suite à tes retours j'ai remplacer la propriété "isWebsite" par "isCleanHtml" dans les fichiers ci-dessous :

2. Modification du fichier dans ./classes/Store

Ligne 104

'website' => array('type' => self::TYPE_STRING, 'validate' => 'isWebsite', 'size' => 255),

remplacer par

'website' => array('type' => self::TYPE_STRING, 'validate' => 'isCleanHtml', 'size' => 255),

3. Modification du fichier dans ./controllers/admin/AdminStoresController

Ligne 435

'PS_SHOP_WEBSITE' => array('title' => $this->l('Shop website'),
				'desc' => $this->l('Displayed in website sent to customers'),
				'validation' => 'isWebsite',
				'required' => true,
				'size' => 30,
				'type' => 'text'
			),

remplacer par

'PS_SHOP_WEBSITE' => array('title' => $this->l('Shop website'),
                'desc' => $this->l('Displayed in website sent to customers'),
                'validation' => 'isCleanHtml',
                'required' => true,
                'size' => 30,
                'type' => 'text'
            ),

Je pense que j'ai bien de remplacer les propriétés mais aucun impact sur la restitution

Eolia · November 24, 2014

Vous êtes en affichage ajax (avec la carte google) ou en simplifié ?

Cedric31 · November 24, 2014

Tu as vidé le cache smarty avant de recharger la page ?

Active l'affichage des erreurs également pour voir si tu n'as pas un warning concernant {$store.website} si elle n'existait pas.

D'ailleurs un {if $store.website|escape:'htmlall':'UTF-8'}{l s='Website:' js=0} {$store.website}{/if} serait préférable au cas où cette valeur n'existe pas en bdd

Oui j'ai bien vidé le cache smarty avant de recharger et j'ai remplacé le code dans le store.tpl

{foreach $stores as $store}
		<div class="store-small span2">
			{if $store.has_picture}<p><img src="{$img_store_dir}{$store.id_store}-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" /></p>{/if}
			<p>
				<b>{$store.name|escape:'htmlall':'UTF-8'}</b><br />
				{$store.address1|escape:'htmlall':'UTF-8'}<br />
				{if $store.address2}{$store.address2|escape:'htmlall':'UTF-8'}{/if}<br />
				{$store.postcode} {$store.city|escape:'htmlall':'UTF-8'}{if $store.state}, {$store.state}{/if}<br />
				{$store.country|escape:'htmlall':'UTF-8'}<br />
				{if $store.website|escape:'htmlall':'UTF-8'}{l s='Website:' js=0} {$store.website}{/if}
				{if $store.phone}{l s='Phone:' js=0} {$store.phone}{/if}
			</p>
				{if isset($store.working_hours)}{$store.working_hours}{/if}
		</div>
	{/foreach}

Edited November 24, 2014 by Cedric31 (see edit history)

Eolia · November 24, 2014

Je viens de tester en mettant un lien sur le site et ça fonctionne.

{if $store.website|escape:'htmlall':'UTF-8'}{l s='Website:' js=0} <a href="http://{$store.website}">{$store.website}</a>{/if}<br />

Cedric31 · November 24, 2014

Vous êtes en affichage ajax (avec la carte google) ou en simplifié ?

Je suis en affichage ajax

Cedric31 · November 24, 2014

Je viens de tester en mettant un lien sur le site et ça fonctionne.
{if $store.website|escape:'htmlall':'UTF-8'}{l s='Website:' js=0} <a href="http://{$store.website}">{$store.website}</a>{/if}<br />

la ligne de code du dessus vient remplacer

 {if $store.website|escape:'htmlall':'UTF-8'}{l s='Website:' js=0} {$store.website}{/if}

dans le fichier stores.tpl ?

Edited November 24, 2014 by Cedric31 (see edit history)

Eolia · November 24, 2014

Alors en Ajax il faut rajouter dans la fonction protected function displayAjax() de StoresController.php

$newnode->setAttribute('website', $store['website']);

Modifier le tpl partie ajax et le js correspondant

la ligne de code du dessus vient remplacer
 {if $store.website|escape:'htmlall':'UTF-8'}{l s='Website:' js=0} {$store.website}{/if} 
dans le fichier stores.tpl ?

Oui mais sans le mode ajax activé

Cedric31 · November 24, 2014

Je viens de tester sans le mode ajax, en effet le champ site internet est bien affiché

Je vais donc faire les modifications que tu me proposes, pour info le fichier StoresController.php se trouve bien dans le dossier

Controllers/front/StoresController.php

Edited November 24, 2014 by Cedric31 (see edit history)

Cedric31 · November 24, 2014

J'ai ajouter la ligne de code $newnode->setAttribute('website', $store['website']);

protected function displayAjax()
	{
		$stores = $this->getStores();
		$dom = new DOMDocument('1.0');
		$node = $dom->createElement('markers');
		$parnode = $dom->appendChild($node);

		$days[1] = 'Monday';
		$days[2] = 'Tuesday';
		$days[3] = 'Wednesday';
		$days[4] = 'Thursday';
		$days[5] = 'Friday';
		$days[6] = 'Saturday';
		$days[7] = 'Sunday';

		foreach ($stores as $store)
		{
			$other = '';
			$node = $dom->createElement('marker');
			$newnode = $parnode->appendChild($node);
			$newnode->setAttribute('name', $store['name']);
			$address = $this->processStoreAddress($store);

			$other .= $this->renderStoreWorkingHours($store);
			$newnode->setAttribute('addressNoHtml', strip_tags(str_replace('<br />', ' ', $address)));
			$newnode->setAttribute('address', $address);
			$newnode->setAttribute('other', $other);
			$newnode->setAttribute('phone', $store['phone']);
	======>		$newnode->setAttribute('website', $store['website']);
			$newnode->setAttribute('id_store', (int)($store['id_store']));
			$newnode->setAttribute('has_store_picture', file_exists(_PS_STORE_IMG_DIR_.(int)($store['id_store']).'.jpg'));
			$newnode->setAttribute('lat', (float)($store['latitude']));
			$newnode->setAttribute('lng', (float)($store['longitude']));
			if (isset($store['distance']))
				$newnode->setAttribute('distance', (int)($store['distance']));
		}

mais que veux tu dire par modifier le tpl partie ajax et le js correspondant ?

Edited November 24, 2014 by Cedric31 (see edit history)

Eolia · November 24, 2014

dans stores.js, dans la fonction searchLocationsNear(center) ajouter:

var website = markerNodes[i].getAttribute('website');

et remplacer:

$('#stores-table tr:last').after('<tr class="node"><td class="num">'+parseInt(i + 1)+'</td><td><b>'+name+'</b>'+(has_store_picture === 1 ? '<br /><img src="'+img_store_dir+parseInt(id_store)+'-medium.jpg" alt="" />' : '')+'</td><td>'+address+'</td><td class="distance">'+distance+' '+distance_unit+'</td></tr>');
			$('#stores-table').show();

par:

$('#stores-table tr:last').after('<tr class="node"><td class="num">'+parseInt(i + 1)+'</td><td><b>'+name+'</b>'+(has_store_picture === 1 ? '<br /><img src="'+img_store_dir+parseInt(id_store)+'-medium.jpg" alt="" />' : '')+'</td><td>'+address+'</td><td class="distance">'+distance+' '+distance_unit+'</td><td>'+website+'</td></tr>');
			$('#stores-table').show();

dans stores.tpl ajouter en bas (après la ligne "Distance"):

<th>{l s='Website'}</th>

Edited November 24, 2014 by Eolia (see edit history)

Cedric31 · November 24, 2014

J'ai bien intégré les diférentes lignes mais je constate plusieurs anomalie après voir modifier les fichiers

Tout dabord sans recherche de localité à partir du monochamp, le lien du site internet n'apparait pas sur les popup de la carte

Ensuite lors d'une recherche de magasins par localité ex: toulouse

==> je n'ai plus de résultat dans la liste réponse

==> Tout les points sur la carte disparaissent excepté si mon magasin à toulouse possède un site internet alors l'adresse + cp +ville présent dans la popup est remplacer par le site internet et je n'ai aucune donnée affiché sous le tableau de la carte

On tourne autour de la solution, il doit y avoir un petit truc pour que ça fonctionne, une fois la solution je ferai un récapitulatif de toutes les modifications pour afficher un champ, ça devrait en intérésser plus d'un.

Encore merci pour ton aide si précieuse

Edited November 24, 2014 by Cedric31 (see edit history)

Eolia · November 24, 2014

Voir fichiers stores.js ci-dessous

Edited November 24, 2014 by Eolia (see edit history)

Cedric31 · November 24, 2014

La modification de la variable vient afficher le site internet dans le tableau en dessous de la carte par contre

le site web n'est toujours pas afficher sur la cartogrpahie

j'ai uniquement les informations ci-dessous:

- Nom du magasin

- Adresse 1

- Adresse 2

- CP

- Ville

- n° téléphone

- Horaire d'ouverture

- Itinéraire

Edited November 24, 2014 by Cedric31 (see edit history)

Eolia · November 24, 2014

Normal je suis dessus...

Cedric31 · November 24, 2014

Je me suis lancer dans un truc de fou, moi qui pensait afficher un champ en modifiant quelques données ... impossible d y arriver tout seul.Surtout avec mes compétence de dev autodidacte

je vois que le source prestashop n'a pas de secret pour toi

Edited November 24, 2014 by Cedric31 (see edit history)

Eolia · November 24, 2014

Bon réglé !

Remplace ton stores.js par ceci:

/*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*/

function initMarkers()
{
	searchUrl += '?ajax=1&all=1';
	downloadUrl(searchUrl, function(data) {
		var xml = parseXml(data);
		var markerNodes = xml.documentElement.getElementsByTagName('marker');
		var bounds = new google.maps.LatLngBounds();
		for (var i = 0; i < markerNodes.length; i++)
		{
			var name = markerNodes[i].getAttribute('name');
			var website = markerNodes[i].getAttribute('website');
			var address = markerNodes[i].getAttribute('address');
			var addressNoHtml = markerNodes[i].getAttribute('addressNoHtml');
			var other = markerNodes[i].getAttribute('other');
			var id_store = markerNodes[i].getAttribute('id_store');
			var has_store_picture = markerNodes[i].getAttribute('has_store_picture');
			var latlng = new google.maps.LatLng(
			parseFloat(markerNodes[i].getAttribute('lat')),
			parseFloat(markerNodes[i].getAttribute('lng')));
			createMarker(latlng, name, address, other, id_store, has_store_picture, website);
			bounds.extend(latlng);
		}
	});
}

function searchLocations()
{
	$('#stores_loader').show();
	var address = document.getElementById('addressInput').value;
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({address: address}, function(results, status) {
		if (status === google.maps.GeocoderStatus.OK)
			searchLocationsNear(results[0].geometry.location);
		else
			alert(address+' '+translation_6);
		$('#stores_loader').hide();
	});
}

function clearLocations(n)
{
	infoWindow.close();
	for (var i = 0; i < markers.length; i++)
		markers[i].setMap(null);
		
	markers.length = 0;

	locationSelect.innerHTML = '';
	var option = document.createElement('option');
	option.value = 'none';
	if (!n)
		option.innerHTML = translation_1;
	else
	{
		if (n === 1)
			option.innerHTML = '1'+' '+translation_2;
		else
			option.innerHTML = n+' '+translation_3;
	}
	locationSelect.appendChild(option);
	$('#stores-table tr.node').remove();
}

function searchLocationsNear(center)
{
	var radius = document.getElementById('radiusSelect').value;
	var searchUrl = baseUri+'?controller=stores&ajax=1&latitude=' + center.lat() + '&longitude=' + center.lng() + '&radius=' + radius;
	downloadUrl(searchUrl, function(data) {
		var xml = parseXml(data);
		var markerNodes = xml.documentElement.getElementsByTagName('marker');
		var bounds = new google.maps.LatLngBounds();

		clearLocations(markerNodes.length);
		for (var i = 0; i < markerNodes.length; i++)
		{
			var name = markerNodes[i].getAttribute('name');
			var address = markerNodes[i].getAttribute('address');
			var addressNoHtml = markerNodes[i].getAttribute('addressNoHtml');
			var other = markerNodes[i].getAttribute('other');
			var distance = parseFloat(markerNodes[i].getAttribute('distance'));
			var id_store = parseFloat(markerNodes[i].getAttribute('id_store'));
			var phone = markerNodes[i].getAttribute('phone');
			var has_store_picture = markerNodes[i].getAttribute('has_store_picture');
			var website = markerNodes[i].getAttribute('website');
			var latlng = new google.maps.LatLng(
			parseFloat(markerNodes[i].getAttribute('lat')),
			parseFloat(markerNodes[i].getAttribute('lng')));

			createOption(name, distance, i);
			createMarker(latlng, name, address, other, id_store, has_store_picture, website);
			bounds.extend(latlng);

			$('#stores-table tr:last').after('<tr class="node"><td class="num">'+parseInt(i + 1)+'</td><td><b>'+name+'</b>'+(has_store_picture === 1 ? '<br /><img src="'+img_store_dir+parseInt(id_store)+'-medium.jpg" alt="" />' : '')+'</td><td>'+address+'</td><td class="distance">'+distance+' '+distance_unit+'</td><td>'+website+'</td></tr>');
			$('#stores-table').show();
		}

		if (markerNodes.length)
		{
			map.fitBounds(bounds);
			var listener = google.maps.event.addListener(map, "idle", function() { 
				if (map.getZoom() > 13) map.setZoom(13);
				google.maps.event.removeListener(listener); 
			});
		}
		locationSelect.style.visibility = 'visible';
		locationSelect.onchange = function() {
			var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
			google.maps.event.trigger(markers[markerNum], 'click');
		};
	});
}

function createMarker(latlng, name, address, other, id_store, has_store_picture, website)
{
	var html = '<b>'+name+'</b><br/>'+website+'<br />'+address+(has_store_picture === 1 ? '<br /><br /><img src="'+img_store_dir+parseInt(id_store)+'-medium.jpg" alt="" />' : '')+other+'<br /><a href="http://maps.google.com/maps?saddr=&daddr='+latlng+'" target="_blank">'+translation_5+'<\/a>';
	var image = new google.maps.MarkerImage(img_ps_dir+logo_store);
	var marker = '';

	if (hasStoreIcon)
		marker = new google.maps.Marker({ map: map, icon: image, position: latlng });
	else
		marker = new google.maps.Marker({ map: map, position: latlng });
	google.maps.event.addListener(marker, 'click', function() {
		infoWindow.setContent(html);
		infoWindow.open(map, marker);
	});
	markers.push(marker);
}

function createOption(name, distance, num)
{
	var option = document.createElement('option');
	option.value = num;
	option.innerHTML = name+' ('+distance.toFixed(1)+' '+distance_unit+')';
	locationSelect.appendChild(option);
}

function downloadUrl(url, callback)
{
	var request = window.ActiveXObject ?
	new ActiveXObject('Microsoft.XMLHTTP') :
	new XMLHttpRequest();

	request.onreadystatechange = function() {
		if (request.readyState === 4) {
			request.onreadystatechange = doNothing;
			callback(request.responseText, request.status);
		}
	};

	request.open('GET', url, true);
	request.send(null);
}

function parseXml(str)
{
	if (window.ActiveXObject) {
		var doc = new ActiveXObject('Microsoft.XMLDOM');
		doc.loadXML(str);
		return doc;
	}
	else if (window.DOMParser) {
		return (new DOMParser()).parseFromString(str, 'text/xml');
	}
}

function doNothing() {}

$(document).ready(function()
{
	map = new google.maps.Map(document.getElementById('map'), {
		center: new google.maps.LatLng(defaultLat, defaultLong),
		zoom: 10,
		mapTypeId: 'roadmap',
		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
	});
	infoWindow = new google.maps.InfoWindow();

	locationSelect = document.getElementById('locationSelect');
		locationSelect.onchange = function() {
		var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
		if (markerNum !== 'none')
		google.maps.event.trigger(markers[markerNum], 'click');
	};
	
	$('#addressInput').keypress(function(e) {
		code = e.keyCode ? e.keyCode : e.which;
		if(code.toString() === 13)
			searchLocations();
	});


	initMarkers();
});

Eolia · November 24, 2014

Ah c'est pour un presta 1.5 le fichier js ci dessus.

Tu es en 15 ou 1.6 ?

Cedric31 · November 24, 2014

Au top ca fonctionne ! je vais récuperer mes ancien dev du fichier store.js par exemple pour la réduction du zoom sur la carthographie

mais ça déboite je suis fan

un dernier point Comment puis-je faire pour rendre le lien www.monsite.com cliquable comme c'est le cas en affichage simple

{if $store.website|escape:'htmlall':'UTF-8'}{l s='Website:' js=0} <a href="http://{$store.website}">{$store.website}</a>{/if}<br />

Ah c'est pour un presta 1.5 le fichier js ci dessus.

Tu es en 15 ou 1.6 ?

No souci, je suis en 1.5.6

Eolia · November 24, 2014

pour ceux qui sont en 1.6, store.js:

/*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*/
$(document).ready(function(){
	map = new google.maps.Map(document.getElementById('map'), {
		center: new google.maps.LatLng(defaultLat, defaultLong),
		zoom: 10,
		mapTypeId: 'roadmap',
		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
	});
	infoWindow = new google.maps.InfoWindow();

	locationSelect = document.getElementById('locationSelect');
		locationSelect.onchange = function() {
		var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
		if (markerNum !== 'none')
		google.maps.event.trigger(markers[markerNum], 'click');
	};
	
	$('#addressInput').keypress(function(e) {
		code = e.keyCode ? e.keyCode : e.which;
		if(code.toString() === 13)
			searchLocations();
	});

	$(document).on('click', 'input[name=location]', function(e){
		e.preventDefault();
		$(this).val('');
	});

	$(document).on('click', 'button[name=search_locations]', function(e){
		e.preventDefault();
		searchLocations();
	});

	initMarkers();
});

function initMarkers()
{
	searchUrl += '?ajax=1&all=1';
	downloadUrl(searchUrl, function(data) {
		var xml = parseXml(data);
		var markerNodes = xml.documentElement.getElementsByTagName('marker');
		var bounds = new google.maps.LatLngBounds();
		for (var i = 0; i < markerNodes.length; i++)
		{
			var name = markerNodes[i].getAttribute('name');
			var website = markerNodes[i].getAttribute('website');
			var address = markerNodes[i].getAttribute('address');
			var addressNoHtml = markerNodes[i].getAttribute('addressNoHtml');
			var other = markerNodes[i].getAttribute('other');
			var id_store = markerNodes[i].getAttribute('id_store');
			var has_store_picture = markerNodes[i].getAttribute('has_store_picture');
			var latlng = new google.maps.LatLng(
			parseFloat(markerNodes[i].getAttribute('lat')),
			parseFloat(markerNodes[i].getAttribute('lng')));
			createMarker(latlng, name, address, other, id_store, has_store_picture,website);
			bounds.extend(latlng);
		}
		map.fitBounds(bounds);
		var zoomOverride = map.getZoom();
        if(zoomOverride > 10)
        	zoomOverride = 10;
		map.setZoom(zoomOverride);
	});
}

function searchLocations()
{
	$('#stores_loader').show();
	var address = document.getElementById('addressInput').value;
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({address: address}, function(results, status) {
		if (status === google.maps.GeocoderStatus.OK)
			searchLocationsNear(results[0].geometry.location);
		else
		{
			if (!!$.prototype.fancybox && isCleanHtml(address))
			    $.fancybox.open([
			        {
			            type: 'inline',
			            autoScale: true,
			            minHeight: 30,
			            content: '<p class="fancybox-error">' + address + ' ' + translation_6 + '</p>'
			        }
			    ], {
			        padding: 0
			    });
			else
			    alert(address + ' ' + translation_6);
		}
		$('#stores_loader').hide();
	});
}

function clearLocations(n)
{
	infoWindow.close();
	for (var i = 0; i < markers.length; i++)
		markers[i].setMap(null);
		
	markers.length = 0;

	locationSelect.innerHTML = '';
	var option = document.createElement('option');
	option.value = 'none';
	if (!n)
		option.innerHTML = translation_1;
	else
	{
		if (n === 1)
			option.innerHTML = '1'+' '+translation_2;
		else
			option.innerHTML = n+' '+translation_3;
	} 
	locationSelect.appendChild(option);
	$("select#locationSelect").uniform();
	$('#stores-table tr.node').remove();
}

function searchLocationsNear(center)
{
	var radius = document.getElementById('radiusSelect').value;
	var searchUrl = baseUri+'?controller=stores&ajax=1&latitude=' + center.lat() + '&longitude=' + center.lng() + '&radius=' + radius;
	downloadUrl(searchUrl, function(data) {
		var xml = parseXml(data);
		var markerNodes = xml.documentElement.getElementsByTagName('marker');
		var bounds = new google.maps.LatLngBounds();

		clearLocations(markerNodes.length);
		$('table#stores-table').find('tbody tr').remove();
		for (var i = 0; i < markerNodes.length; i++)
		{
			var name = markerNodes[i].getAttribute('name');
			var address = markerNodes[i].getAttribute('address');
			var addressNoHtml = markerNodes[i].getAttribute('addressNoHtml');
			var other = markerNodes[i].getAttribute('other');
			var distance = parseFloat(markerNodes[i].getAttribute('distance'));
			var id_store = parseFloat(markerNodes[i].getAttribute('id_store'));
			var phone = markerNodes[i].getAttribute('phone');
			var has_store_picture = markerNodes[i].getAttribute('has_store_picture');
			var website = markerNodes[i].getAttribute('website');
			var latlng = new google.maps.LatLng(
			parseFloat(markerNodes[i].getAttribute('lat')),
			parseFloat(markerNodes[i].getAttribute('lng')));

			createOption(name, distance, i);
			createMarker(latlng, name, address, other, id_store, has_store_picture, website);
			bounds.extend(latlng);
			address = address.replace(phone, '');

			$('table#stores-table').find('tbody').append('<tr ><td class="num">'+parseInt(i + 1)+'</td><td class="name">'+(has_store_picture == 1 ? '<img src="'+img_store_dir+parseInt(id_store)+'.jpg" alt="" />' : '')+'<span>'+name+'</span></td><td class="address">'+address+(phone !== '' ? ''+translation_4+' '+phone : '')+'</td><td class="distance">'+distance+' '+distance_unit+'</td><td>'+website+'</td></tr>');
			$('#stores-table').show();
		}

		if (markerNodes.length)
		{
			map.fitBounds(bounds);
			var listener = google.maps.event.addListener(map, "idle", function() { 
				if (map.getZoom() > 13) map.setZoom(13);
				google.maps.event.removeListener(listener); 
			});
		}
		locationSelect.style.visibility = 'visible';
		$(locationSelect).parent().parent().addClass('active').show();
		locationSelect.onchange = function() {
			var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
			google.maps.event.trigger(markers[markerNum], 'click');
		};
	});
}

function createMarker(latlng, name, address, other, id_store, has_store_picture, website)
{
	var html = '<b>'+name+'</b><br/>'+website+'<br />'+address+(has_store_picture === 1 ? '<br /><br /><img src="'+img_store_dir+parseInt(id_store)+'.jpg" alt="" />' : '')+other+'<br /><a href="http://maps.google.com/maps?saddr=&daddr='+latlng+'" target="_blank">'+translation_5+'<\/a>';
	var image = new google.maps.MarkerImage(img_ps_dir+logo_store);
	var marker = '';

	if (hasStoreIcon)
		marker = new google.maps.Marker({ map: map, icon: image, position: latlng });
	else
		marker = new google.maps.Marker({ map: map, position: latlng });
	google.maps.event.addListener(marker, 'click', function() {
		infoWindow.setContent(html);
		infoWindow.open(map, marker);
	});
	markers.push(marker);
}

function createOption(name, distance, num)
{
	var option = document.createElement('option');
	option.value = num;
	option.innerHTML = name+' ('+distance.toFixed(1)+' '+distance_unit+')';
	locationSelect.appendChild(option);
}

function downloadUrl(url, callback)
{
	var request = window.ActiveXObject ?
	new ActiveXObject('Microsoft.XMLHTTP') :
	new XMLHttpRequest();

	request.onreadystatechange = function() {
		if (request.readyState === 4) {
			request.onreadystatechange = doNothing;
			callback(request.responseText, request.status);
		}
	};

	request.open('GET', url, true);
	request.send(null);
}

function parseXml(str)
{

	if (window.ActiveXObject)
	{
		var doc = new ActiveXObject('Microsoft.XMLDOM');
		doc.loadXML(str);
		return doc;
	}
	else if (window.DOMParser)
		return (new DOMParser()).parseFromString(str, 'text/xml');
}




function doNothing()
{
}

Edited November 24, 2014 by Eolia (see edit history)

Cedric31 · November 24, 2014

Je ferai un récapitulatif des modifications à apporter dans le dernier post

Eolia · November 24, 2014

Pour avoir le lien sur l'url remplace les 2

var website = markerNodes[i].getAttribute('website');

par:

var website = '<a href="http://'+markerNodes[i].getAttribute('website')+'">'+markerNodes[i].getAttribute('website')+'</a>';

It's all !

Enjoy

Eolia · November 24, 2014

Une dernière chose pour être "top", enlève: class="distance" ligne 119 du js pour éviter d'avoir la séparation du tableau en noir au lieu de gris entre la distance et l'adresse web...

Cedric31 · November 24, 2014

Pour faire un lien dans une nouvelle fenetre du type class="target" ou target="_blank" tu le mettrais à quel endroit dans la ligne du dessous

var website = '<a href="http://'+markerNodes[i].getAttribute('website')+'">'+markerNodes[i].getAttribute('website')+'</a>';

Cedric31 · November 24, 2014

Une dernière chose pour être "top", enlève: class="distance" ligne 119 du js pour éviter d'avoir la séparation du tableau en noir au lieu de gris entre la distance et l'adresse web...

tu veux dire enlever tout le td

<td class="distance">'+distance+' '+distance_unit+'</td>

Eolia · November 24, 2014

Ben non, j'ai dit juste class="distance" sinon tu n'auras plus la cellule...

Cedric31 · November 24, 2014

Pour encore améliorer la chose, la ligne zoom: 5; permet de dézoomer sur la carte par défaut la valeur est à 10

function doNothing() {}

$(document).ready(function()
{
	map = new google.maps.Map(document.getElementById('map'), {
		center: new google.maps.LatLng(defaultLat, defaultLong),
		zoom: 5,
		mapTypeId: 'roadmap',
		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
	});
	infoWindow = new google.maps.InfoWindow();

	locationSelect = document.getElementById('locationSelect');
		locationSelect.onchange = function() {
		var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
		if (markerNum !== 'none')
		google.maps.event.trigger(markers[markerNum], 'click');
	};

Cedric31 · November 24, 2014

Ben non, j'ai dit juste class="distance" sinon tu n'auras plus la cellule...

Exact tu as raison, je pense que ces posts sont vraiment pas mal

Edited November 24, 2014 by Cedric31 (see edit history)

Cedric31 · November 24, 2014

Je vois que tu es developpeur independant, est ce que tu vends des modules prestashop si oui je veux bien l'adresse de ton site

En fonction de mes besoins il m'arrive d'acheter certain module donc au cas ou je peux aller voir sur ta boutique avant de me rendre sur le site de prestashop

Eolia · November 24, 2014

Ma boutique n'est pas vraiment "ouverte" (mais ça ne va pas tarder) car je fais surtout du dev sur mesure pour des cas assez spécifiques.

Mes modules grand public sont essentiellement gratuits et dispos sur le forum

Cedric31 · November 24, 2014

J'ai ajouté ton contact à ma friend list

Sais tu ou je peux ajouter l'information class="target" ou target="_blank" pour faire une ouverture de lien dans une nouvelle fenetre

var website = '<a href="http://'+markerNodes[i].getAttribute('website')+'">'+markerNodes[i].getAttribute('website')+'</a>';

Eolia · November 24, 2014

ben....

var website = '<a href="http://'+markerNodes[i].getAttribute('website')+'" target="_blank">'+markerNodes[i].getAttribute('website')+'</a>';

Cedric31 · November 24, 2014

Merci

Est ce que de ton coté l'image uploadé dans chaque boutique apparait ? si oui y a t il une action a faire en BO pour quelle apparaisse ?

Eolia · November 24, 2014

Non (mais elle n'apparaissait pas avant non plus)

Cedric31 · November 24, 2014

En effet elle ne s'affichait pas avant non plus. Je vais fermer le topic encore un GRAND MERCI pour ton aide sur le sujet.

Je ferme le topic et je vais regarder si ce problème a été résolu sur le forum dans le cas contraire je posterai un nouveau post

Eolia · November 24, 2014

bah, j'ai la soluce pour les images, hein !

C'est lié à une erreur de code et à un oubli d'upgrade de la part de Presta

Cedric31 · November 24, 2014

Du coup quel est la manipulation pour afficher les photos

Eolia · November 24, 2014

hé hé....

Bon allez je vous donne le fichier

Remplacez le js par ceci (flemme de chercher les lignes à changer)

/*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*/


function initMarkers()
{
	searchUrl += '?ajax=1&all=1';
	downloadUrl(searchUrl, function(data) {
		var xml = parseXml(data);
		var markerNodes = xml.documentElement.getElementsByTagName('marker');
		var bounds = new google.maps.LatLngBounds();
		for (var i = 0; i < markerNodes.length; i++)
		{
			var name = markerNodes[i].getAttribute('name');
			var website = '<a href="http://'+markerNodes[i].getAttribute('website')+'" target="_blank">'+markerNodes[i].getAttribute('website')+'</a>';
			var address = markerNodes[i].getAttribute('address');
			var addressNoHtml = markerNodes[i].getAttribute('addressNoHtml');
			var other = markerNodes[i].getAttribute('other');
			var id_store = markerNodes[i].getAttribute('id_store');
			var has_store_picture = markerNodes[i].getAttribute('has_store_picture');
			var latlng = new google.maps.LatLng(
			parseFloat(markerNodes[i].getAttribute('lat')),
			parseFloat(markerNodes[i].getAttribute('lng')));
			createMarker(latlng, name, address, other, id_store, has_store_picture, website);
			bounds.extend(latlng);
		}
	});
}

function searchLocations()
{
	$('#stores_loader').show();
	var address = document.getElementById('addressInput').value;
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({address: address}, function(results, status) {
		if (status === google.maps.GeocoderStatus.OK)
			searchLocationsNear(results[0].geometry.location);
		else
			alert(address+' '+translation_6);
		$('#stores_loader').hide();
	});
}

function clearLocations(n)
{
	infoWindow.close();
	for (var i = 0; i < markers.length; i++)
		markers[i].setMap(null);
		
	markers.length = 0;

	locationSelect.innerHTML = '';
	var option = document.createElement('option');
	option.value = 'none';
	if (!n)
		option.innerHTML = translation_1;
	else
	{
		if (n === 1)
			option.innerHTML = '1'+' '+translation_2;
		else
			option.innerHTML = n+' '+translation_3;
	}
	locationSelect.appendChild(option);
	$('#stores-table tr.node').remove();
}

function searchLocationsNear(center)
{
	var radius = document.getElementById('radiusSelect').value;
	var searchUrl = baseUri+'?controller=stores&ajax=1&latitude=' + center.lat() + '&longitude=' + center.lng() + '&radius=' + radius;
	downloadUrl(searchUrl, function(data) {
		var xml = parseXml(data);
		var markerNodes = xml.documentElement.getElementsByTagName('marker');
		var bounds = new google.maps.LatLngBounds();

		clearLocations(markerNodes.length);
		for (var i = 0; i < markerNodes.length; i++)
		{
			var name = markerNodes[i].getAttribute('name');
			var address = markerNodes[i].getAttribute('address');
			var addressNoHtml = markerNodes[i].getAttribute('addressNoHtml');
			var other = markerNodes[i].getAttribute('other');
			var distance = parseFloat(markerNodes[i].getAttribute('distance'));
			var id_store = parseFloat(markerNodes[i].getAttribute('id_store'));
			var phone = markerNodes[i].getAttribute('phone');
			var has_store_picture = markerNodes[i].getAttribute('has_store_picture');
			var website = '<a href="http://'+markerNodes[i].getAttribute('website')+'" target="_blank">'+markerNodes[i].getAttribute('website')+'</a>';
			var latlng = new google.maps.LatLng(
			parseFloat(markerNodes[i].getAttribute('lat')),
			parseFloat(markerNodes[i].getAttribute('lng')));

			createOption(name, distance, i);
			createMarker(latlng, name, address, other, id_store, has_store_picture, website);
			bounds.extend(latlng);

			$('#stores-table tr:last').after('<tr class="node"><td class="num">'+parseInt(i + 1)+'</td><td><b>'+name+'</b>'+(has_store_picture == 1 ? '<br /><img src="'+img_store_dir+parseInt(id_store)+'-medium_default.jpg" alt="" />' : '')+'</td><td>'+address+'</td><td>'+distance+' '+distance_unit+'</td><td>'+website+'</td></tr>');
			$('#stores-table').show();
		}

		if (markerNodes.length)
		{
			map.fitBounds(bounds);
			var listener = google.maps.event.addListener(map, "idle", function() { 
				if (map.getZoom() > 13) map.setZoom(13);
				google.maps.event.removeListener(listener); 
			});
		}
		locationSelect.style.visibility = 'visible';
		locationSelect.onchange = function() {
			var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
			google.maps.event.trigger(markers[markerNum], 'click');
		};
	});
}

function createMarker(latlng, name, address, other, id_store, has_store_picture, website)
{
	var html = '<b>'+name+'</b><br/>'+website+'<br />'+address+(has_store_picture == 1 ? '<br /><br /><img src="'+img_store_dir+parseInt(id_store)+'-medium_default.jpg" alt="" />' : '')+other+'<br /><a href="http://maps.google.com/maps?saddr=&daddr='+latlng+'" target="_blank">'+translation_5+'<\/a>';
	var image = new google.maps.MarkerImage(img_ps_dir+logo_store);
	var marker = '';

	if (hasStoreIcon)
		marker = new google.maps.Marker({ map: map, icon: image, position: latlng });
	else
		marker = new google.maps.Marker({ map: map, position: latlng });
	google.maps.event.addListener(marker, 'click', function() {
		infoWindow.setContent(html);
		infoWindow.open(map, marker);
	});
	markers.push(marker);
}

function createOption(name, distance, num)
{
	var option = document.createElement('option');
	option.value = num;
	option.innerHTML = name+' ('+distance.toFixed(1)+' '+distance_unit+')';
	locationSelect.appendChild(option);
}

function downloadUrl(url, callback)
{
	var request = window.ActiveXObject ?
	new ActiveXObject('Microsoft.XMLHTTP') :
	new XMLHttpRequest();

	request.onreadystatechange = function() {
		if (request.readyState === 4) {
			request.onreadystatechange = doNothing;
			callback(request.responseText, request.status);
		}
	};

	request.open('GET', url, true);
	request.send(null);
}

function parseXml(str)
{
	if (window.ActiveXObject) {
		var doc = new ActiveXObject('Microsoft.XMLDOM');
		doc.loadXML(str);
		return doc;
	}
	else if (window.DOMParser) {
		return (new DOMParser()).parseFromString(str, 'text/xml');
	}
}

function doNothing() {}

$(document).ready(function()
{
	map = new google.maps.Map(document.getElementById('map'), {
		center: new google.maps.LatLng(defaultLat, defaultLong),
		zoom: 5,
		mapTypeId: 'roadmap',
		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
	});
	infoWindow = new google.maps.InfoWindow();

	locationSelect = document.getElementById('locationSelect');
		locationSelect.onchange = function() {
		var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
		if (markerNum !== 'none')
		google.maps.event.trigger(markers[markerNum], 'click');
	};
	
	$('#addressInput').keypress(function(e) {
		code = e.keyCode ? e.keyCode : e.which;
		if(code.toString() == 13)
			searchLocations();
	});


	initMarkers();
});

Cedric31 · November 24, 2014

Ok c 'est cool mais j'ai fait la même modif en faisant :

var has_store_picture = parseInt(markerNodes[i].getAttribute('has_store_picture'));

au lieu du ==

Cedric31 · November 24, 2014

Bonne soirée se partage de post fût très enrichissant pour moi

Eolia · November 24, 2014

ben Presta a fait une connerie en mettant === mais là tu en fais une encore plus grosse

var has_store_picture = parseInt(markerNodes[i].getAttribute('has_store_picture'));

Ne vérifie pas si la variable existe mais l'affecte, donc toujours vrai même si pas d'image donc erreur undefined etc...

Eolia · November 24, 2014

Pour rappel:

= affectation. $x = 2; la valeur de $x vaut 2

== egalité simple if($x == 2) echo 'ok'; si $x vaut 2 alors on affiche ok

=== égalité stricte if($x === 2) echo 'ok'; si $x vaut 2 et est un entier alors on affiche ok

if($x === 2) (entier) est différent de if($x === '2') (string) <- l'erreur de Presta, le parser renvoyant une chaine (string)

La 2ème erreur était sur le nom de l'image medium au lieu de medium_default

Cedric31 · November 24, 2014

merci pour le petit cours

Soyons Solidaire · November 25, 2014

hé hé....

Bon allez je vous donne le fichier

Remplacez le js par ceci (flemme de chercher les lignes à changer)

/*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*/


function initMarkers()
{
	searchUrl += '?ajax=1&all=1';
	downloadUrl(searchUrl, function(data) {
		var xml = parseXml(data);
		var markerNodes = xml.documentElement.getElementsByTagName('marker');
		var bounds = new google.maps.LatLngBounds();
		for (var i = 0; i < markerNodes.length; i++)
		{
			var name = markerNodes[i].getAttribute('name');
			var website = '<a href="http://'+markerNodes[i].getAttribute('website')+'" target="_blank">'+markerNodes[i].getAttribute('website')+'</a>';
			var address = markerNodes[i].getAttribute('address');
			var addressNoHtml = markerNodes[i].getAttribute('addressNoHtml');
			var other = markerNodes[i].getAttribute('other');
			var id_store = markerNodes[i].getAttribute('id_store');
			var has_store_picture = markerNodes[i].getAttribute('has_store_picture');
			var latlng = new google.maps.LatLng(
			parseFloat(markerNodes[i].getAttribute('lat')),
			parseFloat(markerNodes[i].getAttribute('lng')));
			createMarker(latlng, name, address, other, id_store, has_store_picture, website);
			bounds.extend(latlng);
		}
	});
}

function searchLocations()
{
	$('#stores_loader').show();
	var address = document.getElementById('addressInput').value;
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode({address: address}, function(results, status) {
		if (status === google.maps.GeocoderStatus.OK)
			searchLocationsNear(results[0].geometry.location);
		else
			alert(address+' '+translation_6);
		$('#stores_loader').hide();
	});
}

function clearLocations(n)
{
	infoWindow.close();
	for (var i = 0; i < markers.length; i++)
		markers[i].setMap(null);
		
	markers.length = 0;

	locationSelect.innerHTML = '';
	var option = document.createElement('option');
	option.value = 'none';
	if (!n)
		option.innerHTML = translation_1;
	else
	{
		if (n === 1)
			option.innerHTML = '1'+' '+translation_2;
		else
			option.innerHTML = n+' '+translation_3;
	}
	locationSelect.appendChild(option);
	$('#stores-table tr.node').remove();
}

function searchLocationsNear(center)
{
	var radius = document.getElementById('radiusSelect').value;
	var searchUrl = baseUri+'?controller=stores&ajax=1&latitude=' + center.lat() + '&longitude=' + center.lng() + '&radius=' + radius;
	downloadUrl(searchUrl, function(data) {
		var xml = parseXml(data);
		var markerNodes = xml.documentElement.getElementsByTagName('marker');
		var bounds = new google.maps.LatLngBounds();

		clearLocations(markerNodes.length);
		for (var i = 0; i < markerNodes.length; i++)
		{
			var name = markerNodes[i].getAttribute('name');
			var address = markerNodes[i].getAttribute('address');
			var addressNoHtml = markerNodes[i].getAttribute('addressNoHtml');
			var other = markerNodes[i].getAttribute('other');
			var distance = parseFloat(markerNodes[i].getAttribute('distance'));
			var id_store = parseFloat(markerNodes[i].getAttribute('id_store'));
			var phone = markerNodes[i].getAttribute('phone');
			var has_store_picture = markerNodes[i].getAttribute('has_store_picture');
			var website = '<a href="http://'+markerNodes[i].getAttribute('website')+'" target="_blank">'+markerNodes[i].getAttribute('website')+'</a>';
			var latlng = new google.maps.LatLng(
			parseFloat(markerNodes[i].getAttribute('lat')),
			parseFloat(markerNodes[i].getAttribute('lng')));

			createOption(name, distance, i);
			createMarker(latlng, name, address, other, id_store, has_store_picture, website);
			bounds.extend(latlng);

			$('#stores-table tr:last').after('<tr class="node"><td class="num">'+parseInt(i + 1)+'</td><td><b>'+name+'</b>'+(has_store_picture == 1 ? '<br /><img src="'+img_store_dir+parseInt(id_store)+'-medium_default.jpg" alt="" />' : '')+'</td><td>'+address+'</td><td>'+distance+' '+distance_unit+'</td><td>'+website+'</td></tr>');
			$('#stores-table').show();
		}

		if (markerNodes.length)
		{
			map.fitBounds(bounds);
			var listener = google.maps.event.addListener(map, "idle", function() { 
				if (map.getZoom() > 13) map.setZoom(13);
				google.maps.event.removeListener(listener); 
			});
		}
		locationSelect.style.visibility = 'visible';
		locationSelect.onchange = function() {
			var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
			google.maps.event.trigger(markers[markerNum], 'click');
		};
	});
}

function createMarker(latlng, name, address, other, id_store, has_store_picture, website)
{
	var html = '<b>'+name+'</b><br/>'+website+'<br />'+address+(has_store_picture == 1 ? '<br /><br /><img src="'+img_store_dir+parseInt(id_store)+'-medium_default.jpg" alt="" />' : '')+other+'<br /><a href="http://maps.google.com/maps?saddr=&daddr='+latlng+'" target="_blank">'+translation_5+'<\/a>';
	var image = new google.maps.MarkerImage(img_ps_dir+logo_store);
	var marker = '';

	if (hasStoreIcon)
		marker = new google.maps.Marker({ map: map, icon: image, position: latlng });
	else
		marker = new google.maps.Marker({ map: map, position: latlng });
	google.maps.event.addListener(marker, 'click', function() {
		infoWindow.setContent(html);
		infoWindow.open(map, marker);
	});
	markers.push(marker);
}

function createOption(name, distance, num)
{
	var option = document.createElement('option');
	option.value = num;
	option.innerHTML = name+' ('+distance.toFixed(1)+' '+distance_unit+')';
	locationSelect.appendChild(option);
}

function downloadUrl(url, callback)
{
	var request = window.ActiveXObject ?
	new ActiveXObject('Microsoft.XMLHTTP') :
	new XMLHttpRequest();

	request.onreadystatechange = function() {
		if (request.readyState === 4) {
			request.onreadystatechange = doNothing;
			callback(request.responseText, request.status);
		}
	};

	request.open('GET', url, true);
	request.send(null);
}

function parseXml(str)
{
	if (window.ActiveXObject) {
		var doc = new ActiveXObject('Microsoft.XMLDOM');
		doc.loadXML(str);
		return doc;
	}
	else if (window.DOMParser) {
		return (new DOMParser()).parseFromString(str, 'text/xml');
	}
}

function doNothing() {}

$(document).ready(function()
{
	map = new google.maps.Map(document.getElementById('map'), {
		center: new google.maps.LatLng(defaultLat, defaultLong),
		zoom: 5,
		mapTypeId: 'roadmap',
		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
	});
	infoWindow = new google.maps.InfoWindow();

	locationSelect = document.getElementById('locationSelect');
		locationSelect.onchange = function() {
		var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
		if (markerNum !== 'none')
		google.maps.event.trigger(markers[markerNum], 'click');
	};
	
	$('#addressInput').keypress(function(e) {
		code = e.keyCode ? e.keyCode : e.which;
		if(code.toString() == 13)
			searchLocations();
	});


	initMarkers();
});

Salut , S'il te plait Eolia le fichier et le même pour la 1.6 ? Merci

Amitiés

Edited November 25, 2014 by G.Solidarité (see edit history)

Eolia · November 25, 2014

ben non, faut comparer les lignes que j'ai modifié avec le fichier posté plus haut et les modifier dans le fichier de la 1.6

Soyons Solidaire · November 26, 2014

Salut à tous, Merci monsieur Eolia

Marcellusfr · February 27, 2015

Bonjour j'ai trouvé tout ça très intéressant et un peu complexe à la fois.
Est-il possible de juste autoriser la saisie de code HTML dans la zone de texte commentaire et par la même occasion de rendre le champ adresse e-mail directement cliquable avec le mailto intégré ?

Merci d'avance pour vos retours.

Tatort · January 30, 2017

Hello,

Comment procéder pour prestahop 1.6 qqn a une idée ?

Suis un bon gros noob la dessus.

Merci d'avance

Romain

Tatort · January 31, 2017

ben....

var website = '<a href="http://'+markerNodes[i].getAttribute('website')+'" target="_blank">'+markerNodes[i].getAttribute('website')+'</a>';

Bon finalement j'ai reussi en suivant tout simplement ton tuto, j'ai même ajouté pleins d'autres champ et select box... Je vais tenter maintenant d'organiser la page de resultat en deux groupes distinct

[RESOLU]Création d'un nouveau champ dans Coordonnées & magasins

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment