Jump to content

Store Locator - Use Email Address & Notes Field

Aztec Media
 Share

Recommended Posts

Aztec Media Newbie

Aztec Media

Posted
Posted

Hi -

 

I'm setting up a new ecommerce website using PrestaShop that has over 200 physical stores. I would therefore like to make good use of the Store Locator functionality.

 

In the admin there is the facility to add an email address as well as notes for each store. I would like to be able to use these in the frontend so that when a list of stores are returned for the users search, I would like to show the email address and notes in addition to the address and phone number.

 

Is there any further documentation for using this part of PrestaShop? Ideally I woul also like to remove the duplicate phone number and replace one with the fax number (it seems the first telephone instance is built into the address string). I would also like to utilise the Opening Hours fields for contact details for the staff members instead.

 

Any help would be greatly appreciated.

 

Oliver

Link to comment
Share on other sites
Dave L Newbie

Dave L

Posted
Posted

In the admin there is the facility to add an email address as well as notes for each store. I would like to be able to use these in the frontend so that when a list of stores are returned for the users search, I would like to show the email address and notes in addition to the address and phone number.

 

 

This would be very useful. As you say there are fields for email address and notes, and even fax number, but none of these show up in the front end.

 

Anyone please.

Link to comment
Share on other sites
Dave L Newbie

Dave L

Posted
Posted

I'm sure the answer is in the theme/stores.tpl line 34

 

{if $simplifiedStoresDiplay}
{if $stores|@count}
<p>{l s='Here are the details of our stores, feel free to contact us:'}</p>
{foreach from=$stores item=store}
	<div class="store-small">
		{if $store.has_picture}<p><img src="{$img_store_dir}{$store.id_store}-medium.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.phone}{l s='Phone:' js=0} {$store.phone}{/if}<br />
			</p>
	</div>
{/foreach}
{/if}

 

I don't know how to make the email, notes and fax fields show.

Link to comment
Share on other sites
  • 1 month later...
ukbaz Newbie

ukbaz

Posted
Posted

Hi there - yes altering that .tpl file will make those 'extra' fields display - but in the simplified list option only. To make changes in the 'mapped' version yo nedd to edit oher files also. Mostly in stores.js

 

I'm part way through doing that - have got them showing in both versions - however evrytime I try to get rid of the phone number appended to the address it doesn't work - anyone done that?

 

Have attached files that work so far

 

Baz

Link to comment
Share on other sites
  • 1 month later...
  • 1 year later...
Never_give_up Newbie

Never_give_up

Posted
Posted (edited)

I am using version PrestaShop™ 1.5.4.1

 

Ok I got it figured out.... I added fax and notes to stores on the Map view of store locations. I wanted to add the website url of the stores too. I am using Map view to show all different retail stores that carry the manufactures products. I just put the url's in the notes section and it works great now. Anything can be put in the notes for customizing what you want to show for each store.

 

(after you edit add a copy of the StoresController.php file to the override folder with the same directory folder layout so when you update your store you will not lose the edits.)

 

in Controllers >> front >> StoresController.php

 

find this:

{
  $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('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']));
 }

 

 

and replace with this:

{
  $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('fax', $store['fax']);
  $newnode->setAttribute('note', $store['note']);
  $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']));
 }

 

 

in themes >> your theme>> stores.tpl

 

find

<p align="center">
<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.city|escape:'htmlall':'UTF-8'}{if $store.state}, {$store.state} {$store.postcode}{/if}<br />
{$store.country|escape:'htmlall':'UTF-8'}<br />
{if $store.phone}{l s='Phone:' js=0} {$store.phone}{/if}

  </p>

 

and replace with:

<p align="center">
<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.city|escape:'htmlall':'UTF-8'}{if $store.state}, {$store.state} {$store.postcode}{/if}<br />
{$store.country|escape:'htmlall':'UTF-8'}<br />
{if $store.phone}{l s='Phone:' js=0} {$store.phone}{/if}
{if $store.fax}{l s='Fax:' js=0} {$store.fax}{/if}
{if $store.note}{l s='Note:' js=0} {$store.note}{/if}
  </p>

 

