Умная кнопка <В корзину>

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

makki M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

Сообщение #1 makki » 30.11.2017, 15:23

Предлагаю полезное дополнение, которое подтолкнет Ваших покупателей еще на один шаг ближе к покупке.
При нажатии на кнопку <В корзину>
- Появляется спиннер (на чистом css), сигнализирующий о происходящем процессе. Если у вас сайт работает шустро, возможно вы даже его не заметите.
- После успешного добавления товара в корзину (выполнения ajax запроса), надпись кнопки сменяется на <Оформить заказ> а сама кнопка ведет в корзину.
- Т.е. при повторном нажатии, покупатель попадает на страницу оформления заказа.

1) В файле design/ваш_шаблон/js/okay.js
заменяем блок /* Аяксовая корзина */ на следующее:

Код: Выделить всё

/* Аяксовая корзина */
$(document).on('submit', '.fn_variants', function(e) {
    e.preventDefault();
    var variant,
        amount,
        $this = $(this);
    /* Вариант */
    if($this.find('input[name=variant]:checked').size() > 0 ) {
        variant = $this.find('input[name=variant]:checked').val();
    } else if($(this ).find('input[name=variant]').size() > 0 ) {
        variant = $this.find('input[name=variant]').val();
    } else if($this.find('select[name=variant]').size() > 0 ) {
        variant = $this.find('select[name=variant]').val();
    }
    /* Кол-во */
    if($this.find('input[name=amount]').size()>0) {
        amount = $this.find('input[name=amount]').val();
    } else {
        amount = 1;
    }
    /* ajax запрос */
    $.ajax( {
        url: "ajax/cart.php",
        data: {
            variant: variant,
            amount: amount,
        },
        dataType: 'json',
        beforeSend: function(){
          $this.find(':submit').addClass('spinner');
       },
        success: function(data) {
           //раскомментируйте на случай если вы хотите оставить эффект улетающего товара в корзину
           //transfer( $('#cart_informer'), $this );          
            $( '#cart_informer' ).html( data );
            $this.find(':submit').hide();             
         $this.find('.checkout').show();
        }
    } );
});


Эффект летящего в корзину товара закомментирован. Если он вам нужен, раскомментируйте его.

2) В файле design/ваш_шаблон/css/style.css
добавьте следующие стили:

Код: Выделить всё

.checkout {
   display: none;
   text-decoration: none;
}

.spinner {
   position: relative;
}
@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spinner .6s linear infinite;
}


3) В файле design/ваш_шаблон/html/product_list.tpl
3.1) после строчек

Код: Выделить всё

{* Submit button *}
                                <button class="button buy fn_is_stock{if $product->variant->stock < 1} hidden{/if}" type="submit"><span data-language="add_to_cart">{$lang->add_to_cart}</span></button>

добавьте

Код: Выделить всё

<a href="{$lang_link}cart" class="button buy checkout" rel="nofollow"><span data-language="cart_checkout">{$lang->cart_checkout} &rarr;</span></a>


3.2) Такой же код добавьте выше для кнопки Предзаказа после строчки

Код: Выделить всё

<button class="button buy fn_is_preorder{if $product->variant->stock > 0} hidden{/if}" type="submit" data-language="pre_order">{$lang->pre_order}</button>


4) В файле design/ваш_шаблон/html/product.tpl
4.1) после строчек

Код: Выделить всё

{* Submit button *}
                                <button class="fn_is_stock button product_btn{if $product->variant->stock < 1} hidden{/if}" type="submit" data-language="product_add_cart">{$lang->product_add_cart}</button>

добавьте

Код: Выделить всё

<a href="{$lang_link}cart" class="button checkout" rel="nofollow"><span data-language="cart_checkout">{$lang->cart_checkout} &rarr;</span></a>


4.2) Такой же код добавьте выше для кнопки Предзаказа после строчки

Код: Выделить всё

<button class="button product_btn" type="submit" data-language="product_pre_order">{$lang->product_pre_order}</button>
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

