Официальный форум OkayCMS

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

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


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

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


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

добавьте


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


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

добавьте


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

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

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

Если бесплатно, не против :-)

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

Конечно бесплатно.

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>

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

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

вы добавили это в свой CSS?


Добавлено спустя 2 минуты 26 секунд:
Возможно нужно почистить кэш браузера.

makki писал(а):

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

вы добавили это в свой CSS?

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

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

Добавил.

Artem-K писал(а):

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

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

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

Добавил.

Скиньте в личку ссылку на сайт, я посмотрю

makki писал(а):

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

вы добавили это в свой CSS?

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

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

Возможно нужно почистить кэш браузера.

Большое спасибо, всё дело в чистке кеша)))