Category: Javascript


Last post, I created my own cusomised Magento theme. It looks crap, but it works! Instructions here https://delboy1978uk.wordpress.com/2015/06/04/creating-custom-magento-themes/ In this post, I am going to take my fancy bootstrap 3 store template, and integrate it in to our newly created theme. The first stage is learning how the templates all work, so we’ll bring in the js and css, and make our own header until we get the hang of it. Then we can take the HTML from our template and add it in. But first things first.

fashion

The theme I downloaded has Bootstrap 3, but not the latest version, so I’m grabbing the latest from http://getbootstrap.com/getting-started/#download.

Once downloaded, copy the following files into your theme in /skin/frontend/fashion/default :

/css
    /bootstrap.min.css
/js
    /bootstrap.min.js
/fonts
    /glyphicons-halflings-regular.eot
    /glyphicons-halflings-regular.svg
    /glyphicons-halflings-regular.ttf
    /glyphicons-halflings-regular.woff

Stick your jquery.min.js in /js/lib/jquery.  There’s already a jQuery in there, but yours might be newer. You’ll notice a noconflict.js too. That stops jQuery and Prototype from conflicting with one another.
Ok, now we’ve done that, we need to configure our /app/design/frontend/fashion/default/layout/local.xml file. Javascript & Css go in our head block. So lets add it:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * local.xml
 * Local layout modifications for our local theme
 * @category    design
 * @package     fashion
 * @copyright   Copyright (c) 2015 delboy1978uk.
 */
-->
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addJs"><script>js/lib/jquery.min.js</script></action>
            <action method="addJs"><script>js/lib/jquery/noconflict.js</script></action>
            <action method="addItem"><type>skin_js</type><name>js/bootstrap.min.js</name></action>
            <action method="addItem"><type>skin_css</type><name>css/bootstrap.min.css</name></action>
            <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
            <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name></action>
        </reference>
    </default>
</layout

As you know, the C of CSS stands for cascading. The styles.css in the base theme will be called first, which obviously is unwanted behaviour which could cause class conflicts, so we really want to stop the base theme from loading it. So add this line before the bootstrap.min.css line :

<!-- Remove base theme styles.css --> 
<action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action>

Now let’s deal with the world’s shittiest, least standards compliant browser out there (if you can call it a browser) : Internet Explorer.  The usual suspects apply here, namely https://oss.maxcdn.com/libs/respond.js/1.3.0/ respond.min.js & https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js . Download them into the theme js folder, and add them under that bootstrap js line (notice the params bit):

<action method="addItem"><type>skin_js</type><name>js/html5shiv.js</name><params/><if>lt IE 9</if></action>
<action method="addItem"><type>skin_js</type><name>js/respond.min.js</name><params/><if>lt IE 9</if></action>

You can also add a config section specifically for print, so here’s what to add after the reference=”head” section:

<print translate="label" module="page">
    <label>All Pages (Print Version)</label>
    <!-- Mage_Page -->
    <block type="page/html" name="root" output="toHtml" template="page/print.phtml">

        <!-- This block allows the print.phtml template to get the logo -->
        <block type="page/html_header" name="header" as="header"/>

        <block type="page/html_head" name="head" as="head">

            <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
            <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
            <action method="addCss"><stylesheet>css/widgets.css</stylesheet></action>
            <action method="addItem"><type>skin_css</type><name>css/print.css</name></action>
        </block>

        <block type="core/text_list" name="content" as="content" translate="label">
            <label>Main Content Area</label>
        </block>

    </block>
</print>

Now we add our ‘root’ template file. At the top, in the default node but above the <reference name=”head”> node, add the following (for the example I’m using the 2 col layout):

<reference name="root">
      <action method="setTemplate">
          <template>page/2columns-left.phtml</template>
      </action>
</reference>

Great! Now it’s time to rip apart the .phtml files we copied over from the base theme! Open /app/design/frontend/fashion/default/template/page/2columns-left.phtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?= $this->getLang() ?>">

    <head>
        <?= $this->getChildHtml('head') ?>
    </head>

    <body<?= $this->getBodyClass() ? ' class="'.$this->getBodyClass().'"' : null; ?>>
        <?= $this->getChildHtml('after_body_start') ?>
        <?= $this->getChildHtml('global_notices'); ?>
        <header>
            <?= $this->getChildHtml('header'); ?>
        </header>
        <section id="after-header">
            <div class="container">
                <?= $this->getChildHtml('slider'); ?>
            </div>
        </section>
        <section id="maincontent">
            <div class="container">
                <div class="row">
                    <?= $this->getChildHtml('breadcrumbs'); ?>
                    <aside class="col-left sidebar col-md-3">
                        <?= $this->getChildHtml('left'); ?>
                    </aside>
                    <div class="col-main col-md-9">
                        <?= $this->getChildHtml('global_messages'); ?>
                        <?= $this->getChildHtml('content'); ?>
                    </div>
                </div>
            </div>
        </section>
        <footer id="footer">
            <div class="container">
                <?= $this->getChildHtml('footer'); ?>
            </div>
        </footer>
        <?= $this->getChildHtml('before_body_end'); ?>
        <?= $this->getChildHtml('global_cookie_notice'); ?>
        <?= $this->getAbsoluteFooter(); ?>
    </body>

