Корзина покупателя на jQuery.

Плагин jqCart.

Когда писал предыдущую статейку на эту тему, которая преследовала цель всего лишь показать абстрактный пример реализации корзины покупателя, то не думал, что она породит такое количество вопросов и просьб, посыпавшихся и в самом блоге, и на мою почту, и т.д. Собственно, поэтому и решил написать этот плагинчик "jqCart", но хочу сразу подчеркнуть несколько моментов:

  1. Хоть код и оформлен в виде плагина, но плагином его можно назвать с большой натяжкой. Да и вообще, в этом направлении, на мой взгляд, сделать плагин полностью универсальным - достаточно сложно;
  2. Писа́лся плагин на скорую руку, поэтому достаточно сыроват, хотя и вполне рабочий;
  3. На данный момент, код не документированный;
  4. Планирую ли я его дорабатывать? Да, но при достаточном количестве свободного времени;

Итак, для работы плагина требуется библиотека jQuery >= 1.8, которая должна быть подключена до подключения самого плагина. Работать должно во всех современных браузера и, по идее, даже в IE8. Проблема для старых "осликов", может заключаться только в применяемых CSS-свойствах и версии jQuery (напомню, что jQuery 2.x - не поддерживает Internet Explorer 6, 7, и 8). Данные передаются на сервер с помощью Ajax и поэтому, я крайне рекомендую использовать кодировку для файлов UTF-8 без BOM!

Подключение:

<link href="css/jqcart.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jqcart.min.js"></script>

Использование:

$(function() {
    'use strict';
    // инициализация плагина
    $.jqCart({
        buttons: '.add_item',        // селектор кнопок, аля "Добавить в корзину"
        handler: '/php/handler.php', // путь к обработчику
        visibleLabel: false,         // показывать/скрывать ярлык при пустой корзине (по умолчанию: false)
        openByAdding: false,         // автоматически открывать корзину при добавлении товара (по умолчанию: false)
        currency: '&euro;',          // валюта: строковое значение, мнемоники (по умолчанию "$")
        cartLabel: '.label-place'    /* селектор элемента, где будет размещен ярлык, 
                                        он же - "кнопка" для открытия корзины */
    });
    
    // дополнительные методы
    $.jqCart('openCart'); // открыть корзину
    $.jqCart('clearCart'); // очистить корзину
});

В кнопках ("Добавить в корзину"), должены быть прописаны следующие data-атрибуты:

  1. data-id - ID товара
  2. data-title - Наименование товара
  3. data-price - Цена товара
  4. data-img - URL фото товара (опционально)

Все значения вышеуказанных data-атрибутов, принимают участие при формировании окна корзины. Можно добавлять дополнительные data-атрибуты, значения которых будут отправлены с остальными данными в обработчик. Ключи в полученном массиве на сервере, будут соответствовать имени атрибута после "data-", т.е. значение атрибута "data-somevalue", будет в массиве под ключем "somevalue" Тег для кнопки и её расположение на странице - значения не имеет.

Пример:

<button class="add_item" data-id="7" data-title="Bugatti Veyron Super Sports" data-price="200" data-img="http://site.com/img/photo.png">Добавить в корзину</button>

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

<?php
// какой-то код обработки заказа...

// Ответ на запрос
// !для версии PHP < 5.4, используйте традиционный синтаксис инициализации массивов array() вместо короткого []
$response = [
    'errors' => !$send_ok,
    'message' => $send_ok ? 'Заказ принят в обработку!' : 'Хьюстон! У нас проблемы!'
];
exit( json_encode($response) );

Где переменная $send_ok - булевое значение (true/false), в зависимости от результата обработки заказа. Если это будет отправка на почту, то можно так:

<?php
$send_ok = mail($to, $subject, $body, implode("\r\n", $headers));

Ахтунг! В обработчике я не делал фильтрацию данных, поэтому внимательно и тщательно их обрабатывайте перед использованием, а особенно, если вы собираетесь записывать данные в БД!

