Override Superfish's Mobile Menu Trigger in Drupal

The Superfish integration for Drupal works nicely for all kinds of menus from Mega Dropdowns down to Mobile. What bothered me with Superfish's Mobile Menu implementation is that the Button that opens the Mobile Accordion (.sf-accordion-toggle) is always named after the name of the actual menu and normally can't be overridden.

One possible approach to overcome this is using plain CSS to hide the span and place something different inside the link tag using the content property. I don't like that idea too much so instead I tried figuring out how to change this with JavaScript. Turned out it's not possible to simply selecting the DOM element and changing its value because the original value gets re-assigned anytime you resize you browser windows. What does work is overriding the Superfish behavior. I just copied it over from superfish.js form the Superfish Module into my theme's JS and there I set my desire value, like so: options.plugins.smallscreen.title = '<i class="glyphicon glyphicon-menu-hamburger "/><span>Menü</span>';

Here's the entire function:

Let Drupal Editors Pick a Color and use it in Template

I'm currently working on an image slider where each slide needs to have its own background color.

Letting editors choose a color is easy with the Color Field Module. Just install it, throw the Spectrum Color Picker into your libraries folder and add and configure a Color Field where ever it's needed. You can then simply access the user-entered color as a hex string in your template and use it to your liking (yea, that's one of the rare times where it's ok to use inline style, at least in my book).

Convert Hexadecimal Color Values to RGBa

I needed my color to have alpha transparency, however, the color value is only available as a hexadecimal string. Luckily I found this handy snippet to convert hex values to RGB(a), so thanks a lot to mekshq for sharing.

Just put it into your template.php and you're good to to to use hex2rgba() anywhere in your theme.

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:

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

    // Third party plugins / libraries
    'src/js/app.js',
);

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
})(jQuery);
Tags: 

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():

<?php
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']);
    drupal_add_js($active_theme.'/js/notfront.js');
  }
}
Tags: 

Pages