web development

I’m a Featured Customer for the Ecwid Shopping Cart

I was recently featured in a newsletter as a Customer Spotlight for the ever growing Ecwid eCommerce software. Ecwid, which is combination of “ecommerce” and “widget” allows you to add an online store to basically any site out there.

Having inherited a very outdated and ugly looking ecommerce software that did not integrate at all the branding of our website, I took the lead in finding a solution that would allow us to firstly vastly improve upon the aesthetic, but also scale the online business. Indeed, that’s exactly what moving to Ecwid has allowed us to do. The move and a focused effort on growing the store has increased revenue approximately 250% over the last 2 years! And this year we’re already performing another 50% percent better on average during the same period as last year.

People from Ecwid reached out to me to discuss some of the benefits I saw in the service. The attached screenshot is from the March Newsletter highlighting the ease of use.

I love Ecwid and you will, too! Click here to Sign up for free today!

Ecwid Billing Check Button Default to Off for WordPress Tutorial

How can I change to default behavior of the “My billing address is the same as shipping” check box to off?

I’ve been using Ecwid as a my shopping cart for several websites and clients. It’s such a great shipping cart that’s fully integrated with basically the whole internet. I love the flexibility of it. There are a few issues that I’ve had a problem with, however. They haven’t been major problems, but annoying just the same. One of those problems has been that the billing box is checked automatically by default.

For people who might want to sell gift items for delivery, it is important to accurately collect both the shipping and billing information. The problem is that the “My billing address is the same as shipping” checkbox is checked automatically and the vast majority of people checking out, for whatever reason, do not uncheck the box to allow for a different billing address. Perhaps they’re just not seeing it, or perhaps it’s just a bad design/workflow. Needless to say, when a user fails to uncheck this box, it can cause extra time confirming with the buyer the correct information rather than just fulfilling the order. So, what I needed to do was make it so that the shipping information was not automatically passed through to the billing address unless the user checked the box. I needed the billing information to be blank, as illustrated below.

Ecwid Default Off

Ecwid Billing Button Default Off

 

Ecwid Default On

Checking the box will auto fill the content from the shipping address.

 

So, here’s the raw code for how to turn this button off by default. You’re going to want to put this code just after the Ecwid implementation code on your site. (If you have jQuery already enqueued on your site, you won’t need the 1st line.)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script>if (typeof(Ecwid) == 'object') {
  Ecwid.OnPageLoaded.add(function(page) {
    if ('CHECKOUT_PAYMENT_DETAILS' == page.type) {
$('input[type=checkbox]').prop('checked', false);
$("input[type=text]").prop('disabled', false);
$("input[type=tel]").prop('disabled', false);
$("select[name='country-list']").prop("disabled", false);
$("select[name='state-list']").prop("disabled", false);
$("select[name='state-suggest']").prop("disabled", false);
$('input[type=text]').val('');
$('input[type=tel]').val('');
$("select[name='country-list']").val('');
$("select[name='state-list']").val('');
$("select[name='state-suggest']").val('');
        }
  });
}
</script>

Unfortunately, this code will not work for you if you’re using WordPress. So I’ve packed up a file with a full explanation of how to implement this code on your WordPress site. Just click the “Download the Code!” button and you’ll receive an instant download. Please consider paying for the product if you think it will help your store. Many thanks and much appreciated!

Included in this file:

  • WordPress friendly code
  • Full explanation of where to implement this code
  • Screenshots of the code implementation
  • *Bonus: My explanation on how to clean up Ecwid code impentations

Download the Code!

Sound of Life Sliders

Using eye-catching and informative graphics with excellent content is key to any good web page design – especially for a nonprofit relying on donations.

This was exactly the goal of my latest project that I had the privilege of being a part of. The project was initiated by the Sound of Life to aid their Fall “Life-a-thon”. During these 3 days, listeners to the radio station and viewers of the website were encouraged to become monthly supporters or give a one-time gift.

Graphic Designer, Jeralyn Tiernan, created an excellent design concept for me to work with.

My goal in the project was to convert her design into a functioning webpage that could be updated as the donations came in. The sliders needed to “slide” automatically and the dollar amounts and percentages needed to also be constantly updated.

[expand title=”Click here to see the more technical elements (HTML, CSS, PHP and WordPress integration.)”]

