Скрипт для загрузки данных в Тильду из Google Spreadsheets

Так случилось, что у Tilda нет стандартных средств импорта данных из других источников, да и редактор таблиц нельзя назвать очень удобным. Этот скрипт поможет исправить эти недостатки.
— Испытай меня ...
заполните форму и ваш Nick и вопрос появятся в таблице для третьго примера
Этот скрипт пригодится дизайнерам собирающим сайты при помощи сервиса Tilda.cc, которые хотят добавить на сайт немного интерактива.
Например можно сделать вывод прайс-листа, бронирование на мероприятие с ограниченным количеством мест, вывести остатки товара на складе и т.д.
Конечно для этого нужно иметь некоторые навыки работы с электронными таблицами Excel или Google Spreadsheets, но это проще чем учиться программировать на Javascript.
Как это работает?
Чтобы данные из таблицы Google появились в таблице Tilda нужно выполнить 3 простых шага:
Создать Google Таблицу
Поместите в нее данные которые хотите опубликовать
Добавить блок «Таблица»
Оформите таблицу в соответствии с необходимым внешним видом, настройте ширину, цвета и шрифты строк и столбцов
Вставить блок HTML и код
Проще всего вставить код из первого примера и будут показаны все данные из любой таблицы.
Пример 1
Простая загрузка данных из таблицы
Это самое легкое применение скрипта. Все что для этого нужно это создать таблицу в Google.Docs и открыть доступ для чтения по ссылке, на странице Тильды добавить блок Колонки > Таблица (CL46), сразу после него добавить блок Другое > HTML-код (Т123) и вставить в него код из примера. Не забудьте поменять url на адрес вашей таблицы гугл.
Актуальную версию скрипта можно найти на GitHub, если есть возможность рекомендую залить скрипт на свой хостинг.
Оригинальную таблицу можно посмотреть здесь.
<script>
    var prms = [
        {
            id  : "0", 
            url : "https://docs.google.com/spreadsheets/d/1teQYqhH8xzW56DdKZPPDeuayXJRX1U92PR8y4qhL6UA/edit?usp=sharing",
            req : "select *"
        },
    ];
</script>
<script src="http://petrovich.mobak.ru/cdn/gss4tilda_table.js"></script>
Пример 2
Усложним запрос и покажем только нужные данные
Добавлять таблицу вы уже умеете, давайте выведем только девушек моложе 30 лет отсортировав по возрасту. Для этого изменим параметр req. Документация по языку запросов написана на английском, но есть и на русском.
Если "перевести" на русский строку запроса, то получится примерно следующее: Покажите-ка нам столбцы А и В, да только те строки, где в столбце С хранится строка f и в столбце В число меньше 30. И отсортируйте строки по возрастанию чисел в столбце В, пожалуйста.

<script>
    var prms = [
        {
            id  : "0", 
            url : "https://docs.google.com/spreadsheets/d/1teQYqhH8xzW56DdKZPPDeuayXJRX1U92PR8y4qhL6UA/edit?usp=sharing",
            req : "select A, B where C='f' and B<30 order by B"
        },
    ];
</script>
<script src="http://petrovich.mobak.ru/cdn/gss4tilda_table.js"></script>
Пример 3
Если нужно вставить несколько таблиц на одну страницу
Иногда может потребоваться вставить на страницу несколько таблиц. Для этого вам пригодится третий параметр id. У каждого блока Тильды есть уникальный идентификатор, его можно найти под кнопкой Настройки в самом низу. Он будет выглядеть примерно так Block id: #rec10295104. Вам нужен только номер. Вставьте его вместо ноля. Обратите внимание, для всех таблиц требуется только один блок HTML-код, но внутри него нужно указать параметры id, url и req для каждой из таблиц. Смотрите пример ниже, это код который используется на данной странице. Кстати, это именно те данные которые вводят пользователи в форму в начале страницы. 
<script>
    var prms = [
        {
            id  : "0", 
            url : "https://docs.google.com/spreadsheets/d/1teQYqhH8xzW56DdKZPPDeuayXJRX1U92PR8y4qhL6UA/edit?usp=sharing",
            req : "select *"
        },
        {
            id  : "10294914", 
            url : "https://docs.google.com/spreadsheets/d/1teQYqhH8xzW56DdKZPPDeuayXJRX1U92PR8y4qhL6UA/edit?usp=sharing",
            req : "select A, B where C='f' and B<30 order by B"
        },
        {
            id  : "10294593", 
            url : "https://docs.google.com/spreadsheets/d/1Ml-V5fyeWFvk6TDzpH82fZ05RIbqirdHLzXTH8946J8/edit?usp=sharing",
            req : "select B , C where B != "" order by A desc limit 5"
        },
    ];
</script>
<script src="http://petrovich.mobak.ru/cdn/gss4tilda_table.js"></script>
Остались вопросы?
Напишите мне и я постараюсь вам помочь. Вопросы будут появляться ниже по мере появления ответов. Кстати, форма использует этот же скрипт.
Bot:
А где вопросы то?
SUPPORT:
Одно из двух, либо они еще не загрузились, либо их еще не задали :)
Made on
Tilda