Версия 1.1.0

  • Данные распределены по разным data-атрибутам кнопки
  • Добавлена возможность отображения фото товара в корзине
  • Добавлен параметр currency для вывода в корзине валюты рядом со стоимостью и ценой
  • Добавлена возможность передавать на сервер дополнительные данные, которые берутся из пользовательских data-атрибутов кнопки

Версия 1.1.1

  • Добавлена опция visibleLabel. Показывать ярлык при пустой корзине
  • Добавлена опция openByAdding. Автоматически открывать корзину при добавлении товара
  • Добавлена кнопка вывода заказа на печать

Версия 1.1.2

  • Исправлен расчет сумм с плавающей точкой

Просьба описывать в комментариях найденные вами ошибки/баги. По мере возможностей, я буду их править, НО глобальными изменениями или дополнениями, буду заниматься, как уже говорил, при наличии свободного времени

Incode Pro logo

807 комментариев

Страница 19 из 33  
Гость 26.06.2017 17:03
Здравствуйте! Кто ставил на этот хостинг - hostinger.com.ua и работала отправка на почту php(mail). Напишите пожалуйста свой php файл отправки на почту
infinitymd 26.06.2017 17:37
@Гость,
Корзина отличная, но с мобилы пользоваться неудобно. МОЖЕТ кто переписал под себя открытие корзины в .html или .php? Поделитесь пожалуйста кодом.
Спасибо.

выше уже выкладывал код
Гость 28.06.2017 08:21
infinitymd 26.06.2017 17:37
@Гость,
Корзина отличная, но с мобилы пользоваться неудобно. МОЖЕТ кто переписал под себя открытие корзины в .html или .php? Поделитесь пожалуйста кодом.
Спасибо.

выше уже выкладывал код


