Updated

Функции рендера шаблонов

Полные файлы смотри тут
src/includes/repeatModules.html

О структуре

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

Как добавить на страницу

  • В редакторе Т на нужной странице добавляем блок T123 HTML-код. В нем в стандартную разметку нужно добавить блок - родитель для итерируемых элементов
<div class="module-items-js">
   <h2>Ваш браузер не поддерживает показ этого экрана. Обновите версию браузера.</h2>
</div>
  • Ниже в этом блоке пишем JS логику данных
// В moduleItems можно хранить коллекцию данных любого формата
   const moduleItems = [
       // items
       // {}, [], '',
   ];

   // Функция рендера проходит итерацией по массиву и через метод map возвращает новый массив  
   // элементов с добавлением разметки

   function generateSection() {
       $('.module-items-js').empty();

       const mapItem = moduleItems.map(function (item, index) {
           // write your html
           return `Hello ${item} with ${index}`;
       });

       // Добавляем элементы в блок - родитель
       const parent = document.querySelector('.module-items-js');
       parent.insertAdjacentHTML('afterbegin', mapItem.join(' '));
   };
   generateSection();

Пример

<div class="cards pd-main">
  <div class="container">
      <div class="cards_items cards_items-js grid-d">
          <h2>Ваш браузер не поддерживает показ этого экрана. Обновите версию браузера.</h2>
      </div>
  </div>

  <script>
      const cardsItems = [
          'Изучите логику работы системной компании',
          'Сформируете картину своего идеального бизнеса',
          'Проведете комплексный управленческий аудит своей компании',
          'Найдете рычаги роста бизнеса',
          'Разработаете пошаговый план перехода к системному управлению',
      ];

      function generateCards() {
          $('.cards_items-js').empty();

          const cardsItem = cardsItems.map(function (card) {
              return `<div class="card_item card text-center">
                          <img loading="lazy" width="36" height="36" class="card_item-img pointer-events" src="https://forstas.bizconstructor.com/cdn/owner/npr/check-card.svg">
                          <p class="text-sm-ex fw400">${card}</p>
                      </div>`;
          });

          const parent = document.querySelector('.cards_items-js');
          parent.insertAdjacentHTML('afterbegin', cardsItem.join(' '));

      };
      generateCards();

  </script>
</div>
Made with ❤&🍺 by @sonikbro