jonathanmoore

Share Counts

I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.

If you want to roll up all of these into a single jQuery plugin check out Sharrre

Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.

Twitter

jonathanmoore

{% liquid
  assign low_stock_threshold = 5
  assign selling_fast_threshold = 12

  assign low_stock_status = "Low stock"
  assign selling_fast_status = "Selling fast"
  assign in_stock_status = "In stock"

  assign low_stock_color = "#FFD700"
  assign selling_fast_color = "#008000"

jonathanmoore

<script>
// (c) Copyright 2016 Caroline Schnapp. All Rights Reserved. Contact: mllegeorgesand@gmail.com
// See https://docs.shopify.com/themes/customization/navigation/link-product-options-in-menus
  
// Modified by Jonathan Moore (Style Hatch) https://github.com/jonathanmoore
/* 
	Updated to work with sectioned themes
    	- Added required methods from the deprecated options_selection.js
        - Triggers an initial variant change
        - Hides sold out variants with only one option

jonathanmoore

$(document).ready(function() {
  thumbnails = $('img[src*="/products/"]').not(':first');
  if (thumbnails.length) {
    thumbnails.bind('click', function() {
      var arrImage = $(this).attr('src').split('?')[0].split('.');
      var strExtention = arrImage.pop();
      var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
      var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
      if (typeof variantImages[strNewImage] !== 'undefined') {
          productOptions.forEach(function (value, i) {

jonathanmoore

<div class="cart-block__attributes flex items-center space-x-2 justify-center md:justify-end">
  <input id="Cart-Attribute-Birthday" form="cart" type="date" name="attributes[Birthday]" value="">
  <label for="Cart-Attribute-Birthday" class="text-primary-text p-0 text-sm font-body font-weight-body normal-case tracking-normal">Birthday</label>
</div>

jonathanmoore

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

jonathanmoore

<div class="cart-block__attributes flex items-center space-x-2 justify-center md:justify-end">
  <input form="cart" type="hidden" name="attributes[Gift]" value="No">
  <input id="Cart-Attribute-Gift" form="cart" type="checkbox" name="attributes[Gift]" value="Yes"{% if cart.attributes["Gift"] == "Yes" %} checked{% endif %}>
  <label for="Cart-Attribute-Gift" class="text-primary-text p-0 text-sm font-body font-weight-body normal-case tracking-normal">Is this a gift?</label>
</div>

jonathanmoore

{% if product.tags %}
  {% if collection.handle %}
    {% assign collection_scope = collection.handle %}
  {% else %}
    {% assign collection_scope = 'all' %}
  {% endif %}
  <ul class="product-tags">
    <li>Tags: </li>
    {% for tag in product.tags %}
      {% capture url %}/collections/{{ collection_scope }}/{{ tag | handleize }}{% endcapture %}

jonathanmoore

<!-- /templates/page.liquid -->
<section class="page page-top">
  <div class="wrapper">
    <header class="content-util">
    {% include 'breadcrumb' %}
    {% include 'social-icons' %}
    </header>
    <header class="page-header">
      <h1>{{ page.title }}</h1>
    </header>

jonathanmoore

.collection aside nav.tags ul {
    max-height: 300px;
    overflow: scroll;
}
.collection aside nav.tags li {
    display: block;
}
.collection aside nav.tags li a {
    background: transparent;
    box-shadow: none;