Shopify Design Upgrades

Shopify is a hosted e-commerce solution that I have been using for a couple years now for clients that want to sell their products online. It is great software with quick setup and really intuitive and easy to use Admin. They offer a variety of pre-canned themes to choose from so a store can be set up in a few hours by anyone. If you know HTML/CSS and aren’t afraid of a little bit of programming, you can also create your own customized themes. So it is a perfect choice for smaller companies without a million dollar budget to hire a web designer to get a custom-branded storefront up on their website.

Shopify just released a whole bag of tricks for theme designers that really extends the flexibility of theme design. Previously, the theme structure was set to a fixed number of templates that could be used in the theme… collections, products, informational pages, etc. They’ve just added the ability to add child templates that you can specify on each product, collection, or page in the Admin. For example, 3 different types of products need to have different visual treatment and layout: shoes, pants, shirts. Instead of trying to jam a bunch of conditions into one product template to make it work, you can create 3 additional templates (product.liquid is the default template):
product.shoes.liquid
product.pants.liquid
product.shirts.liquid

The same type of branching is now available for the entire layout as well using the new layout tag.

This is only one of the great new features that was added in this round of upgrades. Read more about the other just-as-great additions on the Shopify blog: blog.shopify.com/theme-customization-for-everyone


URL decode PHP with JS — Removing the Plus Sign

PHP functions for creating and decipering URL-safe strings are urlencode and urldecode.

Javascript functions for creating and deciphering URL-safe strings are escape and unescape.

PHP’s urlencode replaces spaces with + and Javascript’s escape replaces spaces with %20. So if you are decocing a string from PHP with Javascript, you have to replace all the + in the string with spaces using the JS string.replace function. Since + is an operator in Javascript, it has to be escaped with a backslash ( \ ) for the function to execute without error. The g flag has to be included to replace all instances of occurance ( g = global):

string.replace ( /\+/g, ' ' );

Links

urlencode
urldecode
escape
unescape
string.replace

Adding .liquid to DW Code View

I’ve been using Shopify a lot recently as an easy to use hosted e-commerce solution. They have a handy theme editor called Vision that lets you create your own custom theme on your desktop and then upload it to your Shopify account. It is pretty easy to use if you are familiar with markup and CSS. They also have their own markup language for their application, called Liquid with a helpful wiki.

The only problem I find is that when I’m editing the .liquid files in Dreamweaver in Code View, the color coding on the markup isn’t there… it’s just all black text. Enter this handy Adobe Tech Note to the rescue: http://kb2.adobe.com/cps/164/tn_16410.html

Using CryptX in WP Template

Separating the images from content using strip_tags in a WordPress Template to control the page layout. Using the CryptX plugin to encrypt mailto and email addresses so they won’t get picked up by spam bots. After installing the plugin, you can call the cryptx function directly from the Template to apply the encryption:

if ( function_exists ( 'cryptx' ) ) :
	cryptx ( $content, $text, $css, $echo );
endif;

$content is the string to encrypt.
$text is the string to replace the text inside the alt attribute of the <a> or <img> tags.
$css is the css class to assign to the link.
$echo is set to false to return the result in a variable, true to echo the result to the browser.

Links

CryptX plugin page: wordpress.org/cryptx
CryptX author’s site: weber-nrw.de
PHP function to strip HTML and PHP tags: php.net/strip-tags

DW Extension: EnityConverter

Converting seven back issues of a magazine for online publication, I had to copy and paste the text from the designer’s PDFs into my HTML documents for formatting (Acrobat has “Export as HTML with CSS” but it was über-Frankenstein, creating more work than doing it by hand… export as txt is much better). Of course all of the special characters like em-dash, smart quotes, etc. had to be converted to HTML entites: &mdash; &ldquo; etc. Frustrated with the ongoing find and replace in Dreamweaver, Google found me this time-saving relic in the Adobe Exchange that will auto-convert everything to HTML entities in code view:

www.adobe.com/cfusion/exchange/entityconverter/

AS2 Disable Underlying Buttons

Create a new movie clip to block the content underneath and apply the following ActionScript:

mc_target.onRollOver = function () {};
mc_target.useHandCursor = false;

Register the empty function so Flash will treat the movie clip like a giant button so that none of the underlying buttons will be active. Add the useHandCursor property to keep the pointer hand from showing up.

Finding Lattitude and Longitude on Google Maps

Here is an easy little trick to extrapolate the latitude and longitude coordinates from Google Maps. The coordinates reflect the center of the map so make sure that you have your location centered first. Once you have it all lined up, paste this code into the address bar of your browser:

javascript:void(prompt(”,gApplication.getMap().getCenter()));

Brilliant!

Links

www.tech-recipes.com/google_maps_get_latitude_longitude_values/

Adding <head> Files in a WordPress Template

Problem: want to create a WP Template that uses a different CSS file from the Theme CSS so that the HTML structure remains the same but the Template layout will be different, dictated by the CSS. It works to put a <link> to the CSS in the Template HTML but then it gets rendered in <body> instead of the <head>, which is a little wonky. How to get the CSS into the <head>?

Solution: Insert this PHP code into the beginning of your Template file before the get_header() call…

<?php
function mytemplate_head () {

echo ‘<link rel=”stylesheet” type=”text/css” href=”‘ . get_bloginfo(‘template_directory’) . ‘/mytemplate.css” />’;

}
add_action ( ‘wp_head’, ‘mytemplate_head’ );
?>

Links

get_bloginfo
add_action
get_header