Find:

<script type="text/javascript">
 // <![CDATA[
 var map;
 var markers = [];
 var infoWindow;
 var locationSelect;
 var defaultLat = '{$defaultLat}';
 var defaultLong = '{$defaultLong}';

 var translation_1 = '{l s='No store found, try to select a wider radius' js=1}';
 var translation_2 = '{l s='store found - see details:' js=1}';
 var translation_3 = '{l s='stores found - see all results:' js=1}';
 var translation_4 = '{l s='Phone:' js=1}';
 var translation_5 = '{l s='Get Directions' js=1}';
 var translation_6 = '{l s='Not found' js=1}';

 var hasStoreIcon = '{$hasStoreIcon}';
 var distance_unit = '{$distance_unit}';
 var img_store_dir = '{$img_store_dir}';
 var img_ps_dir = '{$img_ps_dir}';
 var searchUrl = '{$searchUrl}';
 //]]>
</script>

 

 

Replace with:

<script type="text/javascript">
 // <![CDATA[
 var map;
 var markers = [];
 var infoWindow;
 var locationSelect;
 var defaultLat = '{$defaultLat}';
 var defaultLong = '{$defaultLong}';

 var translation_1 = '{l s='No store found, try to select a wider radius' js=1}';
 var translation_2 = '{l s='store found - see details:' js=1}';
 var translation_3 = '{l s='stores found - see all results:' js=1}';
 var translation_4 = '{l s='Phone:' js=1}';
 var translation_5 = '{l s='Get Directions' js=1}';
 var translation_6 = '{l s='Not found' js=1}';
 var translation_7 = '{l s='Fax:' js=1}';
 var translation_8 = '{l s='Note:' js=1}';

 var hasStoreIcon = '{$hasStoreIcon}';
 var distance_unit = '{$distance_unit}';
 var img_store_dir = '{$img_store_dir}';
 var img_ps_dir = '{$img_ps_dir}';
 var searchUrl = '{$searchUrl}';
 //]]>
</script>

 

 

In themes >> your theme >> js >> stores.js

 

find:

{
  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 latlng = new google.maps.LatLng(
  parseFloat(markerNodes[i].getAttribute('lat')),
  parseFloat(markerNodes[i].getAttribute('lng')));
  createOption(name, distance, i);
  createMarker(latlng, name, address, addressNoHtml, other, id_store, has_store_picture);
  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+(phone != '' ? '<br /><br />'+translation_4+' '+phone : '')+'</td><td class="distance">'+distance+' '+distance_unit+'</td></tr>');
  $('#stores-table').show();
 }

 

replace with:

 {
  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 fax = markerNodes[i].getAttribute('fax');
  var note = markerNodes[i].getAttribute('note');
  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')));
  createOption(name, distance, i);
  createMarker(latlng, name, address, addressNoHtml, other, id_store, has_store_picture);
  bounds.extend(latlng);
  $('#stores-table tr:last').after('<tr class="node"><td class="num">'+parseInt(i + 1)+'</td><td width="185">'+(has_store_picture == 1 ? '<img src="'+img_store_dir+parseInt(id_store)+'-medium.jpg" height="65" width="150" alt="" />' : '')+'</td><td><b>'+name+'</b><br>'+(note != '' ? ''+note : '')+'<br></td><td>'+address+'<br />'+(fax != '' ? ''+translation_7+' '+fax : '')+'</td><td class="distance"style="text-align: left">'+distance+' '+distance_unit+'</td></tr>');
  $('#stores-table').show();

 }

 

for layout purposes

in themes>>your theme>>stores.tpl

 

find

<tr>
  <th >{l s=''}</th>
  <th >{l s='Store'}</th>
  <th >{l s='Address'}</th>
  <th >{l s='Distance'}</th>
 </tr>

 

and replace with

<tr>
  <th >{l s=''}</th>
  <th >{l s=''}</th>
  <th >{l s='Store'}</th>
  <th >{l s='Address'}</th>
  <th >{l s='Distance'}</th>
 </tr>

 

