1
Скриншоты, что должно получится?
Код подходить только для шаблона "Бистро"
В файле "HTML".
После кода:
<a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}">
<img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}. Перейти на главную" />
<link itemprop="logo" href="{ASSETS_IMAGES_PATH}logo.png" />
<span class="store_name">{SETTINGS_STORE_NAME}</span>
</a>
Добавить:<a href="#test-form" id="openFeedback">Связаться с нами</a>
В конце файла "HTML".
После кода:
<script>
var folderImg = '{ASSETS_IMAGES_PATH}';
var indexPage = "{index_page}";
</script>
Добавить:
<!-- Связь с администрацией -->
<form method="post" action="{FEEDBACK_URL}" id="test-form" class="feedbackFormHomePage white-popup-block mfp-hide" enctype="multipart/form-data" title="Форма обратной связи с «{SETTINGS_STORE_NAME}»">
<div class="contenttext clr">
<h1 class="title">Связь с администрацией</h1>
</div>
<hr>
{% IF FORM_SEND_OK %}
<!--Ошибка-уведомление-->
<div class="error orange">
<div class="error-title dinline"><span><span>Отлично!</span></span></div>
<div class="error-text">Ваше сообщение успешно отправлено администрации магазина. <a href="http://{NET_DOMAIN}/">Перейти на главную</a></div>
</div>
<!--Ошибка-уведомление-->
{% ELSE %}
{% IF FORM_NOTICE %}
<div class="warning txtalgnlft fnt14 b i">{FORM_NOTICE | nl2br}</div>
{% ENDIF %}
<div class="privat padd1">
<input type="hidden" name="hash" value="{HASH}" />
<!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
{ANTISPAM_CODE}
<div class="feedback-block">
<div class="feedback-str-block">
<label for="feedback_name">Представьтесь, пожалуйста:<span>*</span></label>
<input type="text" id="feedback_name" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]" value="{FORM_FEEDBACK_NAME}" maxlength="50" class="input required" />
</div>
<div class="feedback-str-block">
<label for="feedback_еmail">Email для обратной связи:<span>*</span></label>
<input type="email" id="feedback_еmail" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]" value="{FORM_FEEDBACK_EMAIL}" maxlength="255" class="input required email" />
</div>
<div class="feedback-str-block feedback_message-block">
<label for="feedback_message">Текст сообщения:<span>*</span></label>
<textarea id="feedback_message" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" cols="100" rows="6" class="back required">{FORM_FEEDBACK_MESSAGE}</textarea>
</div>
</div>
</div>
<div class="clr btnFeedback">
<button type="submit" class="btn btn-success">Отправить сообщение</button>
</div>
{% ENDIF %}
</form>
В конец файла "main.js" добавить код:
$(document).ready(function() {
$('#openFeedback').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
}
}
});
$('.feedbackFormHomePage button[type="submit"]').click(function(){
var action = $('.feedbackFormHomePage').attr('action');
var data = $('.feedbackFormHomePage').serialize();
$.post(action, data, function(d){
$('.feedbackFormHomePage').html($(d).find('.contenttext').html() + $(d).find('.feedbackForm').html());
});
return false;
});
});
В конец файла "main.css" добавить стили:
#openFeedback {
text-align: center;
display: inline-block;
width: 100%;
margin-top: 10px;
}
.logo {
margin-bottom: 12px;
}
.feedbackFormHomePage {
width: 50%;
margin: 0 auto;
background-color: white;
padding: 1%;
border-radius: 2px;
}
.feedbackFormHomePage .orange {
border: 1px solid #2ECC71; background-color: #2ECC71; background-position: 10px -458px; color: #FFF; padding-left: 43px;
}
