Настройка страницы

Возьмем, к примеру, страницу owner.bizconstructor.com/npr2

Открываем её в редакторе T, видим первый и главный для нас блок (админблок):

Админблок

// Styles
<link rel="stylesheet" href="https://forstas.bizconstructor.com/cdn/owner/npr/npr2.css">

<script>
// Дата мероприятия
var cDate = '6 - 16 июля';
// Landing id
var cLandingId = '2108311000498548217';
// Локация
var cLocation = 'Online';
// длительность
var cDuration = '10 дней';
// success_url (куда отправлять после успешной регистрации)
var cSuccess_url = 'https://online.masterclassb.com/k8tzw0';
</script>

<style>
  /* 
    Выбор валюты
    Селектор для установки валюты в форме\блоке с ценой
  */
  .count-price:after {
      content: " €";
  }
</style>

Это набор важных переменных для работы лендинга, есть везде комментарии для понимания. Здесь подключай стили (помни, что у нас каждая страница индивидуальная (если это не копия спец. типа страниц) и у каждой такой есть свой файл CSS). Конфигурируй ключевые параметры информации о лендинге.

Ниже (или в том же блоке) находится сжатый скрипт для подстановки этих переменных в нужные части страницы:

<script>
    $(document).ready(function () {

 if (cDate !=='date'){ $('.cDate').each(function (){ $(this).html(cDate);});}; if (cLocation !=='cLocation'){ $('.cLocation').each(function (){ $(this).html(cLocation);});}; if (cDuration !=='cDuration'){ $('.cDuration').each(function (){ $(this).html(cDuration);});}; if (cLandingId !=='id'){ $("input[name='landing_id']").val(cLandingId)}; if (cSuccess_url !=='success_url'){ $("input[name='success_url'], input[name='error_url']").val(cSuccess_url)}; 
 
    });

</script>

Как правило, тут набор стандартных функций для подстановки значений в ключевые поля страницы.

$(document).ready(function (){...})

Так же сжимай ф-ции, например через minifyall, что бы никто кроме тебя не мог положить страницу.

Новые данные админблока

Например, тебе нужно добавить поле с датой спец. цены, которое можно будет менять с админблока. Для этого заводи свою переменную:

var countDateSpecialPrice = '17.04' 

и сразу же добавляй логику для этого в блок ниже

$(document).ready(function () {
    // some beautiful code...

    // проверяем нужно ли менять
    if (countDateSpecialPrice !=='countDateSpecialPrice'){ 

        // .countDateSpecialPrice - создаем селектор, который нужно добавить в нужные части HTML для управления ним через админблок
        $('.countDateSpecialPrice').each(function (){ 

                // Выводим нужные нам данные в узле HTML
                $(this).html(countDateSpecialPrice);
            }
        )};
    });

// Добавляем в HTML разметку селектор
<div class="hero__icon">
    Дата снижения цены - <span class="countDateSpecialPrice"></span>
</div> 

Не забываем все это сжимать.

Так же, сюда рекомендуется добавлять ф-ции важные для первой работы со страницей, например логику событий при скролле или установку высоты первого экрана мобильных устройств

 var target=$("#form"), targetPos=target.offset().top, winHeight=$(window).height(), scrollToElem=targetPos - winHeight; $(window).scroll((function (){ if ($(this).scrollTop() >scrollToElem){ clearInterval(timeTimeoutModalForm);}}));

 function is_mobile(){ return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));}; 
 function fix100vh(){ var winHeight=$(window).height(); if (is_mobile()){ $('.100vh-fix').css('height', winHeight - 64);}}; fix100vh(); 

Все кастомно, можешь тут писать\добавлять все что угодно, не забывая тестировать

Блоки

Ниже идут стандартные блоки на HTML+CSS+JS - их сложно выделить как компоненты, так как они все могут изменятся модульно на разных страницах, поэтому в песочнице на GitHub есть только самые шаблонные или важные.

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

Про важные части страницы, такие как формы, модальные окна или виджеты я опишу в следующих пунктах. Пока нужно просто понимать, что это все статика, которая меняется от задачи.

Каждый блок мы пишем в блоке T123 HTML-код.

Внутри блока размещается только один блок, что бы было удобнее работать потом со страницей.

Если нужно редактировать блок, наводя на нужный блок, нажимай “Контент”:

Custom CSS \ JS

Важным ещё есть блок, который находится в самом низу:

<!-- CustomCSS / JS -->
<style>
</style>

<!--Splide slider-->
<link rel="stylesheet" href="https://forstas.bizconstructor.com/cdn/plugins/splide/splide.min.css">
<script defer src="https://forstas.bizconstructor.com/cdn/plugins/splide/splide.min.js"></script>
    

<script>
document.addEventListener('DOMContentLoaded', function () {
    // some settings
    new Splide('.feedback-slider', {
        perPage: 1.3,
        preloadPages: 1,
        rewind: true,
        gap: 20,
        padding: 10,
        perMove: 1,
        pagination: false,
        keyboard: false,
        type: 'loop',
        autoplay: true,
        interval: '10000',
        breakpoints: {
            768: {
                perPage: 1.1,
                interval: '5000',
                gap: 15,
                padding: 0,
            }
        }
    }).mount();

    // move arrows to title
    const modevArrows = document.querySelector('.movedArrow');
    const arrows = document.querySelector('.feedback-slider .splide__arrows');

    modevArrows.replaceWith(arrows);
    
      // Если форма была активна - убрать модальную форму
timeTimeoutModalForm = setTimeout(showModalForm, 7000);

function showModalForm() {
    LP.CORE.showModal($('#modal_form'));
}
});
</script>

Это важный блок, так как тут дополнительная конфигурация логики\стилей страницы. Можно добавлять\удалять плагины, менять их настройки, добавлять кастомные стили.

document.addEventListener('DOMContentLoaded', function () { ... })

Все как и раньше - ограничений по коду нету, читай доку и помни, что у нас верстка mobilefirst.

Footer + Main Scripts

Если нужен другой футер, добавляй этот блок как HTML вниз страницы, скрывая через CSS стандартный в блоке CustomCSS / JS.

.footer_ua {
    display: none;
    visibility: hidden
}

А если нужен на странице кастомый блок Footer + Main Scripts, то в редакторе страницы отключай добавление стандартного блока:

• Публикация
• Настройка проекта