I moved my js code around for a better layout so it may be slightly different from yours but the Fax and Notes code works now. YAY!

 

Hope this helps

Edited by Never_give_up (see edit history)
  • Like 2
Link to comment
Share on other sites
  • 1 year later...
framarfre Newbie

framarfre

Posted
Posted

I am using version PrestaShop™ 1.5.4.1

 

Ok I got it figured out.... I added fax and notes to stores on the Map view of store locations. I wanted to add the website url of the stores too. I am using Map view to show all different retail stores that carry the manufactures products. I just put the url's in the notes section and it works great now. Anything can be put in the notes for customizing what you want to show for each store.

 

(after you edit add a copy of the StoresController.php file to the override folder with the same directory folder layout so when you update your store you will not lose the edits.)

 

in Controllers >> front >> StoresController.php

 

find this:

{
   $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('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']));
  }

and replace with this:

{
   $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('fax', $store['fax']);
   $newnode->setAttribute('note', $store['note']);
   $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']));
  }

in themes >> your theme>> stores.tpl

 

find

<p align="center">
	<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.city|escape:'htmlall':'UTF-8'}{if $store.state}, {$store.state} {$store.postcode}{/if}<br />
	{$store.country|escape:'htmlall':'UTF-8'}<br />
	{if $store.phone}{l s='Phone:' js=0} {$store.phone}{/if}
  
   </p>
and replace with:

<p align="center">
	<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.city|escape:'htmlall':'UTF-8'}{if $store.state}, {$store.state} {$store.postcode}{/if}<br />
	{$store.country|escape:'htmlall':'UTF-8'}<br />
	{if $store.phone}{l s='Phone:' js=0} {$store.phone}{/if}
	{if $store.fax}{l s='Fax:' js=0} {$store.fax}{/if}
	{if $store.note}{l s='Note:' js=0} {$store.note}{/if}
   </p>
Find:

<script type="text/javascript">
  // <![CDATA[
  var map;
  var markers = [];
  var infoWindow;
  var locationSelect;
  var defaultLat = '{$defaultLat}';
  var defaultLong = '{$defaultLong}';

  var translation_1 = '{l s='No store found, try to select a wider radius' js=1}';
  var translation_2 = '{l s='store found - see details:' js=1}';
  var translation_3 = '{l s='stores found - see all results:' js=1}';
  var translation_4 = '{l s='Phone:' js=1}';
  var translation_5 = '{l s='Get Directions' js=1}';
  var translation_6 = '{l s='Not found' js=1}';

  var hasStoreIcon = '{$hasStoreIcon}';
  var distance_unit = '{$distance_unit}';
  var img_store_dir = '{$img_store_dir}';
  var img_ps_dir = '{$img_ps_dir}';
  var searchUrl = '{$searchUrl}';
  //]]>
</script>

Replace with:

<script type="text/javascript">
  // <![CDATA[
  var map;
  var markers = [];
  var infoWindow;
  var locationSelect;
  var defaultLat = '{$defaultLat}';
  var defaultLong = '{$defaultLong}';

  var translation_1 = '{l s='No store found, try to select a wider radius' js=1}';
  var translation_2 = '{l s='store found - see details:' js=1}';
  var translation_3 = '{l s='stores found - see all results:' js=1}';
  var translation_4 = '{l s='Phone:' js=1}';
  var translation_5 = '{l s='Get Directions' js=1}';
  var translation_6 = '{l s='Not found' js=1}';
  var translation_7 = '{l s='Fax:' js=1}';
  var translation_8 = '{l s='Note:' js=1}';

  var hasStoreIcon = '{$hasStoreIcon}';
  var distance_unit = '{$distance_unit}';
  var img_store_dir = '{$img_store_dir}';
  var img_ps_dir = '{$img_ps_dir}';
  var searchUrl = '{$searchUrl}';
  //]]>
</script>

In themes >> your theme >> js >> stores.js

 

find:

{
   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 latlng = new google.maps.LatLng(
   parseFloat(markerNodes[i].getAttribute('lat')),
   parseFloat(markerNodes[i].getAttribute('lng')));
   createOption(name, distance, i);
   createMarker(latlng, name, address, addressNoHtml, other, id_store, has_store_picture);
   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+(phone != '' ? '<br /><br />'+translation_4+' '+phone : '')+'</td><td class="distance">'+distance+' '+distance_unit+'</td></tr>');
   $('#stores-table').show();
  }
replace with:

  {
   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 fax = markerNodes[i].getAttribute('fax');
   var note = markerNodes[i].getAttribute('note');
   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')));
   createOption(name, distance, i);
   createMarker(latlng, name, address, addressNoHtml, other, id_store, has_store_picture);
   bounds.extend(latlng);
   $('#stores-table tr:last').after('<tr class="node"><td class="num">'+parseInt(i + 1)+'</td><td width="185">'+(has_store_picture == 1 ? '<img src="'+img_store_dir+parseInt(id_store)+'-medium.jpg" height="65" width="150" alt="" />' : '')+'</td><td><b>'+name+'</b><br>'+(note != '' ? ''+note : '')+'<br></td><td>'+address+'<br />'+(fax != '' ? ''+translation_7+' '+fax : '')+'</td><td class="distance"style="text-align: left">'+distance+' '+distance_unit+'</td></tr>');
   $('#stores-table').show();
  
  }
for layout purposes

in themes>>your theme>>stores.tpl

 

find

<tr>
   <th >{l s=''}</th>
   <th >{l s='Store'}</th>
   <th >{l s='Address'}</th>
   <th >{l s='Distance'}</th>
  </tr>
and replace with

<tr>
   <th >{l s=''}</th>
   <th >{l s=''}</th>
   <th >{l s='Store'}</th>
   <th >{l s='Address'}</th>
   <th >{l s='Distance'}</th>
  </tr>
I moved my js code around for a better layout so it may be slightly different from yours but the Fax and Notes code works now. YAY!

 

Hope this helps

 

 

 

many thanks for your code never_give_up, very nice step by step tutorial

i tried it on my demo store (for test purposes) and everything works fine

Hello guys,

I want to enable only the notes field but I'm on PrestaShop 1.6.0.14 and I can not find the items to change, something has changed in this version.

Is it possible that no one knows how to do? Are hours that I'm looking for a solution but nothing :(:unsure::wacko:<_< !

Link to comment
Share on other sites
  • 4 weeks later...
  • 2 weeks later...
akafester Newbie

akafester

Posted
Posted

Hi all. 

 

I found this very helpful but i need a little bit of advice. 

I got the note to show up in the FO but i can't seem to make a break between lines.

 

Prestashop scales the table automatically, but it looks like crap because the note line is very long.

Link to comment
Share on other sites
Never_give_up Newbie

Never_give_up

Posted
Posted (edited)

Hi all. 

 

I found this very helpful but i need a little bit of advice. 

I got the note to show up in the FO but i can't seem to make a break between lines.

 

Prestashop scales the table automatically, but it looks like crap because the note line is very long.

 

 

Hi akafester, did you add retrun <br> breaks in notes?  the example http://dlite.com/stores

Edited by Never_give_up (see edit history)
Link to comment
Share on other sites
Never_give_up Newbie

Never_give_up

Posted
Posted (edited)

I'm not entirely sure about what that site is supposed to show me. The store locator i use is the simple one without the map.

 

I have tried to use the <br /> tag but prestashop is stripping it.

 

Link to site here: http://garntraaden.dk/stores

it's in danish ;).

 

That store link is just showing the layout of the notes area which is under the “stores" column but it is with a custom theme. I moved the columns code around and re-named column title. 

 

put the <br> directly in the database and it will stick there but don’t edit it again in the back office because it will just strip them out again. Or you can change prestashop code to allow html in the stores page which is a simple fix but I don’t remember which page that is to edit....you would have to research it.

 

I am sorry I don’t remember which way I made it stick put it was one of of 2 ways that finally worked. I think I just forced it to stick in the database because it was quicker but someone may know of a better way to make the <br> stick in the back office.

