November 16, 2011

Load External Content in Tumblr Sidebar

I was creating a theme for a Tumblr blog and wanted to embed a list of upcoming events. The ideal solution would be a Google calendar, but the only way to do that was via an iFrame, which style-wise would just not do. The events needed to be editable by someone who has no HTML knowledge, and fit in as inline content. The creative workaround is to create a sub page in Tumblr, use the jQuery .load function, and specify the div you want to grab content from.

Here’s how you do it:
1. Embed jQuery in your blog

<script type="text/javascript"
    src="http://www.google.com/jsapi"></script>

2. Set the id of the div that you want to load the external content into, the url of the page you’re grabbing content from, and the id of the div that the content lives in.

<script type="text/javascript">
  google.load("jquery", "1.3");
  google.setOnLoadCallback(function() {
    jQuery(function($) {
      $("#events").load("/events #eventsHere");
    });
  });
</script>

3. Create a new page in tumblr, and wrap the content in the div with the id you specified in line 5 from step two. For me, this is #eventsHere.

Voila! You’ve got your blog fetching the content from your other tumblr page, which can be edited with their friendly WYSWIG editor.

November 7, 2011

BigCommerce Customize Compare Products Page

We can’t tweak the snippet used to print out the info on the compare products page. My client wanted to get rid of the “Availability” and “Brand” rows on the compare page of his BigCommerce shop. Since BigComemrce doesn’t even give relevant IDs or class names to their elements, I wrote another snippet of javascript that searches the page for the rows, and hides them. This goes at the end of the HTMLHead panel.

To hide the Availability row:

<script type="text/javascript">
    $(document).ready(function() {
        $("td.CompareFieldName").each(function() {
            if( $(this).text() == 'Availability' ){
            $(this).parent().hide();
            }
        });
    });
</script>

To remove the Brand row:

<script type="text/javascript">
    $(document).ready(function() {
        $("td.CompareFieldName a").each(function() {
            if( $(this).text() == 'Brand' ){
               $(this).parent().parent().hide();
            }
        });
    });
</script>

If you need help with customizing any other part of BigCommerce, please reach out, I’m available for hire.

October 30, 2011

BigCommerce make “Add to Cart” & “Choose Options” text an image

BigCommerce doesn’t let us touch any of the PHP or HTML that spits out the Add to Cart or Choose Options links. In their support guide, they say to add a background image, but this still means that we need to keep the text, which often times just won’t do. I wrote a quick bit of javascript that goes and finds those Add to Cart and Choose Options instances, and replaces them with an actual image.

<script type="text/javascript">
    $(document).ready(function() {
    	$(".ProductActionAdd a").each(function() {
    		if( $(this).text() == 'Choose Options' ){
    			$(this).html('<img src="/templates/__custom/images/options.png" alt="Choose Options" />');
    		}
    		if( $(this).text() == 'Add To Cart' ){
    			$(this).html('<img src="/templates/_custom/images/add.png" alt="Add to Cart" />');
    		}
    	});
    });
</script>

Hope this helps! If you need further BigCommerce customization (especially with displaying categories the way you want) let me know.

June 20, 2011

Mobile Time Tracking using Twilio and Freshbooks

I use Freshbooks to manage all of my invoicing. I manage projects, log hours, and it allows me to keep a careful track of my business. I’m lucky enough to be connect to the internet when I’m working, but for some companies working out in the field, keeping track of hours has been mostly done on pencil and paper.

I built an application integrating Twilio and Freshbooks to solve this problem. Watch the video below to see my Twilio and Freshbooks time tracking system.

How it works

Since you can only submit a completed time log to FreshBooks, the initial clock in call is stored in a database on a separate server. When the user calls back to clock out, it compares the clock out time with the saved clock in time, and then totals up the hours worked. After we know how many hours were worked, the full time log gets submitted to FreshBooks.

Altogether, I mashed up a few different technologies, including:

  • Twilio Voice API
  • Twilio Transcription API
  • FreshBooks API
  • PHP
  • MySQL

If you’re interested in using this for your company, shoot me a message and I’d be happy to set it up for you, or let you license out the code.

Next Page »