Как с помощью CSS и JavaScript создать пользовательский интерфейс корзины интернет-магазина


Оглавление (нажмите, чтобы открыть):

Скрипт корзины интернет магазина

Ввести еще один элемент в каждой строке интерфейса, в который вводится количество товара. Вычисление стоимости покупки производится с учетом количества каждого товара

10.11.2020, 00:22

Парсер интернет-магазина
Вопрос не столько по самому javascript, сколько по работе с браузером и кодом страницы. Мне как-то.

Сравнение товаров интернет-магазина
Друзья, прошу помощи. Делаю интернет магазин, новичок в PHP и JS. Нужно реализовать сравнение.

Повторяющиеся таблицы (стиль интернет магазина)
Необходимо сделать поле с табличками такого типа: Так сказать подобие оформления интернет.

Корзина для интернет-магазина на JS
Добрый день. Для того, чтобы сделать простейшую корзину для интернет-магазина, я скачал её скрипт.

Автоматизация обработки заказов интернет магазина
Всем привет! Вопрос в следующем, есть интернет магазин на битриксе, есть куча поставщиков. При.

Интернет-магазин. AJAX корзина товаров. Часть 2: JavaScript функции.

Это вторая статья из серии AJAX корзина товаров. В первой я описал PHP функции для работы корзины. В этой мы продолжим написание корзины товаров с использованием технологии AJAX. Для полноценного функционирования корзины нам понадобится подключить библиотеку jQeury, которую можно скачать здесь.
Итак, для клиентской части корзины понадобятся JavaScript функции, аналогичные PHP функциям (не забудьте, что это функции JavaScript а не PHP, как их разместить на странице я расскажу позже):

//здесь, как и в PHP, значение количества по умолчанию 1
//пишем запрос к файлу backend, его я опишу позже.
$.post( «backend/add_to_cart.php», , update_cart());
>

Короткая, но очень непонятная функция, правда? Опишу по порядку. Я надеюсь, что вы хоть немного знакомы с jQuery. Итак, строка $.post() производит запрос методом POST к файлу backend/add_to_cart.php, передает ему параметр product_id со значениям product_id. По окончании AJAX запроса, происходит вызов функции update_cart(), которая будет описана ниже. Теперь переходим к самому файлу add_to_cart.php. Сейчас уже стоит сказать и о структуре файлов, а то вы можете запутаться, если этого еще не произошло. Я приведу картинку, так будет гораздо проще:

Все файлы располагаются в директории cart, которая в свою очередь находится в DOCUMENT_ROOT сайта. По порядку:

Корзина для HTML сайта

Многие скептически считают, что раз сайт на чистом HTML, то и корзину товарова на него не установить. Такое предположение скорее всего рождается исходя из того, что раз сайт на HTML — значит у него нет ни движка (CMS), ни возможности исполнять пользовательские скрипты. Но так могут говорить лишь те, кто узко смотрит на возможности решения поставленной задачи и привык реализовывать задачи исключительно по учебнику.

На самом же деле не всё так критично и при малейшем желании можно найти десяток способов организации корзины на HTML-сайте. Одним из примеров такого решения может являться наш сервис. Он легко встраивается в существующий HTML-код сайта и обеспечивает полноценный функционал интернет-магазина. Для реализации функций, которым действительно нужен сервер с возможностью исполнения программного кода — используются сервера личного кабинета. Там же располагаются и все настройки (кому отправлять заказ, какой номер заказа присвоить, какие средства для онлайн-оплаты предоставлять покупателю и т.д.)

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

Что о сервисе говорят клиенты

Очень простая в использовании корзина — ввел название, поставил цену, скопировал код и вуа-ля. Лучшее решение, которое я нашла для своего интернет-магазина.

Процесс заказа, с точки зрения покупателя, предельно прост. Добавил товары в корзину, заполнил несколько полей, нажал кнопку «Заказать». Все!

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

EasyNetShop – отличный сервис для организации магазина на сайте. Пользуюсь 6 месяцев, все устраивает.

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


Замечательный сервис! Всё просто, удобно и, что очень важно, Mobile Friendly. Техподдержка выше всяких похвал. Успехов и процветания!

Хороший, не перегруженный излишними настройками сервис. Простая интеграция с сайтом. Сразу чувствуется, что люди ДУМАЛИ, когда создавали это продукт!

