stewartknapman

Have you ever tried to track down which piece of javascript modified the DOM? Use a mutationObserver to monitor the DOM for changes. Then run console.trace() inside the callback. This will log a stack trace all the way back to the code that did the DOM modification. Basically copy and paste this code.

stewartknapman

var Shopify = Shopify || {};
// ---------------------------------------------------------------------------
// Money format handler
// ---------------------------------------------------------------------------
Shopify.money_format = "${{amount}}";
Shopify.formatMoney = function(cents, format) {
  if (typeof cents == 'string') { cents = cents.replace('.',''); }
  var value = '';
  var placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
  var formatString = (format || this.money_format);

stewartknapman

{% comment %}
<!--
  Liquid will output content, split on h3s like this:
  
  <div class="accordian">          
    <h5><a href="#free-shipping" data-accordian-action>Free & Fast USA Shipping <span>+</span></a></h5>
    <p id="free-shipping" data-accordian-target>All orders are shipped through USPS. We pride ourselves on fast delivery. Orders typically arrive within 2-5 business days. You will receive an email with tracking information when your order is ready to ship.</p>
    <h5><a href="#international-shipping" data-accordian-action>International Shipping <span>+</span></a></h5>
    <p id="international-shipping" data-accordian-target>International shipping rates vary based on item(s). Shipping rates can be seen on the checkout page. International orders typically arrive within 7-10 business days, but can vary with customs clearance in each country. </p>
  </div>

stewartknapman

/*
 * Checkout.scss sits outside the Shopify theme folder so that we can pull in Boostrap and our checkout reset via scss imports.
 * This will be compiled into checkout.css.liquid and saved in our theme assets folder.
 * As this will be compiled into liquid we need to escape our liquid tags to prevent our compiler having a meltdown.
 *
 * You need to do this across two files otherwise you'll end up with an empty import rule at the top of your checkout.css.liquid 
 */
 
 // import the compiled font_import.css.liquid from our assets folder.
 // note the escaped liquid.

stewartknapman

# ================================ Customizable Settings ================================
# ================================================================
# Show Rate(s) for Product Tag
#
# If we have a product with matching tag, the entered rate(s) will be
# shown, and all others will be hidden. Otherwise, the entered
# rate(s) will be hidden.
#
#   - 'product_tag_match_type' determines whether we look for the
#     product to be tagged with any of the entered tags or not.

stewartknapman

(function () {
    if (!document.querySelector && !window.addEventListener && !("classList" in document.createElement("p"))) return;

  var ready = function (callback, ctx) {
    if (typeof callback !== 'function') return;

    if (document.readyState !== "loading") {
      callback.apply(ctx);
    } else {
      document.addEventListener("DOMContentLoaded", function () {

stewartknapman

We want to automagically add a free product to the customers cart when they purchase a certain product(s).

Note: This code will likely need to be adapted to suit your theme, however it should be enough to discribe the concept.

Add the free product

1. Define the free product and which products can add it. We create some theme setting that allow us to pick the free product and a collection of products that can add it. e.g. settings.free-product and settings.free-product-collection

stewartknapman

//  Escape Liquid in scss.
//
//  Expected output:
//  a{
//    color: {{ settings.link-color }};
//  }

a{
  color: #{'{{ settings.link-color }}'};
}

stewartknapman

100 ultra light/thin
200 light/thin
300 book/light
400 roman/normal
500 med
600 semibold
700 bold
800 heavy
900 black

stewartknapman

.description-tab__header {
  padding-top: 1.5em;
  .no-js &:first-child {
    padding-top: 0;
  }
}
.has-tabs {
  .description-tabs {
    position: relative;
    @include display-flexbox();