GPT Помощник
Chat GPT может стать отличным помощником при написании кода для тильды. Если с ним правильно работать и понимать код.

Поэтому, если вы не прошли прошлые уроки, то рекомендую вам пройти их и только потом переходить к данной теме. Все потому-что мы будем использовать термины из прошлых уроков и в целом очень важно уметь дорабатывать код, который выдает GPT. Потому-что нейронка не всегда умеет выдавать то, что нужно.

Давайте приступим!
  1. Начало взаимодействия
Начнем с легких и понятных подсказок для GPT.

Сначала заход, он может быть совсем простой, к примеру спросить реально ли осуществить вашу идею?

Кстати, вот конкретно идея с дропдауном нереальна с тильдовским рендерингом т.к он использует теги select и option, а для нормального дропдауна стоит использовать ul и li.

Поэтому если захотите такое сделать, то или костыльте, или делаете что-то другое.
Конкретно GPT вообще не шарит как устроена тильда, и для его понимания если делать чистым кодом, то все получится, и это действительно так.

Важное правило: GPT не знает какой код выдает тильда, не знает принципы ее верстки, какие теги, атрибуты, и все прочее она имеет. Поэтому смело заходите в инспектор - выделяете элемент - копируйте код и кидаете нейронке, чтоб он понимал с чем имеет дело.
GPT мне кидает готовый код вместе с версткой, думая что прошлый код написал я сам. Это я пишу вам для того, чтобы объяснить как он мыслит, потому-что так в целом устроен код и прежде чем начать доносить нужные смыслы нейронке вам обязательно надо понимать код и пройти все уроки документации.
Что значит динамическое добавление?

Динамическое добавление, это к примеру вы через JS с помощью createElement():
<script>
 let div = document.createElement('div'); //Создали элемент с тегом div
 div.className = "alert"; //Дали ему класс alert
 div.innerHTML = "<strong>Всем привет!</strong> Вы прочитали важное сообщение.";
 //Добавили в него контент
 document.body.append(div); //Вставили элемент в структуру
</script>
То-есть мы не изменяли html, а создали html код через JS. Именно это и есть динамическое создание.

К слову, все зеро блоки создаются динамически, т.е их вначале не существует. Работая в зеро блоке вы добавляете в базу данных огромное количество значений и контента, и при рендеринге тильда коннектится к базе и показывает из всех ваших махинаций - целый блок.

Поэтому обязательно говорим нейронке, что мы не сможем написать html (если не создаем что-то кардинально новое, а не мод). Пишем что можем работать через JS и CSS, и если требуется изменение html, то пусть нейронка пишет динамическое создание.
После этого всего вам GPT может уже выдать на 60-70% хороший рабочий код, но в 40% работать ничего не будет.

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

Еще небольшой лайфхак: нейронка постоянно js и css отделяет друг от друга, потому что на самом деле когда кодеры пишут сайты, то все скрипты и стили хранят в отдельных файлах, поэтому просим, чтобы нейронка все обернула в один код
И вот что мы по итогу получили. Код выдал полностью GPT.

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

А еще вы можете заметить интересную кастомизацию чекбокса. На самом деле это тоже сделано через GPT и давайте рассмотрим какой подход я использовал там.
И вот что мы по итогу получили. Код выдал полностью GPT.

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

А еще вы можете заметить интересную кастомизацию чекбокса. На самом деле это тоже сделано через GPT и давайте рассмотрим какой подход я использовал там.
В самом начале также спросил, возможно ли такое сделать? Подобный элемент называется switch, на самом деле очень важно изначально знать какой элемент, из какого и в какой вы хотите превратить. Именно правильные названия.
GPT выдает базовую html разметку, теперь мы должны посмотреть в инспекторе из чего состоит наш обычный чекбокс, который выдает тильда.
Похожа ли эта разметка на ту, что выдал GPT? Безусловно! И с этим нам конечно очень повезло.

