демоверсия
Крутите колесо
Сейчас узнаем, какой подарок выпадет именно Вам
Как показать в карточке, что товар добавлен в корзину в Tilda
 

Как показать в карточке, что товар добавлен в корзину в Tilda

1
Создали блок с товарами ST340A
2
Добавили код в блок Т123 в обычный и продуктовый footer
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Как показать в карточке, что товар добавлен в корзину в Tilda
Фрагмент видео
Библиотека для примера
<script>
(function () {
  'use strict';


  var productSelector = '.js-product';
  var priceSelector = '.js-catalog-price-wrapper, .js-store-price-wrapper, .t-store__prod-popup__price-wrapper, .t-store__prod__price-wrapper, .t-store__product-snippet__price-wrapper, .js-product-price, .js-catalog-prod-price-val';
  var iconUrl = 'https://static.tildacdn.com/tild3230-3661-4564-a262-323439636266/shopping-cart-verifi.svg';
  var refreshPending = false;
  

  function readProducts() {
    try {
      if (window.tcart && Array.isArray(window.tcart.products)) return window.tcart.products;
      var saved = localStorage.getItem('tcart');
      var parsed = saved && JSON.parse(saved);
      if (Array.isArray(parsed)) return parsed;
      if (parsed && Array.isArray(parsed.products)) return parsed.products;
    } catch (e) {}
    return [];
  }

  function values(obj, keys) {
    return keys.map(function (key) {
      return obj && obj[key] != null ? String(obj[key]).trim() : '';
    }).filter(Boolean);
  }

  function quantityFor(node, products) {
    var ids = values(node.dataset, ['productGenUid', 'productUid', 'productLid']);
    var total = 0;
    products.forEach(function (item) {
      if (!item || typeof item !== 'object' || item.deleted === 'yes') return;
      var itemIds = values(item, ['gen_uid', 'uid', 'product_uid', 'productid']);
      if (!ids.some(function (id) { return itemIds.indexOf(id) !== -1; })) return;
      var quantity = Number(item.quantity != null ? item.quantity : item.count);
      if (Number.isFinite(quantity) && quantity > 0) total += quantity;
    });
    return total;
  }

  function updateStatus(node, quantity) {
    var status = node.querySelector('.cart-status');
    if (!quantity) {
      if (status) status.remove();
      return;
    }

    var price = node.querySelector(priceSelector);
    if (!price) {
      if (status) status.remove();
      return;
    }

    if (!status) {
      status = document.createElement('span');
      status.className = 'cart-status t-text';
      status.setAttribute('role', 'status');
      status.setAttribute('aria-live', 'polite');
      var icon = document.createElement('img');
      icon.className = 'cart-status__icon';
      icon.src = iconUrl;
      icon.alt = '';
      icon.setAttribute('aria-hidden', 'true');
      var label = document.createElement('span');
      label.className = 'cart-status__text';
      status.appendChild(icon);
      status.appendChild(label);
    }

    if (status.previousElementSibling !== price) {
      price.insertAdjacentElement('afterend', status);
    }

    var label = status.querySelector('.cart-status__text');
    var text = 'В корзине ' + quantity + ' шт';
    if (label && label.textContent !== text) label.textContent = text;
  }

  function refresh() {
    refreshPending = false;
    var products = readProducts();
    document.querySelectorAll(productSelector).forEach(function (node) {
      updateStatus(node, quantityFor(node, products));
    });
  }

  function scheduleRefresh() {
    if (refreshPending) return;
    refreshPending = true;
    Promise.resolve().then(refresh);
  }

  function refreshAfterPopup() {
    scheduleRefresh();
    if (typeof window.requestAnimationFrame === 'function') {
      window.requestAnimationFrame(scheduleRefresh);
    }
  }

  function hookCartFunction(name) {
    var original = window[name];
    if (typeof original !== 'function' || original._cartStatusHooked) return;
    var wrapped = function () {
      var result = original.apply(this, arguments);
      scheduleRefresh();
      return result;
    };
    wrapped._cartStatusHooked = true;
    window[name] = wrapped;
  }

  function hookCartFunctions() {
    ['tcart__loadLocalObj', 'tcart__saveLocalObj'].forEach(hookCartFunction);
  }

  function whenCartFunctionLoads(name) {
    if (typeof window.t_onFuncLoad === 'function') {
      window.t_onFuncLoad(name, function () { hookCartFunction(name); });
    } else {
      hookCartFunction(name);
    }
  }

  function start() {
    hookCartFunctions();
    refresh();
    whenCartFunctionLoads('tcart__loadLocalObj');
    whenCartFunctionLoads('tcart__saveLocalObj');

    var popupShownEvent = window.t_catalog_POPUP_SHOWED_EVENT_NAME || 'catalog:popupShowed';
    document.addEventListener(popupShownEvent, refreshAfterPopup);
    window.addEventListener(popupShownEvent, refreshAfterPopup);

    document.addEventListener('click', function (event) {
      if (event.target.closest('.t706__product-deleted__timer__return, .t706__product-del, .t706__product-plus, .t706__product-minus, .t706__product-quantity, a[href^="#order"]')) {
        scheduleRefresh();
      }
    }, true);

    document.addEventListener('focusout', function (event) {
      if (event.target.matches('.t706__product-quantity-inp')) scheduleRefresh();
    }, true);

    document.addEventListener('change', function (event) {
      if (event.target.matches('.t706__product-quantity-inp')) scheduleRefresh();
    }, true);

    document.addEventListener('storage', function (event) {
      if (!event.key || event.key === 'tcart') scheduleRefresh();
    });

    var productObserver = new MutationObserver(function (records) {
      var relevant = records.some(function (record) {
        return Array.prototype.some.call(record.addedNodes, function (node) {
          return node.nodeType === 1 && (node.matches(productSelector) || node.querySelector(productSelector));
        }) || Array.prototype.some.call(record.removedNodes, function (node) {
          return node.nodeType === 1 && (node.matches(productSelector) || node.querySelector(productSelector));
        });
      });
      if (relevant) scheduleRefresh();
    });
    productObserver.observe(document.body, { childList: true, subtree: true });
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
  else start();
})();
</script>

<style>
.cart-status {
  font-size: 14px;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  color: #267247;
  padding-top: 10px;
}
.t-catalog__card__title-price-row:has(.cart-status) {
    flex-wrap: wrap;
}

.cart-status__icon { 
    display: block; 
    width: 16px; 
    height: 16px; 
}
</style>
Made on
Tilda