При нажатии на кнопку <В корзину>
- Появляется спиннер (на чистом 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} →</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} →</span></a>
4.2) Такой же код добавьте выше для кнопки Предзаказа после строчки
Код: Выделить всё
<button class="button product_btn" type="submit" data-language="product_pre_order">{$lang->product_pre_order}</button>