Носом ткните, пожалуйста.
infinitymd 28.06.2017 12:44
Код самой корзины:
(function($) {
  'use strict';
  var cartData,
    itemData,
    orderPreview = '',
    totalCnt = 0,
	subtotal = 0,
    visibleLabel = false, 
    label = $('<div class="jqcart-cart-label"><span class="jqcart-title"><i class="fa fa-shopping-cart"></i> Корзина:</span><br><span class="jqcart-total-cnt">0</span><br><span class="jqcart-subtotal">0</span></div>'),
	orderform = '<p class="jqcart-cart-title">Оформление заказа:</p><form class="jqcart-orderform"><div class="jqcart-orderform-left"><p><label>Доставка:</label><select name="user_delivery"><option  id="1" value="самовывоз (бесплатно)">Самовывоз (бесплатно)</option><option id="2" value="по Москве (300 р.)">Доставка по Москве (300 р.)</option><option id="3" value="за МКАД (400 р. + 25 р./км)">Доставка за МКАД (400 р. + 25 р./км)</option><option value="до транспортной компании (450 р.)">Доставка до транспортной компании (450 р.)</option></select></p><p><label>Оплата:</label><select name="user_payment"><option id="1"  value="наличные">Наличные</option><option id="2" value="безналичный расчет">Безналичный расчет (для ЮЛ)</option></select></p><p><b>Информация о заказчике</b></p><p><label>ФИО<span style="color:red">*</span>:</label><input type="text" name="user_name"></p><p><label>Телефон<span style="color:red">*</span>:</label><input type="text" name="user_phone" id="cartphone"></p><p><label>Email:</label><input type="text" name="user_mail"></p><p class="jqcart-orderform-left-adres"><label>Адрес доставки<span style="color:red">*</span>:</label><input type="text" name="user_address"></p><p><label>Коментарий:</label><textarea name="user_comment"></textarea></p></div><div class="jqcart-orderform-right"><p><b>Реквизиты компании</b></p><p><label>Полное наименование:</label><input type="text" name="user_org"></p><p><label>Юридический адрес:</label><input type="text" name="user_uradres"></p><p><label>Фактический адрес:</label><input type="text" name="user_adres"></p><p><label>ИНН:</label><input type="text" name="user_inn"></p><p><label>КПП:</label><input type="text" name="user_kpp"></p><p><label>ОКПО:</label><input type="text" name="user_okpo"></p>    <p><label>Наименование Банка:</label><input type="text" name="user_bank"></p><p><label>Корреспондентский счет:</label><input type="text" name="user_ks"></p><p><label>Расчетный счет:</label><input type="text" name="user_rs"></p><p><label>БИК:</label><input type="text" name="user_bik"></p></div><div class="jqcart-orderform-center"><p><input type="submit" value="Отправить заказ" onclick="yaCounter********.reachGoal(\'ORDER_OK\'); return true;"><input type="button" class="jqcart-clearCart-order" value="Очистить корзину"></p></div></form>';
  var opts = {
                buttons: '.add_item',
				handler: './handler.php',
				cartLabel: 'body',
				visibleLabel: false,
				openByAdding: false,
				currency: '&#8381;'
  };
  
  var actions = {
    init: function(o) {
      opts = $.extend(opts, o);
      cartData = actions.getStorage();
      if (cartData !== null && Object.keys(cartData).length) {
        for (var key in cartData) {
          if (cartData.hasOwnProperty(key)) {
            totalCnt += cartData[key].count;
          }
        }
        visibleLabel = true;
      }      
        label.prependTo(opts.cartLabel)[visibleLabel || opts.visibleLabel ? 'show' : 'hide']()
        .find('.jqcart-total-cnt').text(totalCnt); 
		
		label.prependTo(opts.cartLabel)[visibleLabel || opts.visibleLabel ? 'show' : 'hide']()
        .find('.jqcart-subtotal').text(subtotal); 
		
      $(document)
        .on('click', '.jqcart-incr', actions.changeAmount)
        .on('input keyup', '.jqcart-amount', actions.changeAmount)
        .on('click', '.jqcart-del-item', actions.delFromCart)
        .on('submit', '.jqcart-orderform', actions.sendOrder)
        //.on('reset', '.jqcart-orderform', actions.hideCart)
        //.on('click', '.jqcart-print-order', actions.printOrder)
        .on('click', '.jqcart-clearCart-order', methods.clearCart);
      return false;
    },
   
	delFromCart: function() {
      var $that = $(this),
        line = $that.closest('.jqcart-tr'),
        itemId = line.data('id');
      cartData = actions.getStorage();
      actions.changeTotalCnt(-cartData[itemId].count);
      delete cartData[itemId];
      actions.setStorage(cartData);
      line.remove();
      actions.recalcSum();
      return false;
    },
	
    changeAmount: function() {
      var $that = $(this),
				manually = $that.hasClass('jqcart-amount'),
        amount = +(manually ? $that.val() : $that.data('incr')),
        itemId = $that.closest('.jqcart-tr').data('id');
      cartData = actions.getStorage();
			if(manually) {
      	cartData[itemId].count = isNaN(amount) || amount < 1 ? 1 : amount;
			} else {
				cartData[itemId].count += amount * cartData[itemId].step;
			}
      if (cartData[itemId].count < cartData[itemId].step) {
        cartData[itemId].count = cartData[itemId].step;
      }
			if(manually) {
				$that.val(cartData[itemId].count);
			} else {
      	$that.siblings('input').val(cartData[itemId].count);
			}
      actions.setStorage(cartData);
      actions.recalcSum();
      return false;
    },
	
    recalcSum: function() {
      var subtotal = 0,
        amount,
        sum = 0,
        totalCnt = 0;
      $('.jqcart-tr').each(function() {
        amount = +$('.jqcart-amount', this).val();
        sum = Math.ceil((amount * $('.jqcart-price', this).text()) * 100) / 100;
        $('.jqcart-sum', this).html(sum + ' ' + opts.currency);
				subtotal = Math.ceil((subtotal + sum) * 100) / 100;
        totalCnt += amount;
      });
      $('.jqcart-subtotal').text(subtotal);
      $('.jqcart-total-cnt').text(totalCnt);
      if (totalCnt <= 0) {
				//actions.hideCart();
				setTimeout(methods.clearCart, 100);
				if(!opts.visibleLabel) {
					label.hide();
				}
      }
    return false;
    },
	
    changeTotalCnt: function(n) {
      var cntOutput = $('.jqcart-total-cnt');
      cntOutput.text((+cntOutput.text() + n));
      return false;
    },
	
	changesubtotal: function(n) {
      var subtotal = $('.jqcart-subtotal');
      subtotal.text((+subtotal.text() + n));
      return false;
    },
	
    sendOrder: function(e) {
      e.preventDefault();
      var $that = $(this);
      if ($.trim($('[name=user_name]', $that).val()) === '' || $.trim($('[name=user_phone]', $that).val()) === '') {
        $('<p class="jqcart-error">Пожалуйста, укажите свое имя и контактный телефон!</p>').insertBefore($that).delay(3000).fadeOut();
        return false;
      }
      $.ajax({
        url: opts.handler,
        type: 'POST',
        dataType: 'json',
        data: {
          orderlist: $.param(actions.getStorage()),
          userdata: $that.serialize()
        },
        error: function() {},
        success: function(resp) {
			$('.jqcart-orderform').html('<div class="resp_message">' + resp.message + '</div>');
									cartData = actions.getStorage();
									var key;
										for (key in cartData) {
										  if (cartData.hasOwnProperty(key)) {
											var count = cartData[key].count;
											var code = cartData[key].code;
											var price = cartData[key].price;
											var title = cartData[key].title;
										  
												  dataLayer.push({
													"ecommerce": {
														"purchase": {
															"actionField": {
																"id" : resp.order,
																"goal_id" : "********"
															},
															"products": [
																{
																		"id": code,
																		"name": title,
																		"price": price,
																		"quantity": count
																},
															]
														}
													}
												});
											}
										}
                                        if(!resp.errors) {
                                            setTimeout(methods.clearCart, 15000);
                                        }
        }
      });
    },
			  
                
    setStorage: function(o) {
      localStorage.setItem('jqcart', JSON.stringify(o));
      return false;
    },
    getStorage: function() {
      return JSON.parse(localStorage.getItem('jqcart'));
    }
  };
  var methods = {
                clearCart: function(){
                        localStorage.removeItem('jqcart');
                        location.reload(); ///////////////////////actions.hideCart();
                },
                printOrder: actions.printOrder,
                test: function(){
                        actions.getStorage();
                }
        };
  $.jqCart = function(opts) {
    if (methods[opts]) {
      return methods[opts].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof opts === 'object' || !opts) {
      return actions.init.apply(this, arguments);
    } else {
      $.error('Метод с именем "' + opts + '" не существует!');
    }
  };
   
  
  
      var subtotal = 0,
      cartHtml = '';
      cartData = actions.getStorage();
      orderPreview = '<div class="jqcart-checkout-static">';
      orderPreview += '<p class="jqcart-cart-title">Корзина</p><div class="jqcart-table-wrapper"><div class="jqcart-manage-order"><div class="jqcart-thead"><div>Артикул</div><div>Изображение</div><div>Наименование</div><div>Цена ' + opts.currency + '</div><div>Кол-во</div><div>Сумма ' + opts.currency + '</div><div></div></div>';
      var key, sum = 0;
      for (key in cartData) {
        if (cartData.hasOwnProperty(key)) {
				sum = Math.ceil((cartData[key].count * cartData[key].price) * 100) / 100;
				subtotal = Math.ceil((subtotal + sum) * 100) / 100;
				orderPreview += '<div class="jqcart-tr" data-id="' + cartData[key].id + '">';
				orderPreview += '<div class="jqcart-small-td">' + cartData[key].code + '</div>';
				orderPreview += '<div class="jqcart-small-td jqcart-item-img"><img src="' + cartData[key].img + '" alt=""></div>';
				orderPreview += '<div><a href="'+ cartData[key].link + '">' + cartData[key].title + '</a></div>';
				orderPreview += '<div class="jqcart-price">' + cartData[key].price + '</div>';
				orderPreview += '<div><span class="jqcart-incr" data-incr="-1">&#8211;</span><input type="text" class="jqcart-amount" value="' + cartData[key].count + '"' + (cartData[key] === 1 ? ' readonly' : '') + '><span class="jqcart-incr" data-incr="1">+</span></div>';
				orderPreview += '<div class="jqcart-sum">' + sum + '</div>';
				orderPreview += '<div class="jqcart-small-td"><span class="jqcart-del-item"><i class="fa fa-trash" aria-hidden="true" title="Удалить"></i></span></div>';
				orderPreview += '</div>';
        }
      }
				orderPreview += '</div></div></div>';
				orderPreview += '<div class="jqcart-subtotal"><strong>' + subtotal + '</strong></div>';
		
		$(document).on('change', 'select[name="user_payment"]', function(){
        $('.jqcart-orderform-right')[$(':selected',this).attr('id') == 1 ? 'hide' : 'show']();
        });
		
		$(document).on('change', 'select[name="user_delivery"]', function(){
        $('.jqcart-orderform-left-adres')[$(':selected',this).attr('id') == 1 ? 'hide' : 'show']();
        }); 
		
		cartHtml = subtotal ? (orderPreview + orderform) : '<p class="jqcart-empty-cart-static">На данный момент в корзине нет ни одного товара</p>';
        console.log(cartData);
        document.write(cartHtml);
  
  
})(jQuery);

