Skip to content

Instantly share code, notes, and snippets.

View seandogg's full-sized avatar

Sean Orfila seandogg

  • Pacific Northwest
  • 20:09 (UTC -07:00)
View GitHub Profile
@seandogg
seandogg / product-item.liquid
Last active September 11, 2019 19:44
for matt
<div class="ProductItem {% if use_horizontal %}ProductItem--horizontal{% endif %}">
<div class="ProductItem__Wrapper">
{%- comment -%}
We are using LazySizes to efficiently choose the most appropriate image in the set. However, because internally LazySizes uses srcset, we need to make
sure that the image sizes we offer is not larger than the max size uploaded by the merchants.
{%- endcomment -%}
{%- if settings.product_image_size == 'natural' or use_horizontal -%}
{%- assign use_natural_size = true -%}
{%- else -%}
<!-- Begin Accordion Snippet -->
<style>
.so-tab {
position: relative;
width: 100%;
overflow: hidden;
margin: 25px 0;
}
.so-tab label {
position: relative;
search: instantsearch({
appId: algolia.config.app_id,
apiKey: algolia.config.search_api_key,
indexName: '' + algolia.config.index_prefix + 'products',
searchParameters: {
clickAnalytics: true
},
urlSync: {},
searchFunction: function (searchFunctionHelper) {
// Set query parameters here because they're not kept when someone
@seandogg
seandogg / product-description-tabs.liquid
Last active November 13, 2018 19:00
product-description-tabs.liquid
<ul class="product-tabs">
<li class="current"><a href="#fragment-1"><span>Description</span></a></li>
<li><a href="#fragment-2"><span>Ingredients</span></a></li>
<li><a href="#fragment-3"><span>Reviews</span></a></li>
</ul>
<div class="tab">
<div id="fragment-1" class="tab-content">
<p>Description Content here</p>
<p> </p>
</div>
const make = 'BMW';
const model = 'x5';
const colour = 'Royal Blue';
function leftPad(str, length = 20) {
return `→ ${' '.repeat(length - str.length)}${str}`;
}
console.log(leftPad(make));
console.log(leftPad(model));
# Sample Config
title: Site Title
description: Hi this is your description
keywords: drop, some, hot, keywords, here
author: devvartpoddar
baseurl: "" # the subpath of your site, e.g. /blog/
url: "https://your-url-here.com" # the base hostname & protocol for your site
# Build settings
@seandogg
seandogg / asset_svg.liquid
Created April 12, 2018 00:01
A nice way to organize SVGs within a Shopify project
{% comment %}
Use like this in liquid: {% include 'asset_svg' with 'cart_icon' %}
{% endcomment %}
{% assign icon_name = asset_svg %}
{% if icon_name == 'cart_icon' %}
<svg version="1.1" class="svg cart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 27" style="enable-background:new 0 0 24 27; width: 24px; height: 27px;" xml:space="preserve"><g><path d="M0,6v21h24V6H0z M22,25H2V8h20V25z"/></g><g><path d="M12,2c3,0,3,2.3,3,4h2c0-2.8-1-6-5-6S7,3.2,7,6h2C9,4.3,9,2,12,2z"/></g></svg>
{% elsif icon_name == 'facebook_icon' %}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve"><g><path d="M16.4,1l-3.1,0C9.8,1,9.6,3.3,9.6,6.8v1.7H6.5C6.2,8.5,6,8.8,6,9v1.9c0,0.3,0.2,0.5,0.5,0.5h3.1v9.9c0,0.3,0.2,0.5,0.5,0.5h2c0.3,0,0.5-0.2,0.5-0.5v-9.9h3.6c0.3,0,0.5-0.2,0.5-0.5l0-1.9c0-0.1-0.1-0.3-0.1-0.3c-0.1-0.1-0.2-0.1-0.3-0.1h-3.6V5.3c0-1.1,0.3-1.7,1.7-1.7l2.1,0c0.3,0,0.5-0.2,0.5-0.5V1.5C16.8,1.2,16.6,1,1
{% if line_item.fulfillment %}
<div class="note">
{% assign date = line_item.fulfillment.created_at | date: format: "month_date_year" %}
{% if fulfillment.item_count == line_item.quantity %}
{{ 'customer.order.fulfilled_at' | t: date: date }}
{% elsif fulfillment.item_count != line_item.quantity and line_item.fulfillment.item_count > 0 %}
Fulfilled {{ date }}
{% else %}
Unfulfilled
</div>
// hide the hidden-input
$('.hidden-input').hide();
// attach an ID to the checkbox so it's toggleable
$('#infiniteoptions-container > div.conditional > span > fieldset > label > input').attr('id', 'hidden');
// if the checkbox is checked, toggle the hidden input to show it
$('#hidden').click(function() {
$(".hidden-input").toggle(this.checked);
});
@seandogg
seandogg / IO-hidden-checkbox.liquid
Created September 29, 2017 23:11
IO-hidden-checkbox.liquid
{% comment %}
Conditional logic checking if the class "conditional" is checked on a checkbox,
if so, then show the text input. If not, hide it.
{% endcomment %}
<script>
window.Shoppad.apps.infiniteoptions = {
ready: function() {
$('.hidden-input').hide();