Главная
ФронтДок
Drupal
HTML конструкции элементов
Drupal

HTML конструкции элементов

Шапка 
<header class="header header_type-device_[desktop | tablet]">
<div class="header__top">
  ...содержимое
</div>
<div class="header__main">
  ...содержимое
</div>
<div class="header__bottom">
  ...содержимое
</div>
</header>
Логотип 
<div class="header__logo">
    <a href="{{ path('') }}"></a>
</div>
Слоган компании 
<div class="header__slogan">Слоган компании пользователя</div>
Телефон 
<div class="header__phone">
    <a rel="nofollow" href="tel:{{ content.header_phone|replace({'(': "", ')': "", ' ': "", '-': ""}) }}">
        {{ content.header_phone }}
    </a>
</div>
Почта 
<div class="header__email">
    <a rel="nofollow" href="mailto:{{ content.mail }}">{{ content.mail }}</a>
</div>
Заказать звонок 
<div class="header__callback">
    <a rel="nofollow" class="use-ajax" href="/form/callback?url={{ url('<current>') }}" data-dialog-options='{"title":"Заказать звонок","width":"540","maxHeight":"auto","minHeight":"auto"}' data-dialog-type="modal">
        <span>Заказать звонок</span>
    </a>
</div>
Отправить заявку 
<div class="header__send-request">
    <a rel="nofollow" class="use-ajax" href="/form/send-request?url={{ url('<current>') }}" data-dialog-options='{"title":"Отправить готовую заявку","width":"750","maxHeight":"auto","minHeight":"auto"}' data-dialog-type="modal">
        <span>Отправить заявку</span>
    </a>
</div>
Корзина 
{% if drupal_block('uc_cart').content.block %}
    <div class="header__cart">
        {{ drupal_block('uc_cart', wrapper=false) }}
    </div>
{% endif %}
Поиск 
<div class="header__search">
    {{ drupal_block('search_form', wrapper=false) }}
</div>
Кнопка графического каталога 
<div class="header__visual-catalog">
    <a href="/visualcat">Графические каталоги</a>
</div>
Каталог 
{% if content.catalog_menu %}
    <div class="header__menu-catalog">
        <a class="header__menu-catalog-link" href="javascript://">Каталог</a>
        <div class="header__menu-catalog-wrapper">
            {{ content.catalog_menu }}
        </div>
        <div class="header__menu-catalog-overlay"></div>
    </div>
{% endif %}
Меню с боковой панелью (меню каталога, кнопка граф.каталога, главное меню, телефон, почта) 
<div class="header__menu">
    <a class="header__menu-link" rel="nofollow" href="javascript://">Меню</a>
    <div class="header__menu-wrapper">
        <div class="header__menu-inner">
            <div class="header__menu-close"></div>
            <div class="header__menu-content">
                {% if content.catalog_menu %}
                    <div class="header__title">Каталог</div>
                    <div class="header__menu-catalog">
                        {{ content.catalog_menu }}
                    </div>
                {% endif %}
                ...содержимое
                <div class="header__contacts">
                    ...содержимое контактов (телефон, почта)
                </div>
            </div>
        </div>
    </div>
    <div class="header__menu-overlay"></div>
</div>
Меню вторичное 
<div class="header__menu-secondary">
    {{ drupal_menu('secondary') }}
</div>
Меню основное 
<div class="header__menu-main">
    {{ drupal_menu('main') }}
</div>
Избранное 
<div class="header__fav is-empty">
    <a href="/deferred">
        <span class="label">Избранное</span>
        <span class="amount">0</span>
    </a>
    <div class="tooltip">Перейти в избранное</div>
</div>
Сравнение 
{% if content.compare_link %}
    <div class="header__cmp is-empty">
        <a href="/compare">
            <span class="label">Сравнение</span>
            <span class="amount">0</span>
        </a>
        <div class="tooltip">Перейти к сравнению</div>
    </div>
{% endif %}
Шапка мобильная 
<div class="header-mobile">
    <div class="header-mobile__inner">
        <div class="header-mobile__main">
            ...содержимое
        </div>
        <div class="header-mobile__bottom">
            ...содержимое
        </div>
    </div>
</div>
Логотип 
<div class="header-mobile__logo">
    <a href="{{ path('') }}"></a>
</div>
Бургер меню 
<div class="header-mobile__menu">
    <a class="header-mobile__menu-link" rel="nofollow" href="javascript://">Меню</a>
    <div class="header-mobile__menu-wrapper">
        <div class="header-mobile__menu-inner">
            <div class="header-mobile__menu-close"></div>
            <div class="header-mobile__menu-content">
                ...содержимое
                <div class="header-mobile__contacts">
                    ...содержимое контактов (телефон, почта)
                </div>
            </div>
        </div>
    </div>
    <div class="header-mobile__menu-overlay"></div>
</div>
Каталог 
{% if content.catalog_menu %}
    <div class="header-mobile__title">Каталог</div>
    <div class="header-mobile__menu-catalog">
        {{ content.catalog_menu }}
    </div>
{% endif %}
Кнопка графического каталога 
<div class="header-mobile__visual-catalog">
    <a href="/visualcat">Графические каталоги</a>
