Magento Community Engineering Hangouts, 11 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Engineering Hangouts 08/11/2021

Description

Agenda:
- AI-powered Site Search by Priya Bhat and Ani Hammond
- Performance pack introduction - Checkout, Cart, SalesRule improvements, and Async order. How to deal with big carts ~750 items by Vitalii Zabaznov

A

Okay, so welcome all on their community engineering handouts. Today we have pretty much good stuff. We have two interesting topic topics. uh The first one is about recently released site search and the second one is related to some great performance improvement and how to how to deal with with the big data with magenta.

A

I believe we can start with the site search so yeah, uh money and fear. Okay,.

B

Thank you stars hi. Everyone.

C

I hope people can see my screen.

B

A

Yeah yeah, we can see it.

B

Awesome great I'm going to put it in present mode here for the uh slides and then we'll go over the demo tabs in a second here. uh So hi uh we'll be talking about live search. uh As we already said, it's our sas based uh ai uh alternative or improvement on the old magento search. My name is annie hammond and I'm presenting with priya that we're both engineers on the live search team and we uh have slightly different focus areas.

B

So between the two of us, we should hit all the uh high marks of live search today um and beyond. I hope uh about us, uh as I mentioned pre, and I both work on live search and, more broadly in the adobe commerce data services team.

B

We've both been on live search me since the beginning about 18 months ago, and then priya's been here for uh over a year and through beta and through public beta and uh through ga, which is where we are today uh we're going to talk today, uh we're going to start, I'm going to start with a high level overview and then priya is going to do a uh deep dive um into kind of the specifics of search in the storefront uh she's.

B

Going to show off some cool uh use cases and some comparisons between where we, uh where and where we are now uh and then I'll, show off the admin side of things and ways for merchants to tweak and to improve their live search, uh and then we'll finish with some exciting details on uh road map items and then of course, q.

B

A uh so uh live search is a sas based platform for storefront products, search its intent is to improve and to modernize the experience of existing magento, search and kind of to remove the overhead that merchants experience managing their catalogs for search.

B

It launched in ga at the end of june, uh it's available for merchants with uh commerce licenses and uh running magento, 2.4 and up, uh and so with this I'll. Let uh priya take over and I'll show you guys what the live search looks like today.

C

Thank you army. Now I'm going to share my.

C

Screen, can you all see my screen.

C

Yes, all right.

C

So I will just uh quickly walk through on boarding. First to onboard a merchant will install the live, search, meta package using composer, and then they would have to configure their api credentials um and the way we do it is here they would just paste their api keys and private key, and this will generate um three environments for them. If you are using live source in your staging environment, you would want to pick one of the testing environments and if it's in production, you would pick the production environment once you've configured your api credentials.

C

uh You are ready to go as in along with live search. You will have some export extensions installed as dependencies. These export extensions are responsible for syncing data, from your magento instance to our backend sas services. uh It's mainly catalog data attribute metadata and things like that which we will need uh to index your data into elasticsearch.

C

uh So once you have your api configured and you are all set with your data exported, you can disable your elastic search modules. These are the core elastic search modules in your magento, so elasticsearch elasticsearch, 6, 7, etc, and once you have live search installed and ready, you can also disable. You can just stop your uh you don't need to host your elastic search service. You can stop it.

C

So that is a little bit about onboarding and once you have onboarded you are ready to go. I mean there are a few more things in the admin ui which ani will deep dive into um once we look at the storefront as far as the storefront goes. um We have this popover.

C

uh Basically, what we have done is in this search bar. We have injected a script and that makes a call to a react, app hosted on the cloud and serves search results directly um by connecting to our backend search service. So this does not go through magento at all, uh I mean does not go it for the pop-up part that we are going to look at. um So let's take a look at some cool features with the popover.

C

