Купить в 1 клик

[yodaexolon]

Возможность оформлять заказ для посетителя в 1 клик, вводя имя, телефон, адрес доставки и комментарий.

Заказ отображается в админке и высылается на email.

 

Работает с radiobutton и select

 

 

Копируем файл oneclick.php в папку ajax в корневую директорию вашего сайта

 

Открываем файл design/default/html/product.tpl находим строчку:

<input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>

 

и под ней добавляем:

<!-- Покупка в один клик -->
<a href="#oneclick" class="button various oneclick">Купить в 1 клик</a>
                      
<div style="display: none;">    
        <div id="oneclick" class="window">
        <div class="title">Купить
{$product->name|escape|rtrim}</div>
        <ul>
            <li>
                              <h4><font color="red">*</font>Ваше имя:</h4>
                                <input class="onename" value="{$user->name|escape}" type="text" placeholder="Введите ваше имя">
                        </li>
            <li>
                              <h4><font color="red">*</font>Ваш телефон:</h4>
                                <input class="onephone" value="{$user->phone|escape}" type="text" placeholder="Введите номер моб.телефона">
                        </li>
<li>
                              <h4><font color="red">*</font>Ваш адрес или отделение службы доставки:</h4>
                                <input class="oneaddress" value="{$user->address|escape}" type="text" placeholder="Введите адрес доставки">
                        </li>
<li>
                              <h4>Ваш комментарий:</h4>
                                
<textarea class="onecomment" id="user_comment" name="comment" data-notice="Введите комментарий">{$user->comment|escape}</textarea>
                        </li>

Поля отмеченные <font color="red">*</font> обязательны к заполнению!

                        <li class="button_enter">
                                <button type="submit" name="enter" value="Отправить заказ" class="oneclickbuy gray_button">Отправить заказ</button>
                        </li>
        </ul>
      
        </div>
</div>

{literal}
        <style>
                .button.various         { display: block; margin: 3px 0 0 0; padding: 3px 12px; font-size: 13px; }
                #oneclick                       { width: 350px; font-size: 12px; }
                #oneclick .title        { font: 18px Arial; color: #000; margin-bottom: 7px; border-bottom: 1px solid #ccc; padding-bottom: 12px; }
                #oneclick p,
                #oneclick li            { display: block; padding: 6px 0; }
                #oneclick li span       { display: inline-block; width: 80px;  }
                #oneclick input         { width: 336px; }
                #oneclick button        { margin-top: 8px; }
		#oneclick textarea	{width: 336px; height: 100px; font-size: 12px; }
        </style>
        <script>
        $(function() {

                $(".various").fancybox({
                        helpers : {
                                overlay : {
                                        locked : false
                                }
                        },
                        closeBtn: false,
                        fitToView: false,
                        autoSize: true,
                        minHeight: "0",
                        minWidth: "350",
                        scrolling: false,
                        closeClick      : false,
                        openEffect      : 'fade',
                        closeEffect     : 'none'
                });

                $('.oneclickbuy').click( function() {

                        if($('.variants').find('input[name=variant]:checked').size()>0) variant = $('.variants input[name=variant]:checked').val();
if($('.variants').find('select[name=variant]').size()>0)
variant = $('.variants').find('select').val();
                      
                        if( !$('.onename').val() || !$('.onephone').val() || !$('.oneaddress').val()) {
                                alert("Заполните обязательные поля!");
                                return false;
                        }

                        $.ajax({
                                type: "post",
                                url: "/ajax/oneclick.php",
                                data: {amount: 1, variant: variant, name: $('.onename').val() , phone: $('.onephone').val() , address: $('.oneaddress').val() , comment: $('.onecomment').val()},
                                dataType: 'json'
                        });
                      
                        $('.oneclick').hide(200);
                        $("#oneclick").html("<div class='title'>Спасибо за заказ!</div><p>В ближайшее время с вами свяжется наш менеджер!</p><button type='submit' class='button' onclick='$.fancybox.close();$(\".oneclick\").hide();return false;'>Закрыть!</button>");
                      
                        return false;
                      
                });

        });
        </script>
{/literal}
<!-- Покупка в один клик (The End) -->

oneclick.php

[SmartyDev]

Спасибо, отличная доработка!

[Ilya]

На самом деле возникают вопросы по юзабилити и коду данного решения)

1) по юзабилити (спорный вопрос, понимаю): а что, если покупатель приобретет несколько товаров, пользуясь этой кнопкой?)

2) по коду: разбухание страницы каталога, если кто-то, пользуясь кодом ТС добавит подобную кнопку, но на страницу каталога)

Да и Фэнсибоксом для того, чтобы показать модальное окно, пользоваться совсем необязательно) 

 

Хотя это все мой занудный перфекционизм) ТС - спасибо)

[lisnevsky]

а предложите решение как сделать тоже самое для каталога

[yodaexolon]

а предложите решение как сделать тоже самое для каталога

Так же в products.tpl

[Ilya]

Так же в products.tpl

Не прокатит скорее всего, ибо по клику на кнопке будет открываться первый по коду страницы скрытый див с айди oneclick, а ведь не факт, что юзер именно по первой на странице кнопке кликнул)

Тут (на странице каталога) я бы сделал так: создал бы один скрытый див модального окна и передавал бы по клику на кнопку название продукта, так же можно передавать цену и название варианта продукта. Кстати, я не вижу в твоем варианте обработку вариантов)

[daramal]

Отличное решение. Спасибо

[daramal]

Столкнулся с проблемой в каталоге. Выбирается ТОЛЬКО первый товар в каталоге.

