Как обновить HTML-атрибут data- * без обновления страницы

Question

У меня есть значок корзины с другим значком, который подсчитывает количество товаров в корзине.Вот код

CSS:

.fa-stack[data-contador]:after{
 position:absolute;
  right:-10%;
  top:-25%;
  content: attr(data-contador);
  font-size:70%;
  padding:.6em;
  border-radius:999px;
  line-height:.75em;
  color: white;
  background:rgba(255,0,0,.85);
  text-align:center;
  min-width:2em;
  font-weight:bold;
}

HTML

<span class="fa-stack fa-1x has-badge" data-contador="MY NUMBER">
   <i class="fas fa-shopping-cart fa-2x"></i>
</span>

Я использую библиотеку корзины из codeigniter и получил это:

<span class="fa-stack fa-1x has-badge" data-cantidad='<?= $this->cart->total_items(); ?>'>
  <i class="fas fa-shopping-cart fa-2x"></i>
</span>

$ this-> cart-> total_items ();возвращает количество элементов

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

Answer 1

Надеюсь, вы используете это только для графического интерфейса, поскольку клиентской стороне нельзя доверять.При этом:

Контроллер:

function get_cart_items() {
    echo json_encode(array('item_count' => $this->cart->total_items()));
    exit();
}

JS:

//<span class="fa-stack fa-1x has-badge" id="cart-count" data-cantidad='<?= $this->cart->total_items(); ?>'>
$('.cart-add').on('click', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'path/to/get_cart_items',
        dataType: 'json',
        success: function (data) {
            $('#cart-count').attr('data-cantidad', data.item_count);
        }
    });
});

Примечание: cart-add - это класс , который будет добавлен клюбые кнопки, которые запускают новый итог (или добавление товара в корзину).cart-count - это id , добавляемый в span / div с атрибутом data-cantidad.

Очевидно, что вам придется включать этот js на любую страницу, которая требует его, а такжезагрузить jquery заранее.