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

Так случилось, что у Tilda нет стандартных средств импорта данных из других источников, да и редактор таблиц нельзя назвать очень удобным. Этот скрипт поможет исправить эти недостатки.
К сожалению Тильда запретили использовать HTML-блок на бесплатных аккаунтах поэтому я не могу вам показать как работает скрипт, остается просто попробовать на своем платном аккаунте или во время пробного периода.
Если у вас что-то не работает, напишите мне на gss4tilda@gmail.com
На обещаю, что прямо быстро отвечу, но в течении пары дней по крайней мере напишу, что вопрос получен и какие-то идеи по исправлению.
UPD. Последнее обновление скрипта 9 октября 2021 г. В Tilda изменили код генерации таблиц, пришлось внести правки и в мой код.
UPD2. Тильда отказалась от использования jQuery по умолчанию и теперь его надо включать в настройках сайта > Ещё > [x] Подключить jQuery на страницах сайта.
Этот скрипт пригодится дизайнерам собирающим сайты при помощи сервиса Tilda.cc, которые хотят добавить на сайт немного интерактива.
Например можно сделать вывод прайс-листа, бронирование на мероприятие с ограниченным количеством мест, вывести остатки товара на складе и т.д.
Конечно для этого нужно иметь некоторые навыки работы с электронными таблицами Excel или Google Spreadsheets, но это проще чем учиться программировать на Javascript.
Как это работает?
Чтобы данные из таблицы Google появились в таблице Tilda нужно выполнить 3 простых шага:
Создать Google Таблицу
Поместите в нее данные которые хотите опубликовать
Добавить блок «Таблица»
Оформите таблицу в соответствии с необходимым внешним видом, настройте ширину, цвета и шрифты строк и столбцов
Вставить блок HTML и код
Проще всего вставить код из первого примера и будут показаны все данные из любой таблицы.
Пример 1
Простая загрузка данных из таблицы
Это самое легкое применение скрипта. Все что для этого нужно это создать таблицу в Google.Docs и открыть доступ для чтения по ссылке, на странице Тильды добавить блок Колонки > Таблица (CL46), сразу после него добавить блок Другое > HTML-код (Т123) и вставить в него код из примера. Не забудьте поменять url на адрес вашей таблицы гугл.
Еще вам нужно в поле id указать идентификатор блока. У каждого блока Тильды есть уникальный идентификатор, его можно найти под кнопкой Настройки в самом низу. Он будет выглядеть примерно так Block id: #rec10295104. Вам нужен только номер. Вставьте его вместо 10080283.

Оригинальную таблицу можно посмотреть здесь.
<script>
    //Script который нужно поправить под ваши задачи
    var prms = [
        {
            id  : "10080283", 
            url : "https://docs.google.com/spreadsheets/d/1teQYqhH8xzW56DdKZPPDeuayXJRX1U92PR8y4qhL6UA/edit?usp=sharing",
            req : "select *"
        },
    ];
</script>

<script>
//Script который не стоит править, если вы не понимаете, что там происходит.

var curBlock = 0; //для последовательного заполнения нескольких таблиц.
var google = {visualization: {Query: {setResponse: function(){}}}} //callback функция для получения ответа от google spreadsheets

//Генератор данных для блока таблица 
function gss4tilda_createT431 (blockID, data)
{
	//Заполняем заголовки таблицы
	var part1="";
	for(var i=0; i<data.table.cols.length; i++)
	{
		part1 += htmlentities(data.table.cols[i].label) + ';';
	}
	part1 = part1.slice(0,-1);
	
	//Заполняем данные таблицы
	var part2="";
	var empty = true;
	for(var i=0; i<data.table.rows.length; i++)
	{
		empty = true;
		for(var j=0; j<data.table.rows[i].c.length; j++)
		{			
			if(data.table.rows[i].c[j] !== null && typeof data.table.rows[i].c[j] === 'object' && data.table.rows[i].c[j].v !== null && data.table.rows[i].c[j].v !== '')
			{
				part2 += htmlentities(data.table.rows[i].c[j].v) + ';'
				empty = false;
			}
			else
			{
				part2 += ';'
			};
			
		}
		
		part2 = !empty ? part2.slice(0,-1) + "\n" : part2.slice(0,- data.table.rows[i].c.length);
		//part2 += "\n";
	}
	part2 = part2.slice(0,-1);

	//Очищаем блок от старых данных
	$('#rec' + blockID + " table").html("");
  
  $('#rec' + blockID + " .t431__data-part1").html(part1);
  $('#rec' + blockID + " .t431__data-part2").html(part2);
  
  t431_init(blockID);
}

//Callback функция для полуения данных от google в формате jsonp
google.visualization.Query.setResponse = function(data)
{
	//Получаем ссылку на нужный блок
	var blockID = prms[curBlock].id;
	var blockType = $("#rec"+blockID + " div:first").attr("class");

	switch (blockType) {
		case 't431' :
			//table
			gss4tilda_createT431(blockID, data);
			break;
	}

	
	//Переходим к следующему блоку или сбрасываем счетчик
	if (curBlock < prms.length-1)
	{
		curBlock++;
		getGssData();
	}
	else
	{
		curBlock = 0;
	}
}

//функция запроса данных от google spreadsheets
function getGssData()
{
	//Проверяем наличие всех необходимых данных
	if ("id" in prms[curBlock] && "url" in prms[curBlock] && "req" in prms[curBlock])
	{
		//Если вместо id таблицы стоит 0, то берем таблицу из предыдущего блока
		if(prms[curBlock].id==='0')
		{
		    alert("Укажите ID таблицы, 0 временно не работает.")
		    //let scriptElem = document.currentScript;
			//prms[curBlock].id = $(scriptElem).parents('.r').prev().attr('id').substr(3);
			
			//$("script[src]").each(function(){
				//if(~this.src.indexOf("gss4tilda"))
			        //prms[curBlock].id = $(this).parents('.r').prev().attr('id').substr(3);
			//});
		}
		//TODO: Добавить проверку на наличие rec в начале ID и удаление
		//получаем код таблицы из url и отправляем запрос на получение данных
		var gssCode = prms[curBlock]["url"].slice( prms[curBlock]["url"].indexOf("spreadsheets/d/") + 15, prms[curBlock]["url"].indexOf("/edit?"));
		$.ajax({
			url: 'https://docs.google.com/a/google.com/spreadsheets/d/' + gssCode + '/gviz/tq?tq=' + encodeURIComponent( prms[curBlock].req ), 
			dataType : 'jsonp'
		});
	}
}

function htmlentities(s){	// Convert all applicable characters to HTML entities
	// 
	// +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)

	var div = document.createElement('div');
	var text = document.createTextNode(s);
	div.appendChild(text);
	return div.innerHTML;
}

$().ready(function(){
	//сбрасываем счетчик таблиц и получаем первую таблицу
	curBlock = 0;
	getGssData();
})
</script>
Пример 2
Усложним запрос и покажем только нужные данные
Добавлять таблицу вы уже умеете, давайте выведем только девушек моложе 30 лет отсортировав по возрасту. Для этого изменим параметр req. Документация по языку запросов написана на английском, но есть и на русском.
Если "перевести" на русский строку запроса, то получится примерно следующее: Покажите-ка нам столбцы А и В, да только те строки, где в столбце С хранится строка f и в столбце В число меньше 30. И отсортируйте строки по возрастанию чисел в столбце В, пожалуйста.

<script>
    var prms = [
        {
            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"
        },
    ];
</script>

<script>
//см. код в первом примере
</script>
Пример 3
Если нужно вставить несколько таблиц на одну страницу
Иногда может потребоваться вставить на страницу несколько таблиц. Для этого вам нужно будет создать набор записей для каждой таблицы. Обратите внимание, для всех таблиц требуется только один блок HTML-код, но внутри него нужно указать параметры id, url и req для каждой из таблиц. Смотрите пример ниже.
<script>
    var prms = [
        {
            id  : "10080283", 
            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>
//см. код в первом примере
</script>
Удачи, надеюсь у вас все получится
Если что, пишите на почту gss4tilda@gmail.com, постараюсь помочь.
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website