Bootstrap + Drupal Commerce in less than 45

minutes!by Jorge Diaz

About me• My name is Jorge Diaz and I’ve

been involved with Drupal for more than 8 years.

• Acquia Certified Developer Front End Specialist

• Acquia Certified Developer

• Acquia Certified Drupal Site builder.

• I work as a Drupal Themer & Front-End Developer at EvolvingWeb, a Montreal based Drupal Consulting, development and training company.

About meI’m rising 2 Drupal Developers at home & I was born in the magical

city of Havana, 30 years ago but Drupal brought me here.

What do we do at EW

• Founded in 2007 by Alex Dergachev and Suzanne Kennedy.

• Drupal Consulting, development and training.

• Help organizations build awesome Drupal websites with custom functionality.

Projects

My intention in the next 45 minutes

• Create a simple Online Store based on the most flexible open source backend PHP framework (Drupal) and the most popular front end one (Bootstrap).

• Demystify the fact that Drupal is that hard to learn/use or even switch to from Wordpress, Joomla or even other similar solution.

My intention in the next 45 minutes

Who will enjoy this?• Web Designers

• Front-End Developers

• Drupal Themers

• Drupal Site Builders

• Anyone who wants to know how to build a Bootstrap + DrupalCommerce in less than 45 minutes…

Who won’t?

There are some topics I will just not talk about

• How to install a Drupal site.• Themes basic concepts.• How sub themes works.• How does a basic View works.• Content Types theory.

Let’s get started

What we will need•1 Fresh Drupal install•10 Contributed Modules•1 Contributed Theme•No PHP coding (I promise just to Click)

•Only 4 lines of CSS•1 Paypal Sandbox Account•Some Sample data to see things working

The Result

• Fully working online store where visitors can pay for products and then your customer will be able to process orders by his own.

To the browsers! Now!

We’ve built a site that:• Is mobile friendly.

• Actually “sells”.• Store Managers can

administer.• Is built on top of “something”

that is completely Open Source and is being continuously supported and maintained.

Lets Review what we just did

Lets Review what we just did

Drupal is the pivot point of your solution

• All Content Management• All Role/Permission

System• Flexibility, Extensibility

and Scalability• Future Support and Fixes

Sample Data always matter

Devel Generate Realistic

Dummy Content

I used Bootstrap, but you can choose your own

Bootstrap isn’t the only way

Omega ThemeSASS Integration

90,756 reported installs

Adaptive Theme58,839

reported installs

125,677reported installs

Adaptive Theme

SASS Integration

Bootstrap is just one more …

Bootstrap ThemeLESS Integration70,627 reported installs

It’s not all a bed of roses

Works with Bootstrap 3.0.2

Last stable release was on 2013-Nov-17 and has 160 Open Issues,

most of them new upgrades support

Latest Bootstrap

version is 3.3.5

Front-End Framework & Drupal Theme

Relies on External Front-End

Frameworks

Theme Developers create the Front-End Frameworks

Front-End Framework & Drupal Theme

Relies on External Front-End

Frameworks

Theme Developers create the Front-End Frameworks

Drupal Theme Developers only need to Focus on Theme Specific Settings.

Sometimes the Front-End framework goes too fast for Drupal Developers to be up to date.

Theme is much more stable in terms of progress and releases.

Drupal Front-End Frameworks use to be not that powerful as other “Non-Drupal” are.

DrupalCommerce…

We used PayPal, as also +6M Canadians

This is just a demo…

So lets get back to real life

Who else uses Drupal Commerce?

https://drupalcommerce.

org/showcase/

Want to dig more?https://

drupalcommerce.org/faq/training

We also provide Drupal Training at EvolvingWeb

Training at EvolvingWeb1/3

BEGINNER• Introduction to Drupal

• Introduction to WordPress

• Introduction to HTML & CSS Training

Training at EvolvingWeb2/3

INTERMEDIATE• Drupal 7 Multilingual

• Drupal 7 Panels

• Drupal 7 Site Building

• Drupal 7 Views Configuration

• Drupal Web Experience Toolkit

• Intermediate CSS

• Responsive Design

• Building a Search Interface with Drupal

• Drupal E-Commerce Training

Training at EvolvingWeb3/3

ADVANCED• Drupal 7 Module Development

• Drupal 7 Responsive Design

• Drupal 7 Theming

Thanks!!!

Thanks!!!

Questions?

All images used in this presentation are property of their respective owners and are not intended

for commercial purpose. Most of them were obtained from http://www.freeimages.com

Drupal is a registered trademark of Dries Buytaert.

All logos used in this presentation are property of their respective owners.