Код на остальных страницах сайта:
/*!
 * jQuery jqCart Plugin v1.1.2
 * requires jQuery v1.9 or later
 *
 * http://incode.pro/
 *
 * Date: Date: 2016-05-18 19:15
 */
;(function($) {
  'use strict';
  
  var cartData,
    itemData,
    orderPreview = '',
    totalCnt = 0,
	subtotal = 0,
    visibleLabel = false, 
    label = $('<div class="jqcart-cart-label"><span class="jqcart-title"><i class="fa fa-shopping-cart"></i> Корзина</span><br><span class="jqcart-total-cnt">0</span><br><span class="jqcart-subtotal">0</span></div>');
 
 var opts = {
		buttons: '.add_item',
		cartLabel: 'body',
		visibleLabel: false,
		openByAdding: false,
		handler: '/',
		currency: '$'
  };
  
  var actions = {
    init: function(o) 
	{
		opts = $.extend(opts, o);
		cartData = actions.getStorage();
		var subtotal = 0;
		var key, sum = 0;
		if (cartData !== null && Object.keys(cartData).length) 
		{
			for (var key in cartData) 
			{
				if (cartData.hasOwnProperty(key)) 
				{
					totalCnt += cartData[key].count;
					sum = Math.ceil((cartData[key].count * cartData[key].price) * 100) / 100;
					subtotal = Math.ceil((subtotal + sum) * 100) / 100; 
				}
			}
		visibleLabel = true;
		}
    label.prependTo(opts.cartLabel)[visibleLabel || opts.visibleLabel ? 'show' : 'hide']()
    .find('.jqcart-total-cnt').text(totalCnt); 
		
	label.prependTo(opts.cartLabel)[visibleLabel || opts.visibleLabel ? 'show' : 'hide']()
    .find('.jqcart-subtotal').text(subtotal); 
		
    $(document)
		.on('click', opts.buttons, actions.addToCart)
		//.on('click', 		'.jqcart-incr', actions.changeAmount)
		//.on('input keyup', 	'.jqcart-amount', actions.changeAmount)
		//.on('click', 		'.jqcart-del-item', actions.delFromCart)
		//.on('submit', 		'.jqcart-orderform', actions.sendOrder)
		//.on('reset', 		'.jqcart-orderform', actions.hideCart)
		//.on('click', 		'.jqcart-print-order', actions.printOrder)
		.on('click', 		'.jqcart-clearCart-order', methods.clearCart);
    return false;	
    },
	
    addToCart: function(e) 
	{
		e.preventDefault();
		itemData = $(this).data();
		var stepCnt = $(this).data('step') || 1;
		if(typeof itemData.id === 'undefined')
		{
			console.log('Отсутствует ID товара');
			return false;
		}
		cartData = actions.getStorage() || {};
		if (cartData.hasOwnProperty(itemData.id)) 
		{
			cartData[itemData.id].count += stepCnt;
		}
		else
		{
			itemData.count = stepCnt;
			cartData[itemData.id] = itemData;
		}
	cartData[itemData.id].step = stepCnt;
	actions.setStorage(cartData);
	actions.changeTotalCnt(stepCnt);
	actions.metrica();
	actions.InPreviewLabel();
	 $('<div class="jqcart-cart-alert">Товар добавлен в корзину</div>').insertAfter('.label-place-cart').delay(3000).fadeOut();
	return false;
    },
	
	metrica: function() {
	    cartData = actions.getStorage();
		for (var key in cartData) {
          if (cartData.hasOwnProperty(key)) {
            var count = cartData[key].count;
			var code = cartData[key].code;
			var price = cartData[key].price;
			var title = cartData[key].title;
          }
        }
		dataLayer.push({
			"ecommerce": {
				"add": {
					"products": [
						{
							"id": code,
							"name": title,
							"price": price,
							"quantity": count
						}
					]
				}
			}
		});
	},
	
	InPreviewLabel: function()
	{
		cartData = actions.getStorage();
		var subtotal = 0;
		var key, sum = 0;
		if (cartData !== null && Object.keys(cartData).length) 
		{
			for (var key in cartData) 
			{
				if (cartData.hasOwnProperty(key)) 
				{
					sum = Math.ceil((cartData[key].count * cartData[key].price) * 100) / 100;
					subtotal = Math.ceil((subtotal + sum) * 100) / 100; 
				}
			}
		}
		$('.jqcart-subtotal').text(subtotal);
		return false;
	},
	
	
    delFromCart: function() 
	{
		var $that = $(this),
		line = $that.closest('.jqcart-tr'),
		itemId = line.data('id');
		cartData = actions.getStorage();
		actions.changeTotalCnt(-cartData[itemId].count);
		delete cartData[itemId];
		actions.setStorage(cartData);
		line.remove();
		actions.recalcSum();
		return false;
    },
	
    changeAmount: function() 
	{
		var $that = $(this),
		manually = $that.hasClass('jqcart-amount'),
		amount = +(manually ? $that.val() : $that.data('incr')),
		itemId = $that.closest('.jqcart-tr').data('id');
		cartData = actions.getStorage();
		if(manually) 
		{
			cartData[itemId].count = isNaN(amount) || amount < 1 ? 1 : amount;
		} 
		else 
		{
			cartData[itemId].count += amount * cartData[itemId].step;
		}
		if (cartData[itemId].count < cartData[itemId].step) 
		{
			cartData[itemId].count = cartData[itemId].step;
		}	
		if(manually) 
		{
			$that.val(cartData[itemId].count);
		} 
		else 
		{
			$that.siblings('input').val(cartData[itemId].count);
		}
		actions.setStorage(cartData);
		actions.recalcSum();
		return false;
    },
	
    recalcSum: function() 
	{
		var subtotal = 0,
			amount,
			sum = 0,
			totalCnt = 0;
		$('.jqcart-tr').each(function() {
			amount = +$('.jqcart-amount', this).val();
			sum = Math.ceil((amount * $('.jqcart-price', this).text()) * 100) / 100;
			$('.jqcart-sum', this).html(sum + ' ' + opts.currency);
			subtotal = Math.ceil((subtotal + sum) * 100) / 100;
			totalCnt += amount;
		  });
		  $('.jqcart-subtotal strong').text(subtotal);
		  $('.jqcart-total-cnt').text(totalCnt);
		  return false;
    },
	
    changeTotalCnt: function(n) {
      var cntOutput = $('.jqcart-total-cnt');
      cntOutput.text((+cntOutput.text() + n));
      return false;
    },
	
    setStorage: function(o) {
      localStorage.setItem('jqcart', JSON.stringify(o));
      return false;
    },
	
    getStorage: function() {
      return JSON.parse(localStorage.getItem('jqcart'));
    }
  };
  
  var methods = {
		clearCart: function(){
			localStorage.removeItem('jqcart');
			label[opts.visibleLabel ? 'show' : 'hide']().find('.jqcart-total-cnt').text(0);
			actions.hideCart();
		},
		openCart: actions.openCart,
		printOrder: actions.printOrder,
		test: function(){
			actions.getStorage();
		}
	};
	
  $.jqCart = function(opts) {
    if (methods[opts]) {
      return methods[opts].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof opts === 'object' || !opts) {
      return actions.init.apply(this, arguments);
    } else {
      $.error('Метод с именем "' + opts + '" не существует!');
    }
  };
  
})(jQuery);