</div>
Меню главное 
<div class="header-mobile__menu-main">
    {{ drupal_menu('main') }}
</div>
Телефон 
<div class="header-mobile__phone">
    <a rel="nofollow" href="tel:{{ content.header_phone|replace({'(': "", ')': "", ' ': "", '-': ""}) }}">
        {{ content.header_phone }}
    </a>
</div>
Почта 
<div class="header-mobile__email">
    <a rel="nofollow" href="mailto:{{ content.mail }}">{{ content.mail }}</a>
</div>
Корзина 
{% if drupal_block('uc_cart').content.block %}
    <div class="header-mobile__cart">{{ drupal_block('uc_cart', wrapper=false) }}</div>
{% endif %}
Поиск 
<div class="header-mobile__search">
    {{ drupal_block('search_form', wrapper=false) }}
</div>
Хлебные крошки 
<noindex>
    <div class="breadcrumb">
        <div class="breadcrumb__item">
            <a href="#" class="breadcrumb__link">
                <span>текст ссылки</span>
            </a>
        </div>
        <span class="breadcrumb__sep">—</span>
        <div class="breadcrumb__item">
            <a href="#" class="breadcrumb__link">
                <span>текст ссылки</span>
            </a>
        </div>
        <span class="breadcrumb__sep">—</span>
        <span class="breadcrumb__last">текст последней крошки</span>
    </div>
</noindex>
Blocks 
<div class="block block-[тип блока] block-[машинное имя] [дополнительные классы]">
    <div class="block__header">
        <h2 class="block__title">
            ...ЗАГОЛОВОК
        </h2>
        <a href="#" class="btn btn-[primary/secondary/link] [use-ajax]">
            ...ТЕКСТ ССЫЛКИ
        </a>
    </div>
    <div class="block__content">
        ...СОДЕРЖИМОЕ
    </div>
    <div class="block__footer">
        <a href="#" class="btn btn-[primary/secondary/link] [use-ajax]">
            ...ТЕКСТ ССЫЛКИ
        </a>
    </div>
</div>
Классы:
.block — дефолтный класс
.block-[тип блока] — дефолтный класс (берется из документации к сайту)
.block-[машинное имя] — дефолтный класс (берется из документации к сайту)
.use-ajax — нужна если по ссылке открывается форма в модалке

Тип блока:
base — класс для блока с визуальным редактором
html — класс для блоков с произвольным html и программных блоков
gallery — класс для блоков типа галерея

Дополнительные классы блока:
.block-section — для блоков типа секция (например: когда блок выходит за рамки контента) + эффект отрицательного маржина.
.block-border — для блока с обозначенными границами в пределах контента сайта. (например: фон, фон картинка, бордер, тень).
Menu 
<ul class="menu menu-[название_меню] menu-level-[уровень_вложенности] [menu-animated]">
    <li class="menu__item menu__item-[id] active-trail [expanded/collapsed] [is-open]">
        <a href="">
            <span> Элемент 1</span>
        </a>
    </li>
    <li class="menu__item menu__item-[id] active-trail [expanded/collapsed] [is-open]">
        <a href="">
            <span> Элемент 2</span>
        </a>
    </li>
    <li class="menu__item menu__item-[id] active-trail [expanded/collapsed] [is-open]">
        <a href="">
            <span> Элемент 3 expanded</span>
        </a>
        <ul class="menu menu-level-[уровень_вложенности]">
            <li class="menu__item menu__item-[id] active-trail [expanded/collapsed] [is-open]">
                <a href="">
                    <span> Элемент 1</span>
                </a>
            </li>
            <li class="menu__item menu__item-[id] active-trail [expanded/collapsed] [is-open]">
                <a href="">
                    <span> Элемент 2</span>
                </a>
            </li>
            <li class="menu__item menu__item-[id] active-trail [expanded/collapsed] [is-open]">
                <a href="">
                    <span> Элемент 3</span>
                </a>
            </li>
        </ul>
    </li>
    <li class="menu__item menu__item-[id] active-trail [expanded/collapsed] [is-open]">
        <a href="" class="active">
            <span> Элемент 4 collapsed</span>
        </a>
    </li>
    <li class="menu__item menu__item-[id] active-trail [expanded/collapsed] [is-open]">
        <a href="" class="active">
            <span> Элемент 5</span>
        </a>
    </li>
</ul>
Классы:
.menu — обозначает что это меню.
.menu-[название_меню] — берется из документации к сайту.
.menu-level-[уровень_вложенности] — уровень_вложенности.
.menu-animated — обозначает что подпункты можно свернуть или развернуть.
.menu__item — пункт меню.
.menu__item-[id] — уникальный класс для пунктов (он выводится друпалом)
.expanded — класс (у li) обозначающий, что есть подпункты и они развернуты.
.collapsed — класс (у li) обозначающий, что есть подпункты и они скрыты, откроются только после перехода на страницу.
.active-trail — класс (у li) обозначающий, что пункт активен.
.active — класс (у ссылки) обозначающий, что открыта текущая страница.
.is-open — класс (у ссылки) обозначающий, что открыта текущая страница.
List terms 
<ul class="list list-term list-term-[название-таксономии]">
    <li class="list-term-item-[id]">
        <a href="">название пункта</a>
    </div>
    <li class="list-term-item-[id]">
        <a href="">название пункта</a>
    </div>