Как решить? Подскажите пожалуйста. и по поводу ВАРИАНТОВ товара тоже, если можно

[Noxter]

Не должно быть более одного идентификатора в блоке, в вашем случае он "oneclick".

Я бы переделал ссылку так:

<a href="#oneclick-{$product->id}" class="button various oneclick">Купить в 1 клик</a>

ну и сам блок:

<div id="oneclick-{$product->id}" class="window">

Таким образом каждая кнопка (ссылка) будет открывать нужный блок с нужными параметрами товара.

P.S. Как по мне то решение топорное хоть и рабочее, выглядит не аккуратно, дублирует много раз и загромождает код.

[daramal]

Спасибо большое, Noxter

А как разместить данный код 2 раза?  то есть в каталоге есть 2 вида отображение товаров: блоками и как лист.

Размещая для каждого вида данный код, после нажатие на кнопку Отправить, конфликтует. пишет "Заполните обязательные поля!".

убрал из второй копии кода часть <script>, то есть для 2 вида работает один скрипт, но с двумя формами.

 

Как решить это? Подскажите, плиизз!
 

[Kors]

Решение Noxter-а не только топорное, но и не рабочее. Причина в том, что из-за многократно дублируемого кода  проверка  полей  !$('.onename').val()  работать правильно не будет.

 

Чтобы не было топорно и работало, надо делать примерно так (полностью не проверялось):

1. Основной код

<div style="display: none;">    
......
{/literal}

вставлять в products.tpl  один раз (например, в конце файла).

 

2. Кнопку

<a href="#oneclick" class="button various oneclick">Купить в 1 клик</a>

вставлять в products.tpl в цикле у каждого товара

 

 

3. В основном коде вместо

if($('.variants').find('input[name=variant]:checked').size()>0) variant = $('.variants input[name=variant]:checked').val();
if($('.variants').find('select[name=variant]').size()>0)
variant = $('.variants').find('select').val();

вставить

var frm=$(this).closest('form.variants')
                        
if(frm.find('input[name=variant]:checked').size()>0) variant = frm.find('input[name=variant]:checked').val();

if(frm.find('select[name=variant]').size()>0) variant = frm.find('select').val();

Edited January 13, 2015 by Kors

[daramal]

Спасибо большое,Kors за ответ.

 

К сожалению, при клике выдает:

"The requested content cannot be loaded.
Please try again later."

 

Как тут быть? ((

[daramal]

Попытался все заново поставить. по версии Kors-а.

ошибка: "The requested content cannot be loaded. Please try again later." пропала, но прежняя проблема так и осталась, на этот раз - Выбирается ТОЛЬКО второй товар в каталоге.

 

Пожалуйста, подскажите! ((

[Noxter]

Корс хули разговнился то?

Я не писал что нужно дублировать код, DarAmal сделал это сам, я лишь указал где нужно правки внести чтобы исправить глюк.

P.S. Корс с твоей помощи толку вообще 0, своими правками сломал дополнение.

Edited January 13, 2015 by Noxter

[Gragory]

Соперничество умов вновь в силе - это круть!

Кто же из вас двоих - Noxter или Kors - профессионально подойдет к делу и доработает вариант?!

Edited January 23, 2015 by Gragory

[Noxter]

Свой вариант я давно уже сделал http://simpla-addons.org/blog/modules/231-dopolnenie-zakaz-v-1-klik

На конкретно поставленный вопрос я ответил, кто хочет пусть дорабатывает как угодно.

Мерятся у кого длиннее со старым дедом не в моем стиле.

[daramal]

а как эту великолепную доработку применить к Каталогу (products.tpl) и на Главной (main.tpl) ??

читал, что необходима доработать oneclick.php под это.

 

Реализовал ли кто?

[Zelensky]

а как эту великолепную доработку применить к Каталогу (products.tpl) и на Главной (main.tpl) ??

читал, что необходима доработать oneclick.php под это.

 

Реализовал ли кто?

можно где угодно, только в форму надо передать id варианта товара

[Zelensky]

Еще кому надо селекты вместо чекбоксов:

<form> .....

<select  class="" style="" name="variant" value="">

                    <option  value="53" >Синий</option>

                    <option  value="54" >Черный</option>

                </select>

                    

                <select  class="form-control" name="amount" style="">

                  <option >1</option>

                  <option >2</option>

                  <option >3</option>

                  <option >4</option>

                  <option >5</option>

                </select>

.....</form>

<script>.....

variant = $(this).find('select[name=variant]').val();

amount = $(this).find('select[name=amount]').val();

....</script>

php....

 

    $variant_id = $simpla->request->post('variant', 'integer');

    $amount = $simpla->request->post('amount', 'integer');

можно добавить и адрес с емейл $order->email = $simpla->request->post('email');

$address->email = $simpla->request->post('address');

[daramal]

можно где угодно, только в форму надо передать id варианта товара

Спасибо за ответ. Прошу Вас, опишите это подробнее, если не сложно.

[Server689]

Подскажите, окно открывается, заполняешь все поля, нажимаешь "Отправить заказ"  и все больше ничего не происходит. Куда копать?

[yodaexolon]

Подскажите, окно открывается, заполняешь все поля, нажимаешь "Отправить заказ"  и все больше ничего не происходит. Куда копать?

Возможно вы допустили ошибку при установке

[Server689]

Возможно вы допустили ошибку при установке

ошибки 100% нет

[daramal]

yodaexolon,

Как на счет внедрение в products.tpl и на Главной main.tpl ?

Подскажите плииз.

[yodaexolon]

ошибки 100% нет

если ошибки нет, значит работает