OkayCMS M
Администратор
Аватара
OkayCMS M
Администратор
Репутация: 216
Сообщения: 1627
Зарегистрирован: 12.11.2015
С нами: 8 лет 4 месяца
Сайт Skype

Сообщение #2 OkayCMS » 20.12.2017, 17:04

Я надеюсь вы не против, что мы на основе вашей идеи сделали своё бесплатное решение и выложили его в маркетплейс. https://okay-cms.com/products/optimizatsiya-knopki-kupit

makki M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

Сообщение #3 makki » 20.12.2017, 17:07

OkayCMS писал(а):Я надеюсь вы не против, что мы на основе вашей идеи сделали своё бесплатное решение и выложили его в маркетплейс. https://okay-cms.com/products/optimizatsiya-knopki-kupit
Если бесплатно, не против :-)
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

OkayCMS M
Администратор
Аватара
OkayCMS M
Администратор
Репутация: 216
Сообщения: 1627
Зарегистрирован: 12.11.2015
С нами: 8 лет 4 месяца
Сайт Skype

Сообщение #4 OkayCMS » 20.12.2017, 21:40

makki писал(а):Если бесплатно, не против :-)
Конечно бесплатно.

Artem-K
Artem-K
Репутация: 1
Сообщения: 17
Зарегистрирован: 03.08.2017
С нами: 6 лет 7 месяцев

Сообщение #5 Artem-K » 27.01.2018, 12:11

makki писал(а):Предлагаю полезное дополнение, которое подтолкнет Ваших покупателей еще на один шаг ближе к покупке.
При нажатии на кнопку <В корзину>
- Появляется спиннер (на чистом css), сигнализирующий о происходящем процессе. Если у вас сайт работает шустро, возможно вы даже его не заметите.
- После успешного добавления товара в корзину (выполнения ajax запроса), надпись кнопки сменяется на <Оформить заказ> а сама кнопка ведет в корзину.
- Т.е. при повторном нажатии, покупатель попадает на страницу оформления заказа.

1) В файле design/ваш_шаблон/js/okay.js
заменяем блок /* Аяксовая корзина */ на следующее:

Код: Выделить всё

/* Аяксовая корзина */
$(document).on('submit', '.fn_variants', function(e) {
    e.preventDefault();
    var variant,
        amount,
        $this = $(this);
    /* Вариант */
    if($this.find('input[name=variant]:checked').size() > 0 ) {
        variant = $this.find('input[name=variant]:checked').val();
    } else if($(this ).find('input[name=variant]').size() > 0 ) {
        variant = $this.find('input[name=variant]').val();
    } else if($this.find('select[name=variant]').size() > 0 ) {
        variant = $this.find('select[name=variant]').val();
    }
    /* Кол-во */
    if($this.find('input[name=amount]').size()>0) {
        amount = $this.find('input[name=amount]').val();
    } else {
        amount = 1;
    }
    /* ajax запрос */
    $.ajax( {
        url: "ajax/cart.php",
        data: {
            variant: variant,
            amount: amount,
        },
        dataType: 'json',
        beforeSend: function(){
          $this.find(':submit').addClass('spinner');
       },
        success: function(data) {
           //раскомментируйте на случай если вы хотите оставить эффект улетающего товара в корзину
           //transfer( $('#cart_informer'), $this );          
            $( '#cart_informer' ).html( data );
            $this.find(':submit').hide();             
         $this.find('.checkout').show();
        }
    } );
});


Эффект летящего в корзину товара закомментирован. Если он вам нужен, раскомментируйте его.

2) В файле design/ваш_шаблон/css/style.css
добавьте следующие стили:

Код: Выделить всё

.checkout {
   display: none;
   text-decoration: none;
}

.spinner {
   position: relative;
}
@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spinner .6s linear infinite;
}


3) В файле design/ваш_шаблон/html/product_list.tpl
3.1) после строчек

Код: Выделить всё

