|
Количество
|
Стоимость
|
||
|
|
|||
<script>
function insertCustomBlock() {
// Перевіряємо, чи ми на мобільній версії або десктопі
const seenBlockMobile = document.querySelector('.catalog__seen-items');
const seenBlockDesktop = document.querySelector('.recentProducts');
const catalogMiddle = document.querySelector('.catalog__middle.j-catalog-sticker-parent'); // для десктопа
const existingBlock = document.querySelector('#custom-buttons-block');
if (existingBlock) return; // Якщо блок вже є на сторінці, не додаємо його знову
// Визначаємо, який блок використовувати в залежності від версії
const seenBlock = seenBlockMobile || seenBlockDesktop;
const insertAfterElement = catalogMiddle || seenBlock; // Якщо на десктопі, вставляємо після catalog__middle, на мобільному — після мобільного блоку
// Якщо відповідного блоку немає, припиняємо виконання
if (!insertAfterElement) return;
// Створення першого блоку
const block1 = `
<div id="custom-buttons-block1" style="background-color: #ffffff; padding: 40px 20px; margin: 50px auto; border: 1px solid #ddd; font-family: 'Montserrat', sans-serif; max-width: 1200px;">
<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;">
<div style="flex: 1 1 60%; font-size: 24px; font-weight: 500; line-height: 1.4; color: #000;">
<p style="margin: 0;">Ваш комфорт — наш приоритет. Выбирайте товар и добавляйте в корзину.</p>
<p style="margin: 0;"><strong>А мы позаботимся о деталях!</strong></p>
</div>
<div class="arrow-symbol" style="font-size: 70px; line-height: 1; color: #000; pointer-events: none;">→</div>
<div style="flex: 1 1 30%; text-align: right;">
<a href="/rozdily" style="display: inline-block; background-color: #000; color: #fff; text-decoration: none; font-weight: 700; padding: 15px 30px; font-size: 16px; border-radius: 4px;">КАТАЛОГ</a>
</div>
</div>
</div>
`;
// Створення другого блоку
const block2 = `
<div id="custom-buttons-block2" style="background-color: #ffffff; padding: 40px 20px; margin: 50px auto; border: 1px solid #ddd; font-family: 'Montserrat', sans-serif; max-width: 1200px;">
<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;">
<div style="flex: 1 1 60%; font-size: 24px; font-weight: 500; line-height: 1.4; color: #000;">
<p style="margin: 0;"><strong>Не нашли нужное изделие?</strong></p>
<p style="margin: 0;">Отправляйте свое фото или эскиз от руки, и наша команда воплотит Ваш замысел в реальность.</p>
</div>
<div class="arrow-symbol" style="font-size: 70px; line-height: 1; color: #000; pointer-events: none;">→</div>
<div style="flex: 1 1 30%; display: flex; justify-content: flex-end; gap: 10px;">
<a href="https://t.me/crons_com_ua" target="_blank" style="display: inline-block; padding: 10px; border-radius: 8px; background-color: #ededed; transition: transform 0.3s ease, box-shadow 0.3s ease;">
<img src="https://vladsydorchuk.github.io/htmlcssjs_introduce/images/telegram.png" alt="Telegram" width="32" height="32" />
</a>
<a href="viber://chat?number=+380936553390" target="_blank" style="display: inline-block; padding: 10px; border-radius: 8px; background-color: #ededed; transition: transform 0.3s ease, box-shadow 0.3s ease;">
<img src="https://static.vecteezy.com/system/resources/previews/017/396/829/non_2x/viber-messenger-icon-free-png.png" alt="Viber" width="32" height="32" />
</a>
</div>
</div>
<style>
a[href^="https://t.me/"]:hover,
a[href^="viber://"]:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.arrow-symbol {
display: none !important;
}
}
</style>
</div>
`;
// Вставка блоків після відповідного елемента
insertAfterElement.insertAdjacentHTML('afterend', block2);
insertAfterElement.insertAdjacentHTML('afterend', block1);
}
// Викликаємо функцію, коли DOM готовий
document.addEventListener("DOMContentLoaded", function () {
insertCustomBlock();
});
</script>