Building HTML elements from a json array and returning it to the DOM – efficient way.

Demo of adding DOM elements via javascript from JSON data

Learning React JS

A great primer on a number of features of ReachJS

ReactJS CrashCourse


How to hide shopify menu items if no products exist in the collection

I recently worked on a reasonably large shopify project where the potential categories (collections) counted approximately 190. We built the menu based on those collections, but the problem was that until we had products imported for those collections we didnt want to show the menu item.

Using the supply menu I edited the site-nav.liquid file in the snippets directory and added a line under each of the for loops that build the menu items and added a test to see if a. the time was based on a collection and if the number of products in that collection where over 0. This was done using an <%unless  %> tag – look at the bolded lines below.

<ul class=”site-nav” id=”AccessibleNav”>
{% unless linklists[].links.first.url == ‘/’ %}
<li class=”large–hide”>
<a href=”/”>{{ ‘general.breadcrumbs.home’ | t }}</a>
{% endunless %}
{% for link in linklists[].links %}
{% unless link.type == ‘collection_link’ and link.object.products_count == 0 %}
{% if link.links != blank %}
{% assign parent_index = forloop.index %}
<li class=”site-nav–has-dropdown {% if %}site-nav–active{% endif %}”
<a href=”{{ link.url }}” class=”site-nav–link” data-meganav-type=”parent” aria-controls=”MenuParent-{{ parent_index}}”
{% unless == ‘index’ %}{% if %}aria-current=”page”{% endif %}{% endunless%}>
{{ link.title | escape }} ({{ link.object.products_count }})
<span class=”icon icon-arrow-down” aria-hidden=”true”></span>
<ul id=”MenuParent-{{ parent_index }}”
class=”site-nav–dropdown {% if link.levels == 2 %}site-nav–has-grandchildren{% endif %}”
{% for childlink in link.links %}

{% if childlink.links != blank %}
{% assign child_index = forloop.index %}
{% unless childlink.type == ‘collection_link’ and childlink.object.products_count == 0 %}
<li class=”site-nav–has-dropdown site-nav–has-dropdown-grandchild {% if %}site-nav–active{%endif %}”
<a href=”{{ childlink.url }}”
aria-controls=”MenuChildren-{{ parent_index }}-{{ child_index }}”
{% unless == ‘index’ %}{% if %}aria-current=”page”{% endif %}{% endunless%}
({{ childlink.object.products_count }})
{{ childlink.title | escape }}
<span class=”icon icon-arrow-down” aria-hidden=”true”></span>
<ul id=”MenuChildren-{{ parent_index }}-{{ child_index }}”
{% for grandchildlink in childlink.links %}
<li{% if %} class=”site-nav–active”{% endif %}>
<a href=”{{ grandchildlink.url }}”
{% unless == ‘index’ %}{% if %}aria-current=”page”{% endif %}
{% endunless  %}
{{ grandchildlink.title | escape }}
{% endfor %}
{% endunless %}

{% else %}
{% unless childlink.type == ‘collection_link’ and childlink.object.products_count == 0 %}
<li{% if %} class=”site-nav–active”{% endif %}>
<a href=”{{ childlink.url }}”
{% if %}aria-current=”page”{% endif %}
{{ childlink.title | escape }} ({{ childlink.object.products_count }})
{% endunless %}
{% endif %}
{% endfor %}
{% else %}
<li{% if %} class=”site-nav–active”{% endif %}>
<a href=”{{ link.url }}”
{% unless == ‘index’ %}{% if %}aria-current=”page”{% endif %}{% endunless%}>
{{ link.title | escape }}
{% endif %}
{% endunless %}
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class=”customer-navlink large–hide”><a href=”/account”>{{ ‘layout.customer.view_account’ | t }}</a></li>
<li class=”customer-navlink large–hide”>{{ ‘layout.customer.log_out’ | t | customer_logout_link }}</li>
{% else %}
<li class=”customer-navlink large–hide”>{{ ‘layout.customer.sign_in’ | t | customer_login_link }}</li>
<li class=”customer-navlink large–hide”>{{ ‘layout.customer.create_account’ | t | customer_register_link }}</li>
{% endif %}
{% endif %}

Shopify – python api (shopify.SmartCollection.create)

Yep.. I’ve joined the dark side.. from .net to python.. What is more I’m moving away from Ecommerce Sites that i have built from scratch to the more universal Shopify Platform (at least for evaluation reasons)

