Иконка Корзины В Кнопке "в Корзину"

Разработчикам Фронтенд
1

Здравствуйте! Подскажите как добавить иконку корзины в кнопку "В корзину" перед текстом "В корзину"

2

Здравствуйте! Подскажите как добавить иконку корзины в кнопку "В корзину" перед текстом "В корзину"

вот так https://prnt.sc/gf1ypf

3

Здравствуйте! Подскажите как добавить иконку корзины в кнопку "В корзину" перед текстом "В корзину"

Здравствуйте! Нужно повесить на кнопку стиль, примерно такой:

.ty-btn__add-to-cart {
    background-image: url('путь_до_картинки');
    background-position: left center;
    background-repeat: no-repeat;
}
4

Здравствуйте! Нужно повесить на кнопку стиль, примерно такой:

.ty-btn__add-to-cart {
    background-image: url('путь_до_картинки');
    background-position: left center;
    background-repeat: no-repeat;
}

как вариант, но это немного не то, хочется использовать иконку а не картинку...

5

как вариант, но это немного не то, хочется использовать иконку а не картинку...

Добавьте кнопке класс ty-icon-moon-commerce

Возможно, потребуются доп. стили, т.к. шрифт кнопки может поменяться

6

Добавьте кнопке класс ty-icon-moon-commerce

Возможно, потребуются доп. стили, т.к. шрифт кнопки может поменяться

Я так понял что в файле responsive / templates / buttons / button.tpl надо просто куда-то вставить ty-icon-moon-commerce"> только не пойму куда...

7

только не пойму куда...


Внутри button нельзя вставить html, поэтому вешайте на саму кнопку
8

Внутри button нельзя вставить html, поэтому вешайте на саму кнопку

так в том-то и дело что не пойму как прикрутить иконку к кнопке

9

так в том-то и дело что не пойму как прикрутить иконку к кнопке

Попробуйте добавить в секцию CSS редактора тем

.ty-btn__add-to-cart:before {
    content: "\e900";
    font-family: icomoon;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
}
10

Я реализовал это так:

Во первых подключил fontawesome:

Скопировать font-awesome.less в design/themes/responsive/css/addons/<название модуля>

Скопировать: FontAwesome.otf, fontawesome-webfont.eot, fontawesome-webfont.svg, fontawesome-webfont.ttf, fontawesome-webfont.woff и fontawesome-webfont.woff2 в design/themes/responsive/media/fonts/addons/<название модуля>

Добавить строку {style src="addons/design_td_posad/font-awesome.less"} в файл design/themes/responsive/templates/addons/<название модуля>/hooks/index/styles.post.tpl

Во вторых переопределил шаблон кнопки add_to_cart.tpl, создав файл в design/themes/responsive/templates/addons/<название модуля>/overrides/buttons

В нём изменил подключения шаблона кнопки:

{include file="buttons/my_add_to_cart_button.tpl"......

В файле my_add_to_cart_button.tpl добавил <i class="fa fa-shopping-cart" aria-hidden="true"></i> перед {$but_text}</button>

Вот и всё.

Не знаю, на сколько верный подход, но иконок теперь гораздо больше и вариаций кнопок за счёт собственных шаблонов тоже.

11

Попробуйте добавить в секцию CSS редактора тем

.ty-btn__add-to-cart:before {
    content: "\e900";
    font-family: icomoon;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
}

Спасибо, то что надо, работает)

12

Спасибо, то что надо, работает)

Рад был помочь!