Значки для способов оплаты и доставки интернет магазина
О чем здесь?
Мы научимся устанавливать значки и иконки для способов оплаты и доставки на странице оформления заказа.
Графическая информация в таком случае может положительно сказаться на скорости принятия решения при выборе способов оплаты и доставки.
Рассмотрим добавление иконок FontAwesome, а также произвольных изображений.
Стандартные способы оплаты и доставки
По умолчанию в интернет магазине uCoz перечень способов оплаты или доставки выглядит следующим образом:
Выберите способ оплаты:
Оплата картами Visa и MasterCard (СНГ) без комиссии Оплата производится путём списывания необходимой суммы с вашего баланса в магазине Выгодно для владельцев карт VISA, MasterCard, JCD, Diners Club
FontAwesome
FontAwesome предлагает масштабируемые векторные иконки, которые можно персонализировать — менять размер, цвет, тени и все, что можно сделать силами CSS.
К сожалению, иконок со способами оплаты в FontAwesome не так много, поэтому мы можем добавить следующие: MasterCard, VISA, AmericanExpress, PayPal, оплата при получении.
Вот, как это будет выглядеть:
Выберите способ оплаты:
Онлайн платежи с помощью аккаунта PayPal или банковской карты Оплата картами Visa и MasterCard (СНГ) без комиссии
Просто подключите иконочный шрифт и добавьте следующие стили:
/* Способы оплаты на FontAwesome */
label.label:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
float: left;
font-size: 32px;
margin-right: 10px;
width: 42px;
}
/* PayPal */
label.label[for="pay-type-1"]:before {
content: "\f1ed";
}
/* Банковской картой */
label.label[for="pay-type-2"]:before {
content: "\f283";
}
/* Наличными при получении */
label.label[for="pay-type-3"]:before {
content: "\f0d6";
}
Обратите внимание на фрагмент for="pay-type-3" в селекторах. Здесь цифра 3 — это id способа оплаты, который можно посмотреть в панели управления.
Еще один момент, откуда взять код значка, чтобы подставить его в свойство content? Перейдите на сайт FontAwesome и выберите интересующую иконку. Затем посмотрите ее свойство CSS для псевдокласса :before:
Есть еще один способ узнать содержимое content: задать вопрос в комментариях :)
Свои иконки
В случае со своими иконками, понадобятся изображения способов оплаты и доставки. Найдите в интернете изображения, которые можно использовать в коммерческих целях или закажите у дизайнера.
Страница оформления заказа будет выглядеть следующим образом:
Выберите способ оплаты:
Онлайн платежи с помощью аккаунта PayPal или банковской карты Оплата с R-кошельков Агрегатор платежных систем
В CSS при этом нужно добавить следующие стили:
label.label:before {
display: block;
float: left;
margin-right: 10px;
width: 48px;
height: 32px;
}
label.label[for="pay-type-1"]:before {
content: '';
background: url('http://ucozmagazines.ru/bs/img/paypal.png') no-repeat;
}
label.label[for="pay-type-2"]:before {
content: '';
background: url('http://ucozmagazines.ru/bs/img/webmoney.png') no-repeat;
}
label.label[for="pay-type-3"]:before {
content: '';
background: url('http://ucozmagazines.ru/bs/img/qiwi.png') no-repeat;
}
label.label[for="pay-type-4"]:before {
content: '';
background: url('http://ucozmagazines.ru/bs/img/robokassa2.png') no-repeat;
}
Подставьте свои изображения в свойства у селекторов с pay-type-*. Сколько способов оплаты — столько изображений потребуется описать.
В способах доставки стили будут выглядеть аналогично:
label.label[for="del-type-1"]:before {
content: '';
background: url('ваше изображение') no-repeat;
}
label.label[for="del-type-2"]:before {
content: '';
background: url('ваше изображение') no-repeat;
}
...
Статьи по теме
Оцените материал:
Обсуждение
Всего комментариев: 6
