13,8 тыс подписчиков

Как в два счета сделать сайт редактируемым извне с помощью данных Google Sheets

7 марта 20217 мар 2021

3 мин

Оглавление

Приступим
Добавим websheet.js к сайту
Визуализируем данные таблицы

Как-то раз заказчики спросили меня, можно ли сделать так, чтобы события и ярмарки на их сайте мгновенно обновлялись. Сегодня я могу сказать: «Да, и все будет интегрировано с деловой документацией в Google Spreadsheets».

Цель этого руководства — показать, как сделать некоторые части сайта легко редактируемыми вашими технически не подкованными коллегами или клиентами. Готовы? Поехали!

Приступим

Первым делом нужно… создать Google таблицу ! В ней должна быть одна строка заголовка (текстовое содержимое ее потом будет использоваться для визуализации данных) и строки с данными. Используем любой формат ячеек (текст, цифры, даты, валюты, выпадающие списки, флажки и т. д.). Подойдут даже URL-адреса (ссылки или фото), которые будут отображаться в HTML. Вот пример:

После этого жмем на кнопку Share («Поделиться») и в разделе Get link («Получить ссылку») нажимаем на Change to anyone with the link («Изменить на всех, у кого есть ссылка»), чтобы включить открытый доступ для чтения к таблице. Затем копируем ссылку на таблицу.

Добавим websheet.js к сайту

Для отображения данных таблицы на сайте будем использовать автономную и легковесную библиотеку JS с открытым исходным кодом websheet.js . Ее нужно просто импортировать:

После импортирования websheet.js задействуем инициализатор websheet , который принимает два параметра:

Первый(products ) — это имя источника данных. Если вызывать инициализатор websheet неоднократно, то для каждой таблицы надо будет использовать разные имена источников данных.
Второй параметр — это конфигурация источника данных (замените значения url и sheet своими) .

Мы задействовали самый полезный функционал библиотеки. Есть здесь также и много другого, например кэширование, колбэки, запросы (для фильтрации, сортировки и группировки строк) и т. д. Загляните в документацию : там все это приводится.

Визуализируем данные таблицы

Заключительный этап — визуализация данных таблицы, которые мы только что загрузили! Добавляем визуализацию источников данных в любом месте страницы сайта:

В этом примере было использовано несколько средств форматирования:

data-websheet=" <dataSourceName>" Определяет блок, который будет дублироваться и визуализироваться для каждой строки источника данных.
data-websheet-if=" <columnName>"
Отображает элемент только в том случае, если ячейка содержит отмеченный флажок или если это псевдоним, возвращающий true (противоположный эффект будет с data-websheet-unless ).
data-websheet-text=" <columnName>"
Заполняет текст элемента значением ячейки.
data-websheet-bind: <attributeName>=" <columnName>"
Заполняет значение данного атрибута значением ячейки, например:
<img data-websheet-bind:src="Picture Column" />
<a data-websheet-bind:href="Link" data-websheet-bind:text="Link Text"></a>

После загрузки websheet.js блок будет дублироваться и визуализироваться для каждой строки таблицы:

Опять же задействован самый полезный функционал библиотеки, но есть и много другого: шаблоны, состояния (загрузчики и ошибки) и т. д. Загляните в документацию : там все это приводится.

Заключение

Нам удалось в два счета сделать сайт редактируемым извне: любое изменение в таблице сразу же отображается на сайте. Красота!

Весь пример/демоверсия вместе с задействованным функционалом доступен здесь (это меню пекарни). Попробуйте сделать из этого что-то свое, используя рассмотренный функционал и добавляя новый.