7 ноября 2017

Добавить в избранное на JQuery

JQuery

Во многих интернет-магазинах имеется такая полезная вещь, как функция добавить в избранное, с помощью которой, товар можно без проблем найти в разделе избранное своего личного кабинета. Вот сегодня мы и создадим первую часть данного материала с помощью HTML, CSS и JQUERY, а в следующем материале уже сделаем добавление в избранное на PHP и MYSQL.

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

Добавить товар в избранное на JQUERY

Первый шаг. HTML.

И так, переходим к первому и самому простому шагу, это написание HTML кода и сначала подключаем все нужные скрипты и стили.

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

Для этого создаем блок с классом favorites, в который помещаем две кнопки add - добавить в избранное и remove - удалить с избранного. Как видим, все очень просто, остается только добавить любую картинку с товаром и на этом можно переходить к следующему шагу JQUERY.

Второй шаг. JQUERY.

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

Метод hasClass

После чего создаем условие, в котором обращаясь к переменной id и проверяем, если мы добавили товар, то добавляем класс simpleс помощью метода addClass.

Метод addClass

И наоборот, если убрали товар с избранного, то удаляем класс simple с помощью метода removeClass.

Метод removeClass

$(document).on('click', '.favorites', function () {
	var id = $(this).hasClass('simple');
    if (!id) {
        $(this).addClass('simple');
    } else {
        $(this).removeClass('simple');
    }
});

Третий шаг. CSS.

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

.product {
    position: relative;
    display: inline-block;
}

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

В качестве элементов управления, я выбрал inline картинку, поэтому работать будем с ее позиционированием.

.favorites {
    position: absolute;
    top: 0;
    right: 0;
    width: 55px;
    height: 55px;
    z-index: 1;
}

.favorites .image {
    position: absolute;
    width: 55px;
    height: 55px;
    background: url('../img/favorites.png') no-repeat;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.favorites.simple {
    background: url('../img/favorites.png') no-repeat 100% 100%;
}

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

.favorites .add {
    background-position: 0 0;
    -webkit-transform: rotate3d(1,1,0,0deg);
    -moz-transform: rotate3d(1,1,0,0deg);
    -ms-transform: rotate3d(1,1,0,0deg);
    -o-transform: rotate3d(1,1,0,0deg);
    transform: rotate3d(1,1,0,0deg);
}

.favorites.simple .add {
    -webkit-transform: rotate3d(1,1,0,180deg);
    -moz-transform: rotate3d(1,1,0,180deg);
    -ms-transform: rotate3d(1,1,0,180deg);
    -o-transform: rotate3d(1,1,0,180deg);
    transform: rotate3d(1,1,0,180deg);
}

.favorites:hover .add,
.favorites.simple .add {
    background-position: -56px 0;
}

.favorites .remove{
    background-position: -111px 0;
    -webkit-transform: rotate3d(1,1,0,180deg);
    -moz-transform: rotate3d(1,1,0,180deg);
    -ms-transform: rotate3d(1,1,0,180deg);
    -o-transform: rotate3d(1,1,0,180deg);
    transform: rotate3d(1,1,0,180deg);
}


.favorites.simple .remove {
    -webkit-transform: rotate3d(1,1,0,0deg);
    -moz-transform: rotate3d(1,1,0,0deg);
    -ms-transform: rotate3d(1,1,0,0deg);
    -o-transform: rotate3d(1,1,0,0deg);
    transform: rotate3d(1,1,0,0deg);
}

.favorites .remove:hover {
    background-position: -167px 0;
}

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

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

vk.com
Комментарии