um So let's say that you type red pants over here. You will see that the popover shows the thumbnails with red colored pants and if you switch to green, you will see the green ones so kind of from your configuring configurable products. It pulls the correct image for you. uh So that's cool and another thing that we have is search as you type so for search as you type. The attributes that it's going to look at are the ones that that are marked as uh using search. Yes um and also.

C

If you look at the search weight, we do honor uh search weight when serving search results. um So, for example over here, if you type fit, you will get fitness shorts and tanks etc. But if you now change it to fitness and you add ba, it starts showing you results for fitness balls, because that ends up being a better match, uh huh so it it has a search as you type, so you only type ba, but it is looking at ball and band and giving you um the most relevant results um another thing over here.

C

Similarly, it would like look across categories, so if you type women, capris or pants, then you see that it's looking at the category information also when it serves, uh serves the search results. So that is also very uh relevant, relevancy oriented search um other than that. If you see the search terms have been highlighted over here, and we also offer suggestions over here, for example, if you type fitness equipment, it will show suggestion which can include category details uh so sweatshirts.

C

It will start showing you suggestions, um whatever is most relevant, so that was a little bit about the popover. One thing that I'd like to add over here is that uh when you set attributes as uh using search- uh true you you don't want to include attributes that can be very verbose, like description which can have html and a lot of description, because that might throw off the results that you get.

C

For example, if in a t-shirt you have a description that says short sleeves and if you search for short or shorts over here, it is going to end up showing those t-shirts, because it has short in the description and you've marked it as searchable.

C

So, just some clarification on how you could tune or to get better, uh more relevant results, so that was something about the popover now going to. The next thing: is the category browse and search results, while what we were looking at over here, while all this as you type, while the requests directly go to our backend. But if you click on view all items or any of these suggestions, um the request goes through. Let me look at the luma theme one.

C

So if you look at here red bands and you search, the request goes through what we call um search adapter, which is nothing, but uh we have a plugin for the magento search interface, and this hits our back-end instead of magento's elastic search modules and we serve results from our back-end.

C

In addition to this, we have a javascript sdk available, which you can use to create your own implementation. So this is the sdk that we that I'm referring to. You also have some api documentation to look at if you want to implement it um and as far as so this, uh this is kind of our in-house implementation, not externally available. So you, if you see, if you search for red pans again here we have in this watch. We show red pants only, whereas if you go to uh the default implementation, it does not do that.

C

It will give you pants, but it will not show the correct swatch. So that's uh something that just showing how powerful it can be if you can use the sdk for the implementation.

C

um Another thing this is another instance without a live search installed, just to show some relevancy. If you search for, let's say women's jackets over here. This is not live search, so you get a mix of women's and men's jacket. But if you use live search, you would just get women's jackets.

C

So yeah that was a little bit about relevancy and our implementation of the category browsing storefront, popover ani back to you.

C

Thank you. Priya.

B

Apologies, I don't think I shared the right screen here um all right. Hopefully everybody can see uh the um search admin ui now, yes, in uh I'll start talking about the merchant experience and the ways that uh in which a merchant can improve uh on the search that prior just showed even more through their configuration uh before I dive into these, just wanted to call out uh the fact that the this ui is uh all using react spectrum.

B

uh Hopefully everybody has heard of spectrum, but it's our open source, uh react component library and it's just a very uh clean and modern, modern, look and feel to the whole experience.

B

um So, let's, uh let's start over with uh facets this first tab, uh so the way that these facets are configured. This could be any uh attribute on a product that is filterable and uh the configuration informs our api of how how uh how the sidebar here with result filtering can be um should be, should be organized and what should be returned here. uh We have two types of assets we have pin facets which always go on top.

B

We have price and category here, and I think we saw these in some of the examples, and then we have dynamic facets which to me personally they're a lot more interesting.

B

uh This uh kind of dives into intelligent facets, which is one of our ai features that is new, about live search, so the way that intelligence facets work specifically, is their dynamic facets that, depending on the search results, return return, attributes that are that allow the shopper to most easily narrow down their results and actually arrive at whatever little they're looking for and so basically, depending on what you're searching.

