Главная » Новости » 2017 » Апрель » 12 » Создаём страницу товара с выбором цвета с помощью HTML, CSS3 и jQuery

Практикум

Создаём страницу товара с выбором цвета с помощью HTML, CSS3 и jQuery


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

Код

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">


Теперь можем приступать к созданию HTML-структуры нашей страницы с товаром.

HTML

Макет нашей страницы будет из двух колонок, в левой колонке изображение товара (в данном случае, наушников), в правой колонке - описание товара и функционал (различные кнопки, ссылки и прочее). Обе колонки заключаем в элемент 'main' с классом '.container'

Код

<main class="container">
   
  <!-- Левая колонка / Изображение товара -->
  <div class="left-column">
  <img data-image="black" src="images/black.png" alt="">
  <img data-image="blue" src="images/blue.png" alt="">
  <img data-image="red" class="active" src="images/red.png" alt="">
  </div>
   
   
  <!-- Правая колонка -->
  <div class="right-column">
   
  <!-- Описание товара -->
  <div class="product-description">
  <span>Headphones</span>
  <h1>Beats EP</h1>
  <p>The preferred choice of a vast range of acclaimed DJs. Punchy, bass-focused sound and high isolation. Sturdy headband and on-ear cushions suitable for live performance</p>
  </div>
   
  <!-- Конфигурация товара -->
  <div class="product-configuration">
   
  <!-- Цвет товара -->
  <div class="product-color">
  <span>Color</span>
   
  <div class="color-choose">
  <div>
  <input data-image="red" type="radio" id="red" name="color" value="red" checked>
  <label for="red"><span></span></label>
  </div>
  <div>
  <input data-image="blue" type="radio" id="blue" name="color" value="blue">
  <label for="blue"><span></span></label>
  </div>
  <div>
  <input data-image="black" type="radio" id="black" name="color" value="black">
  <label for="black"><span></span></label>
  </div>
  </div>
  </div>
   
  <!-- Конфигурация кабеля -->
  <div class="cable-config">
  <span>Cable configuration</span>
   
  <div class="cable-choose">
  <button>Straight</button>
  <button>Coiled</button>
  <button>Long-coiled</button>
  </div>
   
  <a href="#">How to configurate your headphones</a>
  </div>
  </div>
   
  <!-- Цена товара -->
  <div class="product-price">
  <span>148$</span>
  <a href="#" class="cart-btn">Add to cart</a>
  </div>
  </div>
</main>


CSS

Теперь добавляем базовые CSS-стили для нашей страницы.

Код

/* Basic Styling */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
   
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
  display: flex;
}


Обратите внимание, что для класса '.container' установлено у свойства 'display' значение 'flex'. Это позволит выравнивать колонки. А пока зададим для колонок какие-то значения их ширины и для класса '.left-column' зададим относительное позиционирование. Абсолютное позиционирование мы будем применять к изображениям в левой колонке.

Код

/* Columns */
.left-column {
  width: 65%;
  position: relative;
}
   
.right-column {
  width: 35%;
  margin-top: 60px;
}


Хорошо. Зададим стили для левой колонки с классом '.left-column'. В этой колонке у нас будут расположены три разных изображения, изображения наушников разного цвета. Изначально для изображений зададим 'opacity:0' а также введем класс '.active', которого значение свойства 'opacity' будет равным единице.

Код

/* Left Column */
.left-column img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.3s ease;
}
   
.left-column img.active {
  opacity: 1;
}


Ну а теперь стили для правой колонки (колонка с классом '.right-colum'). Начнём с класса '.product-description', отвечающего за оформление описания товара:

Код