У меня еще дополнительно передаются параметры шага кол-ва товарв, электронной коммерции и т.д, разберетесь...
Гость 28.06.2017 19:03
Спасибо.
Гость 02.07.2017 08:19
Господа,с 1 числа вступил закон о сборе личных данных.
Подскажите пожалуйста как прикрутить чекбокс с проверкой к корзине “Согласие на обработку персональных данных".
Спасибо.
Гость 03.07.2017 08:52
Господа, подскажите как сделать В КОРЗИНЕ кнопку активной при установке галочки на чекбоксе.
Нашел такой вариант, но кнопка становится НЕ активной при установки галочки.Поправьте пожалуйста код, а то голову сломал уже. Есть другие варианты,но там коды мудреные и я не в курсе как их прикрутить к корзине.Этот работает,но в зеркальном порядке,что не удобно.
Спасибо.
<input type="checkbox" onchange="nextSibling.disabled=checked"><input type="submit" value="отправить">
dohuze 03.07.2017 18:09
При успешной отправке формы обработчик handler.php возвращает строку конечной командой exit( json_encode($response) );

Но она нигде не обрабатывается и ничего не выводится типа "Введённые вами данные отправлены !"

Или должно выводится?
Спасибо.
Гость 03.07.2017 19:31
@dohuze, должно выводиться строка из 'message'- Заказ принят - Проверьте вашу почту!

