Иногда базового функционала не достаточно, и для улучшения продаж на сайте добавляют "Покупку за 1 клик" - это скрипт формы обратной связи, у покупателя просят ввести свои данные(почта, телефон) и скрипт отправляет администратору магазина информацию о желании клиента купить товар, далее менеджеры связываются и обсуждают варианты продажи и доставки.
Проблема в Joomla в том, что многие модули используют разные версии jquery и совместить новый функционал иногда не получается.
Для внедрения "покупки за 1 клик" можно использовать скрипт jbOneClick
Подключение скрипта:
1.Необходимо в <HEAD> прописать скрипт и CSS файл:
<script type="text/javascript" src="/buyme/js/jquery.jboneclick.js"></script>
<link rel="stylesheet" type="text/css" href="/buyme/css/jquery.jboneclick.css">
2.На каждой странице(на ваше усмотрение) необходимо выводить функцию обработки нажатия на кнопку,я добавил в самый конец страницы, перед закрывающим тегов </BODY>:
<script type="text/javascript">
jQuery(document).ready(function($){
$('.callme_order_btn').jbOneClick();
});
</script>
3.Добавляем кнопку рядом с кнопкой покупки k2_store, для этого необходимо открыть файл:
com_k2store/mycart/addtocart.php
Добавляем в конце блока
<div id='add_to_cart_<?php echo $item->product_id; ?>' class="k2store_add_to_cart">
<input type="hidden" id="k2store_product_id" name="product_id" value="<?php echo $item->product_id; ?>" />
<?php echo JHTML::_( 'form.token' ); ?>
<input type="hidden" name="return" value="<?php echo base64_encode( JUri::getInstance()->toString() ); ?>" />
<input value="<?php echo $cart_text; ?>" type="submit" class="k2store_cart_button btn btn-primary" />
<a id="callme_order_btn_<?php echo $item->id;?>" class="callme_order_btn" data-product="<?php echo $item->title.' URL: '.JURI::base().$item->alias; ?>">Купить в 1 клик</a>
</div>
4.Если необходимо вывести кнопку на другом материале, то вставляем текст из шага 3 в любом месте
Также возможно понадобиться скорректировать css стиль, например зеленая кнопка по размеру совпадает со стандартной кнопкой k2_store:
.callme_order_btn{ background: #34DB4E;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #6ADB34, #29B932);
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: #fff!important;
text-transform: uppercase;
font-size: 14px;
padding: 2px 7px 5px 8px;
text-decoration: none;
display: inline-block;
cursor: pointer;}
5.В k2_store нет автосуммы - после выбора платной опции на товаре не обновляется цена. Этот пункт и вывод выбранной опции можно исправить используя эту функцию:
<script>
function set_to_click(id,elem,elem_id,sel) {
var btns = document.getElementById('callme_order_btn_'+id);
//Отправляем выбранные значения
var bo = document.getElementById('data_product_'+id);
if (bo.innerHTML == '') {bo.innerHTML = btns.getAttribute("data-product")}
var bc = document.getElementById('data_product_price_'+id);
if (bc.innerHTML == '') {bc.innerHTML = document.getElementById('product_price_'+id).innerHTML}
//читаем стоимость опции
var op = document.getElementById('product_option['+elem_id+']').options[sel].text;
if (op.indexOf('(')<=1) {var op_cash = '0';}
else { var op_cash = op.substring(op.indexOf('(')+2, op.indexOf('.')).replace(',', '');}
//читаем стоимость товара
var tov = document.getElementById('data_product_price_'+id).innerHTML;
tov_cash=tov.replace(/\s{2,}/g, ' ');
tov_cash=tov_cash.substring(1, tov_cash.indexOf('.')).replace(',', '');
//суммируем и форматируем
new_tov=Number(op_cash)+Number(tov_cash);
new_tov=new_tov+'.00 руб.';
new_tov=new_tov.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1,');
//вывод
document.getElementById('product_price_'+id).innerHTML = new_tov;
btns.setAttribute("data-product",bo.innerHTML+' '+elem+' "'+op);
}
</script>
Для ее реализации необходимо скорректировать файл:
com_k2store/mycart/addtocart_options.php
Перед циклом опроса опций, необходимо добавить блоки, для запоминания базовой цены и значения атрибуту кнопки:
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
$options = $this->attributes;
$db = JFactory::getDbo();
?>
<?php if ($options) { ?>
<div class="options" style="margin-bottom: 15px;">
<div id="data_product_<?php echo $this->item->id;?>" style="display:none"></div>
<div id="data_product_price_<?php echo $this->item->id;?>" style="display:none"></div>
<?php foreach ($options as $option) { ?>
Далее всем необходимым элементам добавить вызов функции, мне понадобился только <select>:
<!-- select -->
<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
<p><?php echo $option['option_name']; ?>:</p>
<?php if ($option['required']) { ?>
<span class="required">*</span>
<?php } ?>
<select id="product_option[<?php echo $option['product_option_id']; ?>]" name="product_option[<?php echo $option['product_option_id']; ?>]" onchange="set_to_click('<?php echo $this->item->id;?>','<?php echo $option['option_name']; ?>',<?php echo $option['product_option_id']; ?>,this.selectedIndex)">
Протестировано на сайтах с компонентами:
- Joomla 3.4
- K2 v 2.6.9
- k2_Store v 1.8.3
- Widgetkit v 1.5
- Perfect AJAX Popup Contact v 3.2.8
- Шаблон на основе фреймворка Warp 7.3.14