Управление видимостью полей в корзине через скрипт

Зачастую при работе с Тильдой не хватает каких то функций, однако их можно решить путем внедрения дополнительного кода. Во время выполнения проекта необходимо было в корзине показывать поле при добавлении определенного товара.
То есть процесс такой. У товара есть 3 опции, 2 из них это четко установленные размеры, а третья опция — это заказать «Свой размер«. И тогда при добавлении товара с третьей опцией в корзину должно появиться поле с возможностью ввода своих размеров. Демонстрация итоговой работы

Для карточки товара в POP-UP

Итак, как это реализовать.
Переходим на страницу каталога товаров где расположен блок корзины и нажимаем кнопку «Контент»

Далее добавляем поле для ввода, заполняем его своими данными. Я покажу на примере своей задачи. Присваиваем заголовок поля, указываем размер в количестве строк — у меня 4 строки, у вас может быть в одну строку, как вам удобно. И заполняем подсказку для значения. На этом создание поля окончено, нажимаем на кнопку «Сохранить и закрыть».

Теперь на странице с корзиной нам нужно добавить html блок. Для этого добавляем новый блок с индексом T123. После добавления переходим в «Контент» и добавляем следующий скрипт

<script>
document.addEventListener("DOMContentLoaded", () => {
  document.querySelector(".t706__carticon").onclick = function(){
      setTimeout(function() {
        let productname = document.querySelectorAll('.t706__product-title__option > div');
        result = [];
        for (var i = 0; i < productname.length; i++) {
            result.push(productname[i].textContent);
        }
        // Здесь Размер: Свой размер является условием поиска
        if ((result.indexOf("Размер: Свой размер") > -1)) {
            document.querySelector('div.t-input-group_ta:nth-child(1)').style.visibility = "visible";
            document.querySelector('div.t-input-group_ta:nth-child(1)').style.display = "block";
        }
        else {
            document.querySelector('div.t-input-group_ta:nth-child(1)').style.visibility = "hidden";
            document.querySelector('div.t-input-group_ta:nth-child(1)').style.display = "none";
        }
      }, 500);
  }  
});
</script>

Теперь объясню смысл по порядку.

<script>
document.addEventListener("DOMContentLoaded", () => {

Ожидаем когда полностью загрузиться страница, чтобы в коде появились все классы элементов

  document.querySelector(".t706__carticon").onclick = function(){

Присваиваем стандартной иконке с корзиной (имеет класс t706__carticon) собственную функцию, которая запускается при нажатии (onclick) на иконку

      setTimeout(function() {
........
      }, 500);

Устанавливаем задержку выполнения — 500 мс при нажатии на иконку корзины. Необходимо для того чтобы Тильда успела выполнить обновление товаров в корзине

        let productname = document.querySelectorAll('.t706__product-title__option > div');

Так как у каждого товара в корзине появляется подпись с типом опции (ее можно найти через класс t706__product-title__option > div), то присваиваем переменной productname массив значений опций всех товаров, или единственное значение, если товар один

        result = [];
        for (var i = 0; i < productname.length; i++) {
            result.push(productname[i].textContent);
        }

Создаем массив result и заполняем его перебором всех значений опций товаров

        // Здесь Размер: Свой размер является условием поиска
        if ((result.indexOf("Размер: Свой размер") > -1)) {
            document.querySelector('div.t-input-group_ta:nth-child(1)').style.visibility = "visible";
            document.querySelector('div.t-input-group_ta:nth-child(1)').style.display = "block";
        }

Так как условие показа поля в корзине является наличие у товара опции «Размер: Свой размер», то мы проверяем условие. Если переменная result содержит нужный нам текст, то мы показываем поле (div.t-input-group_ta:nth-child(1) где nth-child(1) это порядок нашего поля ввода в корзине, в моей задаче данное поле было первым)

        else {
            document.querySelector('div.t-input-group_ta:nth-child(1)').style.visibility = "hidden";
            document.querySelector('div.t-input-group_ta:nth-child(1)').style.display = "none";
        }
      }, 500);
  }  
});
</script>

Если переменная result не содержит нужный нам текст, то мы скрываем поле (div.t-input-group_ta:nth-child(1) где nth-child(1) это порядок нашего поля ввода в корзине, в моей задаче данное поле было первым)

Если ваши товары открываются в POP-UP то на этом все. Если каждый товар открывается на отдельной странице, то читайте ниже

Для карточки товара на отдельной странице

Мы уже добавили скрипт на страницу каталога, где размещена корзина. Теперь нужно создать еще один подвал сайта (footer) и присвоить его только для страниц карточек товаров. Для этого дублируем страницу текущего подвала.
Перейдите на страницу подвала, как правило подвал можно найти на главной управления сайтом

Откройте настройки страницы

Перейдите во вкладку «Действия» и нажмите «Дублировать страницу»

Теперь на главной управления сайтом должна появиться копия страницы. Перейдите в неё нажав на название

Теперь на странице нам нужно добавить html блок. Для этого добавляем новый блок с индексом T123. После добавления переходим в «Контент» и добавляем скрипт, который мы добавляли ранее.

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

Вверху нажимаем на пункт «Настройки»

Во вкладке «ПОДВАЛ ДЛЯ ТОВАРОВ» выбираем нашу скопированную страницу, ставим галочку «Открывать страницу вместо попапа» и нажимаем кнопку «Сохранить»

Опубликовываем все страницы и на этом все настройки закончены

а можете написать мне либо в комментариях, либо оставив заявку через форму на сайте.

Как со мной связаться

Если хотите хорошее и качественное решение под ваш проект и ТЗ, то остается два выхода: либо адаптировать самостоятельно, либо обратиться ко мне за доработкой за отдельную стоимость. Я не фанат подписок поэтому считаю что база должна быть доступна всем.

Пишите https://t.me/vbalakin буду рад помочь с доработкой.