создание корзины для интернет магазина php

Как написать корзину для интернет-магазина на php? [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.

Как написать корзину на php? Желательно код с комментариями, или ссылку на сайт, где это все подробно описывается. Весь интернет обшарил, но нигде не нашёл.

2 ответа 2

Предлагаю такой вариант-вполне работоспособный и реализуем новичком: Используйте ajax для добавления товара в корзину. Все товары сохраняйте в текущей сессии, не думаю что там будут мегабайты из огромных списков с продукцией, поэтому базу пока отметаем или будем использовать в самом конце при покупке. ajax: Надо науйчить его отправлять только идентификатор товара (если такой имеется) и предусмотреть обновление циферки (это уже js) возле иконки на корзине. php: не забывать вытаскивать из сессии кол-во товаров и отображать возле корзинки. Также увеличивать список. Создать страничку корзины и заказа товара (конечная форма заявки). Написать код на php для записи товара в базу, где товаровед увидит заказ. Попробую что-то вменяемое прямо тут написать (без тестов, но суть думаю станет ясна): ajax:

Дальше теория: На странице оформления заказа выводите список товаров (надеюсь понятно откуда брать идентификаторы товаров), затем выводите поля для формы. Теперь что с базой делать или нет и какие плюсы и минусы: Если делать в базу то необходимо по крайне мере пару таблиц (одна для реквизитов заказывающего товар, а другая-это ассоциация с вашими товарами и текущих параметров заказчика). Данный подход вынудит делать в админке окно с просмотром заказов. Как сделать по другому:-без базы данных. Все что назаказывали и все что ввел про себя покупатель отсылать на почту.

Источник

Создайте корзину покупок с помощью PHP и MySQL

В этом уроке «Скринкаст +» на этой неделе мы научим вас, как создать собственную корзину для покупок с помощью PHP и MySQL. Как вы обнаружите, это не так сложно, как вы могли подумать.

Премиум Варианты

1. LivelyCart — JQuery PHP Store / Магазин

2. Универсальный цифровой магазин

Universal Digital Shop — это мощный скрипт, который позволяет продавать цифровые продукты прямо на вашем сайте. Он обрабатывает платежи через несколько платежных шлюзов (PayPal, Payza / AlertPay, Skrill / Moneybookers, Authorize.Net, InterKassa, EgoPay, Perfect Money, BitPay, Blockchain.info и Stripe) и может быть легко интегрирован в любую веб-страницу.

С этим виджетом вам не нужно устанавливать сложные корзины покупок и создавать их дизайн в соответствии с вашим сайтом. Universal Digital Shop — это самый простой способ распространения цифровых продуктов и монетизации сайта.

3. Терминал оплаты Stripe

Этот скрипт позволяет вам иметь быстрый и простой терминал для оплаты кредитной картой для ваших клиентов, обрабатываемый stripe.com.

Установка и настройка скрипта занимает не более 5 минут (однако вам необходимо иметь SSL и учетную запись stripe.com).

4. Корзина AJAX для сайтов HTML с заказами и счетами

Symbiotic — AJAX Cart — это мощная система, которая может быть интегрирована в новые / старые HTML-сайты для расширения их функциональности в качестве корзины. Вам не нужно использовать OpenCart или любую другую корзину для вашего сайта электронной коммерции. Вы можете создать свой собственный сайт электронной коммерции за несколько минут, используя эту систему корзины.

5. Наймите эксперта в Envato Studio

Используете ли вы конкретную CMS, такую ​​как WordPress или Magento, или просто хотите создать сайт электронной коммерции с корзиной для покупок, созданной с нуля, в Envato Studio есть множество опытных разработчиков, которые помогут вам по разумной цене. Так что, если вы застряли, отправляйтесь туда за помощью, которая вам нужна.

Это лишь небольшая подборка корзин для покупок на PHP, доступных на Envato Market. Если эти варианты не решают вашу проблему или вы предпочитаете делать это самостоятельно, давайте перейдем к процессу создания вашей собственной корзины покупок с помощью PHP и MySQL.

Предварительный просмотр экрана

Шаг 1

Давайте начнем с рассмотрения структуры папок:

Источник

Как сделать корзину на сайте

В этом еженедельном уроке screencast + мы научимся создавать собственную корзину покупок с PHP и MySQL. Вы увидите, что всё не так сложно, как кажется.

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Идея приложения и схема работы

Итак, интернет-магазин на фронте. Что мы хотим от него? Хотим, чтобы была возможность как минимум вывести каталог товаров, реализовать добавление их в корзину, просматривать оную корзину, менять количество товаров в ней и удалять ошибочно добавленные с пересчетом стоимости заказа. Плюс добавим хранение данных в localStorage, дабы после перезагрузки страницы наша корзина не ушла в небытие.

Маленькая корзина для интернет магазина

Под термином маленькая корзина, я понимаю тот интерфейс представления отложенных для покупки товаров, который, как правило, размещается в шапке сайта.

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

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

Существует несколько способов решения данной задачи:

В большинстве случаев второй вариант подходит лучше первого, поэтому мы его и разработаем. Т.е. в итоге у нас корзина должна работать в связке session + cookies

Приступим, отрываем header.php и вставляем в верстку вывод нашей корзины:

Можете посмотреть на то, как изменился внешний вид сайта. Теперь давайте углубимся в структуру системы и начнем создавать нужные файлы.

Так как компонент маленькая корзина для интернет магазина не является отдельной страницей, то контроллера для нее мы создавать не будем, внешнее представление у нас уже есть в общем шаблоне, поэтому и отдельного views она тоже иметь не будет, а вот model все-таки придется сделать.

В папке applicationmodels создадим файл cart.php с таким содержанием:

Данная модель будет обновлять информацию о содержимом корзины. Пока нам достаточно иметь только функцию добавления товаров, но на будущее создадим интерфейсы для функций удаления товаров и отчистки корзины.

Все данные о продуктах из корзины, у нас будут храниться в массиве $_SESSION в виде ассоциативного массива, ключами которого будут ID продуктов, а значением – количество этих продуктов в корзине. Такой минимализм сыграет нам на руку при передаче этой информации в куки.

Теперь у нас есть модель Application_Models_Cart, и логично предположить, что она должна, откуда-то вызываться. Вызываться модель будет из контролера каталога. Почему каталога? Потому, что ссылки ‘В корзину‘ у нас расположены на странице каталога, завязанной на файлах view-controler-model относящихся к компоненту catalog. А еще и потому, что пока переходить на страницу большой корзины мы не будем. При нажатии на данные ссылки, мы должны оставаться на странице каталога, а информация в маленькой корзине должна изменяться.

В результате получим ссылку вида

При клике пользователя на данную ссылку, mvc-система передаст управление в application /controllers/catalog.php. Куда мы сейчас вставим нужный код обработчика данного события:

Так как мы пока не знаем что такое AJAX и без перезагрузки страницы никак не сможем обойтись, мы просто возвращаемся на страницу каталога, для того чтобы увидеть изменения в корзине. (Об основах AJAX можно прочесть тут.)

На этом можно было бы остановиться, если бы не стояла задача сохранения информации при возвращении пользователя после закрытия браузера. Самое время вернуться к пропущенной строчке:

Стоит предупредить, что далее людям, мало разбирающимся в ООП, будет сложно понять код построчно, но в рамках общего смысла не будет ничего сложного. Что же происходит в этой строке:

Так вот, теперь вы наверняка понимаете, откуда берется данный массив $smal_cart и можете заметить, что логическая цепочка обмена информации замкнулась.

Стоит заметить, что при отключенных куках, данный механизм функционировать не будет, ровно также как и любой механизм, использующий сессии, так как идентификатор сессии для ее корректной работы хранится и передается все теми же кукмами.

Всем тем, кому требуются более тщательные объяснения, советую писать вопросы в комментариях, либо мне на e-mail.

Частые ошибки

Теперь, когда мы понимаем, что должно быть на странице корзины, обсудим основные проблемы, с которыми сталкиваются пользователи.

Нельзя перейти на страницу корзины. Отображение списка товаров в виде выпадающего меню или во всплывающем окне неудобно. Обязательно создаем отдельную страницу.

Сложно найти ссылку на корзину. Расположение кнопки в непривычном месте, например, под боковым меню явно доставит проблем пользователям при ее поиске. Как уже говорилось выше, лучше всего добавить ссылку на корзину в шапке сайта.

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

Заметное всплывающее окно после добавления товара в корзину:

Изменение названия не сразу заметно, как и сама кнопка:

Нельзя сделать заказ без регистрации. Всегда должна быть возможность сделать «быстрый заказ», а зарегистрировать пользователя можно позже.

Нет информации о наличии товара. Если на вашем сайте часть товаров доступна только под заказ, пользователя стоит предупредить об этом как в карточке товара, так и на странице корзины.

Пример отображения статусов в корзине:

Не отображаются этапы заказа. Если вы разделили процесс заказа по шагам, то укажите и в виде меню, чтобы сориентировать пользователя. Процесс заказа должен быть прозрачным:

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

Например, ввод адреса можно заменить одним полем с картой:

После отправки данных формы ничего не происходит. Покажите сообщение в виде всплывающего окна, а лучше на отдельной странице. В сообщении следует указать, что заказ оформлен и что пользователю делать дальше: ждать звонка/письма, перейти в личный кабинет чтобы проверить статус заказа, ожидать sms-сообщения из пункта выдачи и т.д.

Пример сообщения после отправки данных формы заказа:

Шаг 1

Начнём со структуры папок:

Структура

Дополнительные советы по корзине

И предлагаем еще немного улучшить процесс заказа, проработав следующие пункты.

Автоматическое обновление цены. Не нужно заставлять пользователя дополнительно нажимать кнопки «Обновить» после изменения количества товаров.

Добавление товара в избранное. Если у вас есть такой раздел, то стоит напомнить о нем на странице корзины. На случай, если пользователь пока думает над покупкой.

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

Пример изменения размера и цвета выбранной блузки:

Добавляйте возможность вернуть удаленный товар. Быть может, пользователь удалил его случайно.

Добавляйте информацию об акциях для выбранных товаров, особенно, если эти акции мотивируют добавить больше товаров.

Пример размещения информации об акции:

На странице корзины можно допродать сопутствующие или похожие товары. Например, предложите напитки и салаты к заказу пиццы:

Вот основные советы, которые помогут сделать корзину для сайта понятнее и удобнее. После внесения изменений обязательно вставайте на место клиента и пробуйте сделать заказ. Это поможет заметить очевидные недочеты и наверняка сократит количество отказов от покупки.

Если нашли на своем сайте ошибки в оформлении корзины и не знаете, как их исправить – оставьте заявку тут (сначала оценим сложность работ и только потом выставим счет).

Если хотите, чтобы мы проверили верно ли настроены цели метрики и какие ошибки мешают посетителям именно вашего сайта покупать больше – закажите экспресс-аудит корзины.

Шаг 2

Как вы видите, наша страница имеет две колонки: основной столбец и sidebar. Теперь пройдём в CSS. Откройте файл style.css и пропишите код:

Вот как теперь выглядит наша страница продуктов:

Создаем разметку

В конце страницы, перед закрывающим тегом body, подключим скрипты в таком порядке: Разметка для index.html

Из интересного: мы указываем в data-page тега body название страницы и элемент с который будет содержать количество добавленных в корзину товаров. Список товаров каталога будет выводиться в списке При загрузке страницы в список поместим нашу гифку loading, чтобы пользователи не скучали, ожидая загрузки каталога.

Шаг 3

Прежде чем перейти к части PHP/MySQL, нам нужно создать базу данных. Откройте phpMyadmin и выполните следующие действия:

Для экономии времени я экспортировал свою таблицу, чтобы вы просто запустили следующий запрос:

На заметку: соглашения по html и css-коду

В верстке я всегда стараюсь не забывать несколько моментов и рекомендую их Вам.
Первое: верстаем всегда на классах и только на классах. Никаких айдишников в css. id нужны для яваскрипт-кода — для быстрого получения доступа к элементу DOM.
И второе: если в js-коде нам нужно обращаться к множеству элементов (много кнопок добавления в корзину), то навешиваем элементам классы с префиксом «js-«. И не используем эти «js-ы» в css-коде. Сначала эти соглашения кажутся излишними, но понимание плюсов быстро проходит с ростом проекта. Лучше сразу привыкать к подобному стилю, тем более, что его используют достаточно много разработчиков.

Шаг 4

До извлечения данных из базы данных я сделаю index.php шаблон для списка продуктов и корзины. Поэтому добавьте следующий код в начало страницы index.php:

Для этого нам нужно включить файл; добавьте эту строку в index.php между div с id «main»:

Теперь у нас полный index.php:

Давайте создадим соединение с MySQL. Откройте connections.php и пропишите следующее:

Готовим данные и разметку для каталога

Для начала создадим файл для хранения наших товаров: data/goods.json

Как видим, это обычный json-массив с четырьмя нужными нам полями. Теперь переходим к созданию каталога. Но прежде чем приступить к написанию js-кода, нам придется написать еще немного разметки для отображения отдельного товара. Мы будем использовать шаблоны html-кода библиотеки underscore для динамической генерации отдельных товаров. Если Вы не знакомы с шаблонами underscore, то у меня есть статья на эту тему. Я же не буду зацикливаться на этом, а просто приведу код шаблона, тем более, что он достаточно тривиален и не требует долгих разбирательств: Что происходит в этом коде? underscore-шаблон представляет собой обычную строку, в которую подставляются нужные данные. Это неплохой способ отделить логику и данные от представления. Вся идея шаблонов в том, что мы не знаем, каким образом получены данные, но мы знаем, как их нужно отобразить. В нашем примере мы даем на вход массив товаров goods (из файла goods.json), перебираем все товары в цикле с помощью функции each библиотеки underscore и для каждого товара выводим свою разметку, подставляя в нужные места id товара, название, картинку и цену. Обратите внимание на дата-атрибуты у кнопки «Добавить в корзину», они будут использованы в дальнейшем. Приведенный код мы поместим в тело body файла index.html. Дальше мы увидим, как связать данные и наш underscore-шаблон.

UPDATE: написал статью на тему undescrore/lodash шаблонов

Шаг 5

Пропишем разметку для страницы продуктов. Откройте её и введите следующее:

Давайте посмотрим на страницу:

Как видите, это довольно уродливо. Давайте добавим этот CSS.

Выглядит намного лучше, не так ли? Внизу указан полный код style.css:

Пишем js-модуль каталога

Код файла catalog.js будет очень коротким

Здесь с помощью замыкания мы объявляем переменную-модуль catalog, пишем функцию init, которая вызывает самую интересную нам функцию _render и экспортируем init наружу, разрешая при этом вызывать catalog.init() из других модулей приложения. На самом деле можно обойтись и без лишней init-функции, но лучше всегда объявлять публичную функцию инициализации во всех модулях для единообразия. При этом функция _render начинается со знака _, чем мы показываем, что эта функция частная и не должна выходить за пределы модуля. Применяя такой подход, мы уже в коде модуля видим, что используется в других модулях, а что предназначено только для внутреннего пользования. Этакая инкапсуляция кода, как в ООП.

Шаг 6

Прежде чем извлечь продукт из базы данных, давайте удалим последние две строки из нашей таблицы (были нужны только для того, чтобы увидеть, как она будет выглядеть). Удалить это:

Отлично! Теперь в том месте, где были строки таблицы, введите следующий код PHP:

Если вы укажете одну из ссылок для добавления в корзину, увидите в нижней части страницы, что id передан.

Модуль корзины

Наконец мы приступаем к самой интересной части нашего проекта — к корзине. Наш модуль будет разбит на 3 логические части:

Вот так будет выглядеть заготовка модуля:

Разберем нашу заготовку. Имеются 2 глобальных переменных для всего модуля: данные корзины и набор параметров. Этот набор содержит настройки модуля, такие как названия классов и дата-атрибутов, id элементов количества товаров и общей суммы заказа, классы для кнопок добавить, удалить, изменить количество и прочие. Подробнее рассмотрим ниже. Основная функция — инициализация модуля. Вне модуля будет вызываться только она, остальное скрыто в реализации корзины. Инициализируется модуль в таком порядке: назначаются опции модуля, получаем данные для корзины из localStorage, рендерим саму корзину, количество товаров и общую сумму заказа и напоследок привязываем обработчики к событиям DOM. Примечание: если Вы раньше не использовали такой подход, отделение данных от разметки, то удивитесь, насколько интереснее писать отдельно код обработки данных и после проще навешивать события на кнопочки. Дальше мы это продемонстрируем.

Вероятно, Вы обратили внимание, что я экспортирую наружу не только init, но и все функции, касающиеся обработки данных. Сделано это для того, чтобы облегчить тестирование кода. Каким образом проходят тесты? Есть 2 способа: ручной и unit-тесты. При тестировании руками мы в консоли браузера вызываем функции модуля и сразу же видим результат. Например, вызвав cart.add(), мы в консоли же можем сразу увидеть изменения и убедиться, что данные действительно добавлены (или что-то пошло не так). Мы отделили логику работы с данными от остальных функций и увидели, что так тестировать гораздо веселее, чем тыкать по кнопочкам и проверять содержимое localStorage после каждого клика. Второй способ будет напрашиваться сам собой, когда нам надоест набивать команды в консоли и мы наконец разберемся с unit-тестированием кода. Об этом я напишу в одной из ближайших статей.

UPDATED: Для интересующихся unit-тестированием опубликована статья unit-тесты на фронте или изучаем jasmine.js. В ней рассказывается, как тестировать код на примере нашей корзины с помощью популярной библиотеки jasmine.js.

Шаг 7

Давайте сделаем anchor работу, добавив следующий код в начало нашей страницы:

Проверим, установлена ли эта переменная сообщения и вызовите её на страницу (введите этот код под заголовком страницы H1):

Вот полная страница products.php.

Вот сообщение об ошибке, если id недействителен

Пишем функции обработки данных

Всего мы напишем 11 функций:

Код всех функций достаточно простой, в несколько строк, поэтому привожу сразу все функции. При обработке используются методы underscore. Если Вы еще не знакомы с этой библиотекой, настоятельно рекомендую ее изучить. Не зря ее называют «швейцарским ножом для javascript-разработчика». Беглое изучение официальной документации (есть на русском языке) займет немного времени, а пользу принесет заметную.

Шаг 8

Вернёмся к index.php и пропишем sidebar. Добавьте следующий код:

Посмотрите на картинку снизу:

Полный код работы с данными

Он похож на код из index.php и products.php, поэтому я не буду объяснять всё снова. Вы заметили, что количество теперь отображается не в форме, а в поле ввода (чтобы мы могли изменять количество). Кроме того, таблица заключена в form tag. Чтобы получить общую стоимость элементов, мы умножаем количество конкретного продукта (из сеанса) id на его цену. Это повторяется в каждом цикле.

Инициализация настроек. Настройки по умолчанию

Прежде чем писать функции рендеринга и обработчиков событий, вернемся чуть назад и рассмотрим инициализацию настроек модуля. Функция _initOptions скопирует в переменную opts все настройки, переданные в модуль корзины при его создании.

Сначала мы объявляем настройки по умолчанию, а затем «склеиваем» их с данными, пришедшими извне. Для небольшого приложения, как у нас, реализовывать возможность настройки модуля было не обязательно. Но это небольшое увеличение кода дает нам большую гибкость при переносе этого модуля в другой проект.

Шаг 10

Наконец, нам нужно заставить форму работать. Поэтому добавьте этот код в начало страницы cart.php.

Вот заполненный cart.php

Надеюсь, урок вам понравился. Если появятся вопросы, посмотрите более подробный видеоурок!

Рендер корзины и html-шаблон

Здесь все знакомо по аналогичному фунционалу в каталоге. В дата-атрибуты помещаем id товаров, чтобы было понятно, с какими именно мы сейчас работаем. Атрибут data-delta показывает, увеличивать или уменьшать количество товара при клике на эту кнопку.

Функции рендеринга

Обработчики событий

Приближаемся к завершению.

Напишем вспомогательную функцию получения элемента корзины по его id. Она пригодится нам при изменении количества и удалении товаров

Всего у нас будет 4 обработчика-клика: добавление в корзину, изменение количества, удаление и оформление заказа. Смотрим:

Собираем модуль корзины в одно целое

Основной код уже написан, нам осталось только написать функцию инициализации корзины и привязки обработчиков событий. Пойдем от обратного, обработчики:

Думаю, здесь без особых пояснений, собираем в кучу написанные ранее функции. Иницилизация:

Почему мы ввели отдельные настройки renderCartOnInit и opts.renderMenuCartOnInit? Просто потому, что на странице каталога нам нужно инициализировать корзину (мы выводим количество добавленных товаров в меню), но не нужно ее рендерить. Чтобы не усложнять логику лишними проверками, мы разделили эти опции.

Полный код корзины

Главный модуль приложения

Идея такова: объявляем главный модуль, настройки приложения (в нашем случае дублируют опции по умолчанию), определяем текущую страницу и настройки модуля cart для текущей страницы и, наконец, инициализируем нужные модули. Приводит все это добро в действие волшебная строчка jQuery(document).ready(app.init);

Подводим итоги

Итак, мы написали небольшое приложение простого интернет-магазина с каталогом и корзиной.

UPDATED: В связи с большой популярностью этой статьи и интересу к теме интернет-магазинов в целом запилена и опубликована статья-продолжение Реализация оформления заказа в интернет-магазине на клиенте и сервере. В ней рассмотрен полный цикл по сбору данных о клиенте, размещении формы заказа, отправки ajax-запроса на сервер, создание таблиц в базе данных и добавление этих самых данных, а также отправка писем с заказом. Как обычно, все с примерами. Исходники обновлены. Отправка заказа интегрирована с каталогом и корзиной, рассмотренными в этой статье. Это выглядит как цельное приложение, готовое к работе.
Еще одно обновление: готова статья про добавление способа доставки в интернет-магазин. Читайте здесь

UPDATED 2: Для тех, кому интересно, как сделать дерево с вложенными категориями для своего интернет-магазина, опубликована статья Строим дерево категорий на js, php и mysql. Там описывается интересная библиотека jstree и как достаточно просто сообразить каталог и на клиенте, и на сервере.

UPDATED 3: Для продолжающих интересоваться интернет-магазинами, начинается серия уроков на тему фильтров и сортировок в каталоге товаров. Точка входа здесь.

UPDATED 4: Еще новости по развитию магазина.
Новая статья Сравнение товаров в интернет-магазине.

Еще раз нужные ссылки:

Хотя главной целью была демонстрация модульного подхода при разработке на javascript и отделении логики от представления, все же модуль корзины получился вполне себе самодостаточным и независимым. При желании мы можем включать его в другие проекты. У нас есть только 2 зависимости модуля: jquery и underscore. Хотя полагаю, что люди, знакомые с обеими библиотеками, добавляют их практически в любой свой проект.

Многие моменты в нашем приложении достаточно спорны. Нет жесткого разделения логики и представления, эти функции объединены в один модуль. Также шаблоны underscore вшиты прямо в код страницы, что тоже не самая хорошая практика, нужно выносить их в отдельные файлы. Я намеренно не стал слишком усложнять структуру. В статье я рассмотрел пример создания кода с одной стороны достаточно модульного, чтобы его можно было удобно протестировать, поддерживать в дальнейшем или извлечь какие-то идеи для своих будущих приложений, но с другой стороны не настолько сложного, чтобы в нем нужно было слишком долго разбираться. В конце концов для серьезной javascript-разработки создаются библиотеки и фреймворки, и рано или поздно мы все приходим к пониманию, что их нужно знать и изучать. Backbone, Angular, Ember, React, существует их очень много и постоянно появляются новые. И чем больше мы будем изучать и узнавать различные подходы, тем шире будет наш кругозор и больше возможностей выбора.

Источник