Своя ссылка для кнопки «Добавить в корзину» (BUY NOW) в карточке товара

В Тильде по умолчанию можно задать свои ссылки только в кнопках витрины товаров, не подключённой к каталогу. Внутри же нас всегда ждёт одна и та же кнопка «В корзину». Текст этой кнопки можно поменять в контенте витрины товаров. А ссылку поменять вообще нельзя.

Но существуют кейсы, когда витрина используется не по назначению или просто попап с товаром нужен для информирования. В таких случаях хочется задать кнопке свою ссылку.

С помощью этой модификации вы сможете это сделать, как в попапе карточки товара витрины магазина, так и на отдельной странице. Посмотреть пример модификации можно ниже.

Помимо этого следует помнить, что, если вы обновите страницу с открытым попапом, то откроется карточка товара с хэдером и футером, которые вы задали в каталоге (даже, если у вас выключено свойство «Открывать товары в окне»). Поэтому инструкция будет разделена на две части: для попапа и для карточки товара. Если вам всё-равно на случаи открытия карточки в отдельном окне, можете пропустить вторую часть.

Выберите, где именно у вас добавлены товары: в каталоге или в самом блоке.
Впишите ID блока витрины магазина или класс. С помощью класса можно применить скрипт сразу к нескольким витринам с одинаковым классом. Как добавить класс, читайте тут.
Пропишите ссылку на страницу или попап.
Если вписали ссылку, то выберите, как она должна открываться: в том же окне или в новом.
Скопируйте полученный код и вставьте под блок (-и) с витриной или внизу страницы.

<!-- Своя ссылка для кнопки «Добавить в корзину» (BUY NOW) в карточке товара (попап) | https://necodim.ru/tilda/change-product-popup-button -->

 <script> document.querySelectorAll('#rec123456789 .js-store-grid-cont, #rec123456789 .js-catalog-grid-cont').forEach(store => {
    store.addEventListener('tStoreRendered', () => {
        store.addEventListener('click', () => {
            const btnLink = 'https://necodim.ru/';
            if (btnLink.startsWith('#')) {
                const popup = document.querySelector('[data-tooltip-hook="' + btnLink + '"]');
                if (popup) {
                    popup.style.zIndex = 10000002;
                }
            }
            const popupBtnWrapper = document.querySelector('.t-store__prod-popup__btn-wrapper') || document.querySelector('.t-catalog__prod-popup__btn-wrapper');
            const popupBtn = popupBtnWrapper.querySelector('.t-store__prod-popup__btn') || popupBtnWrapper.querySelector('.t-catalog__prod-popup__btn');
            popupBtn.classList.remove('t-store__prod-popup__btn_disabled', 't-catalog__prod-popup__btn_disabled');
            popupBtn.setAttribute('href', btnLink);
        }, { once: true });
    });
}); </script>

Скопировать код

Скрипт, представленный ниже, скопируйте и вставьте в футер товара. Если у вас ещё нет такой страницы, создайте её, вставьте скопированный скрипт в блок T123, перейдите в раздел «Товары» и в настройках задайте футер для товаров, выбрав созданную страницу. После чего опубликуйте все страницы сайта.

Товары не будут открываться на отдельной странице, однако это позволит избежать казусов, описанных выше.

<!-- Своя ссылка для кнопки «Добавить в корзину» (BUY NOW) на странице товара | https://necodim.ru/tilda/change-product-popup-button --> <script>
t_onReady(() => {
    const btnLink = 'https://necodim.ru/';

    function waitForElement(selectors, ttl = 30000) {
        return new Promise((resolve, reject) => {
            const find = () => {
                for (const sel of selectors) {
                    const el = document.querySelector(sel);
                    if (el) return el;
                }
                return null;
            };

            const existing = find();
            if (existing) {
                resolve(existing);
                return;
            }

            let timeoutId;

            const observer = new MutationObserver(() => {
                const el = find();
                if (el) {
                    clearTimeout(timeoutId);
                    observer.disconnect();
                    resolve(el);
                }
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true,
            });

            timeoutId = setTimeout(() => {
                observer.disconnect();
                reject(new Error('Элемент не появился за отведённое время (TTL)'));
            }, ttl);
        });
    }

    const wrapperSelectors = [
        '#rec123456789 .t-store__prod-popup__btn-wrapper',
        '.t-store__prod-snippet__container .t-store__prod-popup__btn-wrapper',
        '#rec123456789 .t-catalog__prod-popup__btn-wrapper',
    ];

    waitForElement(wrapperSelectors, 30000)
        .then((popupBtnWrapper) => {
            const popupBtn =
                popupBtnWrapper.querySelector('.t-store__prod-popup__btn') ||
                popupBtnWrapper.querySelector('.t-catalog__prod-popup__btn') ||
                popupBtnWrapper.querySelector('[href="#order"]');

            if (!popupBtn) {
                console.warn('Wrapper найден, но кнопка внутри отсутствует');
                return;
            }

            popupBtn.classList.remove(
                't-store__prod-popup__btn_disabled',
                't-catalog__prod-popup__btn_disabled'
            );
            popupBtn.setAttribute('href', btnLink);
        })
        .catch((err) => {
            console.warn('[Necodim]', err.message);
        });
});
</script>