</html>

Okay, do the same for the other template files too! You know the score! Ditch the Magento markup and replace with BS3 awesomeness!
Check out my next post where we’ll start editing the view files and creating blocks etc!

 

This was really annoying me as I found a nice lib which worked called jquery-outside-events , which I forked onto my own Github (could be tidier/easier imho) but it wouldn’t work! The reason I think was possibly it was conflicting with Prototype JS, which Magento uses.

The $ symbol is reserved for Prototype so I found I had to replace $(‘#etc’); with jQuery(‘#etc’); Since doing that however I’ve discovered you can call $j instead of $ or jQuery.

Anyway! Here’s the code you need:

$j('body').click(function (event)
{
    element = $j(event.target);
    if(element.parents('.skip-link.skip-cart').length == 1 || element.hasClass('skip-cart'))
    {
        return;
    }
    var parent = $j('.minicart-wrapper').parents('.skip-content');
    var link = parent.siblings('.skip-link');

    if (element.parents('.minicart-wrapper').length == 0) {
        parent.removeClass('skip-active');
        link.removeClass('skip-active');
    }
});

Now when you click show basket, the basket appears, but you can now click elsewhere on the page to make it close again!

Ever seen that message? I have, but thought I’d let you know what’s going on, as I just encountered it again in a Magento site I’m working on in my new workplace.

When this happens, it’s usually because of a clash between some other javascript library that uses the $ symbol. In Magento’s case, that’s Prototype JS (http://prototypejs.org/).

To sort it, you just need to replace all your $’s with jQuery, like so:

jQuery(document).ready(function(){
    // etc
});

You can also say var $j = jQuery, then use $j(‘#id’); instead 😀

If you haven’t used sourcemaps, now is the time!

With the advent of compiled CSS like LESS or SASS, or minified/uglified JS, it makes debugging awkward as you cant see the original lines of code that you wrote. Cue CTRL_F’ing to find that line to tweak! But not any more!

When you generate your LESS/SASS, if you tell it to compile a sourcemap too, it will create one! This allows your browser to report which line of the less or scss file the rule in question came from.

For the Less compiler command, you have several options:

--source-map[=FILENAME]  Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X  adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X  Sets sourcemap base path, defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline  puts the map (and any less files) into the output css file
--source-map-url=URL     the complete url and filename put in the less file

For Sass, you just add the option at the end of the command:

sass sass/screen.scss:stylesheets/screen.css --sourcemap

Now in Firefox, open your page, right click, and click Inspect Element (not the Firebug one, the default Firefox Inspector!)

In the CSS rules pane, right click, and make sure show original sources is checked.

Screen Shot 2015-05-18 at 16.57.27 (2)

To the right of the actual rule, you click the link which would usually take you to the CSS file for viewing, but now, it takes you to your Less/Sass file! You can now tweak rules and save them directly from the inspector!

Screen Shot 2015-05-18 at 17.01.11

In my new workplace, our SASS files are compiled by Gulp automatically. (In my last work I had lessc configured in PHPStorm). If your own files are automatically built, then you should also checkout Firefox addons for live reloading! The great thing about that is that the CSS files update without refreshing! Great if you have session info or other info that might need reinstantiating, you dont have to keep keying stuff in! Have fun!

niceScroll doesn’t play nice

Whilst working on a Pimcore site, I had this irritating problem with my wysiwig editors, in that if you pressed space, instead of typing a space, it scrolled the page. I knew it must be some javascript library or other included in my template, and it turns out that the culprit was niceScroll (http://areaaperta.com/nicescroll/).

Found some funny forum posts, some angry guy sarcastically saying, you know, space, that separates words?

Anyway, there’s an option to disable space bar scrolling (which in my opinion should be disabled by default). Anyway, to sort it, just feed in the spacebarenabled: false option:

//nicescroll
    $("html").niceScroll({
        zindex:999,
        cursorborder:"",
        cursorborderradius:"2px",
        cursorcolor:"#191919",
        cursoropacitymin:.5,
        spacebarenabled:false
    });
    function initNice() 
    {
        if($(window).innerWidth() <= 960) 
        {
            $('html').niceScroll().remove();
        } 
        else 
        {
            $("html").niceScroll({zindex:999,cursorborder:"",cursorborderradius:"2px",cursorcolor:"#191919",cursoropacitymin:.5});
        }
    }
    $(window).load(initNice);
    $(window).resize(initNice);

This is remarkably easy! Create an with = hidden class and the source being your other page.

Then, create an tag with an onclick event listener:

<a class="btn" onclick="frames['frame'].print()">Print</a>

That’s it!

NB. WordPress doesn’t seem to allow iframe code at all! So without the < or > tags, It’s iframe src=”/your/url/to/print” name=”frame” class=”hide”

You may have noticed that if you have made your website into an iOS webapp, that <a> tags leave the app and launch in Safari, which is slightly irritating. To fix this, it’s just a little Javascript:

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

 

If you’re here, that’s probably because you just put a datepicker into a bootstrap modal, but realised that the Year dropdown isn’t working properly, and when you click it, nothing appears to happen.

Luckily, it’s quite easy to fix. After initialising your element with

$('#mytextbox').datepicker({//options here});

All that is required is to paste this line of code, which does something regarding javascript’s dom focus :

$.fn.modal.Constructor.prototype.enforceFocus = function() {}

Job done! You can get back on with your work now! 🙂

Geolocate your visitors!

Right now I’m building a mobile app using Intel’s AppFramework for a single page site, and Apigility for the API.

In the app, there is an autosuggest for towns and postcodes, however I thought it would be nice to have a “Locate Me” button, able to pinpoint your visitor (hopefully with a decent degree of accuracy!), so I Googled away and found the following:

https://github.com/estebanav/javascript-mobile-desktop-geolocation

In your site go into your js folder and clone the repo:

cd js
git clone git@github.com:estebanav/javascript-mobile-desktop-geolocation.git

In your page you’ll include the scripts and add your functionality as required:

<script src="js/javascript-mobile-desktop-geolocation/js/geoPosition.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/javascript-mobile-desktop-geolocation/js/geoPositionSimulator.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
if(geoPosition.init())
 { 
    // Geolocation Initialisation
    geoPosition.getCurrentPosition(success_callback,error_callback,    {enableHighAccuracy:true});
 }
 else
 {
    // You cannot use Geolocation in this device
 }
 geoPositionSimulator.init();
// p : geolocation object
 function success_callback(p)
 {
    // p.latitude : latitude value
    // p.longitude : longitude value
    console.log(p);
 }
function error_callback(p)
 {
    // p.message : error message
    console.log(p);
 }
</script>

Now if you load your page and go into the web inspector, hopefully you should have some coordinates!

The next part of the puzzle is where it gets interesting: How to find the closest match in your table of areas, postcodes, and lat longs!

I would never have figured this out, but there is an equation called the Haversine formula, which uses spherical trigonometry to calculate areas within a certain distance! It looks like this:

R = earths radius (mean radius = 6,371km)
Δlat = lat2 lat1
Δlong = long2 long1
a = sin²(Δlat/2) + cos(lat1).cos(lat2).sin²(Δlong/2)
c = 2.atan2(√a, √(1a))
d = R.c
Angles need to be in radians to pass to Trigonometric functions

http://en.wikipedia.org/wiki/Haversine_formula

Here’s my actual query itself:

SELECT *, 
 ( 3959 * acos( cos( radians(55.864237) ) * cos( radians( latitude ) ) 
 * cos( radians( longitude ) - radians(-4.251806) ) + sin( radians(55.864237) ) 
 * sin( radians( latitude ) ) ) ) AS distance 
FROM postcodes HAVING distance < 20 
ORDER BY distance LIMIT 1;

Here I check for any area within 20 miles, but you can make this as short or long as you want.  The 3959 figure at the start of the query is the number used for miles, if you are using kilometres you should change this number to 6371.  I have limited it to 1 row, as I only want the closest match, however you may want to change this in other situations!

So there we have it! NSA-like spying on your visitors! (With their permission of course!)

I love LESS! However having to run lessc every time I edit my less file is LAME! Adding File watchers in PHPStorm means that when you save your file, it will automatically compile your CSS! We are also going to add Javascript and CSS minification, which helps increase page load speeds and also make it harder for nosey people to examine your javascript! Lets go!

First up, lets install node.js by visiting http://nodejs.org/
Next, we install less and yuicompressor:

npm install -g less
 npm install -g yuicompressor

Also on Windows, everything cracks up unless you add a PATH environment variable for the modules. In Control Panel in System, click Advanced System Settings, click Environment Variables and add the node modules folder to the PATH variable, or add it if its not there:

C:\Users\your.username\AppData\Roaming\npm

Go to File > Settings, and under the project settings look for File Watchers. Click the green + to add a watcher. Select LESS.

All that is required is that you put the correct path into the program field. This may be slightly different depending on your setup. For windows users, the modules can usually be found in :

C:\Users\your.username\AppData\Roaming\npm\lessc.cmd
 C:\Users\your.username\AppData\Roaming\npm\yuicompressor.cmd

And on linux machines, you can find it elsewhere. I cant remember offhand, but just take note of the output while you are installing it and you wont go far wrong.

Now you can edit the head section of your website, replacing style.css with style.min.css, and the same also for your javascript! Awesome 🙂