</ul>
Список (одноуровневый) 
<div class="list-wrapper">
    <ul class="list list-terms list-terms-catalog list-level-0 list-type-list">
        <li class="list__item list__item-[id]" data-ico="">
            <div class="list__title">
                <a href="">
                    <img src="" alt="" />
                    <span>
                        ...НАЗВАНИЕ ПУНКТА
                    </span>
                </a>
            </div>
        </li>
        ...
    </ul>
</div>
Список (двухуровневый) 
<div class="list-wrapper">
    <ul class="list list-terms list-terms-catalog list-level-0 list-type-list">
        <li class="expanded list__item list__item-[id]" data-ico="">
            <div class="list__title">
                <a href="">
                    <img src="" alt="" />
                    <span>
                        ...НАЗВАНИЕ ПУНКТА
                    </span>
                </a>
            </div>
            <ul class="list-level-1">
                <li class="list__item list__item-[id]" data-ico="">
                    <div class="list__title">
                        <a href="">
                            <img src="" alt="" />
                            <span>
                                ...НАЗВАНИЕ ПУНКТА
                            </span>
                        </a>
                    </div>
                </li>
                ...
            </ul>
        </li>
        ...
    </ul>
</div>
Список (с боковым списком) 
<div class="list-wrapper">
    <ul class="list list-terms list-terms-catalog list-type-left">
        <li class="expanded list__item list__item-[id]" data-ico="">
            <div class="list__title">
                <a href="">
                    <img src="" alt="" />
                    <span>
                        ...НАЗВАНИЕ ПУНКТА
                    </span>
                </a>
            </div>
            <ul class="list-level-0 list-type-list">
                <li class="expanded list__item list__item-[id]" data-ico="">
                    <div class="list__title">
                        <a href="">
                            <img src="" alt="" />
                            <span>
                                ...НАЗВАНИЕ ПУНКТА
                            </span>
                        </a>
                    </div>
                    <ul class="list-level-1">
                        <li class="list__item list__item-[id]">
                            <div class="list__title">
                                <a href="">
                                    <img src="" alt="" />
                                    <span>
                                        ...НАЗВАНИЕ ПУНКТА
                                    </span>
                                </a>
                            </div>
                        </li>
                        ...
                    </ul>
                </li>
                ...
            </ul>
        </li>
        ...
    </ul>
    <div class="list-type-left-content"></div>
</div>
Классы:
.is-hover — добавляется через js, обозначает что курсор наведен на пункт в боковом списке.
.js-icon-processed — добавляется через js, обозначает что есть иконка у пункта li и которая добавлена js-ом.
Picture тег 
<picture>
    <source srcset='#' type='image/webp'>
    <source srcset='#' type='image/png'>
    <source srcset='#' type='image/jpeg'>
    <img src='#' alt='' loading="lazy" />
</picture>
Teasers
Тизер таксономии 

<div class="teaser teaser-term teaser-term-[словарь категории] teaser-term-[словарь категории]-[вид-отображения]">
    <div class="field..."></div>
    <div class="field..."></div>
    <div class="field..."></div>
</div>
Тизер нод 


<div class="teaser teaser-node teaser-node-[тип материала] teaser-node-[тип материала]-[вид отображения]">
    <div class="field..."></div>
    <div class="field..."></div>
    <div class="field..."></div>
</div>
Типы:
article — статья
banner — баннер
dealer — дилер
features — конструктивные особенности
in-stock-technic — техника в наличии
news — новость
shipment — отгрузка
unit-catalog — техника
part — запчасть
product — продукт
Nodes 
<div class="node node-type-[тип] node-view-mode-full node-[unpublished]">
    <div class="field..."></div>
    <div class="field..."></div>
    <div class="field..."></div>
</div>
Типы:
article — статья
in-stock-technic — техника в наличии
news — новость
page — текстовая страница
shipment — отгрузка
unit-catalog — техника
part — запчасть
product — продукт
Fields
одиночное поле:
<div class="field field-type-[тип_поля] field-[название_поля] field-label-[above/inline/hidden]">
    <div class="label">название поля</div>
    <div class="value">
        <a href="#">
            <span class="prefix">prefix</span>
            значение
            <span class="suffix">suffix</span>
        </a>
    </div>
</div>
многострочное поле:
<div class="field field-type-[тип_поля] field-[название_поля] field-label-[above/inline/hidden]">
    <div class="label">название поля</div>
    <div class="values">
        <div class="value">
            <a href="#">
                <span class="prefix">prefix</span>
                значение
                <span class="suffix">suffix</span>
            </a>
        </div>
        <div class="value">
            <a href="#">
                <span class="prefix">prefix</span>
                значение
                <span class="suffix">suffix</span>
            </a>
        </div>
    </div>
