Поля: цена, планировка и фото кухни

Зачем полям отдельное место

Можно было бы написать цену прямо в тексте: «Олива, 38 000 рублей за метр». Но тогда шаблон не знает, где в тексте цена. Он не сможет показать её крупно, вывести в каталоге или посчитать стоимость кухни длиной в три метра.

Поле хранит одно значение определённого вида: число, строку, дату, вариант из списка, картинку. Шаблон знает его имя и выводит, где нужно.

Шаблон кухни

Начнём с шаблона, потому что поле привязывается к шаблонам. Создайте шаблон Kitchen:

<script>
  import Content from '$core/Content';
  import Layout from '$components/Layout';
  import { image } from '$core';

  let { page } = $props();

  const price = page.fields.price;
  const plan = page.fields.plan;
  const photo = page.fields.photo ? image(page.fields.photo) : null;
  const rub = new Intl.NumberFormat('ru');
</script>

<Layout {page}>
  {#if photo}
    <img
      class="photo"
      src={photo.src}
      srcset={photo.srcset}
      sizes="(min-width: 48rem) 45rem, 100vw"
      width={photo.width}
      height={photo.height}
      alt={photo.alt}
    />
  {/if}

  <h1>{page.title}</h1>

  <dl class="facts">
    {#if plan}
      <div><dt>Планировка</dt><dd>{plan}</dd></div>
    {/if}
    {#if price}
      <div><dt>Цена</dt><dd>от {rub.format(price)} ₽ за метр</dd></div>
    {/if}
  </dl>

  <Content of={page} />
</Layout>

<style>
  .photo {
    display: block;
    border-radius: 1.25rem;
  }

  .facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
    margin: 0;
  }

  dt {
    color: #6b6862;
    font-size: 0.875rem;
  }

  dd {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 650;
  }
</style>

• page.fields.price: значение поля с именем price. Так же plan и photo. Если поле пустое, там null.
• new Intl.NumberFormat('ru'): форматирует число по-русски, с пробелом между разрядами: 38000 станет «38 000».
• image(page.fields.photo): по пути картинки в медиатеке image возвращает всё, что нужно тегу <img>: адрес, уменьшенные копии для разных экранов, размеры и описание.
• srcset и sizes: браузер телефона скачает маленькую копию картинки, а браузер большого экрана большую. Страница грузится быстрее.
• <dl>, <dt>, <dd>: список «название и значение». Для характеристик он подходит лучше абзацев.

Завести поля

На вкладке Элементы нажмите + рядом со словом «Поля страниц». Заполните форму для цены:

• Подпись: «Цена за метр, ₽». Так поле подписано в редакторе страницы.
• Имя для шаблона: price. Латиницей; именно это имя стоит в page.fields.price.
• Тип: Число.
• Шаблоны: отметьте Kitchen.

Нажмите Сохранить поле. Так же заведите ещё два поля, тоже для шаблона Kitchen:

• «Планировка», имя plan, тип Выбор из списка, варианты через запятую: «Прямая, Угловая, П-образная»;
• «Фото», имя photo, тип Изображение.

Фотографии в медиатеку

Откройте Медиа и перетащите туда фотографии кухонь. Подойдут снимки из шоурума или визуализации из программы, в которой вы рисуете проекты. Папку назовите kuhni: в полосе загрузки есть поле папки, менеджер его запомнит.

Щёлкните по загруженной картинке. В карточке файла напишите описание, одной фразой: «Прямая кухня с оливковыми фасадами шейкер и светлой столешницей». Его прочитает незрячий посетитель, а шаблон Kitchen выводит его в alt.

Уменьшенные копии на 480, 960 и 1920 пикселей Eile сделает сам. Именно они попадают в srcset.

Кухни внутри «Каталога»

Наведите мышь на «Каталог» в дереве и нажмите +: новая страница сразу окажется внутри. Шаблон поменяйте на Kitchen, иначе вкладки с полями не будет.

1. Заголовок «Олива», адрес соберётся сам: oliva.
2. В блоке Место на сайте выберите шаблон Kitchen.
3. Напишите пару предложений о кухне.
4. Откройте вкладку Поля: цена 38000, планировка «Прямая», фото выберите из медиатеки.
5. Сохраните и опубликуйте.

Так же создайте «Кашемир» (прямая, 46 000 ₽ за метр) и «Шалфей» (угловая, 52 000 ₽ за метр). Вторая и третья кухни получат шаблон Kitchen сами: новая страница берёт шаблон у соседей.