Skip to content

Instantly share code, notes, and snippets.

Avatar

David Little drabbytux

View GitHub Profile
@drabbytux
drabbytux / plain-js-make-image-change-javascript.js
Created Sep 18, 2020
Thumbnail changes variant, Plain Javascript
View plain-js-make-image-change-javascript.js
/**
To be placed at bottom of theme.js, or main JS file that doesn't use jquery.
**/
document.addEventListener("DOMContentLoaded", function(){
thumbnails = document.querySelectorAll('img[src*="/products/"]');
function addEventListenerList(thumbnails) {
for (var i = 0, len = thumbnails.length; i < len; i++) {
thumbnails[i].addEventListener('click', thumbImageSwap, false);
}
}
@drabbytux
drabbytux / 1 Remove Variants from Single Option Variants that are sold out
Last active Oct 11, 2019
Remove variables from single variant selector on product pages that are sold out
View 1 Remove Variants from Single Option Variants 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 Mar 4, 2018 — forked from carolineschnapp/gist:9122054
Order form to use in a page or collection template.
View gist:c2b42736ed543b236cbf6ee956917e64
{% 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 Jan 30, 2017
Hide variants that are sold out theme.js portion
View theme.js
/* 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 Dec 15, 2016
Add a date picker to get delivery dates on your cart page
View add-date-picker-for-delivery-dates.md

###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
View delivery-date.liquid
{{ '//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 Dec 13, 2016
Limiting purchase quantities
View limiting-purchase-quantities.md
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 Oct 30, 2018
Shipping cart JS
View 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 Jul 1, 2020
Add a shipping rates calculator to your cart page
View Shipping Calculator for Sections.md
  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 Dec 16, 2016
Add an agree to terms and conditions checkbox
View add-terms-and-conditions-checkbox.md
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
You can’t perform that action at this time.