</div>
Fields (готовые конструкции)
Ссылка 'добавить в избранное' 
<div class="field field-type-link field-favorite" data-nid="{{ node.id }}">
    <div class="value">
        <a href="javascript://">В избранное</a>
        <div class="tooltip">Добавить в избранное</div>
    </div>
</div>
Ссылка 'удалить из избранного' 
<div class="field field-type-link field-favorite field-favorite-remove" data-nid="{{ node.id }}">
    <div class="value">
        <a href="javascript://">Удалить из избранного</a>
        <div class="tooltip">Удалить из избранного</div>
    </div>
</div>
Ссылка 'добавить в сравнение' 
<div class="field field-type-link field-compare" data-tid="{{ tid }}" data-nid="{{ node.id }}">
    <div class="value">
        <a href="javascript://">Добавить в сравнение</a>
        <div class="tooltip">Добавить в сравнение</div>
    </div>
</div>
ССсылка 'удалить из сравнения' 
<div class="field field-type-link field-compare field-compare-remove" data-tid="{{ tid }}" data-nid="{{ node.id }}">
    <div class="value">
        <a href="javascript://">Удалить из сравнения</a>
        <div class="tooltip">Удалить из сравнения</div>
    </div>
</div>
Ссылка 'распечатать' 
<div class="field field-type-link field-print">
    <div class="value">
        <a href="javascript://" target="_blank">Распечатать</a>
    </div>
</div>
Ссылка 'скачать PDF' 
<div class="field field-type-link field-pdf">
    <div class="value">
        <a href="node/{{ node.id }}/printable/pdf" target="_blank">Скачать PDF</a>
    </div>
</div>
Ссылка 'поделиться' 
<div class="field field-type-link field-share">
    <div class="value">
        <script src="https://yastatic.net/share2/share.js"></script>
        <div data-curtain="" data-limit="0" data-more-button-type="short" data-services="messenger,vkontakte,facebook,odnoklassniki" class="ya-share2"></div>
    </div>
</div>
Ярлык 'лучший выбор' 
<div class="field field-type-boolean field-label-best-choose field-label-hidden">
   <div class="value">Лучший выбор</div>
</div>
Ярлык 'новинка' 
<div class="field field-type-boolean field-label-new field-label-hidden">
<div class="value">Новинка</div>
</div>
Ярлык 'распродажа' 
<div class="field field-type-boolean field-label-sale field-label-hidden">
    <div class="value">Распродажа</div>
</div>
Ярлык 'спецпредложение' 
<div class="field field-type-boolean field-label-specoffer field-label-hidden">
    <div class="value">Спецпредложение</div>
</div>
Ярлык 'скидка в процентах' 
<div class="field field-type-boolean field-label-discount-percent field-label-hidden">
    <div class="value">
        {{ content.field_label_discount_percent }}
        <div class="suffix">%</div>
    </div>
</div>
Заголовок 
<div class="field field-type-string field-title field-label-hidden">
    <div class="value">
        <a href="{{ url }}">
            {{ label }}
        </a>
    </div>
</div>
Заголовок (краткий) 
<div class="field field-type-string field-short-title field-label-hidden">
    <div class="value">
        <a href="{{ url }}">
            {{ label }}
        </a>
    </div>
</div>
Дата 
<div class="field field-type-date field-date field-label-hidden">
    <div class="value">
        {{ node.field_date.value | date("d.m.Y") }}
    </div>
</div>
Ссылка 'подробнее' 
<div class="field field-type-string field-link-more field-label-hidden">
    <div class="value">
        <a href="{{ url }}">
            Подробнее
        </a>
    </div>
</div>
Изображение
от ubercart
<div class="field field-type-image field-images field-label-hidden">
    <div class="value">
        <a href="{{ url }}">
            {{ content.uc_product_image.0 }}
        </a>
    </div>
</div>
обычное
<div class="field field-type-image field-images field-label-hidden">
    <div class="value">
        <a href="{{ url }}">
            {{ content.field_images.0 }}
        </a>
    </div>
</div>
Каталожный номер 
<div class="field field-type-string field-cat-number field-label-hidden">
    <div class="value">
        {{ node.field_cat_number.value }}
    </div>
</div>
Цена 'производителя/завода' 
<div class="field field-type-integer field-factory-price field-label-inline">
    <div class="label">Цена завода</div>
    <div class="value">
        {{- content.field_cena_proizvoditelya -}}
        <span class="suffix rouble">p</span>
    </div>
</div>
Цена 
<div class="field field-type-integer field-price field-label-hidden">
    <div class="label">Цена:</div>
    <div class="value">
        {{- node.field_price.value|number_format(0, '.', ' ') -}}
        <span class="suffix rouble">p</span>
    </div>
</div>
Цена 'старая' 
<div class="field field-type-integer field-old-price field-label-hidden">
    <div class="label">Старая цена:</div>
    <div class="value">
        {{- content.field_price_old -}}
        <span class="suffix rouble">p</span>
    </div>