Below is the HTML and PHP. I put this in a separate php file and included it on the page that I wanted it to show on.

      <div class="lifeathon-container">
        <div class="lifeathon-header">
        </div>

          <div class="lifeathon-contact-bar">
            <ul>
              <li class="left">To Give By Phone 800-724-8518</li>

              <li class="right">2013 Fall <strong>LIFE</strong>A<strong>THON</strong></li>
            </ul>
            <div class="clear"></div>
          </div>

        <div class="lifeathon-content-container">
          <div class="lifeathon-content">
            <div class="clickorcall"><a href="https://interland3.donorperfect.net/weblink/weblink.aspx?name=soundoflife&id=1"><img  src="lifeathon-clicktogive.png"></a></div>
            


            <ul class="lifeathon-thermometers">
              <li class="text">
                <div class="words">
                  New Partners for Life — <font color="#b51c21"></font>
                </div>
              </li>

              <li class="thermometer">
                <div class="mercury" style="width:%"></div>
              </li>
              <li class="sofar">so far: $ (%)</li>
            </ul>

            <div class="lifeathon-our-goal">
            	<strong>Our Goal:</strong><br>
				100 NEW PFL's<br>at 30+ a month. <div class="goal-amount">$</div>
            </div><br>
            

            <div class="clear"></div>

			<div class="clickorcall"><img src="lifeathon-orcall.png"></div>

            <ul class="lifeathon-thermometers">
              <li class="text">
                <div class="words">
                  Single Gifts Needed
                </div>
              </li>

              <li class="thermometer">
                <div class="mercury" style="width:%"></div>
              </li>
              <li class="sofar">so far: $ (%)</li>
            </ul>

            <div class="lifeathon-our-goal">
              <strong>Our Goal:</strong><br>
              <div class="goal-amount">$</div>
            </div>
            <div class="clear"></div>
          </div>

          <div class="lifeathon-grand-total">
            Grand Total Received/Pledged: $
          </div>

          <div class="lifeathon-footer">
            <img class="needamiracle" src="lifeathon-needamiracle.png">
            <p class="footertext">A BIG thank you to all of our partners. Our mission is “to connect people with the positive message of Jesus Christ”. You’re helping to bring <strong><em>Real Life</em></strong> and <strong><em>Real Change</em></strong> by giving to the Sound of Life! <strong><em>We can’t do it without you!</em></strong></p>
			<img class="realliferealchange" src="lifeathon-realliferealchange.png">
          </div>
        </div>
      </div>
  <div class="clear"></div>

And here is the CSS for the design.

/* Fundraising Thermometer */
/* http://www.suenovotny.com/blog/2011/03/dynamic-thermometer-with-css-and-php.php for source code */

.thermometer {
	background-color: #fff;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	height: 34px;
  }
.mercury {
	position: relative;
	background-color: #075295; 
	height:100%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 10px; 
    max-width: 100%; 
  }


/* End Fundraising Thermometer */

/* Lifeathon Landing Page */

span.collapseomatic {
	font-size: 1.5em;
	color: black;
	position: relative;
	top: 2px;
	font-family: "Rokkitt";
	}

.lifeathon-container {
	padding-right: 15px;
	}

.lifeathon-header {
	padding-right: 0px;
	background: url("lifeathon-header.jpg") no-repeat;
	height: 175px;
	display: block;
	overflow: hidden;
	}

.lifeathon-contact-bar {
	background-color: #035295;
	color: #fff;
	text-transform: uppercase;
	padding: 5px 14px 4px 14px;
	height: 25px;
	font-size: 1.2em;
	font-weight: 100;
	letter-spacing: 0.3em;
	}

.lifeathon-contact-bar ul {
	list-style: none;
	margin-top: 2px;
	}

.lifeathon-contact-bar li {
	margin-left: 0px;
	}

.lifeathon-contact-bar li.left {
	float: left;
	}

.lifeathon-contact-bar li.right {
	float: right;
	}


.lifeathon-content-container {
	min-height: 450px;
	background: #ddeeff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ddeeff 0%, #8da8bf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddeeff), color-stop(100%,#8da8bf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ddeeff 0%,#8da8bf 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddeeff', endColorstr='#8da8bf',GradientType=0 ); /* IE6-9 */
	}


.lifeathon-content {
	padding: 10px;
	}

.clickorcall {
	float: left;
	padding: 20px 0px 20px 30px;
	width: 175px;
	}

