Skip to content

Instantly share code, notes, and snippets.

@cameroncowden
cameroncowden / jQuery client-side anonymous $-defining wrapper
Created July 19, 2016 17:48
A convenient little wrapper for jQuery. Useful for any small page-specific JS tweaks.
(function($){
$(window).load(function(){
//load event is sent when element and all sub-elements have been completely loaded
//includes images, scripts, frames, iframes, and the window object.
//note: care when manipulating elements visible on the initial pageload
});
$(document).ready(function(){
//fires when the dom is ready (page display might be pre- or partially- rendered)
});
@cameroncowden
cameroncowden / jquery-load-throw-catch.js
Created September 27, 2017 17:56
a vanilla javascript approach to running scripts when jquery is loaded in based on a custom event
<script>
//PRE (jquery usecase only)
//load jquery library, inline or externally using defer or aysnc
console.log('jQuery321 Ready! - version: ' + jQuery321().jquery)
$j = jQuery321.noConflict(); //map to new variable (extensible)
//THROW (include this after above in jquery file)
var myElement = document.querySelector('body');
var event = document.createEvent('Event');
@cameroncowden
cameroncowden / validate_email.js
Created October 12, 2017 18:02
regex function for validating email input
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
@cameroncowden
cameroncowden / debouncer.js
Created June 24, 2018 19:08
Simple debouncer
//after a click, wait 2 seconds before showing the cta bar. if they click again, reset the timer.
// ie after 2 seconds of inactivity, show the cta
var duration;
$('.ctrl-wrapper').on("click", function(){
$('#global_cat').addClass('is-hidden'); //add class to hide cta
autoShowCta();
});
(function() {
var banner_height = $('.collection-banner').height() + 220; //220 offset for header
var stuck = false;
var lastScrollY = 0;
var ticking = false;
var filter_dom;
var update = function() {
// do your stuff
@cameroncowden
cameroncowden / accordions.liquid
Created February 25, 2019 21:55
A shopify section which builds accordions using
<section class="accordion faq">
{% if section.settings.title %}
<p style="text-align: center; font-style: italic;">{{ section.settings.title }}</p>
{% endif %}
{% for block in section.blocks %}
{% capture index %}{% increment ind %}{% endcapture %}
<input id="tab-{{ index }}" type="checkbox" name="faqs" class="hidden">
<div class="section section-{{ section.id }} {% if forloop.first == true %}opened{% endif %} mar-top-sm" data-block-id="{{ block.id }}" {{ block.shopify_attributes }}>
@cameroncowden
cameroncowden / power-reviews-multi-render.liquid
Created March 13, 2020 19:46
Power Reviews Shopify Single Product and Related Products Widget
{% comment %}
make sure when this is called the {{ product }} object is the correct one on the product page (e.g. nothing else has called {% assign product = ... %}
In your collection of products or when you loop through the related/recommended products, just get those IDs and include them in the power_reviews_ids variable
E.g.
{% for related_product in product_collections.products %}
{% assign product = related_product %}
{% include 'product-grid-item' %}
{% if power_reviews_ids == '' %}
<style type="text/css">
.stats {
color: white;
text-align: right;
}
.stat-unit {
margin-bottom: 24px;
}
.amount {
@cameroncowden
cameroncowden / shopify-checkout-script-no-fedex-if-po-box.rb
Last active May 15, 2020 18:04
Shopify Scripts.. Script.. to remove the FedEx option if the customer enters a PO box.
found1 = false
found2 = false
is_po_box = false
if(Input.cart.shipping_address.address1)
this_address = Input.cart.shipping_address.address1
found1 = true
end
if(Input.cart.shipping_address.address1)
this_second_address = Input.cart.shipping_address.address2
@cameroncowden
cameroncowden / show-no-alt.css
Created April 5, 2021 17:01
Highlight all Images without Alt Text
/* Courtesy of @AllThingsSmitty "sharing is caring" https://twitter.com/AllThingsSmitty/status/930617039085035520 */
/* highlights any images on the page without alt text or with empty alt text */
/* note - sometimes empty alt text is correct: https://www.w3.org/WAI/tutorials/images/decorative/ */
img[alt=""], img:not([alt]) {
border: red 5px solid;
}