Skip to content

Instantly share code, notes, and snippets.

View drabbytux's full-sized avatar

David Little drabbytux

View GitHub Profile
@drabbytux
drabbytux / plain-js-make-image-change-javascript.js
Last active October 13, 2020 14:02
Thumbnail changes variant, Plain Javascript
document.addEventListener("DOMContentLoaded", function(){
thumbnails = document.querySelectorAll('img[src*="/products/"]');
function addEventListenerList(thumbnails) {
for (var i = 0, len = thumbnails.length; i < len; i++) {
console.log(thumbnails[i].currentSrc);
thumbnails[i].addEventListener('click', thumbImageSwap, false);
}
}
function thumbImageSwap(){
@drabbytux
drabbytux / 1 Remove Variants from Single Option Variants that are sold out
Last active October 11, 2019 19:38
Remove variables from single variant selector on product pages that are sold out
{% comment %}Place this at the bottom of the section/product.template.liquid file{% endcomment %}
{% if product.options.size == 1 %}
<script>
var product_variants_removed = [
{%- for variant in product.variants -%}
{%- unless variant.available -%}
'{{ variant.title }}',
{%- endunless -%}
{%- endfor -%}
];
@drabbytux
drabbytux / gist:c2b42736ed543b236cbf6ee956917e64
Last active March 4, 2018 14:13 — forked from carolineschnapp/gist:9122054
Order form to use in a page or collection template.
{% comment %}
Source: https://gist.github.com/carolineschnapp/9122054
If you are not on a collection page, do define which collection to use in the order form.
Use the following assign statement, replace 'your-collection-handle-here' with your collection handle.
{% assign collection = collections.your-collection-handle-here %}
Use the assign statement outside of this comment block at the top of your template.
{% endcomment %}
{% paginate collection.products by 100 %}
@drabbytux
drabbytux / theme.js
Created January 30, 2017 19:20
Hide variants that are sold out theme.js portion
/* Remove variants that are sold out in the dropdown */
jQuery(document).ready(function(){
if(typeof arr_titles_to_remove != 'undefined' ){
var $addToCartForm = $('form[action="/cart/add"]');
var i_title;
for (i_title = 0; i_title < arr_titles_to_remove.length; ++i_title) {
jQuery('.single-option-selector option').filter(function() { return jQuery(this).text() === arr_titles_to_remove[i_title] }).remove();
}
jQuery('.single-option-selector').trigger('change');
@drabbytux
drabbytux / add-date-picker-for-delivery-dates.md
Last active December 15, 2016 00:50
Add a date picker to get delivery dates on your cart page

###Modifications

  1. Add this to the bottom of the Assets/theme.js file:
$(document).ready( function() {
  $(function() {
    $("#date").datepicker( { 
      minDate: +1, 
      maxDate: '+2M',
 beforeShowDay: jQuery.datepicker.noWeekends
{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' | script_tag }}
<div style="width:300px; clear:both;">
<p>
<label for="date">Pick a delivery date:</label>
<input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
<span style="display:block" class="instructions"> We do not deliver during the week-end.</span>
</p>
</div>
@drabbytux
drabbytux / limiting-purchase-quantities.md
Last active December 13, 2016 14:41
Limiting purchase quantities
layout title sidebar_title description nav
default
Limiting purchase quantities
Limiting purchase quantities
Learn about a workaround and an app for limiting purchases.
group weight
Inventory
9
@drabbytux
drabbytux / shipping-cart.js
Last active October 30, 2018 02:39
Shipping cart JS
/**
* Module to add a shipping rates calculator to cart page.
*
* Copyright (c) 2011-2016 Caroline Schnapp (11heavens.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Modified by David Little, 2016
*/
@drabbytux
drabbytux / Shipping Calculator for Sections.md
Last active December 23, 2023 11:51
Add a shipping rates calculator to your cart page
  1. Copy this code and paste it at the bottom of your Assets/vendor.js file, or if your theme doesn't have a vendor.js file, place it at the very top of the theme.js file. (At the moment, POP requires this to be added at the very bottom of the theme.js file, followed by the next bit).

  2. Add this to the bottom of the Assets/theme.js file:

Shopify.Cart.ShippingCalculator.show( {
  submitButton: theme.strings.shippingCalcSubmitButton,
  submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,
  customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,
  moneyFormat: theme.strings.shippingCalcMoneyFormat                                     
@drabbytux
drabbytux / add-terms-and-conditions-checkbox.md
Last active December 16, 2016 02:51
Add an agree to terms and conditions checkbox
layout title sidebar_title description nav
default
Add an agree to terms and conditions checkbox
Add a terms and conditions checkbox
Add an Agree to terms and conditions checkbox to the cart page of your online Shopify store.
group
cart