File: /home/retile.ru/public_html/form.html
{{ header }}
<div id="contact-page" class="container">
<div class="breadcrumb-h1 {{ menu_expanded ? ' col-md-offset-3 col-lg-offset-3 col-xxl-offset-4' }}">
<ul class="breadcrumb mobile">
{% for key, breadcrumb in breadcrumbs %}
{% if key + 1 < breadcrumbs|length %}
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
{% else %}
{% if not hide_last_breadcrumb or (hide_last_breadcrumb and key == 1) %}<li>{{ breadcrumb.text }}</li>{% endif %}
{% endif %}
{% endfor %}
</ul>
<!-- <h1 class="heading">{{ heading_title }}</h1> -->
</div>
<div class="row">
{{ column_left }}
{% if column_left and column_right %}
{% set class = ' col-sm-4 col-md-4 col-lg-6' %}
{% elseif column_left or column_right %}
{% set class = ' col-sm-8 col-md-9 col-lg-9 col-xxl-16' %}
{% else %}
{% set class = ' col-sm-12' %}
{% endif %}
<div id="content" class="{{ class }}">
{{ content_top }}
<div class="uni-wrapper">
{#}
{% if image %}
<div class="row">
<div class="col-sm-12">
<img src="{{ image }}" alt="{{ store }}" title="{{ store }}" class="img-responsive" />
</div>
</div>
{% endif %}
{#}
<div class="contacts">
<div class="row">
<div class="col-xs-12 {{ contact_map ? ' col-sm-6' : ' col-sm-12' }}">
<h3 class="heading">{{ text_contacts }}</h3>
<div class="contacts__contacts">
{#}
<div class="contacts__heading">{{ text_contacts }}</div>
{#}
<ul class="contact-list list-unstyled">
{#}
{% if shop_telephone %}
<li class="contact-list__item uni-href" data-href="tel:{{ shop_telephone }}"><i class="contact-list__icon fa fa-phone-alt fa-fw"></i><span>{{ shop_telephone }}</span></li>
{% endif %}
{#}
{% for contact in contacts %}
<li class="contact-list__item uni-href" data-href="{{ contact.href }}">
{% if contact.icon and 'fa-' in contact.icon %}
<i class="contact-list__icon {{ contact.icon }} fa-fw"></i>
{% elseif contact.icon %}
<img src="image/{{ contact.icon }}" alt="" />
{% endif %}
<span>{{ contact.text ? contact.text : contact.number }}</span>
</li>
{% endfor %}
{% if fax %}
<li class="contact-list__item"><i class="fa fa-fax fa-fw" aria-hidden="true"></i><span>{{ fax }}</span></li>
{% endif %}
{#}
{% if shop_email %}
<li class="contact-list__item uni-href" data-href="mailto:{{ shop_email }}"><i class="contact-list__icon far fa-envelope fa-fw" aria-hidden="true"></i><span>{{ shop_email }}</span></li>
{% endif %}
{#}
</ul>
</div>
<div class="contacts__address">
<div class="contacts__heading">Адреса{#}{{ text_address }}{#}</div>
<ul class="contact-list__address list-unstyled">
<li class="contact-list__item">{{ address }}</li>
</ul>
</div>
{% if open or geocode %}
<div class="contacts__heading">{{ text_open }}</div>
<ul class="contact-list__open list-unstyled">
<li class="contact-list__item">{{ open }}</li>
{% if geocode %}
<li class="contact-list__item"><a href="https://maps.google.com/maps?q={{ geocode|url_encode }}&hl={{ geocode_hl }}&t=m&z=15" target="_blank" class="btn btn-default"><i class="fa fa-map-marker"></i> {{ button_map }}</a></li>
{% endif %}
</ul>
{% endif %}
{% if comment %}
<div class="contacts__comment">
<h3 class="heading">{{ text_contact_comment }}</h3>
{{ comment }}
</div>
{% endif %}
<h3 class="heading mt-40">Как к нам добраться?</h3>
<div class="preym">
<div style="width:100%; margin: 15px 0;">
<div id="wrapMap" style="position:relative;overflow:hidden;">
<iframe allowfullscreen="true" frameborder="0" height="400" src="https://yandex.ru/map-widget/v1/?l=stv%2Csta&ll=37.585777%2C55.615011&mode=search&ol=geo&ouri=ymapsbm1%3A%2F%2Fgeo%3Fdata%3DCgoxNjE2ODMwNjk5ElPQoNC-0YHRgdC40Y8sINCc0L7RgdC60LLQsCwg0JTQvdC10L_RgNC-0L_QtdGC0YDQvtCy0YHQutCw0Y8g0YPQu9C40YbQsCwg0LLQuzE40LrQkyIKDeFWFkIVmnVeQg%2C%2C&panorama%5Bdirection%5D=208.183688%2C-6.078488&panorama%5Bfull%5D=true&panorama%5Bpoint%5D=37.586692%2C55.615306&panorama%5Bspan%5D=111.328981%2C60.000000&utm_source=main_stripe_big&z=17.95" style="position:relative;" width="100%"></iframe>
</div>
</div>
<h2>СХЕМА ПРОЕЗДА</h2>
<p>Подъезд к нашему складу со стороны улицы Днепропетровская:</p>
<div style="width: width: 100%;; margin: 15px 0;">
<img style="max-width: 100%;" src="/image/catalog/contacts/image1.png">
</div>
<div style="width: width: 100%;; margin: 15px 0;">
<img style="max-width: 100%;" src="/image/catalog/contacts/image2.png">
</div>
<p style="color: red; font-size: 20px;">Проезжайте во двор через открытые ворота</p>
<div style="width: width: 100%;; margin: 15px 0;">
<img style="max-width: 100%;" src="/image/catalog/contacts/image3.png">
<img style="max-width: 100%;" src="/image/catalog/contacts/image4.png">
</div>
<p style="color: red; font-size: 20px;">Слева будет вход с козырьком на склад</p>
<div style="width: width: 100%;; margin: 15px 0;">
<img style="max-width: 100%;" src="/image/catalog/contacts/image5.png">
</div>
<div style="width: width: 100%;; margin: 15px 0;">
<img style="max-width: 50%;" src="/image/catalog/contacts/image6.png">
<img style="max-width: 48%;" src="/image/catalog/contacts/image7.png">
</div>
<p style="color: red; font-size: 20px;">После входа вниз по лестнице и налево по коридору</p>
<div style="width: width: 100%;; margin: 15px 0;">
<img style="max-width: 100%;" src="/image/catalog/contacts/image8.png">
</div>
<div style="width: width: 100%;; margin: 15px 0;">
<img style="max-width: 100%;" src="/image/catalog/contacts/image9.png">
</div>
<p style="color: red; font-size: 20px;">Вы пришли</p>
<div style="width: width: 100%;; margin: 15px 0;">
<img style="max-width: 100%;" src="/image/catalog/contacts/image10.png">
</div>
<!-- <p style="margin-top: 15px;">
<strong>Заезжать во двор не нужно!</strong>
<span style="font-size: 13px;">Возможна кратковременная парковка у входа в здание при наличии свободного места</span>
</p>
<div style="width: 400px; margin: 15px 0;">
<img src="/image/catalog/contacts/contacts-cart.jpeg" style="max-width: 100%;">
</div>
<p style="margin-top: 15px;">
<span style="font-size: 13px;">Вход в здание с центрального входа со стороны улицы Днепропетровская. Ориентир - длинный пандус и красная дверь. </span>
</p>
<div style="width: 400px; margin: 15px 0;">
<img src="/image/catalog/contacts/contacts-where-1.jpeg" style="max-width: 100%; margin-bottom: 15px;">
</div>
<div style="width: 400px; margin: 15px 0;">После входа вниз по лестнице и налево по коридору</div>
<img src="/image/catalog/contacts/contacts-where-2.jpeg" style="width: 400px; margin-bottom: 15px;"> -->
</div>
</div>
{% if contact_map %}
<div class="contacts__map col-xs-12 col-sm-6">
<h3 class="heading">{{ text_location }}</h3>
{{ contact_map }}
</div>
{% endif %}
</div>
</div>
{% if text_in_contacts %}
<div class="row">
<div class="col-sm-12">
{{ text_in_contacts }}
</div>
</div>
<br />
{% endif %}
{% if locations %}
<div class="heading">{{ text_store }}</div>
{% if column_left and column_right %}
{% set class = ' col-sm-12 col-md-12 col-lg-6 col-xxl-6-1' %}
{% elseif column_left or column_right %}
{% set class = ' col-sm-6 col-md-4 col-lg-4 col-xxl-5' %}
{% else %}
{% set class = ' col-sm-6 col-md-3 col-lg-3 col-xxl-4' %}
{% endif %}
<div class="contact-locations row">
{% for location in locations %}
<div class="contact-locations__layout {{ class }}">
<div class="contact-locations__item uni-item">
{% if location.image %}
<div class="contact-locations__image">
<img src="{{ location.image }}" loading="lazy" alt="{{ news.name }}" title="{{ news.name }}" class="img-responsive" width="{{ img_width }}" height="{{ img_height }}" />
</div>
{% endif %}
<ul class="contact-locations__ul">
<li class="contact-locations__li">{{ location.name }}</li>
<li class="contact-locations__li">{{ location.address }}</li>
<li class="contact-locations__li">{{ text_telephone }}</li>
<li class="contact-locations__li">{{ location.telephone }}</li>
{% if location.fax %}
<li class="contact-locations__li">{{ text_fax }}</li>
<li class="contact-locations__li">{{ location.fax }}</li>
{% endif %}
{% if location.open %}
<li class="contact-locations__li">{{ text_open }}</li>
<li class="contact-locations__li">{{ location.open }}</li>
{% endif %}
{% if location.comment %}
<li class="contact-locations__li">{{ text_comment }}</li>
<li class="contact-locations__li">{{ location.comment }}</li>
{% endif %}
</ul>
{% if location.geocode %}
<br />
<a href="https://maps.google.com/maps?q={{ location.geocode|url_encode }}&hl={{ geocode_hl }}&t=m&z=15" target="_blank" class="btn btn-primary"><i class="fa fa-map-marker"></i><span>{{ button_map }}</span></a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endif %}
<div class="heading">{{ text_contact }}</div>
<div class="row">
<div id="contact-page__form" class="contact-page__form uni-form form-horizontal" style='background-image:url("/catalog/view/theme/unishop2/image/bg_01_1.webp");background-repeat:no-repeat;background-size:contain;background-position:left bottom;'>
<div class="col-sm-5">
</div>
<div class="col-sm-7">
<form action="{{ action }}" method="post" enctype="multipart/form-data" class="form-horizontal">
<div class="form-group required">
<label class="control-label" for="input-name">{{ entry_name }}</label>
<input type="text" name="name" value="{{ name }}" id="input-name" class="form-control" />
{% if error_name %}
<div class="text-danger">{{ error_name }}</div>
{% endif %}
</div>
<div class="form-group required">
<label class="control-label" for="input-email">{{ entry_email }}</label>
<input type="text" name="email" value="{{ email }}" id="input-email" class="form-control" />
{% if error_email %}
<div class="text-danger">{{ error_email }}</div>
{% endif %}
</div>
<div class="form-group required">
<label class="control-label" for="input-enquiry">{{ entry_enquiry }}</label>
<textarea name="enquiry" rows="4" id="input-enquiry" class="form-control">{{ enquiry }}</textarea>
{% if error_enquiry %}
<div class="text-danger">{{ error_enquiry }}</div>
{% endif %}
</div>
{{ captcha }}
{% if text_agree %}
<div class="form-group">
<label class="hidden-xs"></label>
<label class="input"><input type="checkbox" name="agree" value="1" /><span>{{ text_agree }}</span></label>
{% if error_agree %}
<div class="text-danger">{{ error_agree }}</div>
{% endif %}
</div>
{% endif %}
</form>
<div class="form-group">
<label class="hidden-xs"></label>
<button class="contact-page__btn btn btn-lg btn-primary" data-loading-text="{{ text_loading }}">{{ button_send }}</button>
</div>
</div>
</div>
</div>
</div>
<script>
$('.contact-page__btn').on('click', () => {
const form = '.contact-page__form';
$.ajax({
url: 'index.php?route=information/contact',
type: 'post',
data: $(form+' input, '+form+' textarea').serialize(),
dataType: 'html',
cache: false,
beforeSend: function() {
$('.contact-page__btn').button('loading');
},
complete: function() {
$('.contact-page__btn').button('reset');
},
success: function(html) {
const result = $(html).find('.text-danger');
if(result.length) {
if($('.basic-captcha').length) {
$.get('index.php?route=extension/captcha/basic/captcha');
$('.basic-captcha').html($(html).find('.basic-captcha').html())
}
result.each(function() {
form_error(form, $(this).text());
uniFlyAlert('danger', $(this).text());
});
} else {
window.location = 'index.php?route=information/contact/success';
}
}
});
});
</script>
{{ content_bottom }}
</div>
{{ column_right }}
</div>
</div>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{% for i, breadcrumb in breadcrumbs %}
{
"@type": "ListItem",
"position": {{ i+1 }},
"name": "{{ i == 0 ? shop_name: breadcrumb.text }}",
"item": "{{ breadcrumb.href }}"
{{ i + 1 < breadcrumbs|length ? '},' : '}' }}
{% endfor %}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Store",
"name": "{{ microdata.name }}",
"url": "{{ microdata.url }}",
"image": "{{ microdata.image }}",
"description": "{{ microdata.description }}",
"email": "{{ microdata.email }}",
"telephone": "{{ microdata.telephone }}",
"openingHours": "{{ microdata.open_hours }}",
"priceRange": "{{ microdata.currency }}",
"address": {
"@type": "PostalAddress",
"streetAddress": "{{ microdata.address }}"
}
}
</script>
<script>
var mapTitle = document.createElement('div'); mapTitle.className = 'mapTitle';
mapTitle.textContent = 'Нажмите для активации';
wrapMap.appendChild(mapTitle);
wrapMap.onclick = function() {
this.children[0].removeAttribute('style');
mapTitle.parentElement.removeChild(mapTitle);
}
wrapMap.onmousemove = function(event) {
mapTitle.style.display = 'block';
if(event.offsetY > 10) mapTitle.style.top = event.offsetY + 20 + 'px';
if(event.offsetX > 10) mapTitle.style.left = event.offsetX + 20 + 'px';
}
wrapMap.onmouseleave = function() {
mapTitle.style.display = 'none';
}
</script>
<script>
document.querySelector('.contact-page__btn').addEventListener('click', function() {
// Проверяем, согласен ли пользователь с политикой конфиденциальности
const agreeCheckbox = document.querySelector('input[name="agree"]');
if (!agreeCheckbox.checked) {
alert('Пожалуйста, подтвердите согласие с политикой конфиденциальности');
return;
}
// Собираем данные из формы
const formData = new FormData();
formData.append('name', document.querySelector('#input-name').value);
formData.append('email', document.querySelector('#input-email').value);
formData.append('enquiry', document.querySelector('#input-enquiry').value);
formData.append('agree', agreeCheckbox.checked ? '1' : '0');
// Показываем индикатор загрузки
const button = this;
button.disabled = true;
button.textContent = button.getAttribute('data-loading-text');
// Отправляем данные на сервер
fetch('mailer.php', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Ошибка сети');
}
return response.text();
})
.then(data => {
alert('Сообщение успешно отправлено!');
// Очищаем форму после успешной отправки
document.querySelector('form').reset();
})
.catch(error => {
console.error('Ошибка:', error);
alert('Произошла ошибка при отправке сообщения');
})
.finally(() => {
// Восстанавливаем кнопку
button.disabled = false;
button.textContent = 'Отправить';
});
});
</script>
{{ footer }}
<script>
document.querySelector('.contact-page__btn').addEventListener('click', function() {
// Проверяем, согласен ли пользователь с политикой конфиденциальности
const agreeCheckbox = document.querySelector('input[name="agree"]');
if (!agreeCheckbox.checked) {
alert('Пожалуйста, подтвердите согласие с политикой конфиденциальности');
return;
}
// Собираем данные из формы
const formData = new FormData();
formData.append('name', document.querySelector('#input-name').value);
formData.append('email', document.querySelector('#input-email').value);
formData.append('enquiry', document.querySelector('#input-enquiry').value);
formData.append('agree', agreeCheckbox.checked ? '1' : '0');
// Показываем индикатор загрузки
const button = this;
button.disabled = true;
button.textContent = button.getAttribute('data-loading-text');
// Отправляем данные на сервер
fetch('mailer.php', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Ошибка сети');
}
return response.text();
})
.then(data => {
alert('Сообщение успешно отправлено!');
// Очищаем форму после успешной отправки
document.querySelector('form').reset();
})
.catch(error => {
console.error('Ошибка:', error);
alert('Произошла ошибка при отправке сообщения');
})
.finally(() => {
// Восстанавливаем кнопку
button.disabled = false;
button.textContent = 'Отправить';
});
});
</script>