Click to Agree for E-Junkie: An Example (created by Juxtaprose)

This is an example of how one can modify E-Junkie's Add to Cart links, to require people to click an additional checkbox (e.g., to agree to terms of sale) before they add an item to the cart.

The Example

How to Add This to Your Site

1. Get a basic understanding of how this works.
2. Download a copy of license-agree.js, edit the not-agreeable error message to your liking, and upload the file to your web server. (Note that referencing the file on juxtaprose.com will cause you problems—so please don't do it.)
3. On your HTML pages or templates, add a script reference to license-agree.js, pointing to its location on your server—example: <script type="text/javascript" src="http://yourserver.com/scripts/license-agree.js"></script>
4. On your HTML pages or templates, add ONE checkbox (HTML INPUT) with id="agree"—example: <input type="checkbox" id="agree" /> <label for="agree">Check this before you buy!</label>
5. On your HTML pages or templates, change the onclick on EACH of your Add to Cart links—example: <a onclick="return agreed(this);" href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=4251&cl=37&ejc=2" target="ej_ejc" class="ec_ejc_thkbx">Add to Cart</a>

How This Works

For the impatient and HTML-savvy: please view the source of this page to see the code with an explanation in the comments. The Javascript you need to make this work is in license-agree.js, which also contains an explanation in the comments.

In simplest terms: the HTML for the E-Junkie Add to Cart link tells the browser to do something when the link is clicked. And, we're making a tiny change to that HTML, so the browser does something different when the link is clicked. The different thing is defined in a separate Javascript file called license-agree.js.

More technically: what is happening is that we've changed the onclick code that E-Junkie gives you in your Add to Cart links. We are making Add to Cart call our agreed() Javascript function rather than E-Junkie's EJEJC_lc(this) Javascript function.

Our agreed() function looks to see if the checkbox is checked or not.

If the checkbox is checked, then our routine calls the default E-Junkie code, and the E-Junkie cart loads as expected.

If the checkbox is not checked, our routine pops up an Alert with our message, prompting the user to first check the checkbox, in order to proceed.

Limitations

This checkbox-required feature is designed for contemporary web browsers that support Javascript and have Javascript turned on. Most (if not all) of the browsers at this time that support Javascript also have Javascript turned on by default. This includes all of the most commonly used browsers, such as Firefox, Camino, Safari, Chrome, Mobile Safari, Internet Explorer and Opera.

However, individuals can turn-off Javascript in their browser, and some do. These individuals will be able to add items to an E-Junkie cart regardless of whether they have checked the box, or not.

This limitation, because it would be seen in only exceptional cases (i.e., it's not the norm), is acceptable to many needs. However, if you have questions about whether this is legally sufficient for your needs, you should consult your lawyer.

If you do need a solution that works without Javascript, you should NOT start with this example. There is no way, without Javascript, to add a checkbox requirement that works on the same page as the E-Junkie Add to Cart links.

Instead, you will need to look into developing server-side code and also totally changing the Add to Cart links so that they route through your server-side mechanisms, e.g., that generate an "agreement" landing page, use server-side sessions to track whether the individual has agreed or not, etc.

Good luck with that!

History, Credits and License

This example was published on December 28, 2009 and created by Jay Fienberg of Juxtaprose. It is based on code we originally created for the 2008-era Common Craft website, before we totally redesigned it in 2009. After some requests for info on how we did this, with the agreement of Common Craft, we've released this as an example that others may use. We posted a bit more backstory here on our blog.

Please note that this code is released "as is" and is released into the Public Domain (meaning: you can do anything you want with it, but you do so wholly at your own risk).

This work is in the Public Domain.