<style>
:root{
/*Стилизация иконок корзины и избранного*/
--borderRadius: 8px; /*Радиус скругления углов у иконки корзины или избранного*/
--marginIcon: 6px; /*Отступы вокруг иконки*/
--scaleHover: 1.1; /*Увеличение иконки корзины и избранного при наведении*/
--transitionHover: all 0.3s ease-in; /*Плавность анимации при наведении*/
/*Лейбл с итоговой суммой в корзине*/
--displaySumm: block; /*Скрыть информацию о сумме в корзине, block – отобразить, none – скрыть*/
--borderLabelSumm: 8px; /*Радиус скругления лейбла*/
--fontSizeLabelSumm: 14px; /*Размер текста внутри лейбла*/
--rightLabelSumm: 110%; /*Отступ справа, настройка для позицонирования лейбла относительно иконки корзины*/
--marginTopBottomLabelSumm: 4px; /*Отступы сверху и снизу внутри лейбла с итоговой суммой*/
--marginLeftRightLabelSumm: 8px; /*Отступы слева и справа внутри лейбла с итоговой суммой*/
/*Лейбл с количеством товаров*/
--topLabelCounter: -6px; /*Позиционирование лейбла относительно верха иконки*/
--rightLabelCounter: -6px; /*Позиционирование лейбла относительно правой стороны иконки*/
--paddingLabelCounter: 4px 6px; /*Отступы внутри лейбла с количеством товаров*/
--fontSizeCounter: 11px; /*Размер текста внутри лейбла с количеством добавленных товаров*/
}
/*----------Стилизация корзины----------*/
.t706__carticon {
display: block;
position: relative;
top: 0;
left: 0;
}
.t706__body_cartwinshowed .t706__carticon{
display: block !important;
}
.t706__carticon-wrapper {
width: 100% !important;
height: 100% !important;
}
.t706__carticon {
width: inherit;
height: inherit;
}
.t706__carticon-imgwrap {
width: 100%;
height: 100%;
border-radius: var(--borderRadius);
}
.t706__carticon-imgwrap:hover{
transform: scale(1) !important;
}
.t706__carticon-counter {
min-width: auto;
height: auto;
padding: var(--paddingLabelCounter);
bottom: inherit;
top: -5px;
right: -5px;
line-height: 1;
font-size: var(--fontSizeCounter);
}
.t706__bgimg {
margin: var(--marginIcon);
}
.t706__carticon-text {
display: none !important;
}
.t706__carticon-wrapper {
width: 100% !important;
height: 100% !important;
}
.t706__carticon {
width: inherit;
height: inherit;
transition: var(--transitionHover) !important;
}
.t706__carticon-imgwrap {
width: 100% !important;
height: 100% !important;
border-radius: var(--borderRadius);
box-shadow: none;
}
.t706__carticon-counter {
min-width: auto !important;
height: auto !important;
padding: var(--paddingLabelCounter) !important;
bottom: inherit !important;
top: var(--topLabelCounter) !important;
right: var(--rightLabelCounter) !important;
}
.t706__carticon:hover{
scale: var(--scaleHover) !important;
}
.t706__carticon.t706__carticon_showed.t706__carticon_neworder{
transform: scale(1) !important;
}
.t706__carticon-text:after {
display: none;
}
/*Сумма товаров в корзине*/
.t706__carticon-text {
padding: 0 !important;
opacity: 1 !important;
display: block !important;
width: fit-content;
height: auto;
line-height: 1;
align-content: center;
font-size: var(--fontSizeLabelSumm);
border-radius: var(--borderLabelSumm);
display: var(--displaySumm) !important;
right: var(--rightLabelSumm) !important;
}
.t706__cartwin-prodamount-price {
margin-left: var(--marginLeftRightLabelSumm);
margin-top: var(--marginTopBottomLabelSumm);
margin-bottom: var(--marginTopBottomLabelSumm);
}
.t706__cartwin-prodamount-currency {
margin-right: var(--marginLeftRightLabelSumm);
}
/*------------------------------------------*/
/*----------Стилизация избранного----------*/
.t1002__wishlisticon {
top: 0;
left: 0;
position: relative;
display: block !important;
transition: var(--transitionHover) !important;
}
.t1002__wishlisticon:hover{
scale: var(--scaleHover);
}
.t1002__body_wishlistwinshowed .t1002__wishlisticon{
display: block;
}
.t1002__wishlisticon-imgwrap {
width: 100% !important;
height: 100% !important;
border-radius: var(--borderRadius);
box-shadow: none;
}
.t1002__wishlisticon-imgwrap:hover{
transform: scale(1) !important;
}
.t1002__wishlisticon-wrapper {
width: 100%;
height: 100%;
transition: var(--transitionHover);
}
.t1002__wishlisticon {
width: inherit;
height: inherit;
right: 0;
}
.t1002__wishlisticon-counter {
padding: var(--paddingLabelCounter) !important;
height: auto !important;
width: auto !important;
bottom: inherit !important;
top: var(--topLabelCounter) !important;
right: var(--rightLabelCounter) !important;
line-height: 1 !important;
font-size: var(--fontSizeCounter) !important;
}
.t1002__bgimg {
margin: var(--marginIcon);
}
/*------------------------------------------*/
</style> <script>
document.addEventListener("DOMContentLoaded", function() {
const cartIcon = document.querySelector('.t706__carticon');
const wishlistIcon = document.querySelector('.t1002__wishlisticon');
const cartTarget = document.querySelector('.cart');
const favTarget = document.querySelector('.fav');
const moveElement = (element, target) => {
if(element && target) {
target.appendChild(element);
}
};
moveElement(cartIcon, cartTarget);
moveElement(wishlistIcon, favTarget);
const observeElement = (element, callback) => {
if (!element) return;
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'childList') {
callback();
}
});
});
observer.observe(element, {childList: true, subtree: true});
};
observeElement(cartIcon, () => moveElement(cartIcon, cartTarget));
observeElement(wishlistIcon, () => moveElement(wishlistIcon, favTarget));
const updateCounters = () => {
const counters = document.querySelectorAll('.t706__carticon-counter, .t1002__wishlisticon-counter');
counters.forEach((counter) => {
if (counter.textContent.trim() === '') {
counter.textContent = '0';
}
});
};
updateCounters();
const removeFirstTextNodeFromElement = (element) => {
const textNode = [...element.childNodes].find(node => node.nodeType === Node.TEXT_NODE);
if (textNode) {
element.removeChild(textNode);
}
};
const observer = new MutationObserver((mutations, obs) => {
mutations.forEach(mutation => {
if(mutation.type === 'childList' || mutation.type === 'characterData') {
updateCounters();
}
mutation.addedNodes.forEach((node) => {
if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('t706__carticon-text')) {
removeFirstTextNodeFromElement(node);
}
node.querySelectorAll && node.querySelectorAll('.t706__carticon-text').forEach(subNode => {
removeFirstTextNodeFromElement(subNode);
});
});
});
});
const config = { childList: true, characterData: true, subtree: true };
observer.observe(document.body, config);
});
</script>