Enrich Commerce Experiences with Associated Content

Transcript

Welcome to the session about enriching your commerce experiences with associated content. My name is Marc Becker. I’m Senior Software Engineer at Adobe Basel in Switzerland, and I’m working on AM and CF. What I would like to show you today are three main key takeaways. So first, I would like you to understand how the new dynamic catalog concept works, which is introduced with the CF add-on for cloud service. And I will also introduce you to associated content and the different ways it enables you to enrich your commerce pages with content and also vice versa, how you can make your content pages in AM shoppable. As a final point, we’ll also show you how you can actually leverage associated content for your own custom use cases, for example, building your own custom AM components. Before we start, to give you some more context around associated content, let me give you a brief introduction into content and commerce in AM. So for content and commerce, when we speak about content and commerce, what we usually mean is that we have the Adobe Experience Manager on one side, which you use to build your experiences, and then on the other side, having a commerce system, like for example, Adobe Commerce or Magento Open Source, which brings some product data into the mix. And to basically seamlessly integrate both of these sides, we have the Adobe Commerce integration framework or short, CF. With CF, it includes basically three major components. So we have the CF add-on for cloud service and also for AM65, which comes with like a powerful set of authoring tooling. This is also the part that adds the associated content functionality to AM, which I’m going to show you today. Second, we have the CF core components, which are basically the building blocks to start your commerce project in AM. And finally, we have a sample storefront called the Vigna storefront, which you can use as a showcase, as well as a blueprint that shows you the best practices and common patterns when building projects with CIF. The authoring tools in CIF provide features like product and category pickers that allow you to select products and categories directly in AM. And this basically enables you to print commerce context to exactly those places in AM where you need them. Additionally, we can also display commerce data that matches your current editing context, also without the need to go back to your commerce system, but you can stay in AM. And with associated content, we can also intelligently display marketing content from AM that matches the commerce data in your current editing context. Again, also part of the CF are the commerce core components, which leverage CF to integrate with Adobe Commerce via CraftQL. And these allow you to transform your AM project into a fully fledged storefront with features like catalog browsing, cart and checkout experiences, and more. Since this talk is mainly about associated content, I’d also like to highlight that the CF core components work with associated content out of the box. And we recently added some additional components for use cases specifically around associated content. The components are free and available on GitHub, and you will find the link at the end of the slides. Okay, so after this brief introduction into CF, let me continue with what we call product experience management. So in older versions of AM Commerce, like what we had in AM65 and earlier, we used to create product data into AM by importing it and then using extensive roll out workflows to create dedicated pages for each product you imported. And since this is like very expensive in terms of time, computing and network resources, in the CF add-on for cloud service, we switched to a new dynamic catalog model. This means that whenever we need commerce data, we leverage CraftQL APIs to read product and catalog structure data on the fly. And this allows us to have the latest data available at all times and also going into the future, also it enables support for staged data. And then using a clever combination of dynamic URLs, data fetching, and sling mappings, we can basically imitate the behavior like it was before, but instead of requiring like a full tree of product pages, it’s sufficient to just have like a smaller set of generic product and category pages. The same principle also applies to the components, which we have in CF. So with CF, all of them are capable of fetching and displaying commerce data on the fly. Let me give you an example on this. So let’s assume you’re on the homepage of your store and you would like to browse to a specific category or product. What we would do is you actually navigate to a product or category using a link, which is rendered by the navigation component. In CF, the navigation component is able to dynamically fetch the category structure from the commerce system and then display the returned data as navigation items. And each category in the navigation is then assigned a dynamically generated URL by using the URL provider service. And as you can see on the slide, this URL includes a reference to a generic product or category page, as well as one or multiple identifiers, which basically indicate which category or product should be rendered on the page. So if you click on the link on the navigation component, you will first be forwarded to the generic page. And if we talk about a category page, usually there’s like a product list component on that page. And this component is able to understand the commerce context of that page, meaning that it knows from the URL, it should display a category and which category this is. On the AAM author, the dynamic URLs will look similar to what you can see on the slide. So again, reference to a generic product or category page and an identifier. On author instances, it’s important to have like the full path to the generic pages because you actually want to edit those in the AAM sites editor and the editor needs the full context. As a contrast here, I will also put this example on the slide, how the URLs will look like on published instances. You can further customize the URL format using custom sling mappings or rewrite rules on the dispatcher. So in general, now you might ask if every product or category URL points to the same generic page, how can I apply customizations for individual products? And this is where content enrichment or product experience management comes into the game. So I’m going to show you now five different techniques where associated content, meaning AAM content that was associated to commerce data can help you to enrich your content and commerce pages. The first technique is to basically create pages that are specific to one or multiple products or categories. To do this, you can create a new page based on the existing product or category page templates. You can also create your own templates. And if you use these kinds of templates, you find a new commerce tab in the properties where you can select which products or categories this page should be used for. And if you have these kinds of specific pages, the dynamic URL generation and parsing will automatically respect your new specific pages. And as the name indicates for specific pages, you basically have full control over the whole page and you can basically customize everything. And we recommend to use this pattern, for example, if you want to create special pages for new product launches and in particular where you want to have the page that seamlessly embeds in the overall catalog structure. So it’s not like a marketing page, which you have next to the catalog structure, but it seamlessly fits in. Okay. The next technique is about experience fragments. So you might know that experience fragments in AM are basically a composition of components which include styling and layouts and can be used in different contexts. With CF, you can place experience fragment placeholder component on those kinds of generic product and category pages. And this placeholder will display an experience fragment if they can find any that matches the commerce context of that current page, meaning if it finds an experience fragment that matches the product or category that should be displayed on that page. If it doesn’t find anything, it will not display anything. And this basically works by associating an experience fragment with commerce data. You can do this by first creating an experience fragment and then opening its properties page. With the CF add-on installed, you will find a new commerce tab and using the picker, you can then select products and categories which this experience fragment should be associated with. And this pattern can be used if you want to add portions of content to individual or specific set of products and categories. Your use cases here are product specific promotions or extending the product description with marketing content. You can also do something very similar with content fragments using a corresponding placeholder component. The difference here is you add the references by using specific product or category data types in your content fragment model. And these special data types are available to all CF add-on customers on cloud service. Another difference here is that since content fragments contain structured data, so not a composition of components with styles and layout, therefore we recommend using those, for example, to display additional product attributes. Also to help you find the right content, we recently introduced the commerce reference tab in the IEM size editor. It will automatically detect all products that are currently rendered in your current editing context and then allows you to choose from any content that is associated with these products. This works on any page, so you can use this to further customize specific product pages or also enhance regular content pages, which include components that render product data. And while previous techniques are mostly focused on enriching the generic product and category pages, you can of course also enrich regular content pages. So with the CF Core Components, we have a selection of different components that display commerce data, like the product teaser, a product carousel, or product recommendations. So you can use them to easily place product and other commerce data on your pages and make them shoppable. Okay, so now that you know about the different levels of content enrichment and how the dynamic catalog works, let’s have a closer look at how associated content actually works on a technical level. And this understanding will also help you to build your own components to basically implement your very own enrichment use cases. The first building block here are references between content and commerce data. For that we use unique identifiers. And as you can see on the slide for the GraphQL schema of Adobe Commerce, which we are using in CIF, the unique identifiers are the SKU for products and the UID for categories. And this reference is stored for each type of content in a JCR property. For experience fragments, this reference is stored in a CQ properties or CQ categories property. For assets, the reference is part of the metadata. And as I mentioned earlier, for content fragments, the reference is stored in any field which has the product or which uses the product or category data type, which you then add to your model. And with the CIF ever installed on your cloud service instance, the admin UIs for each of these content types are automatically extended. So you can actually directly use those references. Okay, so assuming you want to build a component that can display some of these references, let’s go through the steps which you have to do to actually perform such a lookup. So considering such a component would be similar to one of the placeholder components, which I mentioned earlier, meaning they would be used on a generic product or category page, which provides commerce context. And the main goal or the main part which we want to do here is to basically get the product or category identifier to perform a lookup. The first thing you want to do is to actually check if you are on a generic or specific product or category page, because only these pages provide the dynamic commerce context. The CFCore components provide a utility class called site navigation, which you can use for exactly this. So as you can see on the slide here, we have the site navigation class with its product page or its category page methods. You can pass the current page here on and it will tell you if this is a generic or specific product page or category page. And then if you’re on such a page, we know that the information which product or category should be displayed is present in the dynamic URL, which I showed you on the slides earlier. And we can then use the, again, the URL provider service. That’s the same service which we use to generate these URLs, and which is also part of the CFCore components, to pass the identifier from the URL. And this actually works independently of your URL configuration. So whether or not the unique identifiers like the SKU or URD are present in the URL or not. And once you have the identifier, you can proceed with searching for related content of your choice using regular SQL queries on the repository. On the slide here, you can see a sample query, which you can use, for example, to query assets, which are associated to the product with the SKU VD09. Just to explain the query a bit, so here we specifically search for nodes of type Dem asset under the typical asset location slash content slash Dem. The query first does a full text search with the product identifier. This is basically done to reduce the result set and to actually speed up the query. And then in the next part, the query checks for exact matches in the CQ products property of the asset metadata. The second expression here makes sure that this also works for assets which are associated to specific product variants since we use a special base SKU and variant SKU format here. Also if you’re using the CIF add-on, then all the indexes you need for queries such as this will be available out of the box. Okay, so now that you’ve seen all the building blocks to look up references, let’s have a look at the complete example. For this, I prepared a download component for you. Again, it’s a kind of a placeholder component like described before. It will list different assets which are related to product. Again, a product of the current commerce context. And it will list assets which are downloads for specific product. So for example, you can use this to provide manuals, instructions, brochures, or other kind of like downloadable PDFs to enhance your product page. Also you can find the source code of this component on GitHub and you will find the link to it at the end of the slides. Okay. Let me give you a quick end-to-end demo of how such a component looks like. Okay. So first let’s have a look at the source code. What you see here is the implementation of the Sling model of this component. If we go to the constructor of this component, you basically can see all the steps which I mentioned before. So the first thing we do is we actually check that we are on a generic or specific product or category page. If the component is not used on such a page, we basically abort the initialization. So it will not include any downloadable items and will not display anything. If you made sure that we actually own such a page, again, we can use the URL provider service to get the product identifier and also to better differentiate between assets that are considered downloads for a product and let’s say other assets that are associated to products like product images. We additionally add a tag here, which we also include in the query, so that we only want to have, or only query for assets, which are specifically tagged as a download. What you can see here is basically the query for doing a look up of those assets. It’s basically very similar to what I showed you on the slides before, but only with the differences that we now also additionally filter for a tag and all the variables are basically added to bindings. The rest of the component is basically straightforward. We perform the query, get the assets, do some calculation like file size, getting the name, generating links, download links, and pack each item, put it in a POJO so that H2O can render it. So that’s basically about the implementation. Let’s have a look how this looks like in AM. I have my cloud service instance here and before we actually check the component, I would like to show you the assets I have prepared. I’m having a download folder here with three downloads. If I open the properties page of the specific download, first thing you can see is, I hope this is large enough, that we have tagged the asset with a download tag. The second thing here is that with the CF add-on, you get the commerce tab here in the asset where you can select using a product picker which products you want to associate this asset to. As you can see, I associated this asset with a product with this QVD09 already. Then let’s have a look how everything looks like in the sites admin. What I’m using here is the Venya storefront which I mentioned earlier. So you have a very typical website structure and what you can see here on the right are the generic category and product pages which we basically use to render the whole product catalog. So if I open the generic product page here, what you can see is that we have the product detail component which currently only displays placeholder data since we just opened the page like this so there’s no commerce context like the component does not know what kind of product to display. And further down here, I edit my download component. And to now actually preview that page or this product page with a specific product, we have a view of product feature which we have here. And it again opens the product picker and I can now select a product which I would like to preview the page with. Again, I select the VD09 product which I associate all my assets with and this will open then the product page with this product. As you can see, the product detail page now displays the product and if I scroll down, you can also see now the download component which displays the three assets which are associated to that product. To also give you an example of how this looks like for a different product, if I select a different product which is not VD09 and preview this, you can see again the product detail component displays this product but my download component will not render anything because there are no downloads associated to this product. All right, so this concludes the demo and I hope that after this session, you get a better understanding of how associated content works and how you can leverage this for your very own store. And as mentioned before, you can find everything I discussed in the list here. And if you have any follow-up questions, please visit the Adobe Experience League and look for the post related to the session. You will also find the link for this in the chat. And we have time, so if you have any questions, please feel free to post them in the Q&A section or directly in the chat. Thank you. I’m also going to post the link to the Experience League community post in the chat. So if you have any further questions or you want to follow up on anything, please feel free to have a look. All right, it doesn’t look like we have any questions. So thanks for attending and this concludes the session. Thank you.