Урок 3 из 5

Данные: таблица, которую вы ведёте сами

10 минут

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

Сайт есть, но содержимое сейчас вписано в страницы. Это значит, что каждая новая позиция, каждая изменившаяся цена и каждая опечатка становятся запросом к агенту.

Исправляем это один раз: содержимое переезжает в обычную таблицу, а страницы начинают её читать. После этого изменить цену значит открыть таблицу и исправить число — агент не нужен: ни запроса, ни ожидания, ни риска, что он заодно поправит что-то ещё.

Это главный урок курса. Всё остальное — техника, а это то, что определяет, сколько будет стоить владение сайтом после того, как вы его собрали.

Выберите один запрос из трёх

Зависит только от того, где ваши данные лежат сейчас.

Если своих данных пока нет. Агент вынесет демонстрационные в таблицу, и вы будете заменять их по строкам — структура уже готова, вписывать в пустой файл ничего не придётся.

Выберите один запрос из трёх
Сейчас данные для страниц вписаны в код. Вынеси их в отдельную таблицу, чтобы я заполнял её сам, а сайт брал данные оттуда. Сделай отдельный лист на каждый тип объекта из плана, столбцы — поля этого объекта. Перенеси туда всё, что сейчас показывается на сайте, и в первом столбце пометь эти строки словом «демо». Из таблицы должно читаться всё: список объектов, карточки, страницы объектов, блоки на главной, значения фильтров и пункты меню. В коде не должно остаться ни одного вписанного названия, цены или категории. Оставь в таблице столбец для фотографии, даже если он пока пустой: где фото нет, на странице показывай заглушку. В конце напиши тремя строками: где лежит таблица, как её открыть и что в ней нельзя менять. Готово, когда я меняю значение в таблице, обновляю страницу и вижу изменение.

Если у вас уже есть свой файл с данными. Любой: прайс, список услуг, экспорт из 1С, выгрузка из CRM, наспех сделанный список в Excel. Положите его в папку проекта — разбираться будет агент, а не вы.

Выберите один запрос из трёх
В папке проекта лежит мой файл с данными. Изучи его сам: определи, что означает каждый столбец и какие поля из плана в нём есть. Собери на его основе рабочую таблицу сайта: структуру и названия столбцов сделай по плану, мои значения не меняй и не сокращай, строки не выбрасывай. Столбцы, которым не нашлось соответствия, перенеси в конец и не удаляй. Демонстрационные данные, которые ты придумал раньше, удали с сайта полностью и убери пометку в подвале. Из таблицы должно читаться всё: список объектов, карточки, страницы объектов, блоки на главной, значения фильтров и пункты меню. Оставь в таблице столбец для фотографии, даже если он пока пустой: где фото нет, на странице показывай заглушку. В конце скажи, сколько позиций перенесено, какие поля остались пустыми и какие столбцы тебе непонятны. Вопросов задай не больше трёх.

Если данные лежат в Битрикс24. Выгрузите их из CRM в файл и используйте запрос выше — этого достаточно, чтобы наполнить сайт. Постоянный обмен, когда товары и цены обновляются на сайте сами, настраивается в курсе «Интеграция сайта с Битрикс24»; его удобнее пройти после этого, когда сайт уже готов.

Как править таблицу

Откройте её в любой привычной программе — Excel, Numbers, Google Таблицы. Дальше три правила.

Одна строка — один объект: добавить позицию значит добавить строку. Названия столбцов в первой строке не переименовывайте и не переставляйте, по ним сайт находит данные. Пустая ячейка допустима: нет цены, описания или фотографии — оставьте пусто, страница не сломается, а пустое поле просто не покажет.

Нужен новый столбец — добавьте его сами и скажите одной фразой: «в таблице появился столбец „срок изготовления“, покажи его на странице товара». Но не заводите столбцы про запас: если вы не готовы заполнить столбец для всех позиций, у трёх он будет заполнен, у остальных сорока пуст, и сайт станет выглядеть неровно.

Ещё одна вещь, которая экономит время потом: в столбцах, по которым работают фильтры и меню, пишите значения одинаково. «Москва», «москва» и «МСК» для вас одно и то же, а для сайта — три разных значения и три разных фильтра. Если сомневаетесь, попросите «покажи все встречающиеся значения в столбце „категория“» — расхождения станут видны сразу, и агент их выровняет.

Свои фотографии

Фотографий агент не придумывает и не ищет — это ваши файлы. Но раскладывать их по строкам таблицы вручную не нужно: сложите файлы в папку проекта и попросите разобраться.

Свои фотографии
Я положил в папку проекта свои фотографии. Сопоставь их с позициями в таблице и подключи к сайту. Имена файлов приведи к нормальному виду: латиницей, без пробелов, по названию позиции. Заполни в таблице столбец с фотографией. Сожми файлы без заметной потери качества и скажи, сколько весила и сколько весит теперь каждая страница. Если по имени файла непонятно, к какой позиции он относится, — не угадывай, покажи мне список таких файлов и спроси. В конце дай списком: какие позиции получили фотографию, а какие остались с заглушкой.

Дальше добавлять фотографии можно и самому, без агента: положили файл в ту же папку, вписали его имя в столбец с фотографией — и она появилась на сайте.

Три вещи, которые стоит знать про фотографии.

Снимки с телефона тяжёлые — по несколько мегабайт каждый. Двадцать таких фотографий на странице каталога, и она открывается за десяток секунд на мобильном интернете. Поэтому в запросе стоит просьба сжать: на глаз разницы не будет, а вес упадёт в разы.

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

Несколько фотографий на позицию тоже можно: спросите агента, как вписать их в одну ячейку, и попросите сделать на странице позиции галерею.

Пока своих фотографий нет, сайт работает с заглушками — это нормально и ничего не ломает. Добавляйте по мере появления, начиная с позиций, которые стоят на главной и в начале каталога.

Что получилось

  • таблица с вашими данными, которую вы открываете в Excel или Google Таблицах;
  • сайт читает из неё всё: карточки, страницы позиций, блоки главной, фильтры, меню;
  • фотографии подключаются вписыванием имени файла в столбец — без обращения к агенту;
  • демонстрационных данных на сайте не осталось.

Стоит проверить две вещи. Измените значение в таблице и обновите страницу — изменение должно появиться. Если нет, вернитесь к уроку и не идите дальше: иначе весь сайт останется на данных, которые может менять только агент.

Затем добавьте позицию с новой категорией и посмотрите, появилась ли эта категория в фильтре и в меню сама. Если нет — они вписаны в код, скажите «собирай значения фильтров и пунктов меню из таблицы». Это самая частая недоделка на этом шаге, и заметить её иначе невозможно.

Ещё посмотрите на каталог с вашим количеством позиций: демонстрационных было двенадцать, а ваших может быть три или сто.