</div>
Цена 'по запросу' 
<div class="field field-type-string field-noprice">
    <div class="value">цена по запросу</div>
</div>
Статус 'в наличии' 
<div class="field field-type-string field-stock-available field-label-inline">
    <div class="label">В наличии</div>
    <div class="value">
        {{- instock.count -}}
        <div class="suffix">ед</div>
    </div>
</div>

или

<div class="field field-type-string field-stock-available field-label-hidden">
    <div class="value">
        В наличии {{ content.field_stock_available }} ед
    </div>
</div>
Статус 'в наличии' + цена (от/за) 
<div class="field field-type-string field-stock-available field-label-inline">
    <div class="label">В наличии</div>
    <div class="value">
        {{- instock.count -}}
        <div class="suffix">ед</div>
    </div>
</div>
<div class="field field-type-integer field-price-instock field-label-hidden">
    <div class="value">
        {% if instock.count > 1 %}
            <span class="prefix">от</span>
        {% else %}
            <span class="prefix">за</span>
        {% endif %}
        {{- instock.price|number_format(0, '', ' ') -}}
        <div class="suffix rouble">p</div>
    </div>
</div>
Статус 'Под заказ' с указанием количества дней 
<div class="field field-type-string field-delivery-time field-label-inline">
    <div class="label">Под заказ</div>
    <div class="value">
        {{ content.field_delivery_time }}
    </div>
</div>
Статус 'Под заказ' без количества дней 
<div class="field field-type-string field-delivery-time field-label-hidden">
    <div class="value">Под заказ</div>
</div>
Гарантия на технику 
<div class="field field-type-string field-hinge-gurantee field-label-inline">
    <span class="label">Гарантия на технику:</span>
    <span class="value">
        {{ node.field_hinge_guarantee.value }}
    </span>
</div>
Гарантия на навесное оборудование 
<div class="field field-type-string field-attachment-warranty field-label-inline">
    <span class="label">Гарантия на навесное оборудование:</span>
    <span class="value">
        {{ node.field__attachment_warranty.value }}
    </span>
</div>
Описание (авто) 
<div class="field field-type-string field-auto-description field-label-hidden">
    <div class="value">
        {{ content.autodescription|raw }}
    </div>
</div>
Описание (краткое) 
<div class="field field-type-string field-short-description field-label-hidden">
    <div class="value">
        {{ content.field_short_description }}
    </div>
</div>
Описание (полное) 
<div class="field field-type-text-with-summary field-body field-label-hidden">
    <div class="value">
        {{ node.body.value | raw }}
    </div>
</div>
Характеристики 
<div class="field field-type-string field-parameters field-label-hidden">
    <div class="value">
        {{ node.field_features.value | raw }}
    </div>
</div>
Чертеж 
<div class="field field-type-drawing-image field-drawing field-label-hidden">
    <div class="values">
        <div class="value">
            <img src="" alt="" />
        </div>
        <div class="value">
            <img src="" alt="" />
        </div>
        <div class="value">
            <img src="" alt="" />
        </div>
    </div>
</div>
Добавление в корзину 
<div class="field field-type-string field-cart-add field-label-hidden">
    <div class="value">
        {{ content.field_add_to_cart }}
    </div>
</div>
Применяемость 
<div class="field field-type-string field-applicability field-label-hidden">
    <div class="values">
        <div class="value">
            <a href="#">Датчик температуры и давления топлива</a>
        </div>
        <div class="value">
            <a href="#">Датчик температуры и давления топлива</a>
        </div>
        <div class="value">
            <a href="#">Датчик температуры и давления топлива</a>
        </div>
    </div>
</div>
Применяемость (когда многострочное текстовое поле) 
<div class="field field-type-string field-applicability field-label-hidden">
    <div class="value">
        {{ content.field_applicability | raw }}
    </div>
</div>
Производитель 
<div class="field field-type-string field-brand field-label-inline">
    <div class="label">Производитель</div>
    <div class="value">
        {{ node.field_brand.value }}
    </div>
</div>
Размеры 
<div class="field field-type-string field-dimensions field-label-inline">
    <div class="label">Размеры (ДхШхВ):</div>
    <div class="value">
        {{ node.dimensions.value.0.length }} {{ node.dimensions.value.0.units }} × {{ node.dimensions.value.0.width }} {{ node.dimensions.value.0.units }} × {{ node.dimensions.value.0.height }} {{ node.dimensions.value.0.units }}
    </div>
</div>
Высота 
<div class="field field-type-string field-dimensions-height field-label-inline">
    <div class="label">Высота:</div>
    <div class="value">
        {{ node.dimensions.value.0.height }} {{ node.dimensions.value.0.units }}
    </div>
</div>
Ширина 
<div class="field field-type-string field-dimensions-width field-label-inline">
    <div class="label">Ширина:</div>
    <div class="value">
        {{ node.dimensions.value.0.width }} {{ node.dimensions.value.0.units }}
    </div>
</div>
Глубина 
<div class="field field-type-string field-dimensions-length field-label-inline">
    <div class="label">Глубина:</div>
    <div class="value">
        {{ node.dimensions.value.0.length }} {{ node.dimensions.value.0.units }}
    </div>