B

So, for example, if you have something like pants we have here, we have, of course, our pin facets, and then we have uh what our algorithm has determined is the are the things that are most likely to narrow down the shopper uh results to what they need. We uh we have them ordered by style here then size, then color and then material for something like bag.

B

For example, the facets change right here: we've determined where the algorithm has that strap or handle an activity, and then material here at the bottom, and even one at the bottom is color. So again they vary based on uh what we've determined is. The is is the best experience for the shopper um and they can be sorted by uh count, which is how we have defaulted most of them.

B

So the the the results with the most uh the most results with this attribute will go on top and so on, but they can also be sorted alphabetically and we can configure this through admin.

B

uh Next tab is synonyms. There's two types of synonyms that we can cover or that we can define one is two-way, which means in this case, for example, pants means trousers and trousers means pants. Each of those should result in the same recall, set possibly in a different order, but they are interchangeable, and then we have one-way synonyms uh here. This is somewhat of a funny example, but I just wanted to really illustrate what we're talking about here. We have a one-way synonym here, defined that says pencil means pants.

B

That doesn't mean that pens means pencil, but every time we search for pens uh pencil, we should find pants and not vice versa. So uh let's try these examples, trousers and pencil.

B

If we search for just pants, we get 25 results and they're all pants. If we search for trousers, we get the same thing. 25 results. Now, if we search for pencil, we get a couple more, we get actual pencils and then a bunch of pants that we have defined as a synonym for uh pencil. So that's the difference between one-way and two-way sentiments and uh they work very neatly. I think uh this next one rules is my personal favorite one and I think the most powerful feature that we have here.

B

um This is a way for merchants to kind of manipulate the results based on query and not rely on us entirely.

B

Let's open one of these rules and take a closer look, so this one says: if the search query is slacks then boost this uh specific band here, uh the darya bikram pan there's a preview screen that shows us how the results are going to look and that all works real time. So if we change it to something else,.

B

The preview shows us a different boost and so on, I'm not going to save this rule because I just wanted to show you guys how the results look here. So we know that slacks are synonyms of fans because we saw that in the previous screen and now, if we search for them.

B

And now, if we search for them, we should find.

B

The uh the one that we had boosted uh there's something that's off here. I don't wanna, dwell on it too much, but uh we should have seen the daria pent on top, and usually that happens, let's try the other rule, that's the one that pins the product to the bottom, so we don't want to see the zeppelin yoga pant. We normally see it, but if the query contains trousers, we want to see it at the bottom.

B

um So, let's demo here what happens if we search for trousers?

B

That pair of pants is all the way to the bottom, and if we had just searched for pants like we normally do, it would have been uh way way higher up here in slot 4..

B

This is kind of the tip of the iceberg on what I think rules have the potential to do and I'll cover a little bit more of that in our um in our upcoming features uh slide, which is a few slides from here going over to the next tab uh graphql.

B

This is especially considering that many merchants are going with a headless implementation.

B

uh This is a very nice way to kind of look and make sure that your configuration is correctly that the headers that are being sent to our api requests are what you expect them to be in that everything is indexed in our backend and results are being returned typing here query we get some query results here and we can of course, tweak uh this response to return more whatever we need at the time, and now we have name and so on the uh feedback tab. This one probably speaks for itself, the most we love it.

B

When people use this one, we want to see it used a lot. uh We appreciate any feedback, and then uh last here we have settings for now they're just price settings, but this is uh in a sense, an extension of faceting in general. It determines how many price ranges uh are going to be showing up in our results and it determines the interval value of them.

B

So here we have nine picked and the interval value is five and we can see that the uh prices here and the ability to sort by prices uh in increments of five- and uh there should be nine that have been uh calculated for this.

B

