Всё о web

Для чайников и не только


Opencart, Заказ в 1 клик

Октябрь 15, 2015

Сегодня мы за 5 минут внедрим в наш интерне-магазин кнопку "Заказ в 1 клик". Для начала, давайте разберём способы заказа в интернет-магазине:

1. Стандартная кнопка "Добавить в корзину", после клика на неё человек продолжает просматривать магазин и сам переходит к оформлению заказа.

2. Кнопка "Быстрый заказ", по нажатию на которую всплывает форма, в которой нужно заполнить имя и телефон, чтобы оператор мог перезвонить.

3. Кнопка "Заказать и оформить", по нажатию на которую товар добавляется в корзину и пользователь перенаправляется на страницу оформления заказа.

Первый вариант реализован в стандартном функционале. Второй вариант, на мой взгляд, бесполезен, потому что дублирует модуль "Перезвоните мне", да и диктовать свои реквизиты по телефону+ ждать звонка оператора ещё то удовольствие. По этому реализовывать будем третий вариант.

Открываем шаблон товара: /catalog/view/theme/default/template/product/product.tpl

Находим строчку с заголовком товара:

<h1><?php echo $heading_title; ?></h1>

И выше неё вставляем кнопку:

<input type="button" class="btn btn-primary btn-lg btn-block" value="Купить и оформить" id="oneclickbuy">

Далее, переходим вниз, к секции с яваскриптом и выше функции:

$('#button-cart').on('click', function() {

Вставляем следующий код:

$('#oneclickbuy').click(function()
  {
  $('#button-cart').trigger('click');
  setTimeout(function()
    {
    if($("div").is(".alert-success"))
      {
      location='/index.php?route=checkout/checkout';
      }
    }, 1000);
  });

Всё, готово.

op-1-click

Работает это следующим образом:

1. При клике на кнопку "Купить и оформить" вызывается событие "click" для стандартной кнопки "Добавить в корзину".

2. Ждём 1 секунду, чтобы отработал ajax запрос.

3. Проверяем, появилось ли сообщение об успешном добавлении товара в корзину, и, если появилось, перенаправляем пользователя на страницу оформления заказа.

Пример, как обычно, можно посмотреть на тестовом магазине: opencart.allwebstuff.info



Комментарии

12 комментариев | “Opencart, Заказ в 1 клик

  1. Аватар Александр:

    Классно! Сегодня-завтра попробую, как раз искал это на Вашем сайте!)) Спасибо!

    1. Илья Илья:

      Спасибо. Очень приятно, когда кому-то нужна моя работа)

  2. Все таки заказ в 1 клик это как раз попап форма в которой надо ввести имя и тел с отправкой менеджеру по нажатию кнопки отправить. На форме должно быть указано название товара. Потому как зачастую людям лень заполнять какие то поля в корзине … из практики такие заказы прилетают почти каждый день

  3. Аватар Александр:

    Спасибо! Полезная статья! У меня к вам вопрос близкий к теме) У нас опенкарт 2.0.2.0 , перенесли на новый домен и хостинг. Все гуд, все работает. Но появилась такая проблема — при нажатии на кнопку «Подтвердить заказ» в оформлении заказа, в кнопке остается текст «Loading…» и через 5-8 сек заказ оформляется (а должен почти моментально, как работало на старом хостинге). На новом хостинге техподдержка ответила таким образом:

    «Здравствуйте, у вас при нажатии кнопки создаётся несколько процессов которые блокируют друг друга. Один из них следит за завершением двух уже созданных и продолжается лишь когда они завершаться. Но при этом, судя по всему, проверяет он это только раз в несколько секунд. В итоге он ждёт очень долго.

    Точно затрудняюсь сказать с чем связано такое поведение, так как отследить одновременно несколько процессов порожденных друг другом не получается, т.к. факт слежения за ними блокирует их и не даёт продолжить выполнение.

    В данном случае вам следует обратится к разработчику с просьбой исправить поведение сайта таким образом, чтобы основной процесс продолжался не ожидая других, тогда должно работать корректно.»

    Может быть вы что-то подскажете где и что посмотреть?)

    1. Илья Илья:

      Пока не посмотрю сам сайт- помочь точно не смогу. Нетронутый opencart, при оформлении заказа, отправляет всего 2 запроса на /index.php?route=payment/cod/confirm и на /index.php?route=checkout/success. Так что скорее всего у Вас стоит какой-то модуль оформления заказа и соответственно он поломался…

  4. Аватар Александр:

    Оказывается, дело было в сервере, все поправили, спасибо!)

    1. Аватар Сергей:

      Здравствуйте. Александр, а как исправили проблему на новом сервере?

  5. Аватар Ринат:

    Спасибо, за ваши советы.
    Возникли вопросы по этой статье.
    Как сделать чтобы кнопка «Заказать и оформить» была в стиле шаблона? Сейчас это обычная серая кнопка. И как ее правильно спозиционировать? Хотелось бы ее прижать к правому краю контейнера. И главное, функция полностью не отрабатыватеся, т.е. кнопка просто добавляет товар в корзину.

  6. Спасибо за полезную статью. А как сделать, чтобы ещё перенаправление на страницу оформления заказа шло?

  7. Илья Илья:

    Ринат, Если шаблон свёрстан правильно, то кнопка должна автоматически принимать стиль шаблона. В противном случае, придётся стилизовать кнопку вручную. Тоже самое и с позиционированием.

    Анастасия, Если Вы всё сделали правильно, то редирект должен быть автоматический.

    $('#oneclickbuy').click(function()
      {
      $('#button-cart').trigger('click');
      setTimeout(function()
        {
        if($("div").is(".alert-success"))
          {
          location='/index.php?route=checkout/checkout';
          }
        }, 1000);
      });
    

    Этот кусочек кода редиректит на оформление заказа.

  8. подскажите бесплатный модуль для 2.1.0.1 заказ в 1 клик, буду признателен

    1. Илья Илья:

      Если тут не найдёте, то значит таких нет.

Comments are closed.