Let's dive a little deeper with asset library dependencies. We're going to add a little piece of JavaScript with a dependency on jQuery; when a user clicks on the recipe description field, an alert box will be triggered to tell them it's delicious. We'll set it so that it only loads on the full view mode of our recipes (that is, not on our homepage listing). This will also be our first introduction to Twig. Let's begin:
Back in PhpStorm, in our
recipes
theme, create a directory calledjs
.In the
js
directory, create a file calleddelicious.js.
While the contents of this JS file are just to demo the concept, we'll create it and document it using good practices, so that you can use this as a basis for your own work. We'll start by defining the file, setting a description, and then creating our function:
/** * @file * A delicious notification alert */ var delicious = (function ( ) { })();
After the function, we'll tell jQuery to load this function...