Building an app in Drupal's theme layer

Submitted by swim on Thu, 11/05/2015 - 11:30

Drupal 8 as many people have already pointed out provides a great base for front end developers regardless of your chosen stack. Providing REST as core functionality has created a standardised approach which when left up to contrib can often become enigmatic.

This article aims to explain the benefits of building a JavaScript application via Drupal's theme layer. Mithril JS will be used as the client side framework, however the core concepts could be applied to others as well. 

Requests to Drupal can also be queued, allowing access to an array of results. This generally makes for more performant and organised code.


var nodes = md.queue([
  {
    method: 'GET',
    url: '/node/1',
    background: true
  },
  {
    method: 'GET',
    url: '/node/2',
    background: true
  },
  {
    method: 'GET',
    url: '/node/4',
    background: true
  }
]);

Bringing all of the above together I have made a very rough version of the classic Bartik theme. The example theme/site is located here.

While these are some nice examples they are very simple and lack (any) finesse, a problem only love can solve (more time). Hopefully over the coming months I'll have the opportunity to utilize these tools in more projects.

Owl Carousel

This article will provide an outline of how to setup and configure Owl Carousel for Drupal. Owl Carousel is a feature rich responsive slider built by OwlFonk. The module provides integration with Views and Fields via a custom formatter. Additionally sub-modules such as Owl Carousel Colorbox provide extended functionality.

Installation

1.x

Example item 1

Donec lobortis tempus diam, eget gravida ex mattis at. Nulla facilisi. Etiam vehicula tellus ut hendrerit imperdiet. Proin et malesuada lectus. Nunc sapien ipsum, feugiat id ultrices et, sollicitudin rhoncus sem. Maecenas sit amet lorem risus. Sed suscipit viverra ipsum, id feugiat enim tempus sit amet.

Function scope & Drupal cache

Submitted by swim on Mon, 07/14/2014 - 04:43

When developing with caching in mind it's important to consider functionality scope. For example, writing code which is per visitor specific in PHP with caching support ahhh =O. While rewriting that same functionality in JavaScript offers us a quick and cache friendly solution. Consider the following examples.

Drupal Commerce Responsive Checkout Tables

Submitted by swim on Fri, 06/06/2014 - 04:18

Providing a responsive checkout is an important feature of any eCommerce site. Drupal Commerce if themed correctly handles this fairly sweet; except for one element, tables.

Here is a quick solution which leverages stacktable.js. Automatically applying it to each views table instance during the checkout process. Simply add more form_id's to extend this functionality to other pages.

Drupal Views custom AJAX pagination callback

Submitted by swim on Sun, 03/16/2014 - 04:39

The following example will illustrate how to override a views default ajax pagination callback. There are a number of reasons this could be useful. Views ajax pagination will replace the entire view element; which is of course required it's still doing more than we might need. We might also want to keep the already loaded content and simply append new rows. Please note this is still a work in progress and is intended for the Owl Carousel module.

Subscribe to