Top Banner
Bootstrap + Drupal Commerce in less than 45 minutes! by Jorge Diaz - @jorgediazhav
47

Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Apr 15, 2017

Download

Internet

Jorge Diaz
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Bootstrap + Drupal Commerce in less than 45 minutes!

by Jorge Diaz - @jorgediazhav

Page 2: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

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

been working with Drupal for more than 8 years.

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

• Bootstrap base theme contributor at drupal.org

Page 3: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

About meI was born in the magical city of Havana, 30 years ago

but Drupal brought me here.

Page 4: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

What do we do at EW

• Drupal Consulting, development and training.

• Help organizations build awesome Drupal websites with custom functionality.

• Founded in 2007 by Alex and Suzanne.

• We actively support Drupal Events mostly in North America.

Page 5: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Our Projects

Page 6: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Our Clients

Page 7: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

My intention in the next 45 minutes

• Create a simple Online Store with:

• Drupal & Drupal Commerce

• Bootstrap

• And I WILL BUY “SOMETHING” via PayPal

Page 8: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

My intention in the next 45 minutes

Page 9: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

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…

Page 10: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Who won’t?

Page 11: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

There are some topics I will just not talk about

• How to install a Drupal site.

• Themes basic concepts.

• How to install a Module.

• How does a basic View works.

• Content Types theory.

Page 12: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Let’s get started

Page 13: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

What we will need• 1 Fresh Drupal install

• 11 Contributed Modules

• 1 Contributed Theme

• No coding (I promise just to Click)

• 1 Paypal Sandbox Account

• Some Sample data to see things working

Page 14: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

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.

Page 15: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

To the browsers! Now!

Page 16: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Lets Review what we just did

Page 17: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Lets Review what we just did

Page 18: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Drupal is the pivot point of your solution

• All Content & Store Management

• All Role/User/Permission System

• Flexibility, Extensibility and Scalability

• Future Support and Fixes

Page 19: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

I used Bootstrap, but you can choose your own

Page 20: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Bootstrap isn’t the only way

Omega Theme SASS Integration

~81,000 reported installs

Adaptive Theme

~65,000 reported installs

~115,000 reported installs

Zen Theme SASS Integration

Page 21: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Bootstrap is just one more …

Bootstrap Theme LESS Integration

~110,000 reported installs

Page 22: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Bootstrap Theme Usage110K Total

9K D8

75K Total

Page 23: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Front-End Framework & Drupal Theme

Relies on External Front-End Frameworks

Theme Developers create the Front-End Frameworks

Page 24: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

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.

Page 25: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Bootstrap Theme Usage110K Total

9K D8

75K Total

Page 26: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

DrupalCommerce…

Page 27: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

This is just a demo…

Page 28: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

So lets get back to real life

Page 29: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

So lets get back to real life

Page 30: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Who else uses Drupal Commerce?

Page 31: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

+33,000* known production websites

drupalcommerce.org/showcase/

* Source: http://trends.builtwith.com/shop/Drupal-Commerce

Page 32: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Wrapping up

Page 33: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

#1 Automate what can be automated

http://bit.ly/29Zojgs

Page 34: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

#1 Automate what can be automated

Page 35: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Sample Data can also be automated

Page 36: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Sample Data always matter

Devel Generate

Realistic Dummy Content

Page 37: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

#2 Trust in Open Source

Page 38: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Trust in Open Source

Page 39: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Big companies do

Page 40: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

D8 is on the way

Page 41: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

#3 Don’t be afraid to start

http://bit.ly/29Zojgs

Page 42: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

We also provide Training

Page 43: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

If you are interested on learning Drupal 7 or 8

evolvingweb.ca/training/

Page 44: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

We don’t stop training

Page 45: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Thanks!!!

Page 46: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

Questions?

Page 47: Second Edition: Bootstrap + Drupal Commerce in less than 45 minutes - DrupalCamp Ottawa 2016

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

purpose. Were all 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.