87 стр примерно
// Ответ на запрос
$response = [
'errors' => !$send_ok,
'message' => $send_ok ? 'Заказ принят - Проверьте вашу почту!' : 'Хьюстон! У нас проблемы!'
];
dohuze 03.07.2017 20:30
При успешной отправке формы обработчик handler.php возвращает строку конечной командой exit( json_encode($response) );

Но она нигде не обрабатывается и ничего не выводится типа "Введённые вами данные отправлены !"

Или должно выводится?
Спасибо.
dohuze 03.07.2017 20:35
PHP всё отправляет, js не выводит ничего при отправке формы. В каком месте jqcart.min.js искать ?
dohuze 03.07.2017 20:46
Извиняюсь! Всё, оказывается, работает - просто handler.php выдавал ПРЕДУПРЕЖДЕНИЯ.
Вначале скрипта поставил: ini_set('display_errors','On'); error_reporting('E_ALL');

Теперь выводит всё правильно:
errors false
message "Заказ принят в обработку !"

Спасибо!
infinitymd 04.07.2017 16:10
Господа,с 1 числа вступил закон о сборе личных данных.
Подскажите пожалуйста как прикрутить чекбокс с проверкой к корзине “Согласие на обработку персональных данных".
Спасибо.

Как самый простой вариант (required вместо проверки) добавить перед:
<p><input type="submit" value="Отправить

