Автор Тема: Форма для кнопки купить не работает. Подскажите, что не так в коде  (Прочитано 618 раз)

03 Март 2017, 18:31:46
  • Новичок
  • *
  • Сообщений: 34
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
При нажатии на кнопку Купить не выскакивает форма заказа. Не могу понять, что не так? Вот мой код для кнопки. Может в нем где-то ошибка?
<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>
03 Март 2017, 19:01:21
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 16670
  • Репутация: +14630/-5
  • Сообщество PrestaShop
    • Просмотр профиля
Все не так. Стили, js, структрура.
Делайте как сделана в prestashop стандартная кнопка отправить другу.
03 Март 2017, 19:27:14
Ответ #2
  • Новичок
  • *
  • Сообщений: 34
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
03 Март 2017, 20:29:35
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 3419
  • Репутация: +79/-6
  • Сообщество PrestaShop
    • Просмотр профиля
03 Март 2017, 21:04:10
Ответ #4
  • Новичок
  • *
  • Сообщений: 34
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
С модулем *отправить другу* я еще больше запуталась...(
А с этим кодом который стоит в шаблоне нет вариантов, чтобы его как-то подкорректировать?
Попробовала убрать часть кода

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

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

04 Март 2017, 12:21:42
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 3419
  • Репутация: +79/-6
  • Сообщество PrestaShop
    • Просмотр профиля
Чтобы форма появлялась при клике на кнопку, нужно создать js функцию в которой менять видимость формы.
В модуле sendtoafriend хороший пример как это делается.
06 Март 2017, 17:47:01
Ответ #6
  • Новичок
  • *
  • Сообщений: 34
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Переписала код
<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>
Но форма все равно не становится видимой.
Может кто-то поможет с скриптом?Буду благодарна!!!
06 Март 2017, 18:35:47
Ответ #7
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 22125
  • Репутация: +25303/-1
  • Prestashop - просто и эффективно
    • Просмотр профиля
id="kypit"Id с одинаковым названием на одной странице должен быть один.
Эксперт Prestashop - решения всех проблем, написание модулей, создание тем для интернет-магазинов под Prestashop.
Эксперт Magento - создам сайт на Magento, программирование кастомных модулей для Magento, кастомизация тем Magento.
Лучшие цены!!!
06 Март 2017, 18:46:57
Ответ #8
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 22125
  • Репутация: +25303/-1
  • Prestashop - просто и эффективно
    • Просмотр профиля
Показать блок по клику можно так:
<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>
Эксперт Prestashop - решения всех проблем, написание модулей, создание тем для интернет-магазинов под Prestashop.
Эксперт Magento - создам сайт на Magento, программирование кастомных модулей для Magento, кастомизация тем Magento.
Лучшие цены!!!
06 Март 2017, 19:34:23
Ответ #9
  • Новичок
  • *
  • Сообщений: 34
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Работает, правда только на первом товаре.
А если их несколько, то нужно дописывать переменную?
06 Март 2017, 20:14:08
Ответ #10
  • Ветеран
  • *****
  • Сообщений: 16670
  • Репутация: +14630/-5
  • Сообщество PrestaShop
    • Просмотр профиля
Если товаров много, тогда id не используют. Меняете id на class.
06 Март 2017, 21:43:23
Ответ #11
  • Новичок
  • *
  • Сообщений: 34
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо большое получилось. Теперь форма появляется при нажатии на кнопочку. А чтобы убрать форму при нажатии на другую кнопку можно использовать Return  для  e.preventDefault()? Или по другому нужно записывать?
07 Март 2017, 10:35:46
Ответ #12
  • Ветеран
  • *****
  • Сообщений: 3419
  • Репутация: +79/-6
  • Сообщество PrestaShop
    • Просмотр профиля
09 Март 2017, 13:39:51
Ответ #13
  • Новичок
  • *
  • Сообщений: 34
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Вообщем с формой все ок, она появляется и скрывается. код получился такой
<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>

Он не работает. Где можно посмотреть как мне написать скрипт к моей форме?Или может у кого-то есть пример?
09 Март 2017, 13:54:02
Ответ #14
  • Ветеран
  • *****
  • Сообщений: 86688
  • Репутация: +25428/-0
  • Сообщество PrestaShop
    • Просмотр профиля