</div>
Вес 
<div class="field field-type-string field-weight field-label-inline">
    <div class="label">Вес</div>
    <div class="value">
        {{ node.weight.value }} {{ node.weight.units }}
    </div>
</div>
Текст о доставке 
<div class="field field-type-string field-delivery field-label-hidden">
    <div class="value">
        Возможна доставка транспортной компанией или самовывозом с нашего склада, подробные условия доставки указаны
        <a href="/delivery_and_payment">здесь</a>
    </div>
</div>
Теги 
<div class="field field-type-tags field-tags">
    <div class="values">
        <div class="value">
            <a href="#"></a>
        </div>
        <div class="value">
            <a href="#"></a>
        </div>
    </div>
</div>
Описание термина 'верхнее' 
<div class="field field-type-description-term field-description-top field-label-hidden">
    <div class="value">
        <p></p>
        <p></p>
    </div>
</div>
Описание термина 'нижнее' 
<div class="field field-type-description-term field-description-bottom field-label-hidden">
    <div class="value">
        <p></p>
        <p></p>
    </div>
</div>
Список тизеров нод 
<div class="field field-type-node-teasers field-node-teasers">
    <div class="values">
        {{ items }}
    </div>
</div>
Список тизеров терминов 
<div class="field field-type-term-teasers field-term-teasers">
    <div class="values">
        {{ items }}
    </div>
</div>
Список подразделов
parts
<div class="field field type-subterm-teasers field-subterms-parts">
    <div class="values">
        {{ items }}
    </div>
</div>
trucks
<div class="field field-type-subterm-teasers field-subterms-trucks">
    <div class="values">
        {{ items }}
    </div>
</div>
Последнее обновление 
<div class="field field-type-custom field-update-last field-label-inline">
    <div class="label">Последнее обновление:</div>
    <div class="value">{{ content.date_update_product_price|date('d-m-Y') }}</div>
</div>
Купить в 1 клик 
<div class="field field-type-string field-buy-one-click field-label-hidden">
    <div class="value">
        <noindex>
            <a rel="nofollow" class="use-ajax" href="/form/buy-one-click?url={{ url('<current>') }}&title={{- node.title.value -}}&art={{- node.field_cat_number.value -}}" data-dialog-options='{"title":"Купить в 1 клик","width":"540","maxHeight":"auto","minHeight":"auto"}' data-dialog-type="modal">
                <span>Купить в 1 клик</span>
            </a>
        </noindex>
    </div>
</div>
Аналоги 
<div class="field field-type-grid field-analogs field-label-hidden">
    <div class="value">
        {{ content.field_analogs }}
    </div>
</div>
Пагинация 
<div class="field field-type-pager field-pager">
    <div class="values">
        <div class="load-more-page">
            <a class="btn btn-secondary use-ajax" href="#">Показать еще</a>
        </div>
        <ul class="pages">
            <li class="arrow-page first-page">
                <a href="#">Первая</a>
            </li>
            <li class="arrow-page previous-page">
                <a href="#">Назад</a>
            </li>
            <li class="number-page current-page">1</li>
            <li class="number-page">
                <a href="#">2</a>
            </li>
            <li class="number-page">
                <a href="#">3</a>
            </li>
            <li class="number-page ellipsis">…</li>
            <li class="number-page">
                <a href="#">4</a>
            </li>
            <li class="arrow-page next-page">
                <a href="#">Вперед</a>
            </li>
            <li class="arrow-page last-page">
                <a href="#">Последняя</a>
            </li>
        </ul>
    </div>
</div>
Groups fields 
<div class="group-field-[произвольное название]">
    <div class="field..."></div>
    <div class="field..."></div>
    <div class="field..."></div>
</div>
Form search + результаты выпадающего списка 
<div class="search">
    <form method="get" action="/search" accept-charset="UTF-8">
        <div class="form-item">
            <input type="text" placeholder="Введите название техники" id="edit-keys" name="key" autocomplete="off" class="form-text" />
        </div>
        <div class="form-actions">
            <input type="submit" value="Найти" id="edit-submit-search" name="op" class="form-submit" />
        </div>
    </form>
    <div class="search-result">
        <div class="search-result__inner">
            <div class="search-result__item">
                field (см. в полях)
                field (см. в полях)
                field (см. в полях)
                field (см. в полях)
            </div>
        </div>
    </div>
