1 / 160

Course Housekeeping

Course Housekeeping. Phones on vibrate, email closed We’ll wait  Class hours 9am-5pm daily Housekeeping Breaks & meals Restrooms Class flow We’ll do hands-on exercises throughout, so don’t worry if a lecture piece goes too fast—we’ll come back to it Ask questions at any time.

dexter
Download Presentation

Course Housekeeping

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Course Housekeeping • Phones on vibrate, email closed • We’ll wait  • Class hours • 9am-5pm daily • Housekeeping • Breaks & meals • Restrooms • Class flow • We’ll do hands-on exercises throughout, so don’t worry if a lecture piece goes too fast—we’ll come back to it • Ask questions at any time

  2. Introductions • Me • Rico Neitzel • Over 5 years as a Magento Evangelist • Worked within the Web since the early beginning • CoFounder of an eCom Agency in Germany • Magento since its first alpha versions • You… • Name, company and role • How long using Magento & a little bit about what you did with it • Other past experiences you want to highlight • What you’d really like to get out of this course

  3. Course Agenda • Day 1 • Course Welcome • Overview of Theming in Magento • Getting Set Up • Working with Structural Blocks and Page Templates • Working with Content Blocks and Block Templates • Working with Skins • Day 2 • Working with Locale/Translation Files • Customizing Themes without Theming • Customizing Themes by Overriding Blocks • local.xml files • Frontend modules • Review • Course Survey

  4. Magento Quick Facts • Open source eCommerce software platform • Varien was founded in 2001 and Magento project started in December 2006 • 300+ employees • Global presence with headquarters in Los Angeles, CA • By the numbers • 250 worldwide solution partners • 4 million downloads to date • 400,000 community members • 75,000+ live merchants on Magento all over the world • $25B in transactions • Over 3,500 extensions developed on Magento

  5. Magento Solutions

  6. Exercise—Setting Up the Course VM • Complete instructions have been provided as a separate handout, please refer to them for details • Basic steps: • Install VirtualBox • Filename: VirtualBox-3.2.10-66523* • Extract the Virtual Disk • Filename: Ubuntu MageEE10.vdi.zip • Create the Training VM • Start VirtualBox • Click “New” to create new VM • Follow directions in the setup wizard • Use UbuntuMageEE.vdi as your “existing hard disk” • Start the Training VM

  7. Meet the Course VM Firebox browser (with Firebug and Web Dev add-on) File browser

  8. Access Information in the VM • Magento EE access • Admin Panel: • http://127.0.0.1/mage_ee1-10/admin • Frontend • http://127.0.0.1/mage_ee1-10 • (Both of these URLs are bookmarked in Firefox in your course VM) • Passwords • Magento Admin Panel • Username: admin • Password: admin123 • Magento frontend customer • User: user@magento.com • Password: user123 • Ubuntu • Username: mage • Password: admin123 • MySQL database • Username: root • Password: admin123 Please note: This VM is for training purposes only. The EE software is partially disabled and not suitable for production use. Always download the newest, or desired stable, version for your projects.

  9. Magento Configuration Settings for Development • Configuration in Magentosets the default behavior of the site and modules. • Almost exclusively in the System menu • Most config settings can be overridden for stores or even individual object instances in the store • Better Admin settings for evaluation & development phases • Disable the Magento cache(s) • ADMIN: System→Cache Management • Bump up your admin session lifetime so it doesn’t time out all the time • ADMIN: System→Configuration→Admintab→Security panel • Set the WYSIWYG editor on/off by default • ADMIN: System→ContentManagement→WYSIWYGtab→WYSIWYG Options panel • Tell your store it’s a demo store • ADMIN: System→Configuration→Designtab→HTML Head panel • Tell your store to show out of stock items • ADMIN: System→Configuration→Inventorytab→Stock Options panel

  10. Overview of Magento Theming Themes and what they control The multi-theme model Working with themes EXERCISE—Getting familiar with Magento’s directory structure and Admin Panel

  11. The Role of Themes in Magento Installations

  12. What Are Magento Themes? default/default theme default/modern theme default/iphone theme • In Magento, themes control: • The visual aspects of your site design (skin) • CSS, images, design/user interface-specific JavaScript • Many functional aspects of your site • Which default blocks/modules are available (layouts) • Which data is shown and how (templates) • Allows the presentation layer to be independent of business logic and functionality

  13. What’s Actually in a Theme? Logical contents xml-defines structural blocks and assigns content blocks to structural for each module Visual layout info and files as well as UI-specific JavaScript Content block (phtml) files for each module Translation files (csv) for text specific to this theme skin frontend <packageName> <themeName> css js images Directory structure app/design frontend <packageName> <themeName> layout template locale These directory names must match exactly. Magento is pre-configured to look for these contents in these directories of each theme.

  14. Why Two Directories for Theme Files? • Separation of visual and functional aspects of your designs • Security • Files in skin directory need to be accessible to web browsers • Files in app/design directory need only be accessible to the application and can be secured more tightly

  15. Terminology Notes Templating will refer to working with the files in app/design and focuses more on the functional components—what gets displayed Skinning will refer to working with the files in skin and focuses more on the visual components—how it gets displayed Theming encompasses both templating and skinning to create your full design

  16. What That Looks Like in the Admin Panel Design package Theme - if left blank, will use the default theme from your package ADMIN: System→Configuration→ Design tab

  17. What That Looks Like in the File System Page templates and layout files for a theme are in app/design/frontend/… Images and CSS files for a theme are in skin/frontend/… app/design directory skin directory base design package default theme base design package default theme enterprise design package enterprise design package default theme default theme app/design directory skin directory • A peek at the file system • Themes in Magento are made up of files in 2 sets of directories • app/design/frontend/… • skin/frontend/…

  18. Exercise—Getting to know the Magento file system • Open the file browser in your VM and go to the Magento directory • Can you find the theming folders? • For templating? For skinning? • Open the Admin Panel of your Magento installation • Can you find where the theme is assigned to that installation? • What’s the relationship between the names of the directoriesand the names in the Admin Panel?

  19. Checkpoint—Magento’s File Structure app/code contains code pools which contain modules app/designcontains themes app/etc contains configuration xml files app/locale contains css files used for language and wording overrides, as well as transactional email templates js contains JavaScript libraries media contains all uploaded media, like product images skincontains css, javascript, and images var contains temporary items such as cache, sessions, and import/export files index.php important routing and access files .htaccess

  20. Checkpoint—How Admin Panel and File System Relate If Magento Enterprise looks for a file that doesn’t exist in the Current Design Package, it will look for the file in base.

  21. Note—What else is in the theming directories • Theming directory names have the structure: • app/design/<area>/<design_package>/<theme>/… • skin/<area>/<design_package>/<theme>/… • <area> in Magento refers to which “face” of Magento will use the theming files inside. • Areas are predefined in the Magento core code • Valid areas include: • frontend—refers to the customer-facing website and web store • adminhtml—refers to the Admin Panel • install—refers to the installation wizard • Our focus is on frontend theming, but using the same principles you’ll learn here, you can see that you can modify the look and feel of other areas of Magento as well

  22. Getting Set Up Working with multiple stores and themes The base package and fall-back model Creating custom themes in EE and CE EXERCISE—Setting up the skeleton

  23. Magento’s Store Hierarchy • Website • Brand2 • Brand1 • Store • Main store • Main store • Parts store • Store View • English • Spanish • English • English Websites and Store Views can have a different package and/or theme assigned to it, or they can all share the same one More commonly, the main website in a set will be assigned the default theme in a design package and slight variations for other store types will be handled in the non-default themes for that design package

  24. base • enterprise-brand1 • enterprise-brand2 • default • default • default • default Multiple Themes for Multiple Stores • variation1 • variation2 Design packages Design packages are just a collection of related themes enterprise Default themes Non-default themes Design “packages” contain the “default” theme and any theme variants of that design Magento’s default design package contains several demo theme variants you can experiment with

  25. Scenario: 2 brands, 2 designs

  26. base • enterprise-brand1 • enterprise-brand2 • default • default • default • default Setting Upfor Multiple Independent Brandsin Magento • brand2 • brand1 enterprise • If designs are largely independent of one another • Distinct look and feel • Distinct functionality • Create 2 separate design packages, each with its own theme

  27. Scenario: 2 brands with shared design components

  28. base • enterprise-myPackage • default • default • default Setting Up Themes for Multiple Related Brands in Magento • brand1 • brand2 enterprise • If designs are share many visual and functional components • Some or all shared look and feel • Some or all shared frontend functionality • Create 1 design package with multiple themes as design variants

  29. base • enterprise-brand1 • enterprise-brand2 • default • default • default • default Understanding the “base” Package • variation1 • variation2 Design packages enterprise Default themes Non-default themes • “base” provides hooks to all of Magento’s core functionality • Cross-package fall-back point • Allows your theme to contain ONLY changes from the base • No need to replicate and maintain all of the files • Base isn’t a full theme, per se, it makes functionality available, but doesn’t contain full CSS and images (which is visual)

  30. base • enterprise • enterprise-brand1 • enterprise-brand2 • default • default • default • default Understanding the “enterprise” Package • variation1 • variation2 Design packages Default themes Non-default themes “enterprise” provides hooks to all of Magento’s EE functionality It is not a cross-package fall-back point like base When creating a custom enterprise theme, it’s necessary to explicitly ensure that the enterprise/default theme is part of the fall-back scheme

  31. NEVER Edit the Files in base or enterprise/default • base and enterprise/default belong to Magento • They will be overwritten during upgrades • Any changes to files there will be lost at upgrade • base and enterprise/default should be left intact so you can revert back to working code whenever necessary • One exception • Extension developers can add new files to base (but not change existing files) in order to make an extension available across themes

  32. Theme File-Fall-Back Logic in Magento Base package was introduced in CEv1.4 and EEv1.8. Prior versions do NOT have a cross package fall-back option Start Look for file in package/theme/ Look for file inpackage/ configured_default/ Look for file in package/default/ Look for file in base/default/ no no no Found? Found? Found? Found? no yes yes yes yes Rendering error Display as indicated

  33. Implications When Creating Custom Themes in EE • Frontend functionality is made available toa custom theme from two sources: • The base package contains hooks to all of the core functionality • The enterprise package is itself a custom theme that contains hooks to all of the additional EE functionality • Because of how the fall-back model works, to create a custom theme for EE you must either: • Create your custom theme as a theme variant inside of the enterprise design package • Create your custom theme as a new design package with a copy of the enterprise/default theme as your new package’s default theme(approaches used in this course)

  34. base • enterprise • your Package • default • default • default Recommended Approach to Creating Custom EE Themes • your Theme 1 Make new directories for your custom design package:- app/design/frontend/<yourPackage>- skin/frontend/<yourPackage> Copy the enterprise package default theme to your custom design package as its default:- app/design/frontend/<yourPackage>/default- skin/frontend/<yourPackage>/default Don’t edit these Make a new directory in your custom design package for your custom theme:- app/design/frontend/<yourPackage>/<yourTheme>- skin/frontend/<yourPackage>/<yourTheme>Build your theme here. • Question: • What is the fall-back order from <yourPackage>/<yourTheme>?

  35. base • default • your Package • default • default • blank • blue • modern • default How This Differs for Custom CE Themes In Community Edition, the default package and its themes are simply demo packages. The base package contains all the necessary hooks to core functionality 1 Make new directories for your custom design package:- app/design/frontend/<yourPackage>- skin/frontend/<yourPackage> Create empty default theme directories for your custom theme:- app/design/frontend/<yourPackage>/default- skin/frontend/<yourPackage>/defaultBuild your theme here. Don’t edit this 3 (optional) Because the base package lacks CSS and images, when creating CE themes, you may want to copy the CSS from one of the demo themes to your new design package’s default theme as a starting point, but you don’t have to. • Questions: • What is the fall-back order from <yourPackage>/default? • From default/blank?

  36. Review of This Approach • Never edit the base/default theme or the enterprise/default theme • They’ll be overwritten whenever you upgrade Magento • Not editing in these directories protects these important files from accidental corruption • Because the enterprise package contains hooks to EE functionality over and above what’s available in the base package, you must somehow include it in the fall-back hierarchy for your theme • If you create a new design package, you have to copy the enterprise default theme in order to make it part of the fall-back hierarchy • Don’t edit this default theme, leave it intact and create your custom package underneath it • This will provide you with the cleanest upgrade path for your theme

  37. Magento is Extensible—We can change the fallback behavior… <?php class Training_Layoutmods_Model_Design_Package extends Mage_Core_Model_Design_Package { //add a constant for the enterprise package const ENTERPRISE_PACKAGE = 'enterprise'; protected function _fallback($file, array &$params, array $fallbackScheme = array(array())) { if ($this->_shouldFallback) { foreach ($fallbackScheme as $try) { $params = array_merge($params, $try); $filename = $this->validateFile($file, $params); if ($filename) { return $filename; } } //add this code to add the enterprise package to the fallback model $params['_package'] = self::ENTERPRISE_PACKAGE; $params['_theme'] = self::DEFAULT_THEME; $filename = $this->validateFile($file, $params); if ($filename) { return $filename; } //end added code $params['_package'] = self::BASE_PACKAGE; $params['_theme'] = self::DEFAULT_THEME; } return $this->_renderFilename($file, $params); } } • The core file: • app/ • code/ • core/ • Mage/ • Core/ • Model/ • Design/ • Package.php • Sets the fallback model and looks for files to return. • We can add the ‘enterprise’ package to the fallback hierarchy if we want by extending one class in a local module. • Don’t do this yet. Just an illustration. Reminder— Do NOT edit core files

  38. Exercise—Set up Your Own Design Package • Create your new custom EE design package • Create a new design package called “enterprise-training” • Remember both the app/design and skin/ directories • Create a new theme inside of your new package • Create a new theme called “training-theme” • This way you won’t be editing the “default” enterprise theme files • It’s a good idea to the required create empty directories inside of each • In app/design: layout & template • In skin: css & images • Set the frontend store to use your new package (and theme)

  39. Checkpoint—Steps for Creating and Applying an EE Theme • In the file system: • Create directories for your custom design package in the skin and app/design directories: <yourPackage> • Copy the enterprise/default theme to the default theme directories of your new package: <yourPackage>/default • Create directories for your custom theme within your custom package: <yourPackage>/<yourTheme> • Create skeleton of theming subdirectories for your theme • Create a skin directory and main subdirectories for CSS and images • Create an app/design directory and main subdirectories for layout and template • In the Magento Admin Panel: • Disable your Magento system cache, if you haven’t already • Set your store to use your package and theme • Copy only files you need to change into your theme or create a local file with changes

  40. Working with Structural Blocks & Page Templates Understanding structural blocks and content blocks Page layouts and page templates EXERCISE—Modifying templates and blocks at the page level

  41. Other Approaches to Theming Shown here: WordPress Admin

  42. Magento’s Approach to Theming • A theme consists of any of the following: • Templating files: • Layout – basic XML file that defines structural and content blocks for different types of pages, controls META data, and handles page encoding • Template – phtml file that contains xhtml markups and php tags needed to create logic for visual presentation. (content blocks are also phtml files) • Locale – Simple text documents organized on a per-language basis, which contains translations for store copy • Skinning files: • Theme-specific JavaScript, CSS, and image files that complement the phtml in the blocks • Remember: • Files not present in the specific theme will be pulled from another theme lower in the fallback hierarchy • A custom theme could conceivably contain only one file

  43. What’s Actually in a Theme? Logical contents xml-defines structural blocks and assigns content blocks to structural for each module Visual layout info and files & UI-specific JavaScript Content block (phtml) files for each module Translation files (csv) for text specific to this theme Directory structure skin frontend <packageName> <themeName> css js images app/design frontend <packageName> <themeName>layout template locale These directory names must match exactly. Magento is pre-configured to look for these contents in these directories of each theme.

  44. A Page is the Sum of Its Blocks in Magento • loadLayout() method creates a default empty layout for the current area • Loads additional handle(s) if specified • Loads all layout updates • Processes instructions in layout updates • Generates blocks • Render page

  45. Building a Page: Layouts, Blocks & Templates Layout files (xml) Content block templates(phtml) Page template (phtml) containing structural blocks header left main right footer The “page” is not the base unit in Magento design— Blocks are Content blocks are assigned to structural blocks (in page templates) by layout files

  46. Default Page Templates and Structural Blocks Structural blocks • Page.xml defines structural blocks which create the logical structure of your pages • They are defined in: app/design frontend package_name theme_name layout page.xml template page

  47. Default Page Templates and Structural Blocks 3 columns 2 columns with left bar 2 columns with right bar header content footer 1 column Empty app/design frontend package_name theme_name layout template page header header header content left content right left content content right footer footer footer

  48. Default Home Page • Structural Blocks • Default page template: • 1column.phtml • Structural blocks used: • header • content • footer • Handles that control: • <default> • <cms_index_defaultindex> header content footer ADMIN: CMS→Pages→ Manage Content→Designtab

  49. header • Default Category Page • Structural Blocks • Default page template: • 3columns.phtml • Structural blocks used: • header • breadcrumbs.container • content • left • right • footer • Handles that control: • <default> • <catalog_category_default> • <catalog_category_layered> • <catalog_category_layered_nochildren> breadcrumbs.container content left right ADMIN: Catalog→Categories→ Manage Categories→Custom Design tab

More Related