Edited by Never_give_up (see edit history)
Link to comment
Share on other sites
  • 1 year later...
www.bio-krby-kamna.cz Newbie

www.bio-krby-kamna.cz

Posted
Posted (edited)

For presta 1.6. Demo here : http://www.bio-krby-kamna.cz/cs/stores

 

stores.tpl



{capture name=path}{l s='Our stores'}{/capture}

<h1 class="page-heading">
	{l s='Our stores'}
</h1>
<p>{l s='Sipka ukazuje presny vstup do prodejny'}</p>

{if $simplifiedStoresDiplay}
	{if $stores|@count}
		<p class="store-title">
			<strong class="dark">
				{l s='Here you can find our store locations. Please feel free to contact us:'}
			</strong>
		</p>
	    <table class="table table-bordered">
	    	<thead>
            	<tr>
                	<th class="logo">{l s='Logo'}</th>
                    <th class="name">{l s='Store name'}</th>
                    <th class="address">{l s='Store address'}</th>
                    <th class="store-hours">{l s='Working hours'}</th>
                </tr>
            </thead>
			{foreach $stores as $store}
				<tr class="store-small">
					<td class="logo">
						{if $store.has_picture}
							<div class="store-image">
								<img src="{$img_store_dir}{$store.id_store}.jpg" alt="" />
							</div>
						{/if}
					</td>
					<td class="name">
						{$store.name|escape:'html':'UTF-8'}
					</td>
		            <td class="address addre1">
		            {assign value=$store.id_store var="id_store"}
		            {foreach from=$addresses_formated.$id_store.ordered name=adr_loop item=pattern}
	                    {assign var=addressKey value=" "|explode:$pattern}
	                    {foreach from=$addressKey item=key name="word_loop"}
	                        <span {if isset($addresses_style[$key])} class="{$addresses_style[$key]}"{/if}>
	                            {$addresses_formated.$id_store.formated[$key|replace:',':'']|escape:'html':'UTF-8'}
	                        </span>
							
							
						
							
							
	                    {/foreach}
	                {/foreach}
					
				
	                	<br/>
						{if $store.phone}<br/>{l s='Phone:'} {$store.phone|escape:'html':'UTF-8'}{/if}
						{if $store.fax}<br/>{l s='Fax:'} {$store.fax|escape:'html':'UTF-8'}{/if}
						{if $store.email}<br/>{l s='Email:'} {$store.email|escape:'html':'UTF-8'}{/if}
						{if $store.note}<br/><br/>{$store.note|escape:'html':'UTF-8'|nl2br}{/if}
						
				
					</td>
		            <td class="store-hours">
						{if isset($store.working_hours)}{$store.working_hours}{/if}
		            </td>
				</tr>
			{/foreach}
	    </table>
	{/if}
{else}
	<div id="map"></div>
	<p class="store-title">
		<strong class="dark">
			{l s='Enter a location (e.g. zip/postal code, address, city or country) in order to find the nearest stores.'}
		</strong>
	</p>
    <div class="store-content">
        <div class="address-input">
            <label for="addressInput">{l s='Your location:'}</label>
            <input class="form-control grey" type="text" name="location" id="addressInput" value="{l s='Address, zip / postal code, city, state or country'}" autocomplete="on"  />
        </div>
        <div class="radius-input">
            <label for="radiusSelect">{l s='Radius:'}</label> 
            <select name="radius" id="radiusSelect" class="form-control">
                <option value="15">15</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
				<option value="200">200</option>
				<option value="300" selected="selected">300</option>
            </select>
			
			
			
            <img src="{$img_ps_dir}loader.gif" class="middle" alt="" id="stores_loader" />
        </div>
        <div>
            <button name="search_locations" class="button btn btn-default button-small">
            	<span>
            		{l s='Search'}<i class="icon-chevron-right right"></i>
            	</span>
            </button>
        </div>
    </div>
    <div class="store-content-select selector3">
    	<select id="locationSelect" class="form-control">
    		<option>-</option>
    	</select>
    </div>

	<table id="stores-table" class="table table-bordered">
    	<thead>
			<tr>
                <th class="num">#</th>
                <th>{l s='Store'}</th>
                <th>{l s='Address'}</th>
                <th>{l s='Distance'}</th>
            </tr>		
        </thead>
        <tbody>
        </tbody>
	</table>
{strip}
{addJsDef map=''}
{addJsDef markers=array()}
{addJsDef infoWindow=''}
{addJsDef locationSelect=''}
{addJsDef defaultLat=$defaultLat}
{addJsDef defaultLong=$defaultLong}
{addJsDef hasStoreIcon=$hasStoreIcon}
{addJsDef distance_unit=$distance_unit}
{addJsDef img_store_dir=$img_store_dir}
{addJsDef img_ps_dir=$img_ps_dir}
{addJsDef searchUrl=$searchUrl}
{addJsDef logo_store=$logo_store}
{addJsDefL name=translation_1}{l s='No stores were found. Please try selecting a wider radius.' js=1}{/addJsDefL}
{addJsDefL name=translation_2}{l s='store found -- see details:' js=1}{/addJsDefL}
{addJsDefL name=translation_3}{l s='stores found -- view all results:' js=1}{/addJsDefL}
{addJsDefL name=translation_4}{l s='Phone:' js=1}{/addJsDefL}
{addJsDefL name=translation_5}{l s='Get directions' js=1}{/addJsDefL}
{addJsDefL name=translation_6}{l s='Not found' js=1}{/addJsDefL}
{addJsDefL name=translation_7}{l s='Note' js=1}{/addJsDefL}
{addJsDefL name=translation_8}{l s='Fax' js=1}{/addJsDefL}
{addJsDefL name=translation_9}{l s='Mail' js=1}{/addJsDefL}
{/strip}
{/if}