</div>
Forms 
<form class="webform-submission-form webform-submission-[машинное_название_формы]-form">

    include ../drupal/drupal-message-error-webform

    <div class="webform-elements form-wrapper">

        <div class="form-item form-item-[машинное_название_поля] js-form-type-webform-markup">
            <p>Содержимое разметки. Например: текст перед формой</p>
        </div>

        <div class="form-item form-item-[машинное_название_поля] js-form-type-webform-[тип_поля]">
            <label class="form-required">[название поля]</label>
            <input class="form-email required" type="[тип_инпута]" name="" value="" required="required" />
        </div>

        <div class="form-item form-item-[машинное_название_поля] js-form-type-textarea">
           <label">[название поля]</label>
           <div>
               <textarea class="form-textarea" name="comment" rows="3" cols="60"></textarea>
           </div>
       </div>

        <div id="ajax-wrapper">
            <div class="form-item form-item-upload js-form-type-webform-document-file">
                <label>Прикрепить файл</label>
                <div class="form-managed-file">
                    <input class="form-file" name="files[file]" size="22" type="file" />
                </div>
                <div class="description">
                    Только один файл.<br>Ограничение 64 МБ.<br>Допустимые типы: txt, rtf, pdf, doc, docx, odt, ppt, pptx, odp, xls, xlsx, ods.
                </div>
            </div>
            <div class="form-item form-item-upload js-form-type-webform-document-file">
                <label>Прикрепить файл</label>
                <div class="form-managed-file">
                    <span class="file file--mime-text-plain file--text">
                        <a href="#">название файла</a>
                    </span>
                    <input class="button form-submit" type="submit" name="upload_remove_button" value="Удалить" />
                </div>
                <div class="description">
                    Только один файл.<br>Ограничение 64 МБ.<br>Допустимые типы: txt, rtf, pdf, doc, docx, odt, ppt, pptx, odp, xls, xlsx, ods.
                </div>
            </div>
        </div>

    </div>

    <div class="form-actions form-wrapper">
        <input class="webform-button--submit form-submit" type="submit" value="Отправить" />
    </div>

</form>
Названия полей:
form-item-email — почта
form-item-phone — телефон
form-item-comment — комментарий
form-item-privacy-policy — политика конфидициальности
form-item-upload — загрузка файла
form-item-lizing — лизинг
form-item-advance — аванс

Названия типов полей:
js-form-type-textfield — текстовое поле
js-form-type-textarea — многострочное текстовое поле
js-form-type-tel — телефон
js-form-type-select — select
js-form-type-webform-markup — разметка
js-form-type-webform-document-file — загрузка документа (txt, rtf, pdf, doc, docx, odt, ppt, pptx, odp, xls, xlsx, ods)
js-form-type-checkbox — чекбокс
js-form-type-radio — радио кнопка

Названия input type:
text — текстовое поле
tel — телефон
email — почта
Корзина от ubercart
Корзина в шапке 
<div class="cart-block">
    <a href="/cart">
        <span class="icon">
            <span class="count">{{ item_count }}</span>
        </span>
        <span class="name">Корзина</span>
    </a>
</div>
Список товаров в корзине 
...
Оформление заказа (форма) + краткие сведения о заказе 
...
Сведения о заказе 
...
Ваш заказ успешно оформлен 
...
Корзина
Корзина в шапке 
<div class="cart-block">
<a class="cart-block__link" href="/cart">
    <span class="cart-block__icon">
        <span class="cart-block__count">0</span>
    </span>
    <span class="cart-block__info">
        <span class="cart-block__name">Корзина</span>
        <span class="cart-block__price">
            1 000 000
            <span class="rub">p</span>
        </span>
    </span>
</a>
</div>
Корзина. Всплывающее окно при добавлении 
<div class="cart-popup">
<div class="cart-popup__hd">
    <div class="cart-popup__title">Товар был добавлен в корзину</div>
</div>
<div class="cart-popup__cont">
    сюда элемет тизера товара
</div>
<div class="cart-popup__ft">
    <a href="#">Просмотр Вашей корзины</a>
</div>
</div>
Корзина. Кнопки 'распечатать', 'оформить заказ', 'вернуться в корзину' 
<div class="cart-btn">
<div class="cart-btn__print">
    <a href="javascript://" onclick="print()">
        <span>Распечатать сведения о заказе</span>
    </a>
</div>
<input class="cart-btn__submit-checkout" value='Оформить заказ' type="button" />
</div>

<div class="cart-btn cart-btn_checkout-form">
<input class="complete-order" value='Сделать заказ' type="submit">
</div>

<div class="cart-btn cart-btn_order">
<a id="back-to-cart" href="javascript://" onclick="print()">
    <span>Вернуться в корзину</span>
</a>
<input id="edit-actions-next" value='Сделать заказ' type="submit">
</div>
Корзина. шаг 1. 
<div class="cart margin">
 <div class="cart__cont">
    include ../item-unit3/item-unit3
    include ../item-unit3/item-unit3_2
    include ../item-unit3/item-unit3_3
    include ../cart-total-cost/cart-total-cost
 </div>
 <div class="cart__ft">
    include ../return-back/return-back_cart
    include ../cart-btn/cart-btn
 </div>
</div>
Корзина. шаг 1. Итоговая сумма 
<div class="cart-total-cost">
<div class="cart-total-cost__label">Сумма без учета доставки:</div>
<div class="cart-total-cost__value">
    258 422,60
    <span class="rub">p</span>
</div>
</div>
Корзина. шаг 2. Сведения о заказе + форма 
<div class="checkout">
    <div class="checkout__form"></div>
    <div class="checkout__details"></div>