ul.lifeathon-thermometers {
	list-style: none;
	float: left;
	margin-right: 30px;
	margin-top: 36px;
	}

ul.lifeathon-thermometers li {
	width: 450px;
	}

ul.lifeathon-thermometers li.text {
	background-color: #fff;
	margin-bottom: 5px;
	font-size: 1.5em;
	font-weight: 700;
	padding: 5px 0 5px 0;
	}

ul.lifeathon-thermometers li.text .words {
	padding: 2px 0px 0px 8px;
	color: black;
	}

ul.lifeathon-thermometers li.sofar {
	text-align: right;
	color: #b51c21;
	font-size: 1.2em;
	font-weight: 700;
	}

.lifeathon-our-goal {
	color: #b51c21;
	font-size: 1.2em;
	padding: 30px 20px 0 0;
	}

.lifeathon-our-goal .goal-amount {
	color: #0e3a5d;
	font-size: 1.3em;
	font-weight: 700;
	}

.lifeathon-grand-total {
	background-color: #b51c21;
	color: #fff;
	text-align: center;
	font-style: italic;
	font-size: 1.5em;
	font-weight: 100;
	padding: 15px 0px 15px 0px;
	margin: 0 0 10px 0;
	}

.lifeathon-footer {
	height: 100px;
	}

.lifeathon-footer img.needamiracle {
	padding: 5px 0 0 20px;
	float: left;
	width: 160px;
	}

.lifeathon-footer p.footertext {
	float: left;
	width: 505px;
	padding: 5px 20px 0 20px;
	text-align: justify;
	font-size: 1.2em;
	color: #0e3a5d;
	}

.lifeathon-footer img.realliferealchange {
	padding: 17px 0 0 0;
	width: 165px;
	}	

/* End Lifeathon Landing Page */

Something that I did not show here is the integration with the WordPress backend. I was able to integrate it so that an administrator can login to the WordPress backend and update the slider numbers. Below is the actual PHP showing the defined parameters according to my edits to the theme options page.


And here’s a screenshot of the theme options page with my additions. I simply added a tab to the existing Inkthemes Theme Options page.

Lifeathon Theme Options

[/expand]

Sound of Life Sliders

Mulch Calculator using jQuery

Mulch CalculatorI’ve been toying around with learning jQuery, lately. I went out and bought a book and started going through the exercises. jQuery is really a sub library of JavaScript and it’s a really popular way to add cool enhancements to a website.

According to Wikipedia:

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 31% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
http://en.wikipedia.org/wiki/JQuery

As with any language on the web (and spoken languages, too), you can do some cool stuff even without being completely fluent in it. Thought I haven’t been using jQuery very long, I’ve already completed two projects with it.

My latest project was to build a mulch calculator that would help the user to know how many yards of mulch they will need to fill a certain spot. The user needs to know 3 things:

  1. Length in Feet
  2. Width in Feet
  3. Thickness in Inches

Here’s the formula for calculating what you need:
(Length * Width * (Thickness / 12)) / 27

You’ll notice that there is a semi-complex order of operations going on here

  • First we have to convert the inches to be on the same playing field as the feet by dividing by 12.
  • Then we have multiply length, width and our converted thickness together.
  • And lastly, all of that is divided by 27.

After much trial error, here is the JSFiddle.

The actual calculator can be found here: www.adamslandscapingandsupply.com/calculators

Starting a Business

Not long after arriving back to the States about 2 years ago (Wow, that was quick), I quickly got a freelance job from my first official client. (Read about it here.) It was great. I was excited to be going into business for myself. Since then, I’ve had several more clients. They’ve been relatively small sites, done for friends and family, but they’ve definitely helped me hone in my my skills.

But my dream for a long time has been to start my own business. It hasn’t necessarily been in web consulting, but I’ve wanted to start my own business. It’s such a huge undertaking. Even as I write these words, I’m overwhelmed with feelings doubt and excitement and fear and happiness all within milliseconds of each other.

So, after my most recent adventure applying for job fell through, I decided that I was just gonna go for it. I went down to the County Clerk’s office and registered my business name. It’s official, Jalopyhead Enterprises no longer exists in my head. It’s now a reality.

I’ve got some things in the works to help me launch it, including some airtime on a local radio station as well as getting a new logo and website that are already in the works.

Exciting times!