Перейти к содержанию
olorin

Изменение иконки корзины при клике на "купить"

Рекомендуемые сообщения

Доброго времени суток. Сразу говорю что в js я нуб. Суть такова: есть две картинки карзины одна пустая другая полная. При клике на кнопку "купить" нужно чтобы картинка в шапке сайта пустой корзины менялась на картинку полной соответственно. НО! хоть в js я ноль без палочки понимаю проблему реализации сего действия т.к. картинка корзины задана через before т.е. картинка это псевдоэлемент который находится вне DOM-дерева.Что подскажете, товарищи форумчане-знатоки?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
8 минут назад, whiteblue сказал:

как здесь? http://shtorstock.com.ua/2098

так там же иконка корзины не меняется

либо я не замечаю чего то...Там скорее фон меняется 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Только что, olorin сказал:

так там же иконка корзины не меняется

либо я не замечаю чего то...Там скорее фон меняется 

фон, но принцип тот же....

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
17 минут назад, whiteblue сказал:

фон, но принцип тот же....

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Всем привет!

Есть похожий вопрос. Помогите кто сведущ в js. По идее дело пустяковое, но мне сложно(((

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

<button type="button" data-toggle="dropdown" data-loading-text="<?php echo $text_loading; ?>" class="btn my-btn-cart btn-block btn-lg dropdown-toggle"><img src="image/catalog/mycart.png"><span id="cart-total"><?php echo $text_items; ?></span></button>

Версия opencart 2.3.0.2

Теперь решил вывести надпись с количеством товаров под корзиной. Вот так:

<button type="button" data-toggle="dropdown" data-loading-text="<?php echo $text_loading; ?>" class="btn my-btn-cart btn-block btn-lg dropdown-toggle"><img src="image/catalog/mycart.png"></button>
  <span id="cart-total"><?php echo $text_items; ?></span>

И все хорошо, пока не нажимать купить!

В файле common.js есть функция, которая меняет код:

// Need to set timeout otherwise it wont update the total
					setTimeout(function () {
						$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
					}, 100);

Если я правильно понимаю, то этот кусок ищет тег button в id cart и добавляет стандартную иконку и надпись.

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

 

Как правильно изменить эту функцию?? (встречается она 4 раза в коде js и реагирует на разные события)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Получилось). Не изящно, но просто)

Добавляем перенос строки в cart.tpl и common.js

Вот так будет:

/*cart.tpl*/
<button type="button" data-toggle="dropdown" data-loading-text="<?php echo $text_loading; ?>" class="btn my-btn-cart btn-block btn-lg dropdown-toggle"><img src="image/catalog/mycart.png"><br><span id="cart-total"><?php echo $text_items; ?></span></button>

/*common.js*/
// Need to set timeout otherwise it wont update the total
					setTimeout(function () {
						$('#cart > button').html('<img src="image/catalog/mycart.png"><br><span id="cart-total">' + json['total'] + '</span>');
					}, 100);

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.