Почему похожа?
  1. Обертка в тегах label
  2. Тег input, который используется с type=checkbox
  3. Есть дополнительный div, который можно использовать на замену <span class="slider"></span>, который выдала нейронка
Понимаете логику? Т.е структуре элемента switch важно, чтобы был еще один элемент, и не важно есть у него класс slider или нет, просто нужен элемент. А какой у него тег span или div еще более не важно, просто потому-что они +- идентичны. Это не те теги, которые кардинально отличаются функционалом, а значит все получится.

Есть конечно еще один элемент span в коде тильды, но можно забить на него, это вероятно span для текста около чекбокса.

Как итог мы имеем структуру, которая схожа со структурой, которую предложил GPT.

Понадобится ли html код, который дал gpt? Нет, не понадобится, у нас тильда добавляет свои классы, и мы будем с ними работать.

Так как мы меняем лишь визуальное представление чекбокса, значит нам нужно поменять лишь CSS, а GPT как раз в этом же сообщении и выдал CSS код с нужными свойствами.
/* Общий стиль для переключателя */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Скрываем стандартный чекбокс */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Стилизуем ползунок */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px; /* Скругляем края */
}

/* Круг внутри переключателя */
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Изменяем цвет, когда чекбокс активен */
input:checked + .slider {
  background-color: #4caf50;
}

/* Перемещаем круг при активном состоянии */
input:checked + .slider:before {
  transform: translateX(26px);
}
Как видите, gpt использует классы своей структуры, а значит у нас 2 варианта

  1. Кинуть ему код нашей структуры, которая сгенерировала тильда
  2. Просто поменять везде классы на идентичные
Я пошел по второму пути и вот что у меня получилось:
<style>
.t-checkbox__indicator {
    height: unset !important;
    width: unset !important;
    border: unset !important;
    margin-right: unset !important;
}

.t-checkbox__control {
    position: relative !important;
    display: inline-block !important;
    width: 50px !important;
    height: 24px !important;
}

.t-checkbox__control .t-checkbox:checked~.t-checkbox__indicator:after {
    display: none !important;
}

.t-checkbox__control input {
  opacity: 0;
  width: 0;
  height: 0;
}

.t-checkbox__indicator {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #ccc !important;
  transition: 0.4s !important;
  border-radius: 34px !important;
}

.t-checkbox__indicator:before {
  position: absolute !important;
  content: "" !important;
  height: 20px !important;
  width: 20px !important;
  left: 2px !important;
  bottom: 2px !important;
  background-color: white !important;
  transition: 0.4s !important;
  border-radius: 50% !important;
}

input:checked + .t-checkbox__indicator {
  background-color: #4caf50 !important;
}

input:checked + .t-checkbox__indicator:before {
  transform: translateX(26px) !important;
}
</style>
  1. Использую !important, чтобы наверняка работало
  2. Заменил классы, которые выдал GPT на классы из нашей структуры
Если бы я прислал GPT структуру, которая выдала тильда, то мне бы осталось только расставить !important (если бы конечно не сработало)

Поэтому еще один важный урок: Иногда надо действительно открывать код и запариваться над ним, с учетом того, что gpt над ним уже поработал. А со сложными модификациями вовсе запариваться х2
Все подсказки:
  1. Ищите у элемента, который вы хотите модифицировать - его код в инспекторе и давайте его GPT для анализа
  2. Не берите html от GPT, если не создаете с нуля html блок.
  3. Говорите ему, что работаете с конструктором, а значит вам нужно динамическое решение БЕЗ добавления новых классов, тегов и прочего. Вообще без изменения html, только динамическое изменение через JS
  4. Предлагайте сразу объединить код в <style> и <script> - вам будет удобнее копировать
  5. Код без таймера в тильде в 80% работать не будет, просите чтобы ваши функции были обернуты в таймер
  6. Когда совсем жесть - говорите нейронке, чтобы добавила жесткое логирование в код, и смотрите вкладку Консоль в инспекторе при тестировании кода
  7. Кидайте код нейронке, чтобы она анализировала и понимала с чем работать
Made on
Tilda