{* Submit button *}
                                <button class="button buy fn_is_stock{if $product->variant->stock < 1} hidden{/if}" type="submit"><span data-language="add_to_cart">{$lang->add_to_cart}</span></button>

добавьте

Код: Выделить всё

<a href="{$lang_link}cart" class="button buy checkout" rel="nofollow"><span data-language="cart_checkout">{$lang->cart_checkout} &rarr;</span></a>


3.2) Такой же код добавьте выше для кнопки Предзаказа после строчки

Код: Выделить всё

<button class="button buy fn_is_preorder{if $product->variant->stock > 0} hidden{/if}" type="submit" data-language="pre_order">{$lang->pre_order}</button>


4) В файле design/ваш_шаблон/html/product.tpl
4.1) после строчек

Код: Выделить всё

{* Submit button *}
                                <button class="fn_is_stock button product_btn{if $product->variant->stock < 1} hidden{/if}" type="submit" data-language="product_add_cart">{$lang->product_add_cart}</button>

добавьте

Код: Выделить всё

<a href="{$lang_link}cart" class="button checkout" rel="nofollow"><span data-language="cart_checkout">{$lang->cart_checkout} &rarr;</span></a>


4.2) Такой же код добавьте выше для кнопки Предзаказа после строчки

Код: Выделить всё

<button class="button product_btn" type="submit" data-language="product_pre_order">{$lang->product_pre_order}</button>

Здравствуйте! Подскажите, пожалуйста, куда смотреть, сделал всё по инструкции и теперь у меня две кнопки "в корзину" и "оформить заказ"!)

makki M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

Сообщение #6 makki » 27.01.2018, 12:22

Artem-K писал(а):Здравствуйте! Подскажите, пожалуйста, куда смотреть, сделал всё по инструкции и теперь у меня две кнопки "в корзину" и "оформить заказ"!)
вы добавили это в свой CSS?

Код: Выделить всё

.checkout {
   display: none;
   text-decoration: none;
}


Добавлено спустя 2 минуты 26 секунд:
Возможно нужно почистить кэш браузера.
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

Artem-K
Artem-K
Репутация: 1
Сообщения: 17
Зарегистрирован: 03.08.2017
С нами: 6 лет 7 месяцев

Сообщение #7 Artem-K » 27.01.2018, 12:25

makki писал(а):
Artem-K писал(а):Здравствуйте! Подскажите, пожалуйста, куда смотреть, сделал всё по инструкции и теперь у меня две кнопки "в корзину" и "оформить заказ"!)
вы добавили это в свой CSS?

Код: Выделить всё

.checkout {
   display: none;
   text-decoration: none;
}

Добавил.

makki M
makki M
Репутация: 199
Сообщения: 697
Зарегистрирован: 12.08.2016
С нами: 7 лет 7 месяцев
Откуда: Киев
Сайт

Сообщение #8 makki » 27.01.2018, 12:28

Artem-K писал(а):
makki писал(а):вы добавили это в свой CSS?

Код: Выделить всё

.checkout {
   display: none;
   text-decoration: none;
}

Добавил.
Скиньте в личку ссылку на сайт, я посмотрю
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS 2 (с 3-й и 4-й версией не работаю)

Artem-K
Artem-K
Репутация: 1
Сообщения: 17
Зарегистрирован: 03.08.2017
С нами: 6 лет 7 месяцев

Сообщение #9 Artem-K » 27.01.2018, 12:28

makki писал(а):
Artem-K писал(а):Здравствуйте! Подскажите, пожалуйста, куда смотреть, сделал всё по инструкции и теперь у меня две кнопки "в корзину" и "оформить заказ"!)
вы добавили это в свой CSS?

Код: Выделить всё

.checkout {
   display: none;
   text-decoration: none;
}



Возможно нужно почистить кэш браузера.
Большое спасибо, всё дело в чистке кеша)))


Название раздела: Полезные решения для OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Полезные решения для OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 17 гостей