loughlincodes’s gists

loughlincodes / secure_checkout.liquid

Created December 13, 2019 17:19

Secure Checkout lock on the checkout button in Shopify

 <button type="submit" name="checkout" class="Cart__Checkout Button Button--primary Button--full"><svg xmlns="http://www.w3.org/2000/svg" class="checkout-lock" viewBox="0 0 121.9 148.1"><style>.a{fill:#FFF;}</style><path d="M116.7 54.4c-3.9-4.4-9.4-6.7-15.1-6.7h-6.9V33.8C94.8 15.1 79.6 0 60.9 0S27.1 15.1 27.1 33.8v13.7h-6.9c-5.8 0-11.2 2.5-15.1 6.7 -3.9 4.4-5.6 10-5 15.7l6.7 60c1.1 10.3 9.8 18.1 20.1 18.1h68.1c10.3 0 19-7.8 20.1-18.1l6.5-59.9C122.4 64.4 120.6 58.6 116.7 54.4zM35.8 33.8c0-13.9 11.2-25.1 25.1-25.1s25.1 11.2 25.1 25.1v13.7H35.8V33.8zM113.2 69.2l-6.7 60c-0.6 5.9-5.6 10.3-11.5 10.3H26.8c-5.9 0-10.8-4.4-11.5-10.3L8.5 69.2c-0.3-3.3 0.6-6.5 2.8-8.9 2.2-2.5 5.3-3.9 8.6-3.9h81.4c3.3 0 6.4 1.4 8.6 3.9C112.5 62.7 113.5 65.8 113.2 69.2z" class="a"/><path d="M60.9 72.7c-8.4 0-15.4 6.9-15.4 15.4 0 7 4.7 12.8 11.1 14.7v16.1c0 2.3 2 4.4 4.4 4.4s4.4-2 4.4-4.4v-16.1c6.4-1.9 11.1-7.6 11.1-14.7C76.4 79.5 69.3 72.7 60.9 72.7zM60.9 94.6c-3.6 0-6.7-3-6.7-6.7 0-3.6 3-6.7 6.7-6.7 3.6 0 6.7 3 6.7 6.7C67.6 91.7 64.5 94.

loughlincodes / product-thumnail.liquid

Created December 11, 2019 14:08

Shopify - Show a percentage discount "on sale" button

	...
	...

	{%- assign percentageDiscount = product.compare_at_price_max \| minus: product.price \| times: 100.0 \| divided_by: product.compare_at_price_max \| money_without_currency \| times: 100 \| remove: '.0' -%}

	{% if product.compare_at_price_max > product.price %}
	<div class="sale-banner"><span>{{ 'collections.general.sale' \| t }}</span><p>{{percentageDiscount}}%<span>OFF!</span></div>
	{% endif %}

	...

loughlincodes / ajaxify-cart.liquid

Last active September 24, 2020 11:39

Aaxify all add to cart forms on the page

	<script>

	/**
	* Module to ajaxify all add to cart forms on the page.
	*
	* Copyright (c) 2015 Caroline Schnapp (11heavens.com)
	* Updated by Loughlin (2019) for jQuery 1.8.0+ (Loughlin.codes)
	* Dual licensed under the MIT and GPL licenses:
	* http://www.opensource.org/licenses/mit-license.php
	* http://www.gnu.org/licenses/gpl.html

loughlincodes / klaviyo-subscribe.js

Created October 21, 2019 12:26 — forked from rickydazla/klaviyo-subscribe.js

loughlincodes / html-head-boilerplate.html

Created October 20, 2019 10:09 — forked from nunosans/html-head-boilerplate.html

HTML Head Boilerplate & Reference

	<!doctype html>
	<html>
	<head>
	<!-- Priority tags. These must come first. -->
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge; chrome=1"> <!-- Render Chrome if available or using latest version of Internet Explorer (Recommended). -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<!-- Document Title -->
	<title>Page Title</title>
	<!-- Allows control over where resources are loaded from. Place as early in the document as possible, only applies to content below this tag. -->

loughlincodes / announcement-bar.liquid

Last active October 14, 2019 12:40

Announcement Bar Section (with Blocks - Max 3)

	<div class="announcement-bar">

	<p>
	{% for block in section.blocks %}

	<span>{{ block.settings.text }}</span>{% if forloop.last != true %}<span class="middot">·</span>{% endif %}

	{% endfor %}
	</p>

loughlincodes / gist:0f98ace464acd1f47cd887b5c7c31158

Created October 8, 2019 12:11

Shopify Loox Reviews - get total reviews

	<div class="reviews">

	{% assign looxstats = shop.metafields.loox["global_stats"] \| split: "," %}
	{% assign looxstar = looxstats[0] \| round %}
	{% assign looxcount = looxstats[1] \| times:100 \| money_without_currency \| remove: '.00' %}

	<a href="pages/happy-customers">Reviews (<span class="looxstars">{% for i in (1..looxstar) %}★{% endfor %}</span> {{ looxcount }})</a>

	</div> <!-- end review -->

loughlincodes / metafields.liquid

Created August 29, 2019 12:07

Display all Shopify metafields in a particular namespace

	{% for field in product.metafields.namespace %}
	<li>{{ field \| first }}: {{ field \| last }}</li>
	{% endfor %}

loughlincodes / gist:2238988f2ce50eeee8fe9a21abc40556

Created August 8, 2019 13:31

How to pass vars to snippets in Shopify

	Method 1: Declare variables right above the snippet:
	{% assign snippet_variable = ‘this is it’ %}
	{% assign snippet_variable_two = ‘this is also it’ %}
	{% include ‘snippet’ %}

	Method 2: Include variable into include command:
	{% include ‘snippet’, snippet_variable: ‘this is it’, snippet_variable_two: ‘this is also it’ %}

	There was a filthy rumour being spread at Unite 2019 that snippets were scheduled to be removed.

loughlincodes / gist:55349fda58b89a61e6af0370f6c56603

Created July 24, 2019 11:15

Get product image via Shopify JS API

	{% comment %}
	This is based on getting a product from a block entry in the customiser using the "product" type.
	all_products[] only allows 20 items so better to get the product info per product asynchronously
	{% endcomment %}




	<div class="stub" data-handle="{{ block.settings.image }}">
	<a href="/products/{{ block.settings.image }}" target="_blank">

	var KlaviyoSubscribe = KlaviyoSubscribe \|\| {};
	(function() {
	if (!KlaviyoSubscribe._loaded) {
	KlaviyoSubscribe._loaded = !0;
	var m = {
	"modal.html": '<div class="klaviyo_modal" style="display:none;"><div class="klaviyo_inner"><a href="#" class="klaviyo_close_modal klaviyo_header_close">×</a><form action="" method="POST" novalidate="novalidate" class="klaviyo_subscription_form"><input type="hidden" name="g" value="" /><p class="klaviyo_header"></p><p class="klaviyo_subheader"></p><div class="klaviyo_fieldset"></div><div class="klaviyo_fine_print"></div><div class="klaviyo_form_actions"><button type="submit" class="klaviyo_submit_button"><span></span></button></div><div class="klaviyo_below_submit"></div><div class="error_message" style="display:none;"></div></form><div class="success_message" style="display:none;"></div></div></div>',
	"flyout.html": '<div class="klaviyo_flyout" style="display:none;"><div class="klaviyo_inner"><div class="klaviyo_topbar" /><a href="#" class="klav

Loughlin McSweeney loughlincodes