stores.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({

    maxWidth: 1200
  });
  
	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 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 phone = markerNodes[i].getAttribute('phone');
		
		var fax = markerNodes[i].getAttribute('fax');
			var note = markerNodes[i].getAttribute('note');
			var email = markerNodes[i].getAttribute('email');
			
			
			
			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, phone, fax, note, email, address, other, id_store, has_store_picture);
			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 fax = markerNodes[i].getAttribute('fax');
			var note = markerNodes[i].getAttribute('note');
			var email = markerNodes[i].getAttribute('email');
			
			
			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')));

			createOption(name, distance, i);
			createMarker(latlng, name, phone, fax, note, email, address, other, id_store, has_store_picture);
			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 addre2">'+'<br/>other<br/>'+other+'<br/>mail<br/>'+email+'<br/>adres<br/>'+address+'<br/>zametka<br/>'+note+'<br/>fax<br/>'+fax+'<br/>'+(phone !== '' ? ''+translation_4+' '+phone : '')+'</td><td class="distance">'+distance+' '+distance_unit+'</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');
		};
	});
}

// ubraty vse br i nbsp iz adresa na otkrytom okne markera
function replaceHtml( string_to_replace ) 
{
    return string_to_replace.replace(/ /g, ' ').replace(/<br.*?>/g, ', ');
}