</div>
файл: commerce-checkout-form.html.twig
Корзина. шаг 2. Сведения о заказе 
<div class="checkout-details">
<div class="checkout-details__hd">
    <div class="checkout-details__title">Сведения о заказе</div>
    <div class="checkout-details__view-cart">
        <a href="#">Просмотреть заказ</a>
    </div>
</div>

<div class="checkout-pane-order-summary">
    <div class="checkout-order-summary" style='display: none;'>
        <table>
            <tbody>
                <tr>
                    <td class="order-item-label">АМОРТИЗАТОР</td>
                    <td class="order-item-quantity">2x</td>
                    <td class="order-item-total-price">362 ₽</td>
                </tr>
                <tr>
                    <td class="order-item-label>АГРЕГАТ НАСОСНЫЙ</td>
                    <td class="order-item-quantity>2x</td>
                    <td class="order-item-total-price>59 268 ₽</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="checkout-details__cont">
    <div class="checkout-details__row_count">
        <div class="checkout-details__label">Количество:</div>
        <div class="checkout-details__value">32 шт</div>
    </div>
    <div class="checkout-details__row_total-price">
        <div class="checkout-details__label">На сумму:</div>
        <div class="checkout-details__value">1 079 309₽</div>
    </div>
</div>
</div>
файл: commerce-checkout-form.html.twig
Корзина. шаг 2. Форма заказа 
<div class="checkout-form">
<h2 class="checkout-form__title"> Укажите ваши контактные данные!</h2>
<div class="checkout-form__markup">
    <p>После оформления заказа мы свяжемся с вами и уточним информацию по доставке и оплате</p>
</div>
<div class="checkout-form__form">

    fieldset#edit-contact-information
        legend
            span(fieldset-legend) Контактная информация
        .fieldset-wrapper
            .form-type-email.form-item
                label(for="field5") Ваш Email
                input#field5.form-text(type="text", name="contact_information[email]", value="")

    #payment-information-wrapper
        fieldset#edit-payment-information
            legend
                span(fieldset-legend) Платёжная информация
            .fieldset-wrapper
                .form-wrapper
                    .field--name-field-contact-face
                        .form-item
                            label(for="field1") Контактное лицо
                            input#field1.form-text(type="text", name="", value="")
                    .field--name-field-company
                        .form-item
                            label(for="field2") Название организации
                            input#field2.form-text(type="text", name="", value="")
                    .field--name-field-city
                        .form-item
                            label(for="field3") Город доставки
                            input#field3.form-text(type="text", name="", value="")
                    .field--name-field-phone
                        .form-item
                            label(for="field4") Ваш телефон
                            input#field4.form-text(type="text", name="payment_information[billing_information][field_phone][0][value]", value="")
                    .field--name-field-file
                        .form-item
                            label(for="field3") Файл
                            input.form-file(name="",type="file")
                    .field--name-field-file
                        .form-item.form-type-managed-file
                            label(for="edit-payment-information-billing-information-field-file-0-upload--E53wmkUrJE4") Файл
                        .form-managed-file
                            input(type="hidden", name="payment_information[billing_information][field_file][0][fids]", value="2338")
                            span.file.file--mime-image-png.file--image
                                a(href="#", type="image/png; length=121793") social_icons_v2_graphicsland.ru-5-700x578.png
                            input(type="submit", name="", value="Удалить").button.form-submit
                    .field--name-field-comment
                        .form-item
                            label(for="field6") Комментарии к заказу
                            textarea.form-textarea#field6(name="")
                    .field--name-field-privacy-policy
                        .form-item
                            input.form-checkbox#edit-payment-information-billing-information-field-privacy-policy-value(type='checkbox' name='payment_information[billing_information][field_privatpolicy][value]' value='1' checked='checked')
                            label.option.js-form-required.form-required(for='edit-payment-information-billing-information-field-privacy-policy-value') Завершая оформление заказа, я подтверждаю согласие с обработкой персональных данных

</div>
<div id="edit-actions" class="form-actions">
    <input class="form-submit" type="submit" name="op" value="Завершить форму оплаты." />
</div>
</div>
файл: commerce-checkout-form.html.twig
Обратите внимание что в #payment-information-wrapperнету поля с email.
Поле email находится в fieldset#edit-contact-information
Корзина. шаг 3. Ваш заказ успешно оформлен 
<div class="cart-complete margin">
<div class="cart-complete__col-1">
    <div class="cart-complete__title"> Ваш заказ успешно оформлен!</div>
    <div class="cart-complete__number">
        Номер заказа:
        <span>№327</span>
    </div>
    <div class="cart-complete__help">
        Узнать статус вашего заказа
        <br>
        вы можете по телефону:
    </div>
    <div class="cart-complete__phone">
        <a href="tel:88002226690">8-800-222-66-90</a>
    </div>
<div class="cart-complete__col-2">
    <div class="cart-complete__text">В течение рабочего дня мы обработаем ваш заказ и отправим вам коммерческое предложение</div>
    <div class="cart-complete__text">Подробная информация о заказе отправлена на указанную вами электронную почту</div>
</div>
</div>
© Приданников Михаил
2020 - 2025