PayPal is a popular payment processor, especially for new site owners. It allows credit card transactions as well as payments from within PayPal itself. There are predominantly two “flavors” of PayPal’s payment processing tools: Website Payments Standard (WPS) and Website Payments Pro (WPP). For our purposes, we’ll be using Website Payments Standard, since there are no setup fees, no extra security setup required, and we can get started right away. In this lesson we'll create test PayPal buyer and seller accounts, set up access to the test sandbox, and make sure it is working properly.
Additional resources
Now that we have the PayPal side of payments set up, it’s time to set up the Drupal side of things. We’ll do this with the Commerce PayPal module, which is an extension of the main Drupal Commerce package. Just as we saw with Taxes, Commerce payment methods are Rules-enabled for maximum flexibility. In this lesson we'll walk through enabling the PayPal WPS payment method and configuring our PayPal sandbox access so that we can start taking test transactions on our store.
Additional resources
Using Drupal, 2nd edition
Using Drupal source code
Commerce PayPal project
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 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
In this tutorial, I'll show you a few ways we can create a basic API by exposing data from our Drupal site.
The methods I'll use include:
- Views Datasource
- Custom code
- Services
Self-check question: In what situations would you consider using each of these approaches?
Additional resources
In this tutorial, I will explain what a base, or parent, theme is in Drupal and why it can be advantageous to use it in theming. We'll take a look at what is commonly provided by a base theme, including discussing what a "starter kit" is and how it is intended to be used.
Additional resources
Zen is a base, or parent, theme for Drupal that features lean, semantic HTML5 markup and a starter kit for custom theme development. In this tutorial, we will install Zen and create a subtheme for custom theme development using Drush. I use the Drush command provided by Zen because of all of the tedious renaming required when cloning the "STARTERKIT" into a subtheme. The Drush command provided by Zen automates this and makes it a relatively painless process. If you need to install Drush, see our related video tutorial, Installing Drush with Composer, or read the instructions for installation on the Drush web site.
In the next tutorial, I'll briefly explain why you might want to use a base theme and when it makes the most sense to do so. After that, I will walk through and highlight some of the HTML5 semantic markup in Zen's template files, contrasting the markup with the corresponding template files in the core Drupal 7 theme, Bartik.
Other tutorials in the Markup in Drupal series also use a subtheme of Zen, called zendemo, as a theme for the demo site. This was done to demonstrate how markup is first and foremost affected by the theme. It was also done to show how using a base theme that uses semantic HTML5 markup can be advantageous if you want to use HTML5 elements in the built-out components and pages of your Drupal site.
To follow along, download the latest version of Drupal 7, and follow the instructions in the video for installing Zen and a creating a subtheme.
In the downloads section below you'll find a database and files downloads, which is the state of the site after this tutorial, with Zen and the subtheme "zendemo" installed.
Additional resources
In this tutorial, I will take you on a tour of some of the template files included with Zen and highlight how HTML5 semantic markup was incorporated into the markup of several different template files.
Additional resources
Zen — Drupal.org
Zen documentation — Drupal.org
HTML5 Developer Guide — MDN