136 lines
7.3 KiB
HTML
136 lines
7.3 KiB
HTML
{extends file="layout.tpl"}
|
|
|
|
{* Breadcrumb *}
|
|
{block name='no-return-functions' append}
|
|
{$breadcrumbs = [['title' => {intl l="Contact Us"}, 'url'=>{url path="/contact"}]]}
|
|
{/block}
|
|
|
|
{block name="main-content"}
|
|
<div class="main">
|
|
<article class="col-main" role="main" aria-labelledby="main-label">
|
|
<h1 id="main-label" class="page-header">{intl l="Contact Us"}</h1>
|
|
|
|
<div id="google-map"><!-- Google Map --></div>
|
|
|
|
{block name="contact-form"}
|
|
{form name="thelia.front.contact"}
|
|
<form id="form-contact" action="{url path="/contact"}" method="post">
|
|
{form_hidden_fields form=$form}
|
|
<fieldset id="contact-info" class="panel">
|
|
<div class="panel-heading">
|
|
{intl l="Send us a message"}
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
{form_field form=$form field="name"}
|
|
<div class="form-group group-name col-sm-6{if $error} has-error{/if}">
|
|
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
|
|
<div class="control-input">
|
|
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder contact name"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
|
|
{if $error }
|
|
<span class="help-block">{$message}</span>
|
|
{assign var="error_focus" value="true"}
|
|
{elseif $value != "" && !$error}
|
|
<span class="help-block"><i class="icon-ok"></i></span>
|
|
{/if}
|
|
</div>
|
|
</div><!--/.form-group-->
|
|
{/form_field}
|
|
{form_field form=$form field="email"}
|
|
<div class="form-group group-email col-sm-6{if $error} has-error{/if}">
|
|
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
|
|
<div class="control-input">
|
|
<input type="email" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder contact email"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
|
|
{if $error }
|
|
<span class="help-block">{$message}</span>
|
|
{assign var="error_focus" value="true"}
|
|
{/if}
|
|
</div>
|
|
</div><!--/.form-group-->
|
|
{/form_field}
|
|
</div>
|
|
{form_field form=$form field="subject"}
|
|
<div class="form-group group-firstname{if $error} has-error{/if}">
|
|
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
|
|
<div class="control-input">
|
|
<input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder contact subject"}" value="{$value}" {if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
|
|
{if $error }
|
|
<span class="help-block">{$message}</span>
|
|
{assign var="error_focus" value="true"}
|
|
{/if}
|
|
</div>
|
|
</div><!--/.form-group-->
|
|
{/form_field}
|
|
{form_field form=$form field="message"}
|
|
<div class="form-group group-message{if $error} has-error{/if}">
|
|
<label class="control-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
|
|
<div class="control-input">
|
|
<textarea name="{$name}" id="{$label_attr.for}" placeholder="{intl l="Placeholder contact message"}" rows="6" class="form-control"{if $required} aria-required="true" required{/if}>{$value}</textarea>
|
|
{if $error }
|
|
<span class="help-block">{$message}</span>
|
|
{assign var="error_focus" value="true"}
|
|
{/if}
|
|
</div>
|
|
</div><!--/.form-group-->
|
|
{/form_field}
|
|
|
|
<div class="form-group group-btn">
|
|
<div class="control-btn">
|
|
<button type="submit" class="btn btn-contact">{intl l="Send"}</button>
|
|
</div>
|
|
</div><!--/.form-group-->
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
{/form}
|
|
{/block}
|
|
</article>
|
|
</div>
|
|
{/block}
|
|
|
|
{block name="javascript-initialization"}
|
|
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language={lang attr="code"}"></script>
|
|
<script>
|
|
var address = '{config key="store_address1"} {config key="store_address2"} {config key="store_address3"}, {config key="store_city"}, {config key="store_country"}';
|
|
var icon_thelia = '{images file="assets/img/googlemap-icon.png"}{$asset_url}{/images}';
|
|
{literal}
|
|
$(function(){
|
|
$('#google-map').each(function() {
|
|
var map,
|
|
$this = $(this),
|
|
geocoder = new google.maps.Geocoder(),
|
|
marker,
|
|
latlng = new google.maps.LatLng(45.79, 3.09),
|
|
myOptions = {
|
|
zoom: 9,
|
|
center: latlng,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
|
};
|
|
|
|
map = new google.maps.Map(document.getElementById($this.attr("id")), myOptions);
|
|
|
|
// locate store address
|
|
geocoder.geocode( { 'address': address}, function(results, status) {
|
|
if (status == google.maps.GeocoderStatus.OK) {
|
|
map.setCenter(results[0].geometry.location);
|
|
latlng = new google.maps.LatLng(results[0].geometry.location.Qa, results[0].geometry.location.Ra),
|
|
marker = new google.maps.Marker({
|
|
map: map,
|
|
position: results[0].geometry.location
|
|
});
|
|
} else {
|
|
console.log('Error: The Geolocation service failed.')
|
|
// Show Thelia address
|
|
marker = new google.maps.Marker({
|
|
map: map,
|
|
position: latlng,
|
|
icon: icon_thelia
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
{/literal}
|
|
</script>
|
|
{/block}
|