PrestaShop Forum

При нажатии на кнопку Купить не выскакивает форма заказа. Не могу понять, что не так? Вот мой код для кнопки. Может в нем где-то ошибка?
<a class="button btn btn-default modalbox" href="#feedback{$a}" rel="nofollow" >
<span>Купить</span>
</a>
{else}

{/if}
{/if}
<style type="text/css">
#feedback{$a} {literal}{display:none;}{/literal}
</style>

<div id="feedback{$a}" class="b1c-form"><!-- hidden inline form -->
<form method="post" class="" id="feedback{$a}"><div class="b1c-tl">

<span class="b1c-title-name">Купить
{$product.name|escape:'html':'UTF-8'}</span>
</div>
<div class="b1c-description">
Чтобы оформить заказ, заполните форму. В течение пары часов с вами свяжется менеджер и уточнит детали заказа, а также время доставки. </div>
<input type="hidden" value="{$product.name|escape:'html':'UTF-8'}" name="yourtovar" />
<div class="b1c-caption">Ваше имя</div><input placeholder="Ваше имя" class="b1c-txt" name="yourname" type="text" maxlength="150" style="width: 329px;"><div class="b1c-caption">Телефон</div><input placeholder="Телефон" class="b1c-txt" type="text" name="yourtel" maxlength="150" style="width: 329px;" required><div class="b1c-caption">Адрес доставки</div><textarea name="yourmessage" placeholder="Адрес доставки" class="b1c-txt" style="width: 329px;"></textarea>
<div class="b1c-submit-area">
<input type="submit" class="b1c-submit" value="Оформить заказ">
<div class="b1c-result"></div>
</div>
</form>
</div>


Все не так. Стили, js, структрура.
Делайте как сделана в prestashop стандартная кнопка отправить другу.

А где можно посмотреть?

В модуле sendtoafriend.

С модулем *отправить другу* я еще больше запуталась...(
А с этим кодом который стоит в шаблоне нет вариантов, чтобы его как-то подкорректировать?
Попробовала убрать часть кода

<style type="text/css">
#feedback{$a} {literal}{display:none;}{/literal}
</style>

У меня появилась форма, но она,правда , теперь появляется не при нажатии на кнопку, а когда наводишь курсор мышки и появляется над кнопкой, а не посредине страницы. Может можно как-то в стилях редактировать?

Чтобы форма появлялась при клике на кнопку, нужно создать js функцию в которой менять видимость формы.
В модуле sendtoafriend хороший пример как это делается.

Переписала код
<button class="button btn btn-default modalbox" onclick="showModalWin()" rel="kypit" >
<span>Купить</span>
</button>
{else}

{/if}
{/if}

<div id="kypit" class="b1c-form" style="display:none" >
<form method="post" action="" id="kypit"><div class="b1c-tl">

<span class="b1c-title-name">Купить
{$product.name|escape:'html':'UTF-8'}</span>
</div>
<div class="b1c-description">
Чтобы оформить заказ, заполните форму. В течение пары часов с вами свяжется менеджер и уточнит детали заказа, а также время доставки. </div>
<input type="hidden" value="{$product.name|escape:'html':'UTF-8'}" name="yourtovar" />
<div class="b1c-caption">Ваше имя</div><input placeholder="Ваше имя" class="b1c-txt" name="yourname" type="text" maxlength="150" style="width: 329px;"><div class="b1c-caption">Телефон</div><input placeholder="Телефон" class="b1c-txt" type="text" name="yourtel" maxlength="150" style="width: 329px;" required><div class="b1c-caption">Адрес доставки</div><textarea name="yourmessage" placeholder="Адрес доставки" class="b1c-txt" style="width: 329px;"></textarea>
<div class="b1c-submit-area">
<input type="submit" class="b1c-submit" value="Оформить заказ">
<div class="b1c-result"></div>
</div>
</form>
</div>

<script type="text/javascript">

    $('.button btn btn-default modalbox').click(function(){
    var kypit_id = $("#" + $(this).attr("rel"));
$kypit_id.show()
    });
</script>
Пробовала еще такой скрипт
<script type="text/javascript">
function showModalWin() {
var b1c-form = document.getElementById('kypit');
b1c-form.style.display = 'block';
}
</script>

Но форма все равно не становится видимой.
Может кто-то поможет с скриптом?Буду благодарна!!!

id="kypit"
Id с одинаковым названием на одной странице должен быть один.

Показать блок по клику можно так:
<script type="text/javascript">
    {literal}
    $(document).on('click', '#show_kypit', function(e){
        e.preventDefault();
        $('#kypit').show();
    });
    {/literal}
</script>
<button id="show_kypit" class="exclusive" rel="kypit" ><span>Купить</span></button>
<div id="kypit" style="display:none">
    <form>
        <p>Купить</p>
        <p>.....</p>
        <button type="submit" >Оформить заказ</button>
    </form>
</div>

Работает, правда только на первом товаре.
А если их несколько, то нужно дописывать переменную?

Если товаров много, тогда id не используют. Меняете id на class.

Спасибо большое получилось. Теперь форма появляется при нажатии на кнопочку. А чтобы убрать форму при нажатии на другую кнопку можно использовать Return  для  e.preventDefault()? Или по другому нужно записывать?

Показать
$('#kypit').show();
Спрятать
$('#kypit').hide();

Вообщем с формой все ок, она появляется и скрывается. код получился такой
<form method="post" action="" ><div class="b1c-tl">
<span class="b1c-title-name">Купить
{$product.name|escape:'html':'UTF-8'}</span>
</div>
<div class="b1c-description">Чтобы оформить заказ, заполните форму. В ближайшее время с вами свяжется менеджер и уточнит детали заказа, а также время доставки. </div>
         <input type="hidden" value="{$product.name|escape:'html':'UTF-8'}" name="yourtovar" />
    <div class="b1c-caption">Ваше имя</div>
     <input placeholder="Ваше имя" class="b1c-txt" name="yourname" type="text" maxlength="150" style="width: 329px;">
    <div class="b1c-caption">Телефон</div>
     <input placeholder="Телефон" class="b1c-txt" type="text" name="yourtel" maxlength="150" style="width: 329px;" required>
<div class="b1c-caption">Адрес доставки</div>
    <textarea name="yourmessage" placeholder="Адрес доставки" class="b1c-txt" style="width: 329px;"></textarea>
<input type="submit" class="b1c-submit" value="Оформить заказ">
<div class="b1c-result"></div>
</form>
</div>

<script type="text/javascript">
    {literal}
    $(document).on('click', '#show_kypit', function(e){
        e.preventDefault();
      $('.feedback-form').show();  $('.brom').show();
    });
$(document).on('click', '#shadow', function(e){
        e.preventDefault();
      $('.feedback-form').hide();  $('.brom').hide();
    });

    {/literal}
</script>

Но на почту сообщение не приходит. Скрипт стоял к этой форме такой


<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f =$this;
  evt.preventDefault();
  http.open("POST", "contacts.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("yourname=" + f.yourname.value + "&yourtel=" + f.yourtel.value + "&yourtovar=" + f.yourtovar.value + "&yourmessage=" + f.yourmessage.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert('Ваше сообщение получено.\nМы свяжемся с Вами в течении 24-х часов.\nБлагодарим за обращение!');
      /*f.yourmessage.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.yourmessage.value='';*/
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
}, false);
$(document).on('submit', '#feedback-form', function() {
    $.fancybox.close();
});
</script>

Он не работает. Где можно посмотреть как мне написать скрипт к моей форме?Или может у кого-то есть пример?

Язык JavaScript