демоверсия
Крутите колесо
Сейчас узнаем, какой подарок выпадет именно Вам
Как добавить блок тарифа PL310 в аккордеон TX16N в Tilda
Lemon meringue 1
€6
Baked meringue with lemon ice cream and lemon curd sauce
Apple tart 1
€10
Baked apple tart with vanilla ice cream
Mini chocolate truffles 1
€8
With a liquid caramel centre
Cherry ice cream 1
€8
Vanilla ice cream with meringue and a warm cherry sauce
Frozen berries 1
€10
Mixed berries with yoghurt sorbet
Apple ice cream 1
€8
Vanilla ice cream with apples and caramel sauce
Lemon meringue 2
€6
Baked meringue with lemon ice cream and lemon curd sauce
Apple tart 2
€10
Baked apple tart with vanilla ice cream
Mini chocolate truffles 2
€8
With a liquid caramel centre
Cherry ice cream 2
€8
Vanilla ice cream with meringue and a warm cherry sauce
Frozen berries 2
€10
Mixed berries with yoghurt sorbet
Apple ice cream 2
€8
Vanilla ice cream with apples and caramel sauce
Lemon meringue 3
€6
Baked meringue with lemon ice cream and lemon curd sauce
Apple tart 3
€10
Baked apple tart with vanilla ice cream
Mini chocolate truffles 3
€8
With a liquid caramel centre
Cherry ice cream 3
€8
Vanilla ice cream with meringue and a warm cherry sauce
Frozen berries 3
€10
Mixed berries with yoghurt sorbet
Apple ice cream 3
€8
Vanilla ice cream with apples and caramel sauce

Как добавить блок тарифа PL310 в аккордеон TX16N в Tilda

1
Создали TX16N на 3 вкладки 12 колонок и задали ему класс uc-accord-1
2
Создали 3 блока PL310N 6+6 колонок
  • первому блоку задали класс uc-tariff-1
  • второму блоку задали класс uc-tariff-2
  • третьему блоку задали класс uc-tariff-3
3
Добавили на страницу блок Т123
Вставили в него код
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Формируем прайс в блоке TX16N на базе блока PL310.
Перемещаем во все или в конкретную вкладку.
Фрагмент видео
Библиотека для примера
<script>
(function () {
    const ACCORDION_SELECTOR = ".uc-accord-1";
    const TARIFF_BY_TAB = {
        1: "uc-tariff-1",
        2: "uc-tariff-2",
        3: "uc-tariff-3"
    };

    const script = document.currentScript;
    const codeBlock = script && script.closest(".r");

    function isBefore(first, second) {
        return Boolean(first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING);
    }

    function placeTariffsInAccordion() {
        if (!codeBlock || !document.documentElement.contains(codeBlock)) return;

        const accordion = document.querySelector(ACCORDION_SELECTOR);
        if (!accordion || !isBefore(accordion, codeBlock)) return;

        const panels = accordion.querySelectorAll(".t585__content");

        Object.keys(TARIFF_BY_TAB).forEach(function (tabNumber) {
            const className = TARIFF_BY_TAB[tabNumber];

            const panel = panels[Number(tabNumber) - 1];
            const target = panel && panel.querySelector(".t585__text");

            if (!target) {
                console.warn(
                    "[accordion] вкладка №" + tabNumber +
                    " не найдена (всего вкладок: " + panels.length + ")"
                );
                return;
            }

            const tariff = Array.from(document.querySelectorAll("." + className)).find(function (item) {
                return isBefore(accordion, item) &&
                    isBefore(item, codeBlock) &&
                    !accordion.contains(item);
            });

            if (!tariff) {
                console.warn("[accordion] тариф ." + className + " не найден перед блоком кода");
                return;
            }

            target.replaceChildren(tariff);
        });
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", placeTariffsInAccordion, { once: true });
    } else {
        placeTariffsInAccordion();
    }
})();
</script>

<style>
[class*="uc-accord-"]  .t812__col {
    padding: 0 20px;
    margin: 0;
    box-sizing: border-box;
}
</style>
Made on
Tilda