строку:
<p><input type="checkbox" name="terms" value="1" id="confirmation-terms" required><label for="confirmation-terms">Я ознакомился (ознакомилась) с <a href="/confirmation_terms.html" target="_blank">Условиями предоставления услуг</a> и принимаю их</label></p>
infinitymd 04.07.2017 16:32
А вот вариант с проверкой:
После

if ($.trim($('[name=user_name]', $that).val()) === '' || $.trim($('[name=user_phone]', $that).val()) === '') {
$('<p class="jqcart-error">Пожалуйста, укажите свое имя и контактный телефон!</p>').insertBefore($that).delay(3000).fadeOut();
return false;
}

Добавить

if($("#confirmation-terms").attr("checked") != 'checked') { 
$('<p class="jqcart-error">Примите <a style="color:red; font-weight:bold" href="/confirmation_terms.html" target="_blank">Условия предоставления услуг</a></p>').insertBefore($that).delay(3000).fadeOut();
return false;
}

Сам чекбокс:
<p><input type="checkbox" name="terms" id="confirmation-terms"><label for="confirmation-terms">Я ознакомился (ознакомилась) с <a href="/confirmation_terms.html" target="_blank">Условиями предоставления услуг</a> и принимаю их</label></p>
Гость 05.07.2017 08:02
@infinitymd, спасибо за вашу отзывчивость)))и примеры.
Aleks 10.07.2017 08:21
Уважаемый автор! Хочу корзину оформить не планкой как сейчас а в виде изображения корзины с количеством выбранных товаров на ней. Укажите, пожалуйста путь реализации этого.
Спасибо!
Incode 10.07.2017 11:57
@Aleks, код ярлыка присвоен переменной label (смотрите несжатый файл jqcart.js в папке developer). Можно вместо фразы "Оформить заказ" прописать изображение, или же, используя классы, добавить изображение бекграундом. Остальной вид ярлыка, можно так же изменить, ориентируясь на его классы в CSS. После изменений, подключаете уже этот файл вместо стандартного jqcart.min.js и при необходимости сжимаете его.
Aleks 10.07.2017 15:35
Ещё раз уточните, пожалуйста, как переместить корзину (видоизменённую - в виде изображения корзины + на ней <span> с количеством товаров в другое место сайта, например слева от верхнего меню.
Спасибо.
Aleks 10.07.2017 17:38
Разобрался: <div class="label-place" style="width: 100%; "></div><br /> --><!-- Элемент, где будет расположен ярлык корзины -->
Гость 26.07.2017 15:59
Прочел все комментарии, но не нашел как сделать чтоб количество можно указать до добавления в корзину. Вариант с

cartData[itemData.id].count += +$(this).siblings('.amount_field').val() || 1;


у меня не прокатил, или я что то не так делаю. Подкреплял на
 input type number
DomO 01.08.2017 01:45
Спасибо за чудесное решение, но только вот атрибут data-count не хочет считываться. Подскажите в чём проблема. Заранее Спасибо =)
Dima.S. 06.08.2017 16:02
всем добрый день,
огромная просьба подскажите почему после нажатия на кнопку (отправить заказ) ничего не происходит?
в файле (handler.php) почту изменил.
заранее благодарен.
Dima.S. 06.08.2017 16:53
перед этим сайт залил на gitHub.
Incode 06.08.2017 21:33
@Dima.S., проверьте правильно ли указан путь к обработчику. Смотрите ошибки в консоли.
dohuze 08.08.2017 10:10
Вот незадача... При нажатии на кнопку "печать" в Хроме открывается новое окно как полагается, но формируются пустые страницу. В чём дело ? Спасибо.
Страница 19 из 33  
Ваш комментарий:
X