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

Зачастую при работе с Тильдой не хватает каких то функций, однако их можно решить путем внедрения дополнительного кода. Во время выполнения проекта необходимо было в корзине показывать поле при добавлении определенного товара.
То есть процесс такой. У товара есть 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. После добавления переходим в «Контент» и добавляем скрипт, который мы добавляли ранее.

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

Работа с карточкой товара в Тильда

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

Видимость полей корзины через скрипт

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

Видимость полей корзины через скрипт

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

Заключение

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

  • Промокод на определенный товар Тильда

    Разберем как реализовать активацию промокода только для определенного товара

    Промокод на определенный товар Тильда

  • Третья часть статьи о том как создать онлайн школу на тильде с нуля. Без больших вложений и технических знаний.

    Читать третью часть цикла статей «Как создать онлайн школу на тильде»

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

    Добавить комментарий

    Ваш адрес email не будет опубликован.