The remaining element of our site is actually implementing the e-commerce portions: an online shopping cart and the ability to process orders, as well as reporting tools to tell us how our store is doing. We will now complete our store configuration by adding a shopping cart, configuring the checkout process, and placing a test order to make sure the whole store is actually working.
Additional resources
In this series, we have covered the basics of setting up an online storefront and shopping cart using the Drupal Commerce package for Drupal. However, there are several additional modules that you will likely want to consider before taking your online store live. We'll take a brief tour of:
Additional resources
In this series, we were able to set up a complete online store for our customer, Sweet Tees, using Drupal Commerce, a powerful, flexible e-commerce framework built on Drupal. We set up a payment system through PayPal’s Website Payments Standard. We also delved into the topic of data imports with the Feeds module, and covered tweaking Drupal’s functionality at various system points with the Rules module. In this lesson we'll tour the Sweet Tees site, discussing our implementation points, and reviewing the modules and resources we used.
Additional resources
Using Drupal, 2nd edition
Using Drupal source code
Up next: Using Drupal Appendix A: Installing and Upgrading Drupal
The original 960 Robots theme is based on a 960 pixel grid. It has container and grid classes with widths declared in pixels—an absolute metric. In this lesson, we will take a first step in implementing a responsive design: converting absolute units to relative ones. We'll begin this process by editing the 960.css file, which contains the width declarations for our container and grid classes that make up our site's layout. Using the target ÷ context = result formula, we'll convert widths declared in pixels first to ems, then to percentages, with a little nudge of the decimal point over two places.
With our layout's container and grid classes using relative widths declared in percentages, we'll be on well on our way to making our site more fluid and flexible.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 03-fluid-layout)
We're making progress in making our theme more flexible and fluid. Next, we’ll address our site's typography and implement relative font-sizing. This will help ensure that our text is more legible without the need to pinch and zoom. To do this, we’ll convert our font-sizes declared in pixels to ems, using the target ÷ context = result formula. Break out those calculators!
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 04-responsive-typography)
As we've been converting our font-sizes to ems, we've noticed other properties that need updating, including margin and padding. In order to correctly apply our target ÷ context = result formula, we need to know the appropriate value for "context." Converting padding presents us with a new context, different than that of a margin. In this lesson, we'll learn how to determine the appropriate context and convert padding and margin pixels to relative units.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 05-responsive-padding-margins)
So far, we've adapted our layout to be flexible and fluid using relative units like percentages and ems, instead of absolute ones, like pixels. The problem is that smaller devices will often use resolutions much greater than the actual size of the screen size or viewport. So while our relative sizing is technically working, it's not going to be terribly useful or make our content more readable and accessible until we add an important tag to the head of our html template file: the viewport meta tag.
By adding the viewport meta tag to the head of our html template file, we're letting the browser know that we want the viewport size to be the size of the device, not some huge resolution more suitable for a 17" monitor, for example. This is a small but critical step in implementing a responsive design. Without it, our hard work of converting to relative units just isn't going to pay off.
In this lesson, you'll learn how to add a viewport meta tag to the head of all html pages using a special Drupal template file that we'll create. Then we'll step back and admire the results using our mobile emulation tools.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 06-viewport-meta)
Written tutorial based on this video
While it's not forbidden to use absolute positioning in responsive designs, the way that absolute positioning was utilized in the original theme is less than ideal as we work on moving theme toward flexibility, fluidity, and responsiveness.
In this lesson, we'll focus on putting elements in the header back into the natural flow of the document. We'll refactor some HTML and CSS, removing absolute positioning declarations and change the source order of some elements in our page template file.
Restoring the natural order and flow of the document will make things easier for us down the road as we adapt our components to stack into one-column in small screens.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 07-08-flow-media-queries)
In this series, we’ll start out by adapting the Anytown Farmers Market website layout for display on a small mobile screen. The current layout is a stacked 2-column layout with a full-width header, primary content column, and two sidebars. We'll simplify and update the wide layout to use just one main content column plus a right sidebar that will stack under the content region on smaller viewports. We'll use the breakpoints that we identified in the previous lesson to implement width-based media queries and trigger the appropriate layout — stacked for narrow screens and 2-column for wider viewports.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 07-08-flow-media-queries)
Responsive Menus module enables a site builder to install and configure a responsive menu with very little CSS required. We'll walk through the configuration of the module using the media query we built in the previous lesson. We'll also add some CSS to hide our desktop navigation when the mobile menu is shown.
Additional resources
Responsive Menus module (Drupal.org)
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 09-responsive-menu-contrib-module)
There are quite a few images on the site that aren’t scaling very well. They’re either way too small or way too big and break the layout. For now, we just want ensure that our images don’t overflow beyond the layout container and that they are viewable at a comfortable size across all viewport sizes. While we're at it, we can make sure all HTML media objects stay safely contained in a flexible container, especially when sizing down.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 10-max-width)
Our image gallery plugin has long been known to be barely navigable on a small screen. Let’s fix our images and replace our photo gallery plugin with a responsive image slider that will work on small to large screens. We'll swap out Views Slideshow in favor of FlexSlider in this lesson.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 11-flexslider)
In this tutorial you will learn how to create a site archive for an existing Drupal site so that you can import it into Pantheon. You'll learn how to create one single archive file that contains all the components we need: database, code base, and files. First, we'll demonstrate how to create an archive using the Backup and Migrate module, using a Drupal site's UI, and then you'll learn how to accomplish the same task using the Drush archive-dump
command. In this tutorial we assume that you either already have Backup and Migrate module installed on your site, or that you have Drush set up and are familiar with the basics of using it.
Additional resources
Lullabot Module Monday: Backup and Migrate video tutorial
Introduction to Drush video series
In this tutorial, you will learn how to get a Drupalize.Me tutorial demo site up and running using Pantheon. You'll learn about the various components that make up the Drupalize.Me demo site downloads and how each part should be imported. By the end of this lesson, you'll know how to create a Drupalize.Me demo site on a free Pantheon Dev instance so that you can follow along with the trainer in the Drupalize.Me video tutorial.
Additional resources
In this tutorial, you will learn how to use Acquia Dev Desktop 2 to get a Drupalize.Me tutorial demo site up and running. You will learn how to import a Drupal codebase and database containing a finished site for an individual tutorial on Drupalize.Me. This will enable you to walk through the lesson and see what was accomplished on the site during the lesson.
Additional resources
RedHen CRM is a Drupal-based customer relationship management tool. Many organizations use CRMs to help them manage the contacts they rely on to run successful campaigns. In this introduction tutorial, you will learn how to configure and use RedHen CRM, while also getting a tour of the features it provides. In the process, you will create contacts and organizations, and then use them to build a staff directory using the Views module and custom engagements scores with the Rules module. With that in place, you'll dive into what you have available in the Contact Dashboard, which is where you really get into managing your customers. You'll also get to see features such as contact deduplication to merge multiple contact records into one contact, and a list of resources to take things further than what is covered in this introduction.
If you want to follow along with the examples in this tutorial, you should be familiar with Views and Rules. You can learn more about Views in our Intro to Views for Drupal 7 Series, and you can learn more about Rules in the Learning the Rules Framework Series.
Additional resources
RedHen CRM website
RedHen CRM Drupal project
RedHen CRM Demo project
What Is Node.js?
FreeThis series is about integrating Node.js with Drupal 7 using the Node.js Integration contributed module on Drupal.org. The Node.js Integration project contains a number of submodules, and a separate Node.js application written in Javascript, that uses the Express, Socket.io, and Request packages.
Node.js is really fantastic for real time communications, something that Drupal is not particularly good at, out-of-the-box. The Drupal Node.js Integration module brings a host of real time capabilities and a client for your site to enable notifications when a variety of events occur, so your users can receive overlay notifications directly in their browser without page reloads!
In this series we'll cover:
- What Is Node.js?
- Install Node.js and the Node.js Drupal Module
- Configure Your Node.js Application
- Node.js Notifications Module
- Node.js Actions in Action!
- Content Update Messages with Node.js Subscribe
- Real-Time Log Viewing with Node.js Watchdog
- Node.js Checker, a Status Tool
- Get Ready for Production with Node.js
This series is a walk-through of how to get Node.js installed in your system, and how to install and configure the Node.js Drupal module, as well as a look at the related submodules. We'll install a different module that's dependent on the Node.js Drupal module. With this, you'll see how dependencies work in the context of the Node.js Drupal module's Node.js application's configuration.
Now, this series is not for the faint of heart. You'll need some Drupal administration knowledge, installing and configuring modules. We shall also be wildly typing things at the command line, so if you have some experience with command line use, that will definitely be helpful!
If you want to take your learning further, look for the self-check questions in the description for each tutorial in this series. These questions are presented to help you make sure you’re understanding the material, and to encourage you to explore how what you've just learned could apply to your own use case.
If you want to integrate Node.js and Drupal 7 so you can provide real time update notifications on your site, as well as a number of other real time communication options, this series is for you!
Additional resources
To use the Drupal Node.js Integration module, you need Node.js installed on your system, so in this tutorial, I will show you how to get this and the other dependencies installed on your system.
In this lesson, you will learn how to:
- Install Node.js on your system
- Test the version of Node.js installed
- Test the version of NPM installed
- Install the Node.js Drupal module
- Install the Node.js project dependencies with NPM
At the time of recording, I installed version v0.12.5 of Node.js. As the note on Node.js Previous Releases states: "Releases 1.x through 3.x were called "io.js" as they were part of the io.js fork. As of Node.js 4.0.0 the former release lines of io.js converged with Node.js 0.12.x into unified Node.js releases." - which explains the rapid version jump to the current 4.x releases.
You should make sure you have the latest version Node.js installed, particularly if there are security releases.
Note: Starting with version 7.x-1.11 of the Drupal module, the Node.js application is no longer bundled with the download. It can be downloaded seperately from GitHub or NPM.
Self-check question: Which version of Node.js do you have installed?
Additional resources
Note: This video is out of date and will be archived. Check this page for instructions: Node.js integration documentation.
To be able to use the Node.js Integration module, you need to configure both a Node.js application, as well as the Drupal Node.js Integration module itself.
In this lesson, you will learn how to:
- Enable the Node.js Config module
- Understand of all of the configuration options
- Generate a config file for our Node.js application
- Edit the generated configuration for a basic working setup
- Start the Node.js application
Self-check question: Did you remember to change the protocols array in your nodejs.config.js?
Additional resources
The Node.js Notifications module is the User Interface (UI) component of the set of Node.js Integration modules. In this video, you'll see the Node.js Integration module's basic functionality.
In this lesson, you will learn how to:
- Enable the Node.js Notifications module
- Explore the configuration options
- Broadcast a notification message