Displaying price lists on the website from Google Sheets Visit site

JavaScript
Google Scripts
JSON
PHP

Integration of Google Sheets with the site: translation of data from Google Sheets on pages with a price list.

A service that receives data from Google Sheets and displays them on the site. This mechanism allows the content manager to comfortably edit price list data in Google Spreadsheets. This functionality was implemented by me on the pages with prices for the services of surgeons at the Damas Medical Center: price list.

Work algorithm

The Google Web-App web application receives the data of all sheets from all Google sheets and gives the finished JSON.
On the site (in my case, this is the AdminHelper application), when you click the Update price button, price table data is received and the pricehirurg.json JSON file is written/updated using PHP (priceData.php).
The site's JS script reads (priceData.php) the pricehirurg.json file, generates the HTML code for price tables and inserts them on pages with prices (the data of each Google Sheets sheet is inserted into a container with a specific ID).

Finished page with prices

Price lists of an individual doctor: damasclinic.ru

Page with price lists on the website

Price data is stored in a JSON file, selected from there by a JS script and rendered to the Price page. The process of obtaining data from Google Sheets on the site:

Google Apps Script

Javascript get data from google spreadsheet json

Script to display data from json file on the site page

Php script to read and update data in json file

JSON file with data from Google Sheets Google Sheets

Getting data from Google Sheets in the AdminHelper application

AdminHelper app: index.html

					          <section id="updatePrice" class="content">

<div class="container">
	<main class="page-content">

		<p><Данные прайса сохраняются в JSON файл, выбираются оттуда JS скриптом и рендерятся на страницу Цены.</p>

		<h1>Обновить прайс - Амжад, Першукова, Исбир</h1>
		<p><input type="submit" id="getGooglePriceOne" value="Обновить прайс" class="btn teal"/></p>

		<h1 class="m-t-60">Обновить прайс - Дергам, Чесалин, Муниф</h1>
		<p><input type="submit" id="getGooglePriceTwo" value="Обновить прайс" class="btn teal"/></p>

		<h1 class="m-t-60">Обновить прайс - Трансплантация волос (Чесалин), Коригова</h1>
		<p><input type="submit" id="getGooglePriceThree" value="Обновить прайс" class="btn teal"/></p>

	</main>

	<aside class="sidebar">
		<h2>Получена json строка</h2>
		<p>Записана в файл:
		<br/>/pricehirurg.json - Амжад, Першукова, Исбир
		<br/>/pricehirurgend.json - Дергам, Чесалин
		<br/>/pricetransplant.json - Трансплантация (Чесалин)</p>
		<p><textarea id="jsonGooglePrice" class="form-control large"></textarea></p>
	</aside>
</div> <!-- END container -->
</section> <!-- END content -->

AdminHelper app: script.js

										// ----- Get Price data from Google spreadsheet ----- //
const googlePriceBtnOne = document.getElementById('getGooglePriceOne');

if (googlePriceBtnOne !== null) {
	var googleAppLinkOne = document.getElementById('googleAppLinkOne'),
		googlePriceTextarea = document.getElementById('jsonGooglePrice'),

		googlePriceBtnTwo = document.getElementById('getGooglePriceTwo'),
		googleAppLinkTwo = document.getElementById('googleAppLinkTwo'),

		googlePriceBtnThree = document.getElementById('getGooglePriceThree'),
		googleAppLinkThree = document.getElementById('googleAppLinkThree'),

		urlGoogleSpreadsheet = '';

	googlePriceBtnOne.addEventListener('click', function () { // PriceDamas Hirurgiya  -   Амжад, Першукова, Исбир
		urlGoogleSpreadsheet = googleAppLinkOne.value ? googleAppLinkOne.value : "https://script.google.com/macros/s/AKbzqCxxxxxxxxxxxxxded1WOZnKI5A/exec";
		getPriceList(urlGoogleSpreadsheet, 'pricehirurg');
	});

	googlePriceBtnTwo.addEventListener('click', function () { // PriceDamas Hirurgiya Ending  -  Дергам, Чесалин, Муниф
		urlGoogleSpreadsheet = googleAppLinkTwo.value ? googleAppLinkTwo.value : "https://script.google.com/macros/s/AKfycbxinFxxxxxxxxxxxxxxxxxrt6/exec";
		getPriceList(urlGoogleSpreadsheet, 'pricehirurgend');
	});

	googlePriceBtnThree.addEventListener('click', function () {  // Damas Transplant  -  Трансплантация волос, Коригова
		urlGoogleSpreadsheet = googleAppLinkThree.value ? googleAppLinkThree.value : "https://script.google.com/macros/s/AKycbxxxxxxxxxxnp66KKPJxrg/exec";
		getPriceList(urlGoogleSpreadsheet, 'pricetransplant');
	});
}

async function getPriceList(url, fileName) {
	let response = await fetch(url);

	let priceData = await response.json();
	console.log('priceData : ', priceData);

	priceData.action = 'update';
	priceData.file = fileName;
	googlePriceTextarea.value = JSON.stringify(priceData);
	putPriceListToFile(priceData);
}

async function putPriceListToFile(price) {
	let response = await fetch('https://damasclinic.ru/secretfolder/priceData.php', {
		method: 'post',
		headers: {'Content-Type': 'application/json;charset=utf-8'},
		body: JSON.stringify(price)
	});

	let fileWrite = await response.json();
	console.log('Put PriceList To File : ', fileWrite.action);
}