On first blush this may be better as an ecommerce site than i expected. It has some shocking limitations like only supporting a VERY limited number of payment gateways and having little to no concept of an ACH transaction (ones that take money directly from a persons bank account.. WAY cheeper than running credit card transactions..

One of my tasks was to see if we could write code to generate a menu based on our products taxonomy. Out of the box our company sells around 130 different categorys and if we didn’t script this creation it would be really easy to have unreachable products after the import. The fact that Shopify doesn’t really even understand categories isn’t that much of a problem.. What it does have is “collections”, “collections” come in 2 flavors, dynamic and static.

Because we want automatic incorporation of products as they are uploaded into Shopify the correct choice is dynamic.

So.. how did we manage to script the creation.. Most of the documentation is in PHP.. but our current flavor of language is python and as much as it is probably possible to just convert the code over, shopify was nice enough to create a PYTHON based api that allows you to work with both the ADMIN api and STOREFRONT api. The ADMIN api actually providing all the ability required to work with products or collections

You also need to generate API keys for shopify. To do this login to your store and create a new “app key”

  1. Log into your store and in theme actions click “Edit Code”
  2. On the next screen select “Apps” in the left hand menu.
  3. On the Apps Screen select (at the bottom of the page) “Manage Private Apps”
  4. If you don’t already have one click the button labeled “Create a new private app” (top right)
  5. On the next screen review all the permissions available and what they pertain to (select the ones you need)
  6. You will need the followitn values after going to your app (copy them somewhere)
    API key
    Shared secret
    and example u8rl (as a sanity check)
From the python side you need to install the Shopify Python API (docs:
  1. open a bash prompt
  2. use pip to install the api  pip install –upgrade ShopifyAPI
In this example I’m just going to create a simple python file that can be executed from a command prompt of some type. (bash or dos)
The first snippet is what is needed to use the API
import shopify


shop_url = "" % (API_KEY, PASSWORD, SHOP_NAME)


This adds a new collection called “rob test” that finds any products where the Product Type is “Stools” and adds them to the collection.

After adding the collection it prints the return from the create hopefully showing more detail about the new collection.

added = shopify.SmartCollection.create({
    "title": "rob test",
    "rules": [
        "column": "type",
        "relation": "equals",
        "condition": "Stools"
    "published": 'true'#
print ('---- added equals ------')
print (added.__dict__)
print ('---- end added  ------')

Listing all collections and their properties

x = shopify.SmartCollection().find()print('-------------------------------------------------------------')
# print x
for y in x:
# if y.attributes["title"] == "rob test":
# print y.__dict__# prints all the properties of the collection
# print y.attributes['title']
print y.__dict__
# the properties are all stored in a dictionary.. you can loop through
# them if needed. print('-------------------------------------------------------------')

Get Windows 10 System Experience number

from an admin command prompt
winsat formal

to review results



Great Free Screen recorder for Windows

adobe and other apps with scaling on high dpi displays fix

Fixing Photoshop Scaling Issues on HighDPI systemI found a great blog that talked about manifest files.. but this one is WAY easier.

Right click the exe file you are trying to run that is giving you weird scaling issues.

Select “Compatibility”
Look for a setting “Override high DPI scaling behavior. Scaling Performed by.. And if the box is checked. uncheck it or if it is unchecked, check it. In photoshop where menus etc were tiny, I needed to check it. WIth another app where the fonts where HUGE I had to uncheck it.


Finding the directory that python is installed in.. (CENTOS) and using it for virutalenv’s path

assuming the following command returns a version of Python 3 you can find where it is installed using the sys object..

(see if python3 has been installed.)
python3 –version

In my case it returns

Python 3.5.0
If python 3.x has not been installed..

to find the location of the install for use with Virtualenv..

at the $ type python3 (this should launch python3)

import sys

The import line gives you sys lib functionality and sys.executable will tell you where it is.. now you can create a virtual environment that uses python3

e.g. $ virtualenv -p /usr/local/bin/python3 py3envtest

will generate a virutal env for python3 in the directory of py3envtest.
to activate the virutalenv you will need to change into the directory of py3envtest and execute the following command

. bin/activate

Done! not typing python should automatically run the version that virtualenv had specified.


How to loop and increment a value in a dos batch file

the code below is basically a for loop that continues until a counter reaches a value..

@echo off
:: turn off echo
set /a var=1
:: initialize a numeric variable and set it to 1
:: a label to define the start of the loop
if %var% gtr 254 goto :END
:: the if test the variable and if it is > 254 (gtr) it sends the code to the label END
echo %var%
::return current value to screen
set /a var+=1
::increment counter
goto LOOP
::go back to the top of the loop and increment the number again.

How to fix IE11 not playing videos on Windows 2008 server R2

I recently decided to finally upgrade my tried and true copy of IE10.. knowing full well i was about to lose some of my favorite Developer Tools – not an easy decision.. but i got sick of videos not playing due to compatibility issues.

Result.. I lost my dev tools and still couldn’t play videos.. I did find a few online solutions that suggested adding the following to the end of the youtube url to make it work..
The problem was that you had to append that to EVERY video in Youtube and *#& help you if you want to watch an embedded video.

Today i found the real solution. To view video in the first place you needed to add the “Desktop Experience” to server 2008. The problem is that that version of “Desktop Experience” didn’t support the latest video formats or codecs.. So you need to upgrade/update the Desktop experience..

Full MS KB article = 2483177
or click this link…

Hopefully this solves any issues you are having.. it fixed mine.!