Супер сервис! Бесплатно получаешь практически все, а за небольшую плату -абсолютно полный функционал! Рекомендую всем своим знакомым!

Easynetshop.ru — для тех, кто хочет иметь полноценный сервис, без проблем и высоких тарифов. Здесь всё так, как это должно быть лучшим образом. Всем рекомендую.

Благодарю, такой сервис я вижу впервые, где на все вопросы есть четкие ответы с очень высокой вероятностью положительного решения, поставленной задачи!

Создание сайта с корзиной на HTML

Всё вышеперечисленное касалось ситуации, когда уже существует сайт на HTML и нужно на него установить корзину товаров. А если сайта еще нет? Конечно, самым верным (и дорогим) вариантом было бы разработать готовый сайт сразу на движке, в состав которого входят модули электронной коммерции. Однако, это не всегда оптимальных подход — рассмотрим несколько вариантов:

Нам нужен лендинг. По-сути это одностраничный сайт, состоящий исключительно из сверстанного в формате HTML макета. Нужен ли такому сайту движок, который обеспечивал бы формирование контента и управление им — больше чем в половине случаев нет, не нужен. Это неэффективное вложение средств и времени. Гораздо проще использовать как раз методы реализации корзины через готовые виджеты.

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

В итоге: установить корзину на HTML-сайт возможно. Да, она будет сделана не так, как это обычно делается, но от этого её функции не потеряются. В некоторых случаях изначальный выбор в пользу HTML-сайта + готовая корзина товаров имеет более оптимальный вариант. Такое решение не является худшим — это просто альтернатива, сейчас многие сервисы работают по аналогичному принципу с самого начала и это является нормой, например, консультанты на сайтах, сервисы по предложению обратного звонка, сборщики почты для рассылок и т.д. Все они не реализуются средствами движка и не выполняются на серверах, а точно также встраиваются на сайты как виджеты, в том числе и на чисто HTMLные.

​Делаем корзину покупок с помощью Codeigniter и JQuery. Часть 6.

В шестой части статьи, как и обещал, сделаем нашу корзину аяксовой, а так же стилизуем её с помощью CSS.

Статья обещает быть длинной, поэтому запаситесь терпением, нам надо много изучить и сделать.

Т.к. изучение CSS не входит в планы этих уроков, то я просто приведу уже готовый код без пояснений. В первых уроках мы создавали файл assets/css/styles.css, который был пустым. В этом файле и будет храниться весь CSS код сайта:

Мастер Йода рекомендует:  5 сайтов для оттачивания навыков написания SQL-запросов

assets/css/styles.css

AJAX корзина

Вот мы и добрались до самого интересного — написание клиентского js кода функиционала ajax корзины. В основном шаблоне уже из первых уроков подключена библиотека jQuery и скрипт cart.js, в котором мы будеим писать весь js код.

application/views/template.php

Открывайте файл cart.js и напишите следующее:

assets/js/cart.js

Это анонимная функция, которая сразу же вызывается, чтобы исключить конфликты с другими скриптами js (хоть у нас их и нет, но нужно привыкать к хорошему).

Нам нужно сделать формы (добавления в корзину, удаления товара из корзины и остальные) аяксовыми. Поэтому при клике на кнопку, мы будет посылать AJAX запрос на сервер, и в зависимости от результата, который возвратил сервер, выполнять какие то действия (например выводить сообщение пользователю).

Давайте добавим эту возможность кнопкам «купить»:


assets/js/cart.js

Итак, разберём что тут получилось. Для начала с помощью js необходимо изменить событие отправки формы на своё. Для этого в

мы «слушаем» все события submit на элементе form внутри блока .products-list , т.е. отправку формы добавления в корзину товара. Чтобы запретить обычную отправку формы мы используем функцию

Далее необходимо отправить POST запрос к серверу. Для этого надо подготовить данные, которые будет отправлять. В jQuery есть функция serialize() , котороя преобзазует данные формы в строку (см. официальную документацию).

После того, как ответ от сервера получен, мы подготавливаем HTML код сообщения, которое будем выводить пользователю, показываем его и скрываем через 2 секунды. В коде выше всё подробно прокоментировано. Если есть какие-то опросы — пишите в комментариях.

Вот что у нас получилось:

Т.к. вывод сообщений пользователю с помощью javascript нам ещё понадобиться, то предлагаю сделать функцию setMessage() , чтобы не плодить код. Добавьте её в самое начало cart.js:

assets/js/cart.js

И изменим код добавления в корзину:

assets/js/cart.js

Советы

Совет 1

Хорошей практикой является именно добавление прослушки события для родительского элемента. Ведь Можно было написать и так:

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

Без прослушки событий не обойтись, если контент динамически меняется на странице (как у нас корзина. В неё постоянно добавляеются строки, удаляеются, очищаются).

Совет 2

Если Вы пользуетесь браузером Chrome (а я надеюсь вы делаете это), то наверно уже знаете про средства разработчика, вызываемые по нажитию клавиши F12. Если нет, то давайте попробуем на нашей корзине проследить за AJAX запросом, который посылает наше приложение серверу. Откройте средства разработчика и перейдите на вкладку Network (если там не пусто, то очистите список):

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

Если открыть вкладку Headers, то можно увидеть данные, которые мы передаём серверу, тип ответа и ещё много информации, которая позволит находить ошибки.

Но ведь добавленный товар не появляется в корзине!

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

Реализовывать это будем самым простым способом:


При добавлении товара в корзину, в случае успеха, сервер возвращает весь HTML код корзины (с уже добавленной в неё строкой нового товара), а мы с помощью js просто обновим её.

Этот способ простой, но не лишён недостатков. Один из них — нужно получать весь HTML корзины, а не только ту часть, которую нужно обновить. Т.е. мы будет «гонять» больше трафика. Но думаю это не такая большая проблема. Во-первых скорость интернета позволяет, во-вторых корзина не такой большой элемент на странице, чтобы мы почувствовали какие-то тормоза в работе интерфейса. В-третьих — вы посмотрите исходный код opencart, и код в этой стетье покажется вам идеальным.

Итак, поправим немного код в методе add_to_cart() контроллера cart. Я не буду приводить полный код метода, только небольшой кусок:

application/controllers/cart.php

После добавления товара в корзину методом $this->cart->insert() , получаем в массив $user_cart данные корзины пользователя. Далее передаём этом пассив в шаблон. В итоге, весь HTML код корзины будет храниться в переменной $cart_html . Впринципе, мы повторили обычные получение и вывод корзины, которые использователи в методе index() контроллера cart.

Поле этого в массив $result добавляем новый элемент cart_html , в котором будет весь HTML код корзины, и который мы возвратим вместе с сообщением о результате.

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

Далее, по плану — обновление корзины на странице. Вот изменённый js код добавления товара в корзину и её обновления:

jQuery методом replaceWith() (ссылка на документацию) мы заменяем блок .cart на новый, который возвратил сервер. И так же выводим сообщение пользователю.

Очищаем корзину

В прошлом уроке мы не доделали до конца функционал корзины, а в частности её очистку. Кнопка очистки корзины это обычная форма с кнопкой, которая отсылает POST запрос на адрес /cart/cart_empty. Давайте создадим в контроллере cart метод cart_empty()

Здесь многое уже знакомо. С помощью стандартного метода

мы очищаем корзину пользователя и выводим ему сообщение.

Добавим немного javascript’a, чтобы сделать очистку корзины без перезагрузки страницы.

Что нужно сделать:

  • По нажатию на кнопку «Очистить корзину» отослать AJAX запрос на сервер
  • После получения ответа удалить таблицу с корзиной из DOM
  • Вывести сообщение пользвателю.

Приступим к реализации:

По событии submit формы очистки корзины, посылаем AJAX запрос на сервер (на URL, который указан в атрибуте action формы), затем, если сервер вернул статус success, удаляем таблицу с корзиной, выводим надпись «В корзине нет товаров», и выводим сообщение пользователю с помощью нашей функции setMessage() .

Почему я повесил прослушку события аж на блок .content , а не на, например, .cart . Потому что при очистке, добавлении товара и его удаления, мы полностью заменяем блок .cart , и событие с него «слетает». Поэтому самый ближайший родительский неизменяемый динамически элемент к корзине это блок .content .

AJAX удаление товара из корзины

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

  • Вешаем прослушку события отправки формы с кнопкой удаления из корзины
  • Отправляем POST запрос на сервер для удаления товара из корзины
  • Сервер возвращает результат, и, в случае успеха, обновлённый HTML корзины
  • С помощью js мы обновляем корзину и выводим сообщение пользователю, что товар удалён из корзины


Открываем файл cart.js и пишем новый обраточик:

assets/js/cart.js

Код очень похож на добавление товара в корзину. Мы так же собираем данные формы с помощью метода $form.serialize() , отсылает данные на URL, который указан в атрибуте action формы. Далее, если сервер возвратис статус success, обновляем корзину и выводит сообщение пользователю.

Мастер Йода рекомендует:  Как не допустить утечки данных в процессе тестирования программ

Теперь доработает код метода удаления товара из корзины delete_item() . Догадываетесь что нужно сделать? Получить данные корзины пользователя, пропустить их через шаблон и возвратить в ответе.

Код для получения HTML корзины точно такой же, как и при обновлении или добавлении товара в корзину:

Листинг метода delete_item() :

application/controllers/cart.php

Теперь посмотрим что получилось:

На этом основной этам разработки корзины завершён. Далее можно будет совершенствовать корзину. Например добавить туда:

  • Увеличение количества товара в корзине при повторном добавление товара в корзину.
  • Возможность изменять количество товара прямо в блоке с корзиной.
  • Строка с общей суммой заказа.

В общем много ещё чего. Вы держитесь там, успехов, удачи.

Как с помощью CSS и JavaScript создать пользовательский интерфейс корзины интернет-магазина

Корзина для Интернет-магазина средствами JavaScript
8 Сентябрь 2008, 10:48

Построение Интернет-магазина — это наиболее распространенная задача при построении бизнес-приложений для Интернет. В общем случае она сводится к построению каталога товаров, виртуальной корзины выбранных товаров и системы подтверждения заказа (отправка e-mail и сохранение информации о заказе в базе данных).

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.
Страница 1 из 2 1 2 >

Пытаюсь написать корзину, так сказать на native js, и пока слабо представляю как это сделать. Возможно, кто-то сможет хотя бы словесно меня направить в нужное русло. У меня есть некоторые замыслы, они описаны в конце


Есть страница товара (на каждый товар отдельно) и страница корзины отдельно (скрины страниц приложены). Предполагается хранить «корзину» в localstorage.

Со страницы товара нужно вытянуть изображение, название, цену, выбранный цвет и размер. Соответственно, после нажатия кнопки «add to bag» товар должен отобразиться на странице корзины. Если товар с такими же параметрами уже есть в хранилище, нужно увеличить счетчик этого товара в корзине на 1, по клику на «remove item» — уменьшить на 1. Клик по «empty bag» — очистить корзину. Так же нужно подсчитать сумму всех товаров и их количество.

У меня пока что возникают такие идеи:

— Для каждого товара по нажатию на кнопку «add» создавать объект, в качестве свойств и сделать изображение(путь к нему), название, цену, выбранный цвет и размер.

— После пройтись по объектам и сравнить свойства только созданного с имеющимися (если уже имеется такой же объект добавить к счетчику, если нет — добавить новый товар в корзину). В этом пункте мне более всего нужны советы, т.к. не представляю как это сейчас сделать

— Как собрать сумму покупок пока что тоже слабо понимаю

— Как удалить один экземпляр товара (уменьшить счетчик товара на 1, если он до этого был =1 — удалить товар (как удалить товар в таком случае — не соображу))

Модуль корзины интернет-магазина на jQuery

При разработке интернет-магазинов мне часто приходилось посредством javascript (а конкретнее его фреймворком — jQuery) проделывать некоторые повторяющиеся от проекта к проекту вещи. Например, добавление товаров в корзину, обновление информации о количестве товаров и общей сумме на странице, удаление товаров из корзины по одному, изменение их количества и полная очистка всех товаров из корзины. И все это, разумеется, без перезагрузки страницы.
И я пришел к выводу, что нужно писать код так, что бы потом его с легкостью можно было использовать в следующих проектах.

Итак пишем модуль для работы с корзиной интернет-магазина с использованием jQuery.
Оговорюсь, что я опубликую только javascript-код, серверную часть трогать не буду, обозначу так же, какими данными будет обмениваться клиент с сервером.

Определяемся с методами:

Инициализация:
Что нам нужно сделать в инициализации?
Необходимо переданные в метод init настройки, должным образом обработать (совместить с параметрами по умолчанию) и применить их, а так же повесить на элементы заданные в настройках соответствующие обработчики событий.
Определяемся с параметрами по умолчанию.

Смешиваем параметры указанные при инициализации с параметрами по умолчанию и применяем их

Делаем обновление блока с информацией о количестве товаров в корзине и общей сумме, вешаем обработчики событий на заданные элементы и возвращаем сущность объекта (может пригодится).

Добавление одного наименования товара в корзину в количестве 1шт.
Метод add, получает параметр context (элемент, на который произошел клик) и отправляет на сервер данные.

Получение информации о количестве товаров в корзине и общей сумме, обновление блока (метод get).
Отличе метода get от add в url на который отправляются данные и в параметрах (метод get не передает параметров).

Думаю, дабы осуществить повторное использование кода, можно добавить некоторый метод updateCart, в который будут переданы url и vars (параметры).

В свою очередь метод add изменится на такой.

Изменение количества товаров одного наименования при потере фокуса поля, соответствующего этому наименованию.

Сообщение о добавлении товара в корзину (в зависимости от типа alert или flash).

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

Модуль будет дописываться и исправляться.

Спасибо за внимание. Жду критики, вопросов и замечаний.
Есть желание доработать это до некого API работы с интернет-магазинами.

Скрипт корзины для лендинга


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

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

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

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

Демонстрация работы скрипта

Как подключить корзину

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

Так как скрипт использует jQuery, то убедитесь, что он у вас подключен.

После подключения jQuery (обычно перед закрывающим тегом body) подключаем и инициализируем скрипт, там же добавим div, в котором и будет располагаться основная корзина.

Не забываем подключить и таблицу стилей:

Настройки корзины

С подключением закончили, теперь давайте займемся настройкой.

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

Итак, первое что мы сделаем — это укажем нашему скрипту обертку вашей карточки товара.

Мастер Йода рекомендует:  Контролируемая отдача файлов PHP

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

product__element — и есть класс моего блока с карточкой.

На следующем шаге нужно указать скрипту класс кнопки, которая будет отправлять товар в корзину, для этого воспользуемся параметром «buttonAddToBasket»:

product__add-to-cart-button — класс моей кнопки.

У кнопки есть несколько обязательных атрибутов, в которых и хранятся основные данные о товаре.

  • data-sb-id-or-vendor-code — артикул или id товара;
  • data-sb-product-name — название товара;
  • data-sb-product-price — цена, разделенная точкой, если есть копейки;
  • data-sb-product-quantity — количество, по умолчанию укажите 1;
  • data-sb-product-img — полный путь к картинке;

Не обязательные атрибуты:


  • data-sb-product-size — размер. Задается, если вы используете опцию вывода размера в карточке товара. Подробнее о том, как это сделать в инструкции ниже.

Пример кнопки

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

Следующим параметром, который мы настроим будет маска ввода номер телефона «countryCode». По умолчанию сейчас маска для Украины с первыми цифрами ‘+38‘, но вы можете поставить, ‘+7‘ или любые другие цифры.

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

Теперь укажем валюту, которую хотим использовать в корзине. Для этого есть параметр smartBasketCurrency, в который можно положить один из значков валют:

Выбор количества

Если ваша карточка товара предусматривает выбор количества товара, добавляемого в корзину, то укажите класс элемента где будет располагаться блок выбора количества в параметре ‘productQuantityWrapper‘. Например, я хочу, чтобы выбор количества располагался в теге div с классом ‘product__quantity’.

После добавления параметра ‘productQuantityWrapper’ cо значением ‘product__quantity’, кнопки выбора количества автоматически появятся на сайте в указанном блоке.

Выбор размера в карточке

Недавно появилась возможность добавлять размер, который в свою очередь, может влиять и на цену. Например, в интернет-магазине продают 3 размера пиццы — 32 см, 26 см или 16 см. От радиуса зависит и цена. Вы хотите, чтобы в карточке пользователь мог выбрать нужный размер.

Давайте я немного поясню суть работы. Вот так выглядит верстка блока с выбором размера у меня:

Для работы скрипта здесь важны атрибуты «data-sb-curent-price» и «data-sb-curent-size» и «data-sb-curent-id-or-vendor-code» так как в них содержаться параметры для подстановки цены, размера и артикула. То есть при размере 32 см, цена пиццы 320 рублей, при размере 22 см — цена пиццы 220 рублей и т.д. Если цена при любом размере остается одинаковой, просто укажите везде одну и туже стоимость. Аналогичная ситуация и с артикулом. Или укажите везде одинаковый, или вообще не используйте атрибут «data-sb-curent-id-or-vendor-code», если не планируете давать возможность добавлять один и тот же товар с разными характеристиками.

Чтобы цена в карточке менялась, нужно обернуть число с ценой в отдельный блок, например, span, со своим классом. У меня это выглядит так:

Теперь класс обертки «product__size» для блока с размерами и класс обертки цены «product__price-number» нужно передать в настройки скрипта:

Теперь при клике на элемент с размером из «data-sb-curent-price» подставится цена в «product__price-number». Если не совсем понятно, напишите мне, попробую разъяснить.

Последняя настройка, которая сейчас доступна это вывод мини-корзины. То есть кнопки, которая отображает статус корзины (показывает текущее количество товара в корзине) и вызывает, при нажатии на нее, модальное окно с основной корзиной.

Я специально не задавал никаких стилей и ей, чтобы у вас был полный контроль если не над всей корзиной, то над максимальным количеством ее элементов. Принцип вывода, похож на настройку предыдущего поля. Нужно указать класс элемента, в котором отобразится кнопка в параметре ‘smartBasketMinArea‘.

Кроме того, у вас есть возможность задать текст в кнопке, перед иконкой корзины и изменить саму иконку. Делается это при помощи параметров smartBasketMinText и smartBasketMinIconPath.

Для настройки отступов и внешнего вида, иконка и текст обернуты в теги с классами «smart-basket__min-icon» и «smart-basket__min-text».

Настройка почты для отправки

Для настройки отправки почты, нужно открыть файл config.php, который находится в папке /smartbasket/php/


Здесь нас интересуют 2 строки:

  • const SENDER = ‘sender@yandex.ru’;
  • const CATCHER = ‘catcher@list.ru’;

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

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

Раскомментируйте эти строки и заполните в соответствии с вашим почтовым сервисом. Возникнут вопросы — пишите.

Обязательность полей для заполнения пользователем

В новом обновлении, как вы и просили, добавил еще одно поле для связи (email), теперь, если кому-то накладно звонить в другие регионы, они могут сделать обязательным поле для заполнения почты.
По умолчанию обязательным оставил только телефон, но вы можете это исправить в настройках. Для этого предусмотрено 2 параметра:

Чтобы сделать обязательным поле, поставьте ему значение «true». Чтобы сделать необязательным, укажите «false». Все это выглядеть может так:

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

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

Надеюсь, что ничего не упустил, если что — пишите!

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

Создание корзины покупок с использованием только HTML/JavaScript

Я не уверен, что делать, чтобы завершить этот проект. Мне нужно создать корзину покупок, которая использует только одну страницу HTML. У меня есть таблица, показывающая, что продается, но где я потерялся, это JavaScript.

Я не знаю, как связать кнопку «Добавить в корзину» со всеми необходимыми данными (название, описание и цена), чтобы добавить его в корзину. Мне не нужно удалять его из корзины, но он должен показывать общее количество. После поиска в Интернете нескольких ответов я пробовал некоторые вещи, но просто не могу понять это.

Любая помощь, безусловно, оценена, потому что я полностью потеряна в этот момент и новичок в JavaScript в целом.

Это jsFiddle, но это меня немного сбивало с толку, потому что он работает по-другому, чем если бы я просто зашел в «Запуск в блокноте ++»

Блог web-мастера

PHP, MySQL, JavaScript, AJAX, HTML и CSS

Корзина для Интернет-магазина средствами JavaScript

Построение Интернет-магазина — это наиболее распространенная задача при построении бизнес-приложений для Интернет. В общем случае она сводится к построению каталога товаров, виртуальной корзины выбранных товаров и системы подтверждения заказа (отправка e-mail и сохранение информации о заказе в базе данных).

Учитывая, что многие Интернет-магазины предлагают лишь ограниченное число товаров (менее 100), все товары в этом случае могут быть отображены в одной большой таблице.

Добавить комментарий