Sitecore Experience Accelerator (SXA) in action
•Download as PPTX, PDF•
0 likes•359 views
An SUG Bangalore Session on Overview of Sitecore Experience Accelerator by Pratik Satikunvar, at the Meetup organized on 24th March 2018 @ Sapient, Bangalore.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Sitecore Experience Accelerator (SXA) in action
Similar to Sitecore Experience Accelerator (SXA) in action (20)
More from Anindita Bhattacharya
More from Anindita Bhattacharya (20)
Recently uploaded
Recently uploaded (20)
Sitecore Experience Accelerator (SXA) in action
- 1. SITECORE EXPERIENCE ACCELERATOR (SXA) IN ACTION By Pratik Satikunvar @ SUG Bangalore M A R C H 2 4 , 2 0 1 8
- 2. Sitecore Experience Accelerator in action Demo Basics of SXA What? Why? When? Installation of SXA How to install? Things to keep in mind Comparison between two approach Component based development VS SXA Terminologies Toolbox, Grid Layout, Themes, Page/Partial designs, Creative Exchange, Asset Optimizer Demo Sitecore Experience Accelerator in action
- 3. Basics of SXA What is SXA? Definition of SXA Why to use SXA? Why to use SXA? Benefits of SXA When using SXA can be the best scenario? When to use SXA?
- 4. What is SXA? Sitecore Experience Accelerator (SXA) is a module introduced to speed up the production of websites and to reuse components, layouts, and templates across a variety of sites. SXA is a complete package of design, structure, data and all these with Helix principles SXA != What? What is SXA? Why? Benefits of SXA When? Best scenarios for using SXA
- 5. Why SXA? What? What is SXA? Why? Benefits of SXA When? Best scenarios for using SXA Traditional Pattern
- 6. Why SXA? What? What is SXA? Why? Benefits of SXA When? Best scenarios for using SXA
- 7. When to use SXA? Best scenarios for using SXA • Multi Tenant/Site • Relatively simple but content rich site • Sites which require frequent design modifications. • Microsites What? What is SXA? Why? Benefits of SXA When? Best scenarios for using SXA Starting a new Sitecore implementation? Think of SXA
- 8. Installation of SXA Compatibility Compatibility with Sitecore version. Prerequisites Sitecore PowerShell Extensions (SPE) Common issue with package installation due to xDB Package Installation Issue
- 9. Compatibility Take care while choosing Sitecore Experience Accelerator based on Sitecore XP version you are running. Compatibility Compatibility with Sitecore version Prerequisites Sitecore PowerShell Extensions Package Installation Issue Common issue with package Version XP 7.5 XP 8.0 XP 8.1 XP 8.2 Sitecore Experience Accelerator 1.0 - - ✓ ✓ Sitecore Experience Accelerator 1.1 - - ✓ ✓ Sitecore Experience Accelerator 1.2 - - ✓ ✓ Sitecore Experience Accelerator 1.3 - - ✓ ✓ Sitecore Experience Accelerator 1.3 Update - 1 - - ✓ ✓ Sitecore Experience Accelerator 1.4 - - ✓ ✓ installation due to xDB
- 10. Compatibility Compatibility Compatibility with Sitecore version Prerequisites Sitecore PowerShell Extensions Package Installation Issue Common issue with package installation due to xDB
- 11. Sitecore PowerShell Extensions (SPE) Be friend of PowerShell in Sitecore Compatibility Compatibility with Sitecore version Prerequisites Sitecore PowerShell Extensions Package Installation Issue Common issue with package Version Sitecore PowerShell Extensions Sitecore Experience Accelerator 1.0 Sitecore XP 8.1 – full 4.0 or later Sitecore XP 8.2 – full 4.1 or later Sitecore Experience Accelerator 1.1 Sitecore XP 8.1 – full 4.1 or later Sitecore XP 8.2 – full 4.1 or later Sitecore Experience Accelerator 1.2 Full 4.3 version for Sitecore 8 Sitecore Experience Accelerator 1.3 Full 4.5 version for Sitecore 8 Sitecore Experience Accelerator 1.3 Update -1 Full 4.5 version for Sitecore 8 Sitecore Experience Accelerator 1.4 Full 4.6 version for Sitecore 8 installation due to xDB
- 12. Package Installation Issue Make sure either of below things otherwise your package installation will spinning forever. • xDB is disabled or • Mongo is up & running correctly. Compatibility Compatibility with Sitecore version Prerequisites Sitecore PowerShell Extensions Package Installation Issue Common issue with package installation due to xDB
- 13. Component based development VS SXA Component based architecture What it is? Example What it is? Example & Difference compared to component based architecture Architecture of SXA
- 14. What is component based architecture? In a simple words, instead of thinking of Page Type thinking of individual elements on the Page is known as component based architecture. What is components and what they do? • A piece of functionality with single responsibility. • Can be added to Sitecore pages from content editor or experience editor as per settings. • It is reusable. • It defines several restrictions. For ex: In page design where which component can be added. • Easy to accommodate personalization feature on components as compared to Page Type. Component based architecture What it is? Architecture of SXA What it is? Example Example & Difference
- 15. Example Component based architecture What it is? Architecture of SXA What it is? Example Example & Difference
- 16. Example Component based architecture What it is? Architecture of SXA What it is? Example Example & Difference
- 17. Architecture of SXA SXA too follows component based architecture. Confuse right? SXA has shown us the real way of component based architecture. • More generic components. • Many component comes with variants so that you can make change in behavior of the component. • Provides option to specify different Styles to component based on requirement. • Structure page using Page Structure components like Row Splitter, Column Splitter, Container etc. Component based architecture What it is? Architecture of SXA What it is? Example Example & Difference Generic component Rendering Variant Styles
- 18. Example Component based architecture What it is? Architecture of SXA What it is? Example Example & Difference
- 19. Example Component based architecture What it is? Architecture of SXA What it is? Example Example & Difference
- 20. Terminologies Toolbox What is toolbox? Grid Layout What it is? How it affects page design/structure? Common issue with package installation due to xDB Themes Page/Partial Designs Compatibility with Sitecore version. Creative Exchange Sitecore PowerShell Extensions (SPE) Common issue with package installation due to xDB Asset Optimizer
- 21. Toolbox Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer
- 22. Grid Layout Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer
- 23. Grid Layout Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer
- 24. Grid Layout Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Bootstrap - Html Structure
- 25. Grid Layout Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Grid 960 - Html Structure
- 26. Grid Layout Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Foundation - Html Structure
- 27. Themes Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Select the checkbox to create a new theme for your Site. By default wireframe comes selected. Don’t remove it.
- 28. Themes Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Major types of themes: • Base Themes • Site Themes
- 29. Themes Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer • What is Base Themes? • What comes as part of base theme.
- 30. Themes Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Base Themes
- 31. Themes Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Site Themes • What is Site Themes? • Which are different Site Themes?
- 32. Themes Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Assets • Order matters • Top to Bottom
- 33. Page/Partial Designs Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Partial Design • Is a sub part of page design • Reusable • Help in creating consistent styling/design • Multiple partial designs forms a page design • Can be created & assigned to page designs from Content Editor and Experience Editor
- 34. Page/Partial Designs Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Partial Design – Content Editor
- 35. Page/Partial Designs Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Partial Design – Experience Editor
- 36. Page/Partial Designs Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Page Design • Is a group of several partial designs • Can be assigned to a content item. For ex: Home page • Can also be assigned to data templates. For ex: Product Page • Can be created & assigned to page designs from Content Editor and Experience Editor
- 37. Page/Partial Designs Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Page Design – Content Editor
- 38. Page/Partial Designs Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Page Design – Content Editor
- 39. Page/Partial Designs Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Page Design – Experience Editor
- 40. Creative Exchange Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer • Export theme as Html, CSS, JS, Fonts, Images etc. • Front-End developers can work on static HTML, CSS, and JS files on a local folder. • Theme changes can be imported back using Import functionality. • Front-End developers does not required to interact to Sitecore. With html provided, they can preview the pages from local folder.
- 41. Creative Exchange Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer
- 42. Creative Exchange Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer What can be done? • Add and modify images and files within the Media Library folder. • You can add classes where you find <!—- add your css classes here --> • Add and modify CSS files inside styles folder. • Add or modify JS files inside scripts folder. • Add or modify Font files fonts inside
- 43. Creative Exchange Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer What can NOT be done? • Changes in HTML structure. • Deleting existing classes. • Changing content. • Wireframe theme. • Modifying base theme/feature
- 44. Asset Optimizer Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer • Minify and merge CSS & JS files. • Improves the End User Experience. • Reduces amount of data to be transferred. • Group assets into one and caches on server. • You can either only Concatenate or Concatenate and Minify
- 45. Asset Optimizer Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer
- 46. Asset Optimizer Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Disabled
- 47. Asset Optimizer Toolbox Grid Layout Themes Page/Partial Designs Creative Exchange Asset Optimizer Enabled
- 48. Demo SXA in Action Sitecore Experience Accelerator (SXA) in Action
- 49. Good Read References • https://doc.sitecore.net/sitecore_experience_accelerator • https://github.com/Cognifide/Sitecore.XA.Showcase • http://unaverhoeven.ghost.io/tag/sxa/ Good Read
- 50. Thank You
Editor's Notes
- Out-of-the-box component library Out-of-the-box local datasource support Extended Experience Editor (drag & drop!) Wireframe design Helix-based architecture Increase productivity by working in parallel
- User Experience: Capture and define the user experience Visual Design: Create the visual design based on user experience Front End Development: Develop Themes/Styles/Layouts to implement the Visual Design. Back End Development: Reuse, configure/build renderings Content Entry: Add actual site content
- SXA separates structure from design, so front-end designers, creative designers, content authors, and developers can work in parallel and you can deploy and maintain multiple sites quickly and cost effectively. Once a basic user experience plan is in place, everyone can get started on the platform. For example: the content author can start entering the content in the wireframe environment, while the front-end developer works on the theme, and the developer sets up the data templates.
- History of SXA Zen garden – Cognifide
- What is Sitecore Experience Accelerator for CD? Lots of difference in size of the both packages. CD package comes too small as compared to CM. Generally both package have same config files and DLLs Package for CM have additional Items, Blobs which is not there in package for CD. Those should be published from CM.
- Drag & Drop components where you need them. Components grouped into categories for easy access based on type of components. For ex: Page content, Page structure, Navigation, Forms You can add components in a traditional way. Select placeholder. Click add here and you will see popup with all components which can be added to that placeholder
- Grid system helps you create responsive websites that have consistent designs and ensure cross-browser support. The grid system divides the page into equal columns. Depending on the grid system that you use your pages are divided into a number of columns. Based on grid systems it will support different pixel range.
- SXA 1.0 came with only one grid – Grid 960 by default which was covering 960 pixels. Now you can select any grid while creating a site from Bootstrap Foundation Grid 960 Note It is important to be aware that changing the grid system after you created the site will require many manual changes. Because of the references on your pages to the former grid system, your layout will break. You can also integrate another grid system or create your own.
- One of the most important part. We have many time struggled managing Theme (CSS/JS/Media) site wise for multisite. SXA brings Theme (CSS/JS/Media) as part of media library. Themes define the look and feel of a site and can be created separately from the site functionality and content. Themes usable by this site Wireframe comes selected by default. Don’t remove it. You can select other themes if you got requirements to change and select different theme for one or more pages. Let’s see what are different types of themes available.
- There are two types of themes: base themes and site themes.
- Base themes are prototype themes that predetermine the layout of a website. You can have several base themes to support different design or specific functionality. Most useful themes as part of base themes are Core Libraries: the third-party libraries used in projects such as: jquery, jquery UI, lo-dash, mediaelement, modernizr, and so on. Main Theme – the scripts and styles that are part of the platform (except for the rendering scripts). Main Theme has a dependency on Core Libraries, so if you are inheriting from it, you must also inherit from Core Libraries first. Grid themes – grid CSS generated by a sass grid generator. Note Do not change base themes because these are part of the platform. If the base themes do not suit your needs, it is better to create a new base theme to inherit from. Let’s see which base themes comes selected when you create your own theme.
- Grid themes – grid CSS generated by a sass grid generator. You do not need to select this theme in base theme. It comes by default.
- Site themes are extensions of base themes and can be applied to specific sites. Site themes usually have dependency on base themes and contain scripts and styles for all renderings used in a site. By default, a theme contains folders for fonts, images, scripts, and styles Main Site themes are: Basic (Deprecated): Old. Before Creative Exchange Live. Not recommended to use. Basic2: contains site specific assets. Styles/scripts for all renderings. Gulp tasks etc. for creative exchange live. Your site custom theme: Will be initially copy of Basic2. You can add/delete/update styles/scripts/fonts/images. Wireframe: Most important site theme. Start with this. Create a basic structure of site using wireframe. Select your site theme instead of wireframe. Export it. Front-end developers works on it. Reimport your site theme. Changes should be reflected.
- Assets from folder will be included on a page in same order they appear in content tree. So, try to have common assets at the top. On which other assets will be dependent.
- You can find the page design and partial designs inside Presentation folder of your site.
- You can also use one partial design as base of another partial design. For ex: If sidebar is getting selected as partial design, header partial also should get added to that page design. Then you will select Header as base partial design in Sidebar partial design.
- You can click on particular partial design. Which will redirect you to that partial design. Where you can insert different components which will eventually reflected to page design.
- You can find the page design and partial designs inside Presentation folder of your site.
- You can select n number of partial designs you want for this page design. You can also select theme for this page design. So, it gives flexibility to change theme/design per page design.
- You can even assign page design to data template instead of content item. For ex: Product page. Many products will be created based on product data template. To manage consistent design from a single place. You can assign a page design to product data template. And you can select the theme for page designs. So, if want specific theme for specific page than this can be handy. How constructing presentation details is different in old way and SXA Sitecore historically had two options for building reusable page design: Page Standard Values Branch Template Both these options allow to build composition of visual components and later build pages reusing that design.
- Creative Exchange enables teams to work together on a site simultaneously. Front-End developer works on Theme, Content Author enters content to the site. Back-End developer can focus on other site functionality.
- Creative Exchange enables teams to work together on a site simultaneously. Front-End developer works on Theme, Content Author enters content to the site. Back-End developer can focus on other site functionality.
- /sitecore/system/Settings/Foundation/Experience Accelerator/Theming/Optimiser/Scripts /sitecore/system/Settings/Foundation/Experience Accelerator/Theming/Optimiser/Styles
- SXA has different structure for CSS/JS Each component have its own CSS. No. of file grows and so no. of request. Even though Asset optimizer is enabled. You can append ?aodisabled=1 to view individual assets included in page as per image above.
- Each folders get concatenated into one optimized file.
- We will be touching some more SXA functionalities: Tenant, Site SXA Site Manager Rendering Variants Scaffolding Data Source – Local & Global Styles Practical - Create a Tenant - Create a Site – Theme for a site - SXA Site Manager - Partial design - Page design - Rendering Variants - Creative Exchange – Export/Import - Creative Exchange Live - Styles - Scaffolding: https://doc.sitecore.net/sitecore_experience_accelerator/setting_up_and_configuring/setting_up/include_your_custom_feature_in_site_and_tenant_scaffolding - Custom Rendering Component - JSON: https://doc.sitecore.net/sitecore_experience_accelerator/data_modeling/json/use_sxa_layout_service_to_model_your_pages_in_json https://doc.sitecore.net/sitecore_experience_accelerator/data_modeling/json/add_json_renderings_to_your_pages https://www.linkedin.com/pulse/headless-sitecore-sxa-how-display-page-json-barend-emmerzaal/ SXA 1.5/1.6 features https://www.linkedin.com/pulse/whats-new-sitecore-sxa-16-12-barend-emmerzaal/ - Add tenant and site features - Component caching settings https://unaverhoeven.ghost.io/2017/12/10/sxa-1-5-shared-sites-and-delegated-areas/ https://doc.sitecore.net/sitecore_experience_accelerator/working_with_content/sharing_content/share_content_using_delegated_areas https://doc.sitecore.net/sitecore_experience_accelerator/working_with_content/sharing_content/share_data_sources_and_presentation_using_the_multisite_feature - Shared sites - Delegated areas