The idea is to separate structure from design so everyone from the content editor to back-end developer can work simultaneously. Here are some key concepts and features of SXA that are meant to smooth out some of the more common challenges that can arise with Sitecore development.
Timeline and Speed. There is no longer the waterfall approach where a content editor must wait until the back-end development is complete to begin entering content. SXA allows projects to reduce time to production by allowing front-end development, back-end development, and content entry tasks to run parallel.
Sitecore Experience. Let’s say you have a team of web developers that do not have much experience with Sitecore data architecture and component development. SXA is a perfect choice because typical tasks like these come out-of-the-box with SXA. For example, Sitecore 9 Commerce includes SXA storefront components, including sample product catalogs and 40+ commerce components.
User Experience. SXA’s out-of-the-box drag and drop functionality makes using the Experience Editor much more intuitive. Content editors can now influence design from a business perspective in real time because they are able to begin working so much earlier. As you can see below you can drag and drop components from the toolbar to the right.
In this example I am dragging a basic content block component to the page. As you can see from the example we have set rules and requirements on where specific components can render on the page. Blue meaning you can add component, red meaning not allowed.
Reusability. SXA uses variants to allow the content author to change the presentation of data while keeping the same data structure. So now developers no longer need to create a new component for slightly altered designs. For example, you can have a component that has a Title, Description, Image, and CTA. By keeping the same data structure, you can adjust the presentation of each field using different built in variants while keeping the same content all without leaving the page. This gives the content editor lots of flexibility when building a site.
In the below example we have a Title, Image, Description and CTA field. As you can see from the variant dropdown menu I can select different variants keeping the same data.
Variant 1 (ContentBlockPrimary): Call to Action button will turn Green
Variant 2 (ContentBlockSecondary): Call to Action button will turn Gray
Variant 3 (WithoutImage): If you want to hide a specific field. In this example we hide the image.
Interested in learning more about SXA? Subscribe to our newsletter today!