function createMarker(latlng, name, phone, fax, note, email, address, other, id_store, has_store_picture)
{
		address = address.replace(phone, '');

	var html = '<div class="div6"><b class="name5">'+name+'</b><br/>'+'<span class="adres5">'+address+'</span>'+'<span class="phone5">'+'</span>'+'<a span class="mail5" href="mailto:'+email+'">'+email+'</a>'+'<br/>'+note+'<br/>'+translation_4+'  '+phone+(fax !== '' ? ''+', '+fax: '')+'<br/><br/>'+other+'<br /><a class="href5 mail5" href="http://maps.google.com/maps?saddr=&daddr='+latlng+'" target="_blank">'+translation_5+'<\/a></div><div class="div7">' +(has_store_picture == 1 ? '<br /> <img class="img5" src="'+img_store_dir+parseInt(id_store)+'.jpg" alt="" />' : '')+'</div>';
// orig //	var image = new google.maps.MarkerImage(img_ps_dir+logo_store);
	var image = 'http://www.bio-krby-kamna.cz/img/marker.png';  // маркер карты
	var marker = '';

	
	
	if (hasStoreIcon)
		marker = new google.maps.Marker({ map: map, icon: image, animation: google.maps.Animation.DROP,  title: name, position: latlng });  //animation: google.maps.Animation.DROP, дл¤ добавлени¤ эффекта падающего значка //  title: 'есто встречи перед экскурсией - {$gpsplace}' // title на закрытом маркере
	
	
	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 by www.bio-krby-kamna.cz (see edit history)
Link to comment
Share on other sites
www.bio-krby-kamna.cz Newbie

www.bio-krby-kamna.cz

Posted
Posted (edited)

Storescontroller.php

 

add after $newnode->addAttribute('phone', $store['phone']);

 
 
//dobavlenie otsutstwujuschih peremennych
$newnode->addAttribute('note', $store['note']);
$newnode->addAttribute('fax', $store['fax']);
$newnode->addAttribute('email', $store['email']);
//dobavlenie otsutstwujuschih peremennych

 

css


#contact .ask3 {
    display: none; 

} 
#contact .ask1 {
    display: none; 

} 
div.gm-style {
    font: italic 13px/24px "Trebuchet MS", Arial, Helvetica, sans-serif!important;
}
.gmnoprint {
    display: none; 

}
#stores .name5
{
    font: normal 18px PlakatBold, georgia, serif;
}

.karta1
{
width: 100%;
border: none;
height: 801px;
text-align: left!important;
background: white;
padding: 18px;
border: 1px solid #D6D4D4;
overflow-y: scroll;
max-height: 801px!important;
}

#stores #map p {
     margin: 0;
    line-height: 18px;
}

#stores .button.button-small span {

    padding: 3px 18px 2px 18px;
 
}

#stores #map .mail5 {
    color: blue;
}
#stores #map .div6
 {
    display: block;
    float: left;
  
}
#stores #map .div7
 {
    display: block;
    float: right;
  
}

#stores #map .div7 img.img5
{
 margin-left: 20px;
 max-width: 347px;
}

/***********************************************************
					Stores Page Styles
************************************************************/
#stores #map {
  width: 100%;
  height: 647px;
  margin-bottom: 26px;
margin-top: 26px;   }
#stores input#addressInput {
  display: inline-block;
  width: 269px; }
#stores .address-input {
  float: left;
  margin-right: 19px; }
  @media (max-width: 767px) {
    #stores .address-input {
      width: 100%;
      margin: 0 0 20px 0; } }
  #stores .address-input label {
    margin-right: 5px; }
#stores .radius-input {
  float: left;
  line-height: 23px;
  margin-right: 20px; }
  #stores .radius-input label,
  #stores .radius-input .selector {
    float: left; }
  #stores .radius-input label {
    margin-right: 10px; }
  #stores .radius-input #radiusSelect {
    width: 78px; }
#stores .store-content {
  padding-bottom: 30px; }
#stores .store-content-select .selector {
  visibility: hidden;
  display: none; }
#stores .store-content-select.active {
  padding-top: 30px;
  margin-bottom: 30px;
  border-top: 1px solid #d6d4d4; }
  #stores .store-content-select.active .selector {
    visibility: visible;
    display: block; }
#stores .store-title {
  margin-bottom: 16px; }
#stores label {
  font-weight: normal;
  color: #777777; }
#stores #stores_loader {
  display: none;
  margin-left: 5px; }
#stores #locationSelect {
  max-width: 356px;
  visibility: hidden; }
#stores #stores-table {
  display: none; }
  #stores #stores-table tbody td {
    padding: 20px; }
    #stores #stores-table tbody td.num {
      background: #fbfbfb;
      width: 46px; }
    #stores #stores-table tbody td.name span {
      padding-left: 15px; }
    @media (max-width: 767px) {
      #stores #stores-table tbody td.name img {
        display: none; } }

.store-image img {
  width: 100%;
  min-width: 100px; }

m.zip

Edited by www.bio-krby-kamna.cz (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...