PHP: Интернет магазин для лендинга
Не смотря на то, что формат лендинг пейджа уже пережил свой пик, он все еще остается хорошей базой для привлечения новых клиентов. Уже придумано множество фишек, который можно навешать на сайты подобного формата: таймеры, информеры покупок, подстановки нужных текстов в зависимости от поисковой фразы и многое другое. Корзина (т.е. возможность заказа не только одного товара, а нескольких) так же не исключение. Именно о ней сегодня и пойдет речь.
Я хочу показать пример в каком направлении нужно идти, чтобы реализовать на своем лендинге простую корзину товаров.
Первым делом нам понадобится файл с нашими товарами. Источником данных может быть база данных, файл, другой магаизн и т.п., но как правило обходятся обычным массивом, в котором перечисляют нужные товары.
Создадим файл init.php со следующим содержимым:
array( 'title' => 'Товар 1', 'description' => 'Описание товара 1', 'image' => 'http://landing-editor.ru/img/mysql.png', 'price' => 999.99, ), 'id2' => array( 'title' => 'Товар 1', 'description' => 'Описание товара 1', 'image' => 'http://landing-editor.ru/img/mysql.png', 'price' => 999.99, ), //и т.д. );
Что делает код выше и зачем мы вынесли его в отдельный файл? Переменные и логику данного файла мы будет использовать как при генерации страницы нашего лендинга, так и в скрипте, который будет обрабатывать наши ajax запросы. Поэтому логичней вынести все это в отдельный файл. Из кода видно, что в нем мы определяем почту, куда будем слать заказы, стартуем сессию (в ней мы будем хранить корзину), а так же описываем каталог наших товаров.
Рассуждаем дальше. Обычно интернет магазины имеют «мини корзину» — информационный блок, который показывает сколько товаров в корзине, возможно их общую стоимость, возможно какие то дополнительные мелочи. Данный блок отображается на landing-е (возможно в нескольких местах), а так же обновляется каждый раз после изменения состояния корзины. Поэтому логично вынести генерацию кода данного блока в функцию и разместить ее так же в файле init.php. Корзину в сессии обзовем как индекс cart .
Далее нам необходим механизм добавления и удаления товаров из корзины, формирования полной корзины и отправки заказа. Для этого создадим файл ajax.php и реализуем в нем необходимый функционал:
\r\n"; $headers .= "Reply-To: ". strip_tags($email) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8\r\n"; if(!empty($_REQUEST['a'])) switch($_REQUEST['a']) < //флаг нашего действия case 'order': //оформление заказа $comment = trim(strip_tags($_REQUEST['comment'])); if(!preg_match('/^[a-zA-Z0-9_\-]+@[a-zA-Z0-9\-]\.[a-zA-Z]$/si', $email)) < $response = array('status' =>1, 'data' => 'email'); break; > if(!preg_match('/^\+7\s\(\d\)\s\d\-\d\-\d$/si', $phone)) < $response = array('status' =>1, 'data' => 'phonenumber'); break; > if(!isset($_SESSION['cart']) || count($_SESSION['cart']) == 0) < $response = array('status' =>2, 'data' => 'Нет товаров в корзине.'); break; > $msg = 'Email: '.$email.'
Телефон: '.$phone.'
Комментарий
'.$comment.'
'; $total = 0; foreach($_SESSION['cart'] as $id => $countItem) < $sum = $items[$id]['price'] * $countItem; $total += $sum; $msg .= 'Артикул: '.$id.', '.$items[$id]['title'].' x '.$countItem.'шт. = '.$sum.' руб.'; > $msg .= '
Итого: '.$total.' руб.'; $msg .= '
Дата отправки '.date('d.m.Y H:i:s').''; if(mail(ORDER_EMAIL, 'Новый заказ', $msg, $headers)) < $response = array('status' =>0); > else < $response = array('status' =>2, 'data' => 'Возникла ошибка при создании заказа. Попробуйте еще раз.'); > break; case 'cart': //попап оформления заказа foreach($_SESSION['cart'] as $id => $countItem) < if(isset($items[$id])) < $response .= '
'.$items[$id]['title'].' x '.$items[$id]['price'].'р. = '.($items[$id]['price'] * $countItem).'р. удалить'; > > break; case 'remove': //удаляем товар из корзины if(!empty($_REQUEST['id']) && isset($items[$_REQUEST['id']]) && isset($_SESSION['cart'][$_REQUEST['id']])) < unset($_SESSION['cart'][$_REQUEST['id']]); >$response = getCartMiniHtml(); break; case 'info': //получаем информацию о товаре if(!empty($_REQUEST['id']) && isset($items[$_REQUEST['id']])) < $response = json_encode($items[$_REQUEST['id']]); >break; case 'add': //добавляем товар в корзину if(!empty($_REQUEST['id']) && isset($items[$_REQUEST['id']])) < $id = $_REQUEST['id']; $count = !empty($_REQUEST['count']) && is_numeric($_REQUEST['count']) && $_REQUEST['count'] >= 0 ? $_REQUEST['count'] : 1; if(!isset($_SESSION['cart'][$id])) < $_SESSION['cart'][$id] = 0; >if(!empty($_REQUEST['set'])) < //если есть флаг SET, то переписываем количество товара в корзине $_SESSION['cart'][$id] = $count; >else < //иначе товар уже был в корзине, нужно сложить количество в корзине с добавляемым числом товаров $_SESSION['cart'][$id] += $count; >> $response = getCartMiniHtml(); break; > echo is_array($response) ? json_encode($response) : $response;
Данный скрипт возвращает данные в формате JSON или в виде HTML кода. При формате ответа JSON запрос считается успешно отработанным, если поле status в ответе содержит значение 0.
По сути, наш бекенд готов. Единственное, что нам остается, это вывести товары нашего каталога обычным циклом на нужной странице лендинга.
Далее в бой идут скрипты. Их тут так же будет не много. Нам понадобится реализовать функции «положить товар в корзину», «удалить товар из корзины», «открыть корзину», «оформить заказ» и «очистить корзину». При необходимости Вы можете реализовать доп. функции, например получение детальной информации о товаре.
var ajaxUrl = '/ajax.php'; //ссылка на файл ajax.php, созданный выше function addItemToCart(id, count) < count = count || 1; $.ajax(< url: ajaxUrl, data: < a: 'add', id: id, count: count >, success: function(i) < $('#basket-mini').html(i); //обновляем блок с "мини" корзиной >>); > function removeItemFromCart(id) < $.ajax(< url: ajaxUrl, data: < a: 'remove', id: id >, success: function(i) < $('#basket-mini').html(i); //обновляем блок с "мини" корзиной >>); > $('body').on('click', '.rm-item', function (e) < //удаление товара из полной корзины $(this).closest('.item').slideUp(); removeItemFromCart($(this).attr('data-id')); >); function initCountChange(parent) < //Функция для навешивания события на блок изменения количества товара в корзине parent = parent || 'body'; $(parent).find('.counter').change(function() < if($(this).closest('.item').length >0) < var $row = $(this).closest('.item'); $row.find('.total').text( this.value * $row.find('.price').text() ); $.ajax(< url: ajaxUrl, data: < set: true, a: 'add', id: $row.attr('data-id'), count: this.value >, success: function(i) < $('#basket-mini').html(i); //обновляем блок с "мини" корзиной >>); > >); > $('body').on('click', '.basket-btn-mini', function (e) < //клик на "мини" корзине открывает форму заказа e.preventDefault(); $.ajax(< url: ajaxUrl, data: < a: 'cart' >, success: function(i) < if(i == '') return; $('#checkout .basket').html(i); //обновляем контент блока с товарами полной корзины $('#checkout').show(); //показываем корзину initCountChange('#checkout'); >>); >); $("#form_order").submit(function() < //отправка формы $.ajax(< url: ajaxUrl, data: $(this).serialize() + '&a=order', dataType: 'json', success: function(j) < if(j.status == 0) < alert('Спасибо за заказ!'); $.ajax(< url: ajaxUrl, data: < a: 'removeAll' >, success: function(i) < $('#basket-mini').html(i); >>); > else < if(j.status == 2) < alert(j.data); >else < $('#form_order [name="' + j.data + '"]').addClass('error'); //если назвать поля формы, так же как и текст ошибки, то автоматически к данному полю добавиться класс error >> >>); return false; >);
Стоит заметить, что селекторы скриптов могут быть отличны и будут зависеть от HTML кода Вашего сайте. Так же приведенный выше пример подразумевает наличие jquery на Вашем сайте.
Описанный выше пример, лишь пример. Не нужно бездумно копировать его на свой сайт и говорить что «ничего не работает». Я лишь хотел показать общий подход и логику, как можно быстро и просто реализовать корзину на своем лендинг пейдже.
Ajax добавление в корзину
Ajax добавление в корзину и обновление корзины с помощью jQuery в два шага. Универсальный вариант для НЕ программистов.
Итак. Множество людей, которые имеют магазин на Битриксе, хотят сделать добавление в корзину без перезагрузки страницы, не включая режим AJAX у компонентов catalog (Это страшно!).
Да и мне лично не нравится библиотека от Битрикса. И использую я всегда jQuery.
У нас на форумах сообщений по данной теме достаточно много, но там надо лезть в исходный код и писать скрипт под свою верстку, создавать отдельный файл с компонентом корзины и т.д. Я же предлагаю универсальный метод. Все действия будут описаны ниже, они включают в себя:
1. подключение библиотеки jQuery в header.php
2. обертка компонента корзины в тэг
и все!
Сразу поясню, данный метод чисто мои задумки на универсальность, сам я его не использую, а пишу обновление корзины под каждый конкретный случай верстки и т.д.
1. подключаем jQuery, для этого открываем файл /bitrix/templates/ваш_шаблон/header.php и между
и вставляем код:
или просто скачиваем библиотеку и поключаем локально.
сразу после подключения вставляем такой код:
2. теперь обновим маленькую корзину. Для этого нужно обернуть вызов компонента нашей корзины. Находим где она подлючается и оборачиваем в . Примерно это будет выглядеть так:
IncludeComponent(«bitrix:sale.basket.basket.small», «basket_small», Array( «PATH_TO_BASKET» => «/personal/basket/», // Страница корзины «PATH_TO_ORDER» => «/personal/order/», // Страница оформления заказа ), false ); ?>
Все! Проверяйте, должно все работать!
А теперь разбор полетов:
buy_btns = $('a[href*="ADD2BASKET"]'); buy_btns.each( function() < $(this).attr("rel", $(this).attr("href")); >); buy_btns.attr("href","javascript:void(0);");
тут мы разом заменяем все сслыки на добавление товара в корзину. Но ссылка нам еще понадобится, копируем ее в атрибут rel. Плюс в том, что если у кого то отключен JS, все будет работать по старому!
$('a[rel*="ADD2BASKET"]').click( function() < $.ajax(< type: "GET", url: $(this).attr("rel"), dataType: "html", success: function(out)< $("#bid").html(getBasketHTML(out)); alert("Товар добавлен в корзину"); >>); > );
Теперь при клике по ссылке посылаем запрос к этой же странице на добавление товара в корзину. Тут минус — страница срабатывает полностью, но без видимой перезагрузки. Тоесть для пользователя все прозрачно.
И самый извращенный момент вырезать из html кода, который нам пришел от Ajax запроса, обновленное тело корзины:
function getBasketHTML(html) < txt = html.split(''); txt = txt[2]; txt = txt.split(''); txt = txt[0]; return txt; >
тут мы режем html и, обратите внимание, берем элемент массива с индексом 2, потому что в этой функции мы тоже использовали и первый раз split разрежет по ней. Можно использовать рег. выражения, но я сделал так.
Вариант для добавления товара в корзину с указанием количества(для стандартного шаблона).
IncludeComponent( «bitrix:sale.basket.basket.small», «», Array( «PATH_TO_BASKET» => «/personal/basket.php», «PATH_TO_ORDER» => «/personal/order.php» ), false );?>
Вот и все. Cпасибо за внимание.
Класс корзины
Класс корзины позволяет добавлять товары к сессии, которая остается активной пока пользователь просматривает веб-сайт. Эти товары могут быть извлечены и отображены в стандартном формате “класса корзины”, позволяя пользователю обновить количество или удалить товары из корзины.
Класс корзины считается УСТАРЕВШИМ и не должен использоваться. В настоящее время сохранен только для обратной совместимости.
Обратите внимание, что класс корзины обеспечивает ТОЛЬКО базовую функциональность “корзины”. Она не включает доставку, авторизацию кредитной карты или другие компоненты обработки.
- Использование класса корзины
- Инициализация класса корзины
- Добавление товара в корзину
- Добавление нескольких товаров в корзину
- Показ корзины
- Обновление корзины
- Что такое ID строки?
Использование класса корзины
Инициализация класса корзины
Класс корзины использует класс сессий CodeIgniter чтобы сохранить информациу корзины в базе данных, поэтому перед использованием класса корзины вы должны создать таблицы базы данных, как указано в документации сессии и установить настройки сессии в application/config/config.php файле чтобы использовать базу данных.
Для инициализации класса корзины в конструкторе контроллера используйте $this->load->library() метод:
$this->load->library('cart');
После загрузки объект корзины будет доступен через:
$this->cart
Класс корзины загрузит и инициализирует класс сессий автоматически, так что если вы используете сессии в другом месте вашего приложения, нет необходимости загружать класс сессий.
Добавление товара в корзину
Для добавление товара в корзину просто передайте массив с информацией о продукте $this->cart->insert() методом, как показано ниже:
$data = array( 'id' => 'sku_123ABC', 'qty' => 1, 'price' => 39.95, 'name' => 'T-Shirt', 'options' => array('Size' => 'L', 'Color' => 'Red') ); $this->cart->insert($data);
Первые четыре массива индексов выше (id, qty, price и name) являются необходимыми. Если вы пропустите какой-либо из них, данные не будут сохранены в корзину. Пятый индекс (options) необязательный. Он предназначен для использования в тех случаях, когда продукт имеет параметры. Используйте массив для функции, как показано выше.
Пять зарезервированных индексов:
- id — Каждый товар в вашем магазине должен иметь уникальный идентификатор. Как правило, это будет “sku” или другой идентификатор.
- qty — Количество приобретаемого товара.
- price — Цена товара.
- name — Название товара.
- options — Любые дополнительные атрибуты, необходимые для идентификации продукта. Данные должны передаваться через массив.
В дополнение к пяти индексам описаным выше есть два зарезервированных слова: rowid и subtotal. Они используются внутри класса корзины, поэтому, пожалуйста НЕ используйте эти слова в качестве имен индексов при вставке данных в корзину.
Ваш массив может содержать дополнительные данные. Все что вы включите в массив будет храниться в сессии. Однако лучше всего стандартизировать данные среди всех продуктов, чтобы сделать отображение информации в таблице легче.
$data = array( 'id' => 'sku_123ABC', 'qty' => 1, 'price' => 39.95, 'name' => 'T-Shirt', 'coupon' => 'XMAS-50OFF' ); $this->cart->insert($data);
Метод insert() вернет $rowid если вы успешно вставили один элемент.
Добавление нескольких товаров в корзину
С помощью многомерного массива, как показано ниже, можно добавить несколько товаров в корзину в одно действие. Это полезно когда вы хотите позволить людям выбирать из нескольких элементов на одной странице.
$data = array( array( 'id' => 'sku_123ABC', 'qty' => 1, 'price' => 39.95, 'name' => 'T-Shirt', 'options' => array('Size' => 'L', 'Color' => 'Red') ), array( 'id' => 'sku_567ZYX', 'qty' => 1, 'price' => 9.95, 'name' => 'Coffee Mug' ), array( 'id' => 'sku_965QRS', 'qty' => 1, 'price' => 29.95, 'name' => 'Shot Glass' ) ); $this->cart->insert($data);
Показ корзины
Для отображения корзины создайте файл вида с кодом показаным ниже.
Обратите внимание, что этот пример использует хелпер формы.
php echo form_open('path/to/controller/update/method'); ?> cellpadding="6" cellspacing="1" style="width:100%" border="0"> QTY Item Description style="text-align:right">Item Price style="text-align:right">Sub-Total $i = 1; ?> foreach ($this->cart->contents() as $items): ?> echo form_hidden($i.'[rowid]', $items['rowid']); ?> echo form_input(array('name' => $i.'[qty]', 'value' => $items['qty'], 'maxlength' => '3', 'size' => '5')); ?> echo $items['name']; ?> if ($this->cart->has_options($items['rowid']) == TRUE): ?> foreach ($this->cart->product_options($items['rowid']) as $option_name => $option_value): ?> echo $option_name; ?>: echo $option_value; ?> /> endforeach; ?> endif; ?> style="text-align:right"> echo $this->cart->format_number($items['price']); ?> style="text-align:right">$ echo $this->cart->format_number($items['subtotal']); ?> $i++; ?> endforeach; ?> colspan="2"> class="right"> Total class="right">$ echo $this->cart->format_number($this->cart->total()); ?> echo form_submit('', 'Update your Cart'); ?>
Обновление корзины
Чтобы обновить информацию в корзине, вы должны передавать массив содержащий ID строки и одного или более предварительно определенных свойств $this->cart->update() методом.
Если количество равно нулю, то элемент будет удален из корзины.
$data = array( 'rowid' => 'b99ccdf16028f015540f341130b6d8ec', 'qty' => 3 ); $this->cart->update($data); // Or a multi-dimensional array $data = array( array( 'rowid' => 'b99ccdf16028f015540f341130b6d8ec', 'qty' => 3 ), array( 'rowid' => 'xw82g9q3r495893iajdh473990rikw23', 'qty' => 4 ), array( 'rowid' => 'fh4kdkkkaoe30njgoe92rkdkkobec333', 'qty' => 2 ) ); $this->cart->update($data);
Вы также можете обновить любое свойство, которое была определено ранее при вставке элемента, такие как настройки, цена или другие настраиваемые поля.
$data = array( 'rowid' => 'b99ccdf16028f015540f341130b6d8ec', 'qty' => 1, 'price' => 49.95, 'coupon' => NULL ); $this->cart->update($data);
Что такое ID строки?
ID строки является уникальным идентификатором, который генерируется корзиной, при добавлении товара в корзину. Уникальный ID создается для одинаковых товаров с разными опциями, которыми можно управлять через корзину покупок.
Например, предположим кто-то покупает две одинаковые футболки (одинаковый ID товара), но разных размеров. ID продукта (и другие атрибуты) одинаковы для обоих размеров, потому что это одинаковые футболки. Единственным различием будет размер. Класс корзина имеет средства выявления этой разницы, так что эти два размера футболок можно назначить независимо. Она делает это путем создания уникального “ID строки” на основе ID товара и любых опций связанных с ним.
Почти во всех случаях обновление корзины происходит из-за действий пользователя на странице “просмотра корзины”, поэтому разработчику никогда не нужно беспокоиться об “ID строки”, сначала убедившись, что ваша страница “просмотра корзины” содержит информацию в скрытом поле формы и убедившись что он передается в update() метод, когда форма обновления подтверждена. Пожалуйста, изучите конструкцию страницы “просмотра корзины” для получения дополнительной информации.
Настройки класса
class CI_Cart $product_id_rules = '.a-z0-9_-'
Это правило регулярного выражения мы используем для проверки ID продукта — буквенно-цифровой, тире, знаки подчеркивания и точки по умолчанию
Это правило регулярного выражения мы используем для проверки ID продукта и название продукта — буквенно-цифровой, тире, символы подчеркивания, двоеточия или точки по умолчанию
Следует ли разрешить только безопасные имена товаров. По умолчанию TRUE.
TRUE при удаче, FALSE если нет
Вставляет товары в корзину и сохраняет их в таблицу сессий. Возвращает TRUE при удаче и FALSE если нет.
TRUE при удаче, FALSE если нет
Этот метод позволяет изменять свойства данного элемента. Обычно она вызывается со страницы “просмотра корзины” если пользователь вносит изменения в количестве до подтверждения. Этот массив должен содержать идентификатор rowid для каждого элемента.
TRUE при удаче, FALSE если нет
Позволяет удалить товар из корзины, передав ей $rowid .
total()
Возвращает:
Общая сумма
Возвращаемый тип:
число
Отображение общего числа в корзине.
total_items()
Возвращает:
Общая сумма товаров в корзине
Возвращаемый тип:
число
Отображается общее количество товаров в корзине.
Массив содержимого корзины
Возвращает массив, содержащий всё в корзине. Вы можете сортировать порядок по которому будет возвращен массив, передавая его TRUE где содержимое будет отсортировано от новых к старым, в противном случае сортируется от старых к новым.
Массив данных элемента
Возвращает массив, содержащий данные для элемента, соответствующие заданным ID строки или FALSE если такого элемента не существует.
TRUE если существует, FALSE если нет
Возвращает TRUE (булево) если конкретная строка в корзине является нужной. Этот метод разработан для использования в цикле с contents() , поскольку вы должны передать rowid в этот метод как показано в примере отображения корзины.
Массив опций продукта
Возвращает массив опций конкретного продукта. Этот метод разработан для использования в цикле с contents() , поскольку вы должны передать rowid в этот метод как показано в примере отображения корзины.
destroy()
Возвращаемый тип:
Смешанный
Позволяет уничтожить корзину. Этот способ скорее всего можно вызвать, когда вы закончите обработку заказов клиента.
© Copyright 2014 — 2023, British Columbia Institute of Technology. Последнее обновление 22 Апреля 2018.
Игорь Букша
Автор переводов с Английского на Русский язык
Поддержать развитие проекта можно тут Закрыть
CodeIgniter 3 на русском, CodeIgniter 3 русская документация, CodeIgniter3 на русском, CodeIgniter3 русская документация, CodeIgniter 3, CodeIgniter3 , на русском, русская документация, библиотеки, класс корзины, корзина
Класс корзины в CodeIgniter 3
//вывод списка товаров
if(! $_GET || $_POST ) <
echo ‘
Товары
‘ ;
foreach( $products as $k => $v ) echo ‘
‘ . $v [ ‘name’ ] . ‘
‘ . $v [ ‘price’ ] . ‘ руб.
. ( $bsk && array_key_exists ( $k , $bsk ) ? ‘edt’ : ‘add’ ) . ‘=’ . $k . ‘»>’
. ( $bsk && array_key_exists ( $k , $bsk ) ? ‘В корзине ‘ . $bsk [ $k ][ ‘count’ ] : ‘Добавить в корзину’ ) . ‘
‘ ;
>
?>