...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element - примеры блоков применения стилей в CSS
Структура
Заголовок таблицы - <h1> значение <h1>
...
<td>{{clientName}}</td> - значение, которое будет выводиться в ячейке
<td>{{address}}</td> -значение, которое будет выводиться в ячейке
<td>{{postcode}}</td> - значение, которое будет выводиться в ячейке
<td>{{this.capacity}}</td> - значение, которое будет выводиться в ячейке
Описание стиля таблиц
Раздел начинается с тега <style>
...
table.main-info td {
border: 1px solid #222B35; - Рамка вокруг таблицы
padding: 2px 5px; - Поля вокруг текста
white-space: nowrap; - устанавливает, как отображать пробелы между словами. Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.
text-align: left; - выравнивание текста
}
...
table.main-info td.divider {
border: none;
width: 5%;
}
Добавление столбца с параметром
Для того, чтобы добавить столбец в таблицу необходимо:
...
<td>{{clientPhone}}</td>
<td>{{address}}</td>
<td>{{postcode}}</td>
<td>{{this.capacity}}</td>
<td>{{#if distance}}{{Math.round(distance * 10) / 10}}{{/if}}</td>
<td><span class="nowrap">{{format(startTime, 'HH:mm')}} - {{format(endTime, 'HH:mm')}}</span></td>
<td class="camelcase">
<span class="nowrap">
{{#if jobType == "BEGIN"}}
{{translate('startAddress')}}
{{elseif jobType == "END"}}
{{translate('endAddress')}}
{{elseif jobType == "BREAK"}}
{{translate('break')}} ({{format(endTime - startTime, 'HH:mm', true)}})
{{else}}
{{translate(jobType)}}
{{/if}}
</span>
</td>
Смотрим, что получилось:
Добавление новой таблицы
- Для добавления новой таблицы необходимо создать класс таблицы.
- Описать заголовки таблицы, т.е. обозначить параметры, которые будут содержаться в столбце
- Описать значения параметров для столбцов.
...
Столбцы, которые не должны заполняться системой, прописываются с пустым значением
<td></td>
<td></td>
</tr>
<tfoot></tfoot>
</table>
Смотрим что получилось:
Задание стиля таблицы
В таблице со списком заказов строки через одну имеют серый цвет. Сейчас на примере рассмотрим, как поменять цвет и убрать выделение.
Меняем цвет (заливку)
...
строк
Находим описание таблицы с классом orders-info. Находим строчки с описанием псевдокласса. Меняем значение background. В таблице HTML цветов https://colorscheme.ru/html-colors.html выбираем цвет значение HEX - к примеру, #C71585
table.orders-info tr:nth-child(odd) td{
background: #C71585;
Смотрим:
Меняем заливку шапки
Находим описание шапки таблицы, должен быть тег th
table.orders-info th {
background: #F0E68C; -указываем цвет заливки
color: #4B0082; - цвет шрифта в заголовке
Границы/рамки таблицы
После создания таблицы нужно обозначить ее границы, то есть добавить сетку.
...
table.vehicle tfoot {
border-top: 1px solid #222B35;
}
Смотрим:
Добавление логотипа компании
Для того, чтобы добавить логотип компании к шаблону подтверждения доставки, прежде всего нужно совершить несколько подготовительх шагов.
...
Пример полного описания подтверждения доставки с логотипом компании можно посмотреть здесь: POD HTML .txt
Так выглядит результат:
Работа с функциями
Helpers are special attributes that help to aggregate different functions in POD or Manifest templates to show additional parameters. The Helpers block is located at the bottom of the parameters section on the template edit screen.
The list of helpers is the same for both POD and Manifest templates. It includes the following parameters:
- sum - shows the specific quantity of any listed elements (items, runs etc.). Here you need to specify the summed element (array) and the specific quantity. For instance, the planned/actual quantity of order items.
- avg - shows the average quantity of any listed elements (items, runs etc.)
- count - shows the total quantity of any listed elements (items, runs etc.)
- range - use this helper, if you need some data to be repeated several times (text, numbers etc.). It accepts up to three parameters: from, to, step.
- format - customises the date and time format. For instance, if you want to set the time in hours and minutes 'HH:mm' or in hours, minutes and seconds 'HH:mm:ss'.
- translate - shows the specified parameter in its proper localisation.
How Helpers work
For example, we want the planned and actual quantity of order items to be displayed on our POD. To do it:
- Go to the Edit form and find the section, where you want the helpers to be inserted (for instance, Order info section)
- Insert a blank line in the desired place
- Select the sum helper. Inside the parentheses, please indicate the data array (order items) and the required field name (quantity).
- Then select the sum helper again and indicate the same data array (order items), but another field name (actualQuantity).
- Optional. Separate the two helpers with a slash for proper reading
This is how the whole line should look like:
- Then click Preview to see the result. The planned vs actual quantity of items is displayed in its selected place separated with slash.
...
См. также
...