Author: | pierreavn |
---|---|
Views Total: | 313 views |
Official Page: | Go to website |
Last Update: | February 12, 2021 |
License: | MIT |
Preview:

Description:
websheetjs is a JavaScript library that populates your web page with data fetched from Google Sheets with pictures, filters, and links.
How to use it:
1. Load the websheetjs JavaScript library in the document.
<script src="./dist/websheet.min.js"></script>
2. Build the template for your web sheet.
<div data-websheet-template="product"> <!-- Loader --> <div data-websheet-on:loading> Loading... </div> <!-- When product is loaded... --> <div class="product" data-websheet-on:loaded> <!-- Display only if checkbox is True --> <div data-websheet-if="Display ?"> <!-- Bind "Picture" column to img.src attribute --> <img data-websheet-bind:src="Picture" data-websheet-bind:alt="Product"> <!-- Product Name --> <div><strong data-websheet-text="Product"></strong></div> <!-- Price (including Discount) --> <div data-websheet-unless="Discount?" data-websheet-text="Price"></div> <div data-websheet-if="Discount?"> <span style="text-decoration: line-through;" data-websheet-text="Price"></span> <strong data-websheet-text="Discounted Price"></strong> </div> </div> </div> </div>
3. Create the HTML in which you wish to render the data.
<h1>-- Websheet Bakery --</h1> <h2>Breads</h2> <div class="products" data-websheet="products"> <div data-websheet-render="product" data-websheet-if="Bread?"></div> </div> <hr/> <h2>Pastries</h2> <div class="products" data-websheet="products"> <div data-websheet-render="product" data-websheet-if="Pastry?"></div> </div> <hr/> <h2>Drinks</h2> <div class="products" data-websheet="products"> <div data-websheet-render="product" data-websheet-if="Drink?"></div> </div>
4. Initialize the web sheet and determine the path to your Goole Sheets.
websheet('products', { /** * URL of the spreadsheet */ url: 'https://docs.google.com/spreadsheets/d/1enj8u4b7WA4Itrw8u5YEzt8MzwtRD1GkJNSWkl9GMK0/edit#gid=0', /** * Spreadsheet tab name */ sheet: 'Products', /** * Enable caching (load as soon as possible cached version, * and load data in parallel - replace cached data if real * version has changed) */ caching: true, /** * Query used to filter/sort results * Here, sort results in alphabetical order (B = Product name) */ query: `select * order by B`, /** * When data are received from spreadsheet, * display them in console */ onLoaded: data => console.log('data =', data), /** * Define new columns (aliases) to apply filters */ aliases: { // Aliases for each category 'Bread?': row => row['Category'].value === 'Breads', 'Pastry?': row => row['Category'].value === 'Pastries', 'Drink?': row => row['Category'].value === 'Drinks', // Determine if these is discount or not on the product 'Discount?': row => { if (row['Discounted Price'].value && row['Discount End'].value) { return row['Discount End'].value > new Date(); } else { return false; } } } })