Skip to content

Instantly share code, notes, and snippets.

View procarrera's full-sized avatar

Pedro Carrera procarrera

View GitHub Profile
{
// Place your snippets for liquid here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
@procarrera
procarrera / fetch_product_by_id.js
Created August 19, 2022 19:14
Shopify Get Product JSON by ID
const fetchProductJSON = async (product_id) => {
const id = parseInt(product_id)
const since_id = id - 1
try {
const baseURL =
"https://powerkitchen.ca/products.json?since_id=" + since_id;
const res = await fetch(baseURL);
const data = await res.json();
const product = data.products.filter(p=>p.id == id)[0]
return product;
@procarrera
procarrera / material-design-shadows.css
Created August 10, 2022 18:16 — forked from serg0x/material-design-shadows.css
Google material design elevation system shadows as css. Based on https://material.io/design/environment/elevation.html#default-elevations Exported with Sketchapp from the Google material design theme editor plugin "Baseline" theme.
/* Shadow 0dp */
box-shadow: none;
/* Shadow 1dp */
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
/* Shadow 2dp */
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
/* Shadow 3dp */
<form onsubmit="validateZipCode(); return false;">
<input type="text" id="zipcode" placeholder="Enter zipcode here ..." />
<input type="submit" value="Go" />
</form>
<script type="text/javascript">
function validateZipCode(e) {
const zipcode = document.getElementById('zipcode').value;
if (typeof window.Zapiet === 'undefined' || typeof window.ZapietCachedSettings === 'undefined' ||
@procarrera
procarrera / renderSections.js
Created February 18, 2022 13:45
fetch and render sections from Shopify
async function renderSections(sectionsIDs: Array, targetElement){
const response = await fetch("/?sections=" + sectionsIDs.toString())
const sections = await response.json()
targetElement.innerHTML = ""
for(const section in sections){
targetElement.innerHTML += sections[section]
}
}
@procarrera
procarrera / user-ip.html
Created December 10, 2021 21:31
User IP Geolocation
<script type="application/javascript" src="http://ipinfo.io/?format=jsonp&callback=getIP"></script>
<script>
function getIP(data) {
console.log(data.ip);
}
</script>
@procarrera
procarrera / Form with File Upload Shopify.liquid
Created October 19, 2021 19:52
Form with file Upload Shopify
<form method="post" action="/cart/add" id="product_form_6149192941727" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓">
<label for="upload">Upload Your Logo</label>
<input id="upload" type="file" name="properties[_upload]" class="product-form__input">
</form>
@procarrera
procarrera / get-current-path-liquid.js
Created October 7, 2021 15:32
Get Current or Requested URL in Liquid
<script type="text/javascript">console.debug("PATH: {{request.path}}")</script>
@procarrera
procarrera / update-line-properties.js
Created October 6, 2021 22:38
Update Line Properties Shopify
const updates = {}
updates['line'] = cart_line
updates['quantity'] = quantity
updates['properties'] = properties
const response = await fetch("/cart/change.js", {
method: "POST",
headers: {
"Content-Type": "application/json",
@procarrera
procarrera / email-validation.js
Created October 6, 2021 15:34
Vanilla Javascript Email Validation
function validateEmail(email) {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}