bjornbennett

//--------------------------------------------------
// More detailed
//--------------------------------------------------
// execute on click
$( ".the-target" ).on( "click", function(e) {
	e.preventDefault();
	// do something meaningful...
	console.log('do something');
});
// attach click event to trigger above

bjornbennett

<!-- HTML CODE -->
{%include 'header' %}
 <div class="header__wrapper__extra">
	{%include 'header' %}
</div>


<!-- SCSS -->
<style>
	/* ===========================================

bjornbennett

{% for product in collections.example.products %} 
  <img src="{{ product.images[0] | product_img_url: "compact" }}" alt="{{ product.title | escape }}" />
  <h4>{{ product.title }}</h4>
{% endfor %}

bjornbennett

<!-- ================================== NOTES ============================================= -->
<!-- Print out the variant titles and ids to a hidden div from which to reference -->
<!-- Also strips unnecessary spaces on both sides of the string-->
<div class="btc_container" style="display: none;">
  {% for variant in product.variants %}
    {% if variant.available %}
        {%assign vt1 = variant.title | split: '/' | first  | strip %}
        {%assign vt2 = variant.title | split: '/' | last | strip %}
        <span class="btc-variant-container" data-prod-option-1="{{vt1}}" data-prod-option-2="{{vt2}}" data-var-id="{{variant.id}}">{{vt1}}^{{vt2}}</span>
    {% endif %}

bjornbennett

{% comment %}Assign products set in Settings to variables{% endcomment %}
{% assign productOne = all_products[settings.product_one] %}
{% assign productTwo = all_products[settings.product_two] %}
{% assign productThree = all_products[settings.product_three] %}

<!--Output variant info to option elements within a Select HTML element-->
  <select>
    {%for variant in productOne.variants%}
      <option sku="{{variant.sku}}" value="{{variant.url | split: '?variant=' | last}}">1 - {{variant.title}} - {{productOne.url}}</option>
    {%endfor%}

bjornbennett

<!-- MODAL - insert this in the main template so it is available for any page -->
{% if settings.enable-home-newsletter-modal != blank%} 
  <div class="tbm_modal-container">
    <div class="tbm_modal">
      <div class="tbm_modal-left-col" style="background-image:url({{ settings.tbm_modal_bg_image | img_url: 'original' }});">
      </div>
      <div class="tbm_modal-right-col">
        <h2>{{settings.tbm_cookie-modal-title}}</h2>
        <p>{{settings.tbm_cookie-modal-content}}</p>
        <!--FORM-->

bjornbennett

<!-- this Case grabs the blog count set by the client in settings, and sets the classes that will adjust the containers -->
{% case settings.homepage_blog_count %}
  {% when '0' %}
  {% when '1' %}
    {% assign homepage_blog_grid = 'large--one-half push--large--one-quarter' %}
  {% when '2' %}
    {% assign homepage_blog_grid = 'large--one-half' %}
  {% when '3' %}
    {% assign homepage_blog_grid = 'large--one-third' %}
{% endcase %}

bjornbennett

<!-- LOOPS THROUGH SETTINGS VARIABLES, OUTPUTS VIA A FOR-LOOP -->

<div class="container sixteen columns clearfix">
  
  {% for i in (1..7) %}
    {% capture tbm_title_setting %}identify_title{{i}}{%endcapture%}
    {% capture tbm_content_setting %}identify_content{{i}}{%endcapture%}
  	{% capture tbm_link_setting %}identify_link{{i}}{%endcapture%}
  
  	{% assign tbm_title = settings[tbm_title_setting] %}

bjornbennett

{% assign description_parts = product.description | split: '<!--split-->' %}

{%comment%}
  Due to a limitation within Shopify, you have one section to write a general product description. 
  However, if you'd like to split sections and control them via CSS/jQuery/whatever, this provided a way to do that. 
  You may want the client to have access to editing the content, but you need to style the sections. 
  To divide sections, insert <!--split--> when you want a new section. 
  Shown below are snippets to use to output various sections.
	
	Amount of parts: {{ description_parts.size }}

bjornbennett

// on anchor click, after 300ms, fetch cart count.

$('a').click(function(){
	setTimeout(function(){
		$.getJSON('/cart.js', function(cart){ 
			var result = cart.item_count;
			console.log(result);
		});
	},300);
});