Перейти к содержимому


Фото
* * * * * 1 голосов

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

simpla

  • Чтобы отвечать, сперва войдите на форум
74 ответов в теме

#1 yodaexolon

yodaexolon
  • Пользователь
  • 144 сообщений
  • Пользователь
  • Версия CMS:2.x
  • Откуда:Kharkiv, Ukraine

Опубликовано 20.12.2014 - 15:10

Возможность оформлять заказ для посетителя в 1 клик, вводя имя, телефон, адрес доставки и комментарий.
Заказ отображается в админке и высылается на email.
 
Работает с radiobutton и select
 
0ef0f7c0877b.jpg
 
Копируем файл 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   859байт   527 раз скачано


#2 SmartyDev

SmartyDev
  • Сомнительные
  • 94 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 20.12.2014 - 17:42

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



#3 Ilya

Ilya
  • Пользователь
  • 80 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 20.12.2014 - 20:29

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

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

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

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

 

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



#4 lisnevsky

lisnevsky
  • Пользователь
  • 11 сообщений

Опубликовано 20.12.2014 - 23:18

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



#5 yodaexolon

yodaexolon
  • Пользователь
  • 144 сообщений
  • Пользователь
  • Версия CMS:2.x
  • Откуда:Kharkiv, Ukraine

Опубликовано 20.12.2014 - 23:20

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

Так же в products.tpl



#6 Ilya

Ilya
  • Пользователь
  • 80 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 21.12.2014 - 07:10

Так же в products.tpl

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

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



#7 DarAmal

DarAmal
  • Пользователь
  • 645 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 12.01.2015 - 14:37

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



#8 DarAmal

DarAmal
  • Пользователь
  • 645 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 13.01.2015 - 06:23

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

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



#9 Noxter

Noxter

    Simpla Developer

  • Фрилансер
  • 6 400 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 13.01.2015 - 06:53

Не должно быть более одного идентификатора в блоке, в вашем случае он "oneclick".
Я бы переделал ссылку так:
<a href="#oneclick-{$product->id}" class="button various oneclick">Купить в 1 клик</a>
ну и сам блок:
<div id="oneclick-{$product->id}" class="window">
Таким образом каждая кнопка (ссылка) будет открывать нужный блок с нужными параметрами товара.
P.S. Как по мне то решение топорное хоть и рабочее, выглядит не аккуратно, дублирует много раз и загромождает код.

#10 DarAmal

DarAmal
  • Пользователь
  • 645 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 13.01.2015 - 09:55

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

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

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

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

 

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



#11 Kors

Kors
  • Фрилансер
  • 3 522 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Россия

Опубликовано 13.01.2015 - 10:35

Решение 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();


Изменено: Kors, 13.01.2015 - 12:48


#12 DarAmal

DarAmal
  • Пользователь
  • 645 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 13.01.2015 - 11:19

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

 

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

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

 

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



#13 DarAmal

DarAmal
  • Пользователь
  • 645 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 13.01.2015 - 15:14

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

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

 

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



#14 Gragory

Gragory
  • Пользователь
  • 58 сообщений

Опубликовано 23.01.2015 - 21:08

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

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


Изменено: Gragory, 23.01.2015 - 21:13


#15 Noxter

Noxter

    Simpla Developer

  • Фрилансер
  • 6 400 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 23.01.2015 - 21:15

Свой вариант я давно уже сделал http://simpla-addons...-zakaz-v-1-klik
На конкретно поставленный вопрос я ответил, кто хочет пусть дорабатывает как угодно.
Мерятся у кого длиннее со старым дедом не в моем стиле.

#16 DarAmal

DarAmal
  • Пользователь
  • 645 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 30.01.2015 - 14:24

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

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

 

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



#17 Zelensky

Zelensky
  • Пользователь
  • 8 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x

Опубликовано 31.01.2015 - 17:31

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

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

 

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

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



#18 Zelensky

Zelensky
  • Пользователь
  • 8 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x

Опубликовано 31.01.2015 - 17:41

Еще кому надо селекты вместо чекбоксов:
<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');


#19 DarAmal

DarAmal
  • Пользователь
  • 645 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 02.02.2015 - 08:36

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

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



#20 Server689

Server689
  • Пользователь
  • 3 сообщений
  • Дизайн, Программирование
  • Версия CMS:2.x

Опубликовано 18.02.2015 - 14:33

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







Также с меткой «simpla»

0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых