Корзина товаров для html сайтов, сайтов на mobirise и для любых других сайтов на cms или конструкторе

Введение

Для написания этой статьи я использовал последнюю версию Codeigniter – 2.1.4 и JQuery версии 2.1.0.

Основные моменты перед началом работы:

Я использовал самую последнюю на момент написания статьи jQuery версии 2.1.0. Эта версия не поддерживает Internet Explorer 6,7,8. .

Хоть эта статья и для новичков, всё же подразумевается, что читатель уже имеет некоторые представления и познания в Codeigniterи модели MVC, а так же имеет уже настроеный веб сервер и установленный codeigniter.

По ходу статьи я буду ссылаться на официальную документацию Codeigniter и JQuery. Официальная документация хоть и на английском, я всё равно советую использовать именно её, т.к. там самая свежая информация. А английский язык всё равно придётся выучить, если Вы занялись программированием. Самое время начать =).

Перед разработкой корзины, скачайте Codeigniter с официального сайта.

Библиотеку jQuery скачивать не нужно, её мы возьмём из Google CDN. Многие советуют, как и я, подключать jQuery именно из CDN Google, потому что браузер пользователя один раз закеширует эту библиотеку из Google CDN, и дальше, зайдя на Ваш сайт, она уже скачиваться не будет. Следовательно, сайт будет грузиться немного быстрее.

jQuery

Инициализация корзины

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

    var total_items = 0;
    var total_price = 0;
    $(document).ready(function() {

        $(".item").draggable({
            revert: true            
        });
        $("#cart_items").draggable({
            axis: "x"
        });

        $("#cart_items").droppable({
            accept: ".item",
            activeClass: "drop-active",
            hoverClass: "drop-hover",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">';
                html = html + '<div class="divrm">';
                html = html + '<a onclick="remove(this)" class="remove '+itemid+'">&times;</a>';
                html = html + '<div/>'+item+'</div>';
                $("#cart_items").append(html);

                // Обновление общего количества
                total_items++;
                $("#citem").html(total_items);

                // Обновление общей цены
                var price = parseInt(ui.draggable.find(".price").html().replace(" р.", ""));
                total_price = total_price + price;
                $("#cprice").html(total_price + " р.");

                // Расширяем корзину
                if (total_items > 4) {
                    $("#cart_items").animate({width: "+=120"}, 'slow');
                }
            }
        });
    });

Удаление пункта из корзины покупок

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

    function remove(el) {
        $(el).hide();
        $(el).parent().parent().effect("highlight", {color: "#ff0000"}, 1000);
        $(el).parent().parent().fadeOut('1000');
        setTimeout(function() {
            $(el).parent().parent().remove();
            // Сворачиваем позицию в корзине
            if (total_items > 3) {
                $("#cart_items").animate({width: "-=120"}, 'slow');
            }
        }, 1100);

        // Обновляем общее количество
        total_items--;
        $("#citem").html(total_items);

        // Обновляем общую цену
        var price = parseInt($(el).parent().parent().find(".price").html().replace(" р.", ""));
        total_price = total_price - price;
        $("#cprice").html(total_price + " р.");
    }

Навигация по корзине покупок

Перетаскивание области со списком покупок является не единственным способом навигации по корзине. Мы добавили два элемента для прокручивания списка покупок влево и вправо. Они манипулируют свойством CSS left.

        $("#btn_next").click(function() {
            $("#cart_items").animate({left: "-=100"}, 100);
            return false;
        });
        $("#btn_prev").click(function() {
            $("#cart_items").animate({left: "+=100"}, 100);
            return false;
        });
        $("#btn_clear").click(function() {
            $("#cart_items").fadeOut("2000", function() {
               $(this).html("").fadeIn("fast").css({left: 0});
            });
            $("#citem").html("0");
            $("#cprice").html("0 р.");
            total_items = 0;
            total_price = 0;
            return false;
        });

hide() и show()

Все удобства методов и можно получить через свойство , выставив на none или :

// C jQuery// Спрятать и показать элемент$(".box").hide();$(".box").show();// Без jQuery// Прячем и показываем элемент, изменяя display на block или nonedocument.querySelector(".box").style.display = "none";document.querySelector(".box").style.display = "block";

Document ready

Если вам нужно подождать полной загрузки DOM, перед, к примеру, развешиванием ивентов на объекты в структуре документа, то в jQuery вы бы использовали или его сокращение . Но на самом деле мы можем легко и просто сами создать похожую функцию, в которой будем слушать событие :

// C jQuery$(document).ready(function() { /*  Начинаем работу после полной загрузки DOM */});// Без jQuery// Пишем схожий метод и смело начинаем его использоватьvar ready = (callback) => {if (document.readyState != "loading") callback();else document.addEventListener("DOMContentLoaded", callback);}ready(() => { /*  Начинаем работу после полной загрузки DOM */ });

Работа с классами

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

// C jQuery// Добавляем, удаляем и переключаем класс focus$(".box").addClass("focus");$(".box").removeClass("focus");$(".box").toggleClass("focus");// Без jQuery// Добавляем, удаляем и переключаем класс focusvar box = document.querySelector(".box");box.classList.add("focus");box.classList.remove("focus");box.classList.toggle("focus");

Если вам надо удалить или добавить несколько классов, то вы можете просто передать несколько аргументов в и :

// Добавляем "focus" и "highlighted" классы, а затем удаляем ихvar box = document.querySelector(".box");box.classList.add("focus", "highlighted");box.classList.remove("focus", "highlighted");

Если вам надо поменять два класса, которые взаимозаменяют друг друга, то вы можете вызывать на и заменить один класс другим:

// Удаляем класс "focus" и добавляем "blurred"document.querySelector(".box").classList.replace("focus", "blurred");

Создаем корзину покупателя на чистом JavaScript и Local Storage

Вариантов создания корзины с использованием jQuery, на просторах интернета достаточно, но так как не все хотят подключать громоздкие библиотеки, особенно для каких-то разовых задач, я хочу показать вариант реализации на чистом JS. К тому же, хранить выбранные пользователем товары, мы будем не в cookie, а Local Storage (локальное хранилище). Эта технология поддерживается практически во всех современных браузерах и даже в IE8.

Буквально два слова о Local Storage для тех, кто с этим способом хранения данных на стороне клиента не знаком. Объем хранимой информации в LS по сравнению с cookie значительно выше: около 5Мб(!) против 4Кб. К тому же, в LS данные хранятся в зашифрованном виде. Однако, как и в cookie, так и в LocalStorage, мы можем записывать только строковые данные. Если нужно добавить массив или объект, то его можно предварительно преобразовать в JSON-строку (JSON.stringify(obj)), а после получения данных из LS — производим обратное преобразование (JSON.parse(json_string)). Работать с Local Storage не просто, а очень просто. Вот его основные методы:

localStorage.setItem('key', 'value'); Обновляет или создает новую запись с ключом «key» и строковым значением «value» var lsData = localStorage.getItem('key'); Возвращает данные связанные с ключом «key» или «null», если записи с таким ключом не обнаружено localStorage.removeItem('key'); Удаляет данные со связанным ключом «key» localStorage.clear(); Удаляет все записи из Local Storage

Переходим к делу и для примера, создадим такую HTML-структуру для вывода товара:

Все необходимые данные, такие как наименование или цена товара, мы можем брать прямо из элементов страницы. Остается важная составляющая — ID товара, которую можно выводить в каком-нибудь атрибуте. Для таких целей, я предпочитаю атрибут data-*, который я уже упоминал в других статьях. Его-то и добавим в кнопку «Добавить в корзину» каждого из товаров. Теперь в дело вступает JavaScript. Ничего сверхъестественного тут нет и большую часть, я прокомментирую прямо в коде:

Объект «cartData» собираем по следующей схеме: ключ к товару — его ID и данные в виде массиве . Если бы вы вывели такой объект средствами php, то получили бы примерно следующее:

Это я показал, чтобы было понимание того, как потом можно работать с этими данными на стороне сервера. И плавно подошли к тому, как же эти данные отправить на сервер. В отличии от cookie, Local Storage работает только на стороне клиента . Кто-то может и записать это в минусы LS, но я не вижу проблемы, т.к. есть достаточно способов превратить минус в плюсы. Легко и непринужденно, мы можем отправить данные Ajax-запросом, а это гораздо приятней посетителю, т.к

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

Как видите, нет ничего сложного и объем кода, без использования сторонних библиотек, получился совсем небольшим. Если кому-то нужно учитывать более старые версии Internet Explorer, то он может добавить cookie, как «fallback» к Local Storage. То есть, проверять в функциях «getCartData» и «setCartData» возможности браузера и, если он не поддерживает LS, то в качестве хранилища использовать Cookie, а остальной код останется без изменений.

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

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

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

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

Взгляните на кнопки, в дизайне представленных ниже магазинов, и вы поймете, о чем я говорю:

В первом примере кнопка ужасно сливается с другими элементами дизайна, представьте себе, такой магазин реально существует!

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

Совет:

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

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

HTML-вёрстка галереи для интернет-магазина.

HTML-вёрстка галереи очень простая и, как писалось ранее, состоит всего из трёх блоков:

XHTML

<div class=»wrap»>
<h1>Просмотр фотографий</h1>
<div class=»flex» data-gallary>
<div class=»container»>
<div class=»viewport»>
<div class=»thumbs content-box»>
<img src=»images/thumbnails/IMG_2212.jpg»>
<img src=»images/thumbnails/IMG_2222.jpg»>
<img src=»images/thumbnails/IMG_2227.jpg»>
<img src=»images/thumbnails/IMG_2235.jpg»>
<img src=»images/thumbnails/IMG_2259.jpg»>
<img src=»images/thumbnails/IMG_2269.jpg»>
<img src=»images/thumbnails/IMG_2273.jpg»>
<img src=»images/thumbnails/IMG_2287.jpg»>
</div>
</div>
</div>

<div class=»flex control-row»>
<button type=»button» class=»btn» data-control=»first»>First</button>
<button type=»button» class=»btn» data-control=»prev»>Previous</button>
<button type=»button» class=»btn» data-control=»next»>Next</button>
<button type=»button» class=»btn» data-control=»last»>Last</button>
</div>
</div>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<h1>Просмотр фотографий</h1>

</div>

<div>

</div>

<button type=»button»class=»btn»data-control=»first»>First</button>

<button type=»button»class=»btn»data-control=»prev»>Previous</button>

</div>

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

Тумбы и большие фото разнесены по разным папкам — thumbnail и photos соответственно. Их можно было бы положить и в одну папку, добавив именам картинок префиксы, чтобы различать, где тумба, а где полноразмерное фото. При этом сам js-скрипт не изменится.
Как видите из вёрстки, я не стал оборачивать ни тумбы, ни кнопки навигации в дополнительные или — в этом нет совершенно никакой необходимости и незачем усложнять вёрстку и замусоривать её лишними элементами.

Ещё один немаловажный момент. В блоке по умолчанию находится фотография. Это необходимо для того, чтобы пока не загрузился скрипт, в галерее не было пустого места.

Запомните, это очень важно.
Не нужно оборачивать тумбу ссылкой, используя её , как указатель на полноразмерную фотографию. Как с точки зрения семантики, так и с точки зрения СЕО — тэг должен использоваться только для формирования ссылок, ведущих на другие страницы сайта или другой интернет-ресурс.
JS-скрипту, для вывода полноразмерного фото, достаточно тумбы.

17 ошибок, из-за которых корзины интернет-магазинов пустуют

Невозможность возврата к покупкам из корзины.

Кнопка «Вернуться к покупкам» нужна хотя бы потому, что стимулирует пользователя продолжить покупки.

Значок корзины размещен в нестандартном месте.

Непонятная формулировка и внешний вид побуждения к покупке.

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

«В корзину»;
«Купить»;
«Оформить заказ».

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

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

После добавления товара в корзину не происходит никаких видимых изменений.

После нажатия кнопка не меняется, например, на «В корзине» – ни цветом, ни содержанием, или же изменения незначительные (как правило, в корзине отображается количество товаров и их общая сумма). Сделайте так, чтобы клиент мог сразу попадать в корзину, а уже оттуда по ссылкам возвращаться к покупкам.

При двойном нажатии на кнопку «Купить» происходит отмена добавления товара или увеличение его количества.

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

После очистки корзина становится совершенно пустой.

Сообщения негативной эмоциональной окраски в корзине.

Людей пугают негативные сообщения, например, «У вас 0 покупок» или «У вас отсутствуют купоны на скидку». Пустая корзина должна подталкивать к действию, а не сообщать об отсутствии чего-либо.

Нельзя изменить количество товара в корзине.

В корзине нет ссылки на карточку товара.

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

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

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

Нет информации о способах оплаты и условиях доставки/возврата/обмена товара (или информация труднодоступна).

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

Запутанный процесс пересчета товаров.

Функции вроде нажатия кнопок «сохранить изменения» и «пересчитать заказ» не требуются.

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

Пользователю не предлагаются сопутствующие или похожие товары.

Сопутствующие или похожие товары подбираются неверно.

Тематика сопутствующих товаров всегда должна соответствовать другой продукции в заказе, или такие изделия должны хорошо дополнять основные. Допустим, клиент положил в корзину сковородку или шторы. Можно предложить ему востребованную продукцию категории «Для кухни» или «Для сада», но никак не бальзам для волос.

CSS

Убедитесь, что при создании корзины для сайта на PHP вы подключили шрифт, который мы используем в этом руководстве. Теперь добавим основные стили для раздела body:

* {
  box-sizing: border-box;
}
 
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #7EC855;
  font-family: 'Roboto', sans-serif;
}

После этого создадим корзину с размерами 750 на 423 пикселя и зададим для нее стили

Обратите внимание, что мы используем flexbox, поэтому устанавливаем для свойства display значение flex, а для flex-direction – column. Потому что по умолчанию для flex-direction установлено значение row:

.shopping-cart {
  width: 750px;
  height: 423px;
  margin: 80px auto;
  background: #FFFFFF;
  box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10);
  border-radius: 6px;
 
  display: flex;
  flex-direction: column;
}

Теперь создадим первый элемент корзины для сайта на JavaScript, который будет названием товара. Для этого изменим значение высоты на 60 пикселей и зададим несколько основных стилей. Следующие три элемента — это товары в корзине. Для каждого из них мы установим высоту 120 пикселей и display: flex:

.title {
  height: 60px;
  border-bottom: 1px solid #E1E8EE;
  padding: 20px 30px;
  color: #5E6977;
  font-size: 18px;
  font-weight: 400;
}
 
.item {
  padding: 20px 30px;
  height: 120px;
  display: flex;
}
 
.item:nth-child(3) {
  border-top:  1px solid #E1E8EE;
  border-bottom:  1px solid #E1E8EE;
}

Мы задали основные стили. Теперь по порядку установим стили для товаров. Первыми элементами являются кнопки «Удалить» и «Добавить в избранное».

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

.buttons {
  position: relative;
  padding-top: 30px;
  margin-right: 60px;
}
.delete-btn,
.like-btn {
  display: inline-block;
  Cursor: pointer;
}
.delete-btn {
  width: 18px;
  height: 17px;
  background: url("delete-icn.svg") no-repeat center;
}
 
.like-btn {
  position: absolute;
  top: 9px;
  left: 15px;
  background: url('twitter-heart.png');
  width: 60px;
  height: 60px;
  background-size: 2900%;
  background-repeat: no-repeat;
}

Мы устанавливаем класс «is-active» при нажатии кнопки, чтобы анимировать ее с помощью jQuery, но об этом подробнее в следующем разделе:

.is-active {
  animation-name: animate;
  animation-duration: .8s;
  animation-iteration-count: 1;
  animation-timing-function: steps(28);
  animation-fill-mode: forwards;
}
 
@keyframes animate {
  0%   { background-position: left;  }
  50%  { background-position: right; }
  100% { background-position: right; }
}

Следующий элемент скрипта корзины для сайта HTML — это изображение товара, для которого нужно задать поле справа 50 пикселей:

.image {
  margin-right: 50px;
}
 
Let’s add some basic style to  product name and description.
.description {
  padding-top: 10px;
  margin-right: 60px;
  width: 115px;
}
 
.description span {
  display: block;
  font-size: 14px;
  color: #43484D;
  font-weight: 400;
}
 
.description span:first-child {
  margin-bottom: 5px;
}
.description span:last-child {
  font-weight: 300;
  margin-top: 8px;
  color: #86939E;
}

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

.quantity {
  padding-top: 20px;
  margin-right: 60px;
}
.quantity input {
  -webkit-appearance: none;
  border: none;
  text-align: center;
  width: 32px;
  font-size: 16px;
  color: #43484D;
  font-weight: 300;
}
 
button {
  width: 30px;
  height: 30px;
  background-color: #E1E8EE;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.minus-btn img {
  margin-bottom: 3px;
}
.plus-btn img {
  margin-top: 2px;
}
 
button:focus,
input:focus {
  outline:0;
}

Полная стоимость товаров:

.total-price {
  width: 83px;
  padding-top: 27px;
  text-align: center;
  font-size: 16px;
  color: #43484D;
  font-weight: 300;
}

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

@media (max-width: 800px) {
  .shopping-cart {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .item {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .image img {
    width: 50%;
  }
  .image,
  .quantity,
  .description {
    width: 100%;
    text-align: center;
    margin: 6px 0;
  }
  .buttons {
    margin-right: 20px;
  }
}

Это все, что касается CSS.

Как создать стильный чекбокс

По умолчанию

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

Стиль по умолчанию

HTML-код такого чекбокса выглядит довольно просто:

    <div class="checkbox">
      <input type="checkbox" id="click">
      <label for="click" class="text"> Чекбокс </label>
    </div>

По сути, кроме указания вам не нужно ничего делать.

Чекбокс с галочкой

Но если вы хотите, чтобы этот вариант ответа был уже выбран при открытии сайта, то необходимо будет добавить атрибут . Нужно прописать это в HTML:

Тогда мы получим чекбокс с галочкой:

Чекбокс с галочкой

Обязательный чекбокс

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

Чтобы установить такой чекбокс, в строку ввода нужно добавить дополнительный атрибут:

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

Кастомный чекбокс

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

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

Скрываем чекбокс: способ первый

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

И квадрат с галочкой исчезнет:

Квадрата с галочкой нет

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

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="ru" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Custom Toggle Button | CodingLab</title>
    <link rel="stylesheet" href="style.css">
<style> input { display: none; } </style>
  </head>
  <body>
 <form>
  <div>
    <input type="checkbox" id="terms">
    <label for="terms">Поддельный чекбокс</label>
  </div>
</form>
</body>

Скрываем чекбокс: способ второй

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

/*Стиль метки, содержащей элемент ввода*/
.container {
  display: block;
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
}

/* Прячем чекбокс */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;

Вот что получится:

Текст больше не съезжает

Настройка стиля: закруглим края и добавим цвет

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

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

И установите стиль границ:

Так у нас получился серо-синий цвет чекбокса:

Стилизованный чекбокс

Добавляем фон

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

Чтобы сделать такой простой стиль, необходимо написать несколько строк кода:

/* Устанавливаем галочку (она будет скрыта, если не отмечена) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Показывать галочку при выбранном ответе */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Стилизуем галочку */
.container .checkmark:after {
  left: 3px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Мы разобрали основные способы кастомизации чекбоксов, но это далеко не все, что можно сделать с HTML и CSS. Например, можно настроить разные виды чекбокса для состояний , , и .

HTML

Список товаров

В нашем примере нет серверной части, поэтому код разметки формирует простой список пунктов (в примере используется 10 товаров). Структура разметки проста:

     <div id="item_container">
          <div class="item" id="i1">
              <img src="/img/1.jpg"/>
              <label class="title">Майка 1</label>
              <label class="price">200 р.</label>
          </div>
          <div class="item" id="i2">
              <img src="/img/2.jpg"/>
              <label class="title">Майка 2</label>
              <label class="price">240 р.</label>
          </div>
			. . .
          <div class="clear"></div>
      <div>

Корзина покупок

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

      <div id="cart_container">
          <div id="cart_title">
              <span>Корзина покупок</span>
              <div class="clear"></div>
          </div>
          <div id="cart_toolbar">
              <div id="cart_items" class="back"></div>
          </div>
          <div id="navigate">
              <div id="nav_left">
                  <a href="/" id="btn_prev"><</a>
                  <a href="/" id="btn_next">></a>
                  <a href="/" id="btn_clear">Очистить корзину</a>
              </div>
              <div id="nav_right">
                  <span class="sptext">
                      <label>Покупок </label><label class="count" id="citem">0</label>
                  </span>
                  <span class="sptext">
                      <label>Цена </label><label class="count" id="cprice">0 р.</label>
                  </span>
              </div>
              <div class="clear"></div>
          </div>
      </div>

Проверяем есть ли класс у элемента

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

// С jQuery// Проверяем есть ли у .box класс focus и потом запускаем на нем функциюif ($(".box").hasClass("focus")) {//  Понеслась...}// Без jQuery// Проверяем есть ли у .box класс focus и потом запускаем на нем функциюif (document.querySelector(".box").classList.contains("focus")) {//  Понеслась...}

Сетевые запросы с get() или ajax()

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

// С jQuery$.ajax({    url: "data.json"  }).done(function(data) {// ...  }).fail(function() {// Handle error  });// Без jQueryfetch("data.json")  .then(data => {// Handle data  }).catch(error => {// Handle error  });

Создание элементов

Если вы хотите динамически создать элемент в JavaScript, чтобы добавить его в DOM, то вы можете вызывать на и передать ему имя тега, как аргумент, чтобы указать какой именно элемент вы хотите создать:

// Создаем div и span$("<div/>");$("<span/>");// Создаем div и spandocument.createElement("div");document.createElement("span");

Если вы хотите добавить какой-либо контент этим элементам, то вы можете просто использовать свойство или создать текстовой узел с помощью и добавить его созданному элементу:

var element = document.createElement("div");element.textContent = "Text"// или создайте textNode и добавьте его элементуvar text = document.createTextNode("Text");element.appendChild(text);

Обновление DOM

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

Если вам надо только “прочесть” или обновить текст элемента, то вы можете применить свойство на нужном объекте, чтобы получить текст в элементе или обновить его:

// C jQuery// Меняем текст в .button$(".button").text("New text");// Считываем текст в .button$(".button").text(); // Отдаёт"New text"// Без jQuery// Меняем текст в .buttondocument.querySelector(".button").textContent = "New text";// Считываем текст в .buttondocument.querySelector(".button").textContent; // Отдаёт"New text"

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

// Создаём div и вставляем его в .container$(".container").append($("<div/>"));// Создаём div и вставляем его в .containervar element = document.createElement("div");document.querySelector(".container").appendChild(element);

А теперь всё вместе, как мы можем обновить текст и класс и добавить это всё в DOM:

// Создаём divvar element = document.createElement("div");// Добавляем ему классelement.classList.add("box");// Указываем текстelement.textContent = "Text inside box";// Вставляем его в .containerdocument.querySelector(".container").appendChild(element);

Резюмируем

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

Выбор элементов с и

Прослушиваем события с помощью

Обновляем CSS и стили через свойство

Работаем с классами, через свойство

AJAX запросы с

Вызываем события с помощью

Создаем элементы с

Обновляем текст с помощью свойства

Добавляем элементы в DOM с

Этот блог бесплатный, в нём нет рекламы и ограничений paywall. Вы можете его поддержать через Яндекс.Деньги. Спасибо.

CSS

        body {
            font-family: Arial, "Free Sans";
            margin: 0;
            padding: 0;
        }
        #main {
            background: #0099cc;
            margin-top: 0;
            padding: 2px 0 4px 0;
            text-align: center;
        }
        #main a {
            color: #ffffff;
            text-decoration: none;
            font-size: 12px;
            font-weight: bold;
            font-family: Arial;
        }
        #main a:hover {
            text-decoration: underline;
        }
        #item_container {
            width: 610px;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .item {
            background: #fff;
            float: left;
            padding: 5px;
            margin: 5px;
            cursor: move;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            z-index: 5;
        }
        .title, .price {
            display: block;
            text-align: center;
            font-size: 14px;
            letter-spacing: -1px;
            font-weight: bold;
            cursor: move;
        }
        .title {
            color: #333;
        }
        .price {
            color: #0099cc;
            margin-top: 5px;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
        }
        .icart, .icart label {
            cursor: e-resize;
        }
        .divrm {
            text-align: right;
        }
        .remove {
            text-decoration: none;
            cursor: pointer;
            font-weight: bold;
            font-size: 20px;
            position: relative;
            top: -7px;
        }
        .remove:hover {
            color: #999;
        }
        .clear {
            clear: both;
        }
        #cart_container {
            margin: 0 auto;
            width: 495px;
        }
        #cart_title span {
            border: 8px solid #666;
            border-bottom-width: 0;
            background: #333;
            display: block;
            float: left;
            color: #fff;
            font-size: 11px;
            font-weight: bold;
            padding: 5px 10px;
            -webkit-border-radius: .5em .5em 0 0;
            -moz-border-radius: .5em .5em 0 0;
            border-radius: .5em .5em 0 0;
        }
        #cart_toolbar {
            overflow: hidden;
            border: 8px solid #666;
            height: 190px;
            z-index: -2;
            width: 483px;
            -webkit-border-radius: 0 .5em 0 0;
            -moz-border-radius: 0 .5em 0 0;
            border-radius: 0 .5em 0 0;
            background: #ffffff;
        }
        #cart_items {
            height: 190px;
            width: 483px;
            position: relative;
            padding: 0 0 0 2px;
            z-index: 0;
            cursor: e-resize;
            border-width: 0 2px;
        }
        .back {
            background: #e9e9e9;
        }
        #navigate {
            width: 463px;
            margin: 0 auto;
            border: 8px solid #666;
            border-top-width: 0;
            -webkit-border-radius: 0 0 .5em .5em;
            -moz-border-radius: 0 0 .5em .5em;
            border-radius: 0 0 .5em .5em;
            padding: 10px;
            font-size: 14px;
            background: #333;
            font-weight: bold;
        }
        #nav_left {
            float: left;
        }
        #nav_left a {
            padding: 4px 8px;
            background: #fff;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            text-decoration: none;
            color:#0099cc;
        }
        #nav_left a:hover {
            background: #666;
            color: #fff;
        }
        #nav_right {
            float: right;
        }
        .sptext {
            background: #ffffff;
            padding: 4px 8px;
            margin-left: 8px;            
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            color: #666;
        }
        .count {
            color: #0099cc;
        }
        .drop-active {
            background: #ffff99;
        }
        .drop-hover {
            background: #ffff66;
        }

В итоге получаем интерфейс корзины покупок: