This presentation was intended to back a demo setup to create a simple Online Store based on the most flexible open source backend PHP framework (Drupal) and the most popular front end one (Bootstrap). It took place on July 24th, 2015 at DrupalCamp Ottawa 2015

1. Bootstrap + Drupal
Commerce in less than 45
minutes!
by Jorge Diaz

2. 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.

3. About me
I’m rising 2 Drupal Developers at home & I was born in the magical city
of Havana, 30 years ago but Drupal brought me here.

4. 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.

5. Projects

6. 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.

7. My intention in the next 45
minutes

8. 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…

9. Who won’t?

10. 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.

11. Let’s get started

12. 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

13. 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.

14. To the browsers! Now!

15. 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.

16. Lets Review what we just did

17. Lets Review what we just did

18. Drupal is the pivot point of your
solution
• All Content Management
• All Role/Permission System
• Flexibility, Extensibility and
Scalability
• Future Support and Fixes

19. Sample Data always matter
Devel
Generate
Realistic Dummy
Content

20. I used Bootstrap, but you can
choose your own

21. Bootstrap isn’t the only way
Omega Theme
SASS Integration
90,756
reported
installs
Adaptive Theme
58,839
reported
installs
125,677
reported
installs
Adaptive Theme
SASS Integration

22. Bootstrap is just one more …
Bootstrap Theme
LESS Integration
70,627
reported
installs

23. 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

24. Front-End Framework & Drupal
Theme
Relies on External
Front-End Frameworks
Theme Developers create
the Front-End Frameworks

25. 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.

26. DrupalCommerce…

27. We used PayPal, as also +6M
Canadians

28. This is just a demo…

29. So lets get back to real life

30. Who else uses Drupal
Commerce?
https://drupalcomm
erce.org/showcase/

31. Want to dig more?
https://drupalcommer
ce.org/faq/training

32. We also provide Drupal Training
at EvolvingWeb

33. Training at EvolvingWeb
1/3
1/3
BEGINNER
• Introduction to Drupal
• Introduction to WordPress
• Introduction to HTML & CSS Training

34. Training at EvolvingWeb
2/3
2/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

35. Training at EvolvingWeb
3/3
3/3
ADVANCED
• Drupal 7 Module Development
• Drupal 7 Responsive Design
• Drupal 7 Theming

36. Thanks!!!

37. Thanks!!!

38. Questions?

39. 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.