So this uh concludes the part of the demo that we had a couple more things. We covered synonyms, we covered uh facets, graphql playground, settings and feedback, and so going back to what I was talking about with rules, but with everything else as well wanted to cover some upcoming features.

B

uh One that's uh on the somewhat more near roadmap is performance. Dashboard, that's going to allow merchants a lot more insight into their search, how people are using their search. What are the most popular queries? What uh what searches are not returning adequate results or zero hit results um and then, of course, standard kpis, like conversion rate and uh in another similar rates improvements to indexation we've heard the feedback. We know that it that there is some slowness there between when products are updated and when they're, showing up in search correctly.

B

uh We're working on this very hard and uh the next iteration of live search is going to uh bring us even more to uh real time on uh picking up changes and uh everything uh everything else that's configured in the magento instance advanced merchandising rules going back to rules again. This is this: is my favorite one, as you guys saw, we are talking about uh we're only defining rules based on the query that a shopper enters there's kind of a large set of possibilities there on.

D

B

To these rules, based on what is returned, what we know about this shopper, what we know about people who uh search for uh these items or who have similar searches and so on, so the rules that you guys saw today are only going to grow and allow more control there and uh the last one is ai-powered synonym suggestions.

B

This is some fun nlp work that we've that we've done that we've seen some very positive results on and we're hoping to have something uh deliverable in the somewhat near future.

B

How to contribute? Of course we we already mentioned the feedback tab, but uh community slack uh twitter. We love, uh we love hearing uh all the opinions. We we love to hear what we could do better and what we are doing well so far, and um that's it- uh I don't know if we're doing q a now or after the second presentation, but uh I'll I'll leave this up to you stars.

A

uh Yep, because do you have any questions.

A

You you also can ask questions in the chat, so yeah feel free to put the messages here there.

A

Okay, so if there is no questions, we can move to the next topic uh connected to some great performance improvements, so fatally go ahead. All right just give me a second.

D

All right, can you see my presentation, yep nice, so today we're going to talk about big cards uh right now we found that it's kind of limitation for.

C

D

So uh our main, our main goal is to improve performance with a huge mini cards with up to 750 items in it, and to do that, obviously, it's really hard to do that with backward compatibility policies. So we interview, we are going to introduce a couple of modules and we name it performance pack and we're gonna review the result of this pack. In this presentation.

D

It's not gonna be a common demo with a flows like I'm not going to present how it falls at this point, because it's under development, but I'm really happy to share the very first numbers with the community and because we are going to introduce these modules enough. This fall you're just gonna need to wait until we're gonna update the magento dev docs.

D

So, let's, let's see so, for I want to start with the improvements that we delivered to 2.4.3 releases release with real two improvements. The first one is that we replace the old monstrous, then currency library, with a php native number from other library, so how we measure the results, our main goal, so the uh in in our measurements. We saw that most time-consuming operation is when magento tries to apply the card price rule to the items.

D

So, for example, if we have 750 items in our card and have, for example, 100 rules, magenta we're going we're going to apply like every rules to every product and because from our standpoint it doesn't make any sense from business perspective.

D

So we measure this improvement with the options that cause discard but discard subsequent rules, which means that only top priority rule is applied to every product and, let's see the improvement.

D

So for the word card section scenario: we've got improvement up to 300 milliseconds, which is good and for open card and check out start around 150 milliseconds, so no backward compatible. Things were introduced just to replace the library and that's it and we got the improvement. This is I want to remind that. This is part of 2.4.3 release.

D

Let's see the next one, so during profiling we saw that we trying to load a lot of information about the products and especially when we're trying to load the images of products.

D

So we just like minimize the data that we are retrieving during open, cart and check out start and load card section scenarios, and it gives, as you see, is three up to 350 milliseconds of improvement and also a part of 2.4.3 release. So if you're, just gonna update your magento instance, you're gonna be able to see the improvements with the card and let's go so the first, the very first module of the performance pack for the card. Optimization will be asynchronous operation for checkout.

