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

Все главы  [1 Перед началом](https://eile.site/cookbook/nachalo)[2 Установка](https://eile.site/cookbook/ustanovka)[3 Страницы](https://eile.site/cookbook/stranitsy)[4 Первый шаблон](https://eile.site/cookbook/pervyi-shablon)[5 Компоненты](https://eile.site/cookbook/komponenty)[6 Рамка сайта](https://eile.site/cookbook/ramka)[7 Поля страниц](https://eile.site/cookbook/polya)[8 Списки страниц](https://eile.site/cookbook/spiski)[9 Свои настройки](https://eile.site/cookbook/nastroiki)[10 Заявка на замер](https://eile.site/cookbook/forma)[11 Живые части](https://eile.site/cookbook/zhivye-chasti)[12 В интернет](https://eile.site/cookbook/v-internet)[13 Что дальше](https://eile.site/cookbook/dalshe)

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

У кухни есть цена за метр, планировка и фотография. В текст их писать неудобно: цену не отсортируешь и не поменяешь в одном месте. Для таких данных у страниц есть поля.

Глава 7 из 13 · 4 минуты чтения

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

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

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

## Шаблон кухни

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

Шаблон 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`, тип **Изображение**.

![Редактор поля «Цена за метр, ₽»](https://eile.site/media/screens/cook-field-light.webp?v=a54a5fcc38ce537e)  ![Редактор поля «Цена за метр, ₽»](https://eile.site/media/screens/cook-field-dark.webp?v=9029a80da43d8e34)

Редактор поля «Цена за метр, ₽»

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

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

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

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

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

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

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

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

![Страница кухни «Олива»: фото, планировка и цена из полей](https://eile.site/media/screens/cook-kitchen-light.webp?v=e91f8611a2ace7b6)

Страница кухни «Олива»: фото, планировка и цена из полей