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

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

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

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

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

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

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

<script>
document.querySelectorAll('#rec123456789 .js-store-grid-cont').forEach(store => {
    store.addEventListener('tStoreRendered', () => {
        const btnLink = 'https://necodim.ru/';
        const popupBtnWrapper = document.querySelector('.t-store__prod-popup__btn-wrapper');
        const popupBtn = popupBtnWrapper.querySelector('.t-store__prod-popup__btn');
        popupBtn.classList.remove('t-store__prod-popup__btn_disabled');
        popupBtn.setAttribute('href', btnLink);
    });
});
</script>

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

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

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

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

<script>
t_onReady(() => {
    const btnLink = 'https://necodim.ru/';
    const popupBtnWrapper = document.querySelector('#rec123456789 .t-store__prod-popup__btn-wrapper');
    const popupBtn = popupBtnWrapper.querySelector('.t-store__prod-popup__btn');
    popupBtn.classList.remove('t-store__prod-popup__btn_disabled');
    popupBtn.setAttribute('href', btnLink);
});
</script>