Shopware 5 Theming 101

First things first:

  1. In the Theme Manager in the backend add a new theme that inherits from Responsive
  2. It will be saved to themes/Frontend/Mytheme
  3. To add your own stylesheets to your theme put a file called all.less here: themes/Frontend/Mytheme/frontend/_public/src/less/all.less. It will automatically be compiled by Shopware’s own LESS processor
  4. To add your own scripts to your theme put them in themes/Frontend/Mytheme/frontend/_public/src/js/ and them to the $javascript array in themes/Frontend/Mytheme/Theme.php (snippet below)
  5. To immediately see your custom scripts and styles disable compiler cashing and CSS and JS compression in the settings of the Theme Manager

Adding a JavaScript file to your Shopware 5 Theme:

 * Javascript files which will be used in the theme
 * @var array
protected $javascript = array(

    // Third party plugins / libraries

htaccess performance boost

FileETag none

# add entity tag
FileETag MTime Size

# set expires header
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf|woff|eot|svg|ttf)$">
   Header set Expires "access plus 1 year"

<ifModule mod_headers.c> 
Header set Connection keep-alive

Run a JavaScript only on the First Page Load / only on Succeeding Page loads

On a site I'm currently building I need to do some JavaScript scrolling on every page load, except for the first on (to scroll beyond a huge image slider that I don't want to be in the way on succeeding page loads.

Note: this example makes use of jquery.cookie Plugin by Klaus Hartl, so make sure you include it, too.

(function ($) {
  $( document ).ready(function() {
    var cookieName = 'firstPageLoad';
    var cookieValue = 1;
    // if the cookie doesn't exist we're on the first page load...
    if (!$.cookie(cookieName)) {
      // and set a cookie that is valid for the entire domain
      $.cookie(cookieName, cookieValue, { path: '/'});      
    // if the cookie does exist, its (most probably) a succeeding page load...
    else {
      // ... so we want to scroll to the navigation
      $('html, body').animate({
          scrollTop: $("#navigation").offset().top
      }, 1000);    
  }); // document ready

Drupal: Insert JavaScript for Every Page except Front Page

Just a quick reminder for myself how to simply load an asset only if a certain condition is true.

In template.php we need to implement template_preprocess_page() check our condition and load our script using drupal_add_js():

function MYTHEME_preprocess_page(&$vars) {
  // if we're NOT on the front page load a script from the currently active default theme
  if (!$vars['is_front']) {
    $active_theme = drupal_get_path('theme',$GLOBALS['theme']);

Adding Touch support for jQuery Superslides using TouchSwipe

I was a bit confused when first using Superslides to find out it doesn't come with touch support out of the box. Here's what I did to enable it, maybe it of use for somebody who's wondering, too.

All Superslides examples use Hammer.js as an additional library to support touch. Recent versions of Hammer don't seem to work with Superslides anymore, though. TouchSwipe, on the other hand, does. Nice side effect: TouchSwipe has a smaller footprint than Hammer (11 vs 18 kB minified).

So I simply made sure jquery.touchSwipe.min.js gets included and added the following script to trigger the slide animations on swiping (.views-superslides-wrapper is my main Superslides wrapper):

// adding touch support for the main slider (using SouchSwipe)
var $slides = $('.views-superslides-wrapper');
$slides.swipe( {
  swipeLeft:function() {
  swipeRight:function() {
    $(this).superslides('animate', 'prev');

Using Node.js modules in your Drupal Themes

As my frontend development workflow gets more and more dependent on Grunt and node.js there are are issues coming up when Drupal tries to parse .info files from theme directories. I've had a hard time working around this by putting Gruntfile.js and package.json in a hidden subdirectory of my theme, but this resulted in a lot of broken Grunt tasks (and it's basically yet another hack because it simply relies on the fact that Drupal doesn't scan directories starting with a dot).

So I went the easy yet dirty way and hacked the Drupal core. Yes, yes, it's bad, but I didn't see another way without wasting yet even more hours just to be able to employ a modern frontend workflow.

All I had to do was changing the nomask value in line 2109 of includes/ to 'nomask' => '/(\.\.?|CVS|node_modules)$/',

This makes sure Drupal won't parse the .info files from any node_modules folder, et voilà, all Grunt tasks and Drupal work peacefully side by side!

Multi line text shadow in Firefox

I've been using Fabien Doiron's Box-Shadow Method to create multi line padded text for a while. Just recently I had to find out that this isn't working anymore in later versions of Firefox.

Turns out starting with Firefox 32 Mozilla has introduced text-decoration-break: split as default. Setting it to box-decoration-break: clone; does the trick.

Thanks to Chris Coyier for pointing this out.