/* Product Description */
.product-description {
  border-bottom: 1px solid #E1E8EE;
  margin-bottom: 20px;
}
.product-description span {
  font-size: 12px;
  color: #358ED7;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
.product-description h1 {
  font-weight: 300;
  font-size: 52px;
  color: #43484D;
  letter-spacing: -2px;
}
.product-description p {
  font-size: 16px;
  font-weight: 300;
  color: #86939E;
  line-height: 24px;
}


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

Код

/* Product Color */
.product-color {
  margin-bottom: 30px;
}
   
.color-choose div {
  display: inline-block;
}
   
.color-choose input[type="radio"] {
  display: none;
}
   
.color-choose input[type="radio"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
}
   
.color-choose input[type="radio"] + label span {
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
}
   
.color-choose input[type="radio"]#red + label span {
  background-color: #C91524;
}
.color-choose input[type="radio"]#blue + label span {
  background-color: #314780;
}
.color-choose input[type="radio"]#black + label span {
  background-color: #323232;
}
   
.color-choose input[type="radio"]:checked + label span {
  background-image: url(images/check-icn.svg);
  background-repeat: no-repeat;
  background-position: center;
}


Отлично. Теперь давайте зададим стили оформления для раздела выбора конфигурации кабеля. За это отвечает класс '.cable-configuration'. В разделе у нас будет три кнопки и ссылка. С помощью CSS-стилей зададим оформление их состояния и сделаем их более привлекательными.

Код

/* Cable Configuration */
.cable-choose {
  margin-bottom: 20px;
}
   
.cable-choose button {
  border: 2px solid #E1E8EE;
  border-radius: 6px;
  padding: 13px 20px;
  font-size: 14px;
  color: #5E6977;
  background-color: #fff;
  cursor: pointer;
  transition: all .5s;
}
   
.cable-choose button:hover,
.cable-choose button:active,
.cable-choose button:focus {
  border: 2px solid #86939E;
  outline: none;
}
   
.cable-config {
  border-bottom: 1px solid #E1E8EE;
  margin-bottom: 20px;
}
   
.cable-config a {
  color: #358ED7;
  text-decoration: none;
  font-size: 12px;
  position: relative;
  margin: 10px 0;
  display: inline-block;
}
.cable-config a:before {
  content: "?";
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: 2px solid rgba(53, 142, 215, 0.5);
  display: inline-block;
  text-align: center;
  line-height: 16px;
  opacity: 0.5;
  margin-right: 5px;
}


Последним этапом будет оформление последнего раздела этой колонки, раздела с ценой товара. (отвечает класс '.product-price')

Код

/* Product Price */
.product-price {
  display: flex;
  align-items: center;
}
   
.product-price span {
  font-size: 26px;
  font-weight: 300;
  color: #43474D;
  margin-right: 20px;
}
   
.cart-btn {
  display: inline-block;
  background-color: #7DC855;
  border-radius: 6px;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  padding: 12px 30px;
  transition: all .5s;
}
.cart-btn:hover {
  background-color: #64af3d;
}


С помощью стилей ниже, добавим адаптивности странице:

Код

/* Responsive */
@media (max-width: 940px) {
  .container {
  flex-direction: column;
  margin-top: 60px;
  }
   
  .left-column,
  .right-column {
  width: 100%;
  }
   
  .left-column img {
  width: 300px;
  right: 0;
  top: -65px;
  left: initial;
  }
}
   
@media (max-width: 535px) {
  .left-column img {
  width: 220px;
  top: -85px;
  }
}


JS

Последнее , что нам нужно сделать, это реализовать смену изображений наушников в зависимости от выбранного цвета инпута, чтобы для определенного инпута выводилось изображение наушников того же цвета. Это мы будем делать с помощью jQuery, поэтому эту библиотеку обязательно нужно подключить на странице с товаром. А также скрипт, обрабатывающий класс '.active' для выбранного инпута.

Код

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
  <script src="script.js" charset="utf-8"></script>


Собственно, содержимое данного скрипта (script.js):

Код

$(document).ready(function() {
   
  $('.color-choose input').on('click', function() {
  var headphonesColor = $(this).attr('data-image');
   
  $('.active').removeClass('active');
  $('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');
  $(this).addClass('active');
  });
   
});
Обсуждение материала:
Комментариев: 0
avatar

Теги материала:

Хостинг от uCoz