Skip to content

Instantly share code, notes, and snippets.

View dylanjhunt's full-sized avatar

Dylan Hunt dylanjhunt

View GitHub Profile
@dylanjhunt
dylanjhunt / javascript for delivery date
Last active April 28, 2021 15:31
How to make a delivery date estimator that avoids weekends for a Shopify product page
$(document).ready(function() {
function calculateHMSleft() {
var d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
@dylanjhunt
dylanjhunt / html for delivery date
Created April 28, 2021 15:06
How to make a delivery date estimator that avoids weekends for a Shopify product page
{% assign seconds = 5 | times: 72 | times: 60 | times: 60 %}
<div class="get_it_by">
{% render 'icon_svg' with 'truck' %}
<p>Order in the next <strong id="HMSremaining"></strong>, and get {{ product.title }} by <strong id="deliveryday">{{ 'now' | date: "%s" | plus: seconds | date: "%A, %B %d" }}</strong> with expedited Shipping at checkout.</p>
</div>
@dylanjhunt
dylanjhunt / gist:96bd04010919a56222b726ec0246dd2d
Last active November 2, 2023 19:43
Realistic Snow For Your Shopify Website - www.dylanjh.com
<div class="snow"></div>
<style>
.editor-stage .snow {
height:50px;
background: #fff;
}
.snow{
position:fixed;
pointer-events:none;
top:0;
{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{% endcase %}
{% comment %}
Renders a product card using "List" style
Accepts:
- product: {Object} Product Liquid object (required)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)
Usage:
{% include 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
{% comment %}
Renders a product card using "Grid" style
Accepts:
- max_height: {Number} Maximum height of the product's image (required)
- product: {Object} Product Liquid object (required)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)
Usage:
{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}
{% comment %}
This snippet controls the collage product grid. Depending on the number of products in
a collection we want to display them in rows of 1, 2, 3, or a reversed row of 3.
A '3 row' has the large product left align with two smaller product on the right.
The 'reversed 3 row' has the large product right aligned with two smaller products on
the left.
If we're near the end of the loop and there are not enough products to make
<!-- /snippets/product-grid-item.liquid -->
{% comment %}
This snippet is used to showcase each product during the loop,
'for product in collection.products' in collection.liquid.
A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.
<!-- /templates/collection.liquid -->
{%- if section.settings.show_collection_image and collection.image -%}
<div class="collection-hero">
<noscript>
<div class="collection-hero__image-no-js" style="background-image:url({{ collection.image | img_url: '2048x2048' }});"></div>
</noscript>
{%- assign img_url = collection.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- comment -%}
If the collection.image height is < 70% of its width on mobile or < 45% on desktop,
we crop the container to make sure it's the same height as the image.
@dylanjhunt
dylanjhunt / tiered_pricing.rb
Last active April 18, 2022 13:10
Shopify Quantity Discount - Tiered Pricing Shopify Script
DISCOUNTS_BY_QUANTITY = {
10_000 => 20,
1_000 => 15,
100 => 10,
10 => 5,
}
Input.cart.line_items.each do |line_item|
next if line_item.variant.product.gift_card?