Shopify-ez-pull-from-gsheets.liquid

<style type="text/css">
	.stats {
		color: white;
		text-align: right;
		
	}
	.stat-unit {
		margin-bottom: 24px;
	}
	.amount {
		font-size: 36px;
		display: block;
		line-height: .897;
		letter-spacing: -0.7px;
	}
	.unit {
		font-size: 21px;
		opacity: .6;
		line-height: 1;
		display: block;
		text-transform: uppercase;
		letter-spacing: -0.3px;
	}
	@media only screen and (max-width: 899px) {
		.amount {
			font-size: 27px;
		}
		.unit {
			font-size: 17px;
		}
		.stat-unit {
			margin-bottom: 21px;
		}
	}
</style>
<section class="stats">
	
</section>

<script type="text/javascript">
	var target = document.querySelector('.stats'); 

	//https://docs.google.com/spreadsheets/d/e/XXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXX--XXXXXXXXXXXXXXXX/pubhtml
	//https://docs.google.com/spreadsheets/d/XXXXXXXXXXXXXXXX/edit?usp=sharing

	//1URenXXC-ue9T8lXK8aTitZ5VoK6uahTMF8aZXQxKP4s
	function getNumbers() {
		this.isLoading = true;
		fetch(
			`https://spreadsheets.google.com/feeds/list/XXXXXXXXXXXXXXXX/od6/public/basic?alt=json`
		)
	    .then((res) => res.json())
	    .then((data) => {
	      this.isLoading = false;
	      this.numbers = data;
	      paintStats(data)
	    });
	};

	function getStats(){
		var isLoading = false;
		var numbers = null;
		//console.log('firing');
		getNumbers();
	}

	function paintStats(data){
		var items = data.feed.entry;
		console.log(data.feed.entry);
		for (var i = 0; i <= items.length - 1; i++) {
			var this_title = items[i].title.$t;
			var this_content = items[i].content.$t;

			this_content = this_content.replace("value:", "");


			var statDiv = document.createElement('div');

			statDiv.innerHTML = '<div class="stat-row dindin">' + 
			  '   <span class="amount">' +
			  '     ' + this_content +
			  '   </span>' +
			  '   <span class="unit">' +
			  '     ' + this_title +
			  '   </span>' +
			  ' </div>';
			statDiv.className = "stat-unit";

			//target.parentNode.insertBefore(statDiv, target);
			target.appendChild(statDiv);
		}
	}

	getStats();
	
</script>

{% schema %}
  {
    "name": "Stats Sidebar",
    "settings": []
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}