D

We just called it a sync order: module nothing, nothing special there. So when you just uh trying to place order, it will, it will put a message in the queue and we introduce a new consumer that is going to work with this message.

D

So there is no like uh the performance will be very, very very fast just because we are not going to process order until uh consumer works with it.

D

So right now we can place order with 750 items within 100 milliseconds, and also we try to try to preserve some kind of validation right now, just for like billing address shipping address, but still all the scenarios about what how for us, for example, how we're gonna deal with and items that become uh out of stock out of stock. When we process orders we're gonna, publish this as a dev docs and everything will be explained there.

D

And there is currently a steps that we that works with the sync order module, so we works with every magento payment method, except the payment method that is required as third party redirect.

D

Everything else is tested and works right now, with this module.

D

uh Also, we will introduce the additional module for graphql support because, as as you know currently, the luma sim is working through rest api endpoints and we also going to introduce a graphql support for it. So nothing to talk about about it here, so we got the same improvements it's under development right now. The only thing that I would like to share that we are not going to introduce the different consumers for graphql order message and or the message that came from rest api, so it will be the same consumer there.

D

Next one is a quad storage or we call it safe optimization.

D

So what we did here actually on a quote table, we have a lot of a lot of rows and right now we just eliminate all rows from the quote table. We just not eliminated, just don't use it and we use one additional row and we store just all information for quad in one row as a json data.

D

Also it's an like intermediate step in the future. Probably we're gonna, try it with a non-persistent storage. I mean try to store quarter, not persistent storage working sessions already and we'll see the difference in performance, but just for right now we see a lot of benefits for it uh with a lot of scenarios, for example, like add to cart with 600 milliseconds improvement and especially on a checkout steps like html shipping method with a 1.7 1700 milliseconds, and she can't believe shipping information with almost three and a half seconds.

D

So it's really like it's really good results. Also, in addition, uh it's gonna, it's gonna, increase the throughput for the place order scenario, so we expect that it will significantly increase the amount of orders we can place within one hours. We still don't have numbers at this point, but we're going to share it soon.

D

And the next one is sales through optimizations.

D

We noticed that, as I was talking before, all these modules works with the discard subsequent rules options, but we notice that we have a lot of clients that have that have like 10 rules, 12 20 rules and they have a very rare but valid business scenarios.

D

So we're gonna introduce the deferred, auto calculating module since the the rule is applied when we try to calculate the total. So what we noticed when we run some some tests is that every time we trying to add the product we we are calculating the grand.

A

D

Which actually means that we're trying to apply all the rules? Shipping taxes, billing everything? But the thing is when we try to add product to cart, we still might not have the shipping info the billing info and so on. So the calculated value is hard to use on the final checkout step. So, for example, if we go to the very first checkout step on aluma right now and fuse information and go to the second step, the total will be recalculated even without showing the total the actual total on the page.

D

So what we did we just uh we just uh definitely calculating on for the pages that actually required it. So, right now, when we add product to cart, we will just uh calculate a base total, which is actually a sum of the product prices, and you can see a huge improvements here in some scenarios like at bulk of simple production cars, we have more than 50 seconds like around 50 seconds improvement and for the quick orders it's more than seven seconds and, for example, we trying to test adding 750 products.

D

So at first we add 375, simple products and then 375 configurable, config configurable product. So three and a half seconds and eight seconds it just looks great and that's currently it.

D

In addition, what I want to add here is that all this module will be a part of magento core starting from 2.4.4 next release and starting from this fall, I don't have the date yet. You will be able to install it as separate composer packages.

D

They will be work with each other, so you can install either the whole pack or just the modules that needed to your business yeah. I guess now: that's it.

A

Okay, thank you. Vitaly.

A

Do we have any questions on the improvements.

A

Okay, if there is no question so that's pretty much, it uh recording will be available on our youtube channel soon. So thank you all for attending and see you on the next meeting.