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

[olorin]

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

[whiteblue]

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

[olorin]

8 минут назад, whiteblue сказал:

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

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

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

[whiteblue]

Только что, olorin сказал:

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

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

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

[olorin]

17 минут назад, whiteblue сказал:

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

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

[Sharapov317]

Всем привет!

Есть похожий вопрос. Помогите кто сведущ в 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 и реагирует на разные события)

[Sharapov317]

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

Добавляем перенос строки в 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);

 

[olorin]

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

[Alex111]

On ‎4‎/‎18‎/‎2017 at 9:52 PM, Sharapov317 said:

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

 

Огромное спасибо!!!

Мозг, усердие и целеустремленность!!

Респект!

[fanatic]

В 18.04.2017 в 16:25, olorin сказал:

т.к. картинка корзины задана через before т.е. картинка это псевдоэлемент который находится вне DOM-дерева.

 

 

#id:before{...}
$id_1:before{...}