51ºÚÁϲ»´òìÈ

Transcript

All right. Hello, everybody. I see everyone still playing rock, paper, scissors. Sorry. I’m going to cut you off and we can get started.

All right.

So hello, everyone. Thank you for joining us today. We have a new webinar platform here. We are on 51ºÚÁϲ»´òìÈ Connect today. So welcome to Behind the Brew. Behind the brew is our newest webinar series. It’s a spin off of Commerce and Coffee. And we’re going to take a closer peek behind the curtain of some of our more strategic conversations that we have from Commerce and Coffee, and actually dig into the more technical and implementation side of things.

So today we’re going to be talking about Libsyn and, tap out. So the bar is going to be speaking on today, and he’s going to introduce himself in just a moment. As I mentioned, we are working in 51ºÚÁϲ»´òìÈ Connect today, which is still somewhat new for us. So we might have a few kinks or unexpected surprises, but we appreciate your patience and hope that you enjoy the new format, so we would love for this session to be interactive. We encourage you to ask questions in the questions box throughout the presentation. It’s going to kind of float around and be in different parts of the screen depending on the view. So type them in there and we’ve set aside the last ten minutes or so for Q&A. So we’ll do our best to answer as many of those as we can for you. So now I quickly like to mention a few housekeeping items before we get started. You can see those over there in the box on the bottom right side of your screen.

This session is being recorded and can be viewed on demand and shared with other members of your team. So you’ll be getting the recording and an email, tomorrow, so keep an eye out for that. I also like to point out that at the top of your screen, there is a black bar, and there’s an icon with a hand on it. There you can drop down and find different actions that you can utilize throughout the presentation. So if you like what you see, feel free to give us a thumbs up upon a laugh, so on, but we would love to see your engagement throughout the event, so we encourage you to utilize that new feature.

And you also want to quickly mention that on the next screen there’s a handout that’s available for download. I can put together a bunch of resources for you to be sure to download that and use it as needed. And then as we’re closing out the webinar, a few survey questions are going to pop up at the bottom of your screen. If you could take an extra minute to fill those questions out, we would really appreciate. It helps us make sure that we’re meeting your expectations at these next. So with that, I’d like to introduce myself. My name is Alana Cohen on the digital senior digital events manager for our Customer Success strategy team here, 51ºÚÁϲ»´òìÈ. I’ve been with 51ºÚÁϲ»´òìÈ for almost six years now and spent most of that time organizing and hosting these events for our customers. And then prior to my time on this team, I spent about two years working with 51ºÚÁϲ»´òìÈ’s Advertising Cloud customers. And before coming to 51ºÚÁϲ»´òìÈ, I spent many years of different advertising agencies around New York. But I’m excited to be here now, hosting events like this for you, our customers. So if you have any questions about today’s event, about your experience with 51ºÚÁϲ»´òìÈ Connect, about any of our customer exclusive events, please reach out. And now I’d like to pass the mic over to Tom to introduce himself.

Thanks, Alana. That pencil dagger this side? Yeah. I’ve been working with 51ºÚÁϲ»´òìÈ some two and half years from now. I work as a customer technical advisor. I hold total of 14 years of experience into information technology. And then, you know, with 51ºÚÁϲ»´òìÈ Commerce, and, you know, Magento, back in 2012 is when I get started with Magento one dot X version. And then from there, at that point of time, I’ll be working. I’ve been working with 51ºÚÁϲ»´òìÈ Commerce, till date. So really excited, to see, folks over here joining in. It must be early morning for you guys. So appreciate for joining and taking time to join the sessions.

Yeah. Thank you everyone. Yes. Good afternoon. Good evening. Good morning. Whatever kind of day it is. I know we have a lot of different time zones today. I’m Paul, so thanks everyone for joining. All right. With that let’s jump into the presentation.

So today’s agenda is pretty straightforward. We already went through our welcomes. We are going to I’m going to pass it off to top on to present. And then he’s going to run for a pretty in-depth demo that’s going to take the majority of our time. And we will end with Q&A as mentioned. So start popping those questions into the Q&A pod that you should see on the right side of your screen. And with that, I will pass it over to top to kick it off.

Thank you. Eleanor. So I’ll just go straight away. Within the live search components, that’s the first slide that I’ve got over here. Widgets on Luma. You might have heard about the, you know, widgets. If you have ever installed live search on your ecommerce before, you must have heard about widgets. And if not, I’ll be discussing about that because that’s, the new, but on the live search side of the things and, you know, as in when you get get yourself familiar with Live Search, it would really make sense to understand what widgets are, and how they are being, you know, provide it out of the box within the luma. Same, we did had search adapter before, you know, you know, e-commerce live search, out of the box comes with widgets today, on the latest of live search. Once you have live search installing 51ºÚÁϲ»´òìÈ Commerce Luma, it would default to widgets. We did had search adapter. Previously, which is, you know, with, you know, which had few limitations and stuff like that. So, now it’s, you know, the newest and the greatest is the widgets. We’ll be talking about the widgets, on Luma, there are two specific things, that, you know, from a widget perspective that I’ll be talking about. One is the storefront popover, which, you know, it will make much more sense once I present the screen. You, you know, really make, an understanding of what I’ve been talking about when I say widget. So the storefront popover is something, or the search as you type. These are some of the abbreviations that we use. You know, when you type in a search term and then the results, come back, the relevant results come back for your search. And then we have something called as a product listing page widget, which is the widget that you see on the, category pages. In the search pages. When you put down the search term, hit the enter. It takes you to the search result page, and the search results and the filters, you know, faceting part and all of that being gone through the product listing page widget that I’ll be talking about.

There are a few live search. You know, when it comes to endpoints, you know, there’s that there are, certain things that I didn’t want it to showcase and I’ll be talking about, but this is, you know, I’ve just presented over here the live search endpoint, which which is very specific to life search. And then we also have, a catalog service, you know, perform live search, which is an endpoint which the life search PLP widget uses, which has the capability to, you know, call a live search to catalog search and the product, recommendations from a single endpoint and the latest version of Live Search, already uses the catalog service, as I said, on the PLP widget. So I’ll be talking about that. You know, when, when I, would present my front end and the back end, I’ll be walking you through across that, and then, you know, the data space side of the things, you get the, you know, two testing in one production is the general setup that you, get and how your commerce service connector is being set up, as a pre request item before you get started with using, live search on 51ºÚÁϲ»´òìÈ Commerce. So touch base a little bit on that as well. From a GraphQL standpoint, from a catalog service perspective and live search, we’ll be talking about a little bit on that. So are, you know, there’s, there’s sometimes I’ve seen, you know, getting into engagements with merchants and, you know, integrators and stuff like that. They seem to have the slide of, now, in, in terms of understanding and stuff like that. So I’ll be talking about product search query from live search perspective and the catalog service perspective as well. So it kind of would differentiate and you know, you get to know more about it and what specific scenario that you would be using that.

Right. And then we would be you know, diving into some of the examples on the GraphQL side, you know, both on the live search and the catalog service side of the things that I’ll be presenting, and I’ll be talking about the PLP and the popular widgets that I’ve been talking about. In the first slide that we spoke about, that, there are two widgets that, the live search comes, on 51ºÚÁϲ»´òìÈ Commerce Luma. It comes defaults, which are the popular, and the PLP widgets. And, there’s been you know, we have made that, open source, meaning that you can, you know, take a clone of that specific repository, make necessary adjustment customizations and build that and integrate with your 51ºÚÁϲ»´òìÈ Commerce luma. So this is, you know, these are the, summary, that I’ll be presenting during the demonstration. And there you go. You know, I’ll be, taking over, and presenting, the demonstration now. So just just give me a moment while I share my screen.

Loading. It’s one moment. Appreciate everyone to. Let me know when you see my screen. Yep. Okay. All right. So as you can see, this is the front end that I’ve got, you know, the, few things that I just spoke about. One is the popover widget, and the other one is the PLP widget. So in order to set the context over here, I thought it would be good to kind of, show something which, you know, makes sense, from that perspective, you know, I’ll use this little box over here, the search term that I’ve got over here. I put down a search term over here, save, say, for an example shirt, it comes back with different results. And then when you click on view all it takes you to the search result page, right.

So the popover widget that I’ve been mentioning about is the search term that you put over here. And the result set that you get, within a popular, is, is a standalone, JavaScript widget, which is, you know, decoupled sort of an architecture. So, it doesn’t really matter whether you are using it for, you know, integrating with your 51ºÚÁϲ»´òìÈ Commerce or, you know, sort of an headless implementation or am side of the things. Right? So it’s kind of a deep coupled architecture that we, have brought in together. And these are built using react components. So, we will get to that. But the context that I wanted to set over here is, you know, the search term that I put down over here, it comes back with a popover and, you know, from an abbreviation perspective, I make sure that, you know, this is what the popover that I’ve been talking about. And once you kind of hit the enter, so the term again, so this is the search result page.

On the left hand side, you see the filters, the products getting listed over here. You see the little sort by option over here. All of this is, you know, the all of this is being rendered through, PLP widget that I’ve been mentioning about. So if I would, yeah, if the context really makes sense over here, then I would take a step further from here where, you know, I’ll showcase in terms of, you know, how, these widgets are being called. So I’ll just quickly open up, developer tools over here just to kind of show you that, that I’ve got, developer tools open over here. Put down the search. Put down shirt again over here. Kinds of queries down. I’ll put the enter key over here. It takes me back, as you can see there.

Couple of graphs. You as I got fired. One for the one, that when I typed in the search term for the popover and then the second one, which, you know, kind of kicked off, went for the PLP widget that gets rendered on the search result page. So if you look at the graphical in the headers to that, you see Catalog service, you know, the video graphics URL endpoint, that this specific, you know, the project. Yeah. We are getting some feedback that the developer developer tools window is not visible. Okay, maybe, we can try re sharing or if you’re. Yeah, let me, let me try that and see.

Let me see that. Yeah.

It’s it. See? Nope. Still not seeing it.

And then. Let’s see. All right, guys, these are the kinks that I was talking about. No worries.

You know, I can, I have a different way to showcase that at a later point of time, so I’ll probably skip, showing the GraphQL that is fires. You know, I’ll just, walk through O’Reilly over here and then, you know, I have, the playground that where I can, you know, kind of give more insights up one. Right. Okay. Yeah. So, I believe the popover and the PLP widgets, you know, that I’ve been talking about, from a, conceptual perspective, you kind of understand looking at those on the front end side. So I’ll quickly stop sharing my screen from here.

And I’ll go, to the back end of 51ºÚÁϲ»´òìÈ Commerce. Before I do that, you know, I just wanted to kind of aurally, set the context in terms of the GraphQL. You know, the endpoint that you get, called when you are on popover and when you are on the PLP widget, right? So, today, you know, when you, as in when, as in when, when when you type a search term, the GraphQL that fires for popover is, the live search endpoint, which is, you know, the, you know, 51ºÚÁϲ»´òìÈ, but we’ll, we’ll have a look at that. And then when you on the PLP with the is catalog next service that gets called and on your popover, it calls the live search endpoint, right. So why is there a difference? You know, you might have noticed that there is a difference, in terms of the endpoint that it gets called for the popover, which is different than the PLP widget. Right? So, there’s a, little bit of history behind that. And I, you know, I just wanted to give a context around that just in case if you are a little confused when you kind of debug that, specific area. So earlier, for both the poplar and the PLP widget, the endpoints were being, you know, the live search endpoints, you, which is different from the catalog service endpoint that we have got today. Catalog service, you know, endpoint or the service itself is more advanced. So it kind of gives you more details on what Live Search can, you know, kind of give you back. So for the PLP widget, you know, you, if you have the latest one, you on your PLP widget, if you can still see my screen, not the developer tools, but the actual screen, you see the color swatches that I’ve got over here, right? And all of that, you know, is, possible, you know, with your catalog service where it has advanced sort of, mechanism in place where it it within its service, it can still, you know, call upon live search for recommendations and few of the services through, catalog service, which is generally terminology has, you know, federated search. Right. So that’s the context over here. I’ll probably, showcase, the playground and then things will, you know, make sense from here. So I’ll stop sharing my screen over here. I’ll take you to the back end to set some context here.

Okay.

Yeah. I believe you should be able to, see the back end.

Yep. Yep. So, you don’t want to have your live search, in store? It’s going to, you know, under marketing, as you and search, you be having live search install. Yeah. There are various, feature functionalities that live search offers. And this is the default dashboard, the back end dashboard that you get, you know, I will go straight to graph QL. You know, I’ll be, you know, this because this is more technical, sort of, webinars. So I’ll be talking more on the technical side of the things and how you can leverage live search and extend live search from here. Right. So I’ll go straight to, the GraphQL playground that you have got over here. So as you can see, you know, the GraphQL playground has been loaded over here, the default, GraphQL playground that you see on my screen, it has, you know, a default query that you can run against your life. So just hit the run button and you will get the responses back. Right. So this is, that part of the live search back end from where you can actually play around with the, GraphQL queries. You can request different sort of, queries to see what sort of results are coming back. From a troubleshooting perspective, one of the things, before getting into, you know, more details into the GraphQL queries, I did want to set some context from, Commerce Service Connector. So one of the request, you know, when you install Live Search is to set up your Commerce service connector, which is kind of a gateway for all these services that we have. So if you go to System Services Commerce Service Connector is where you’re going to be, setting up your live search, or any sort of SaaS service, you need your, your sandbox and production keys that you would be putting down over here. You would then be setting up your SAS identifier. You will have to name your project and then, you know, it is likely that you will have, one production and two, sort of a testing data spaces. So, you know, in my case, I have a few more, because I have requested for them, but in general, you should have one production and two testing. So you have to put down your project name and then, you know, a data space that you want to point it to, right? So, you know, one thing that would come in your mind is what? What? You know, what is a data space, right? So, yeah, you can just think about it as a data warehouse where it kind of you know, has all your catalog, related information, and those and this and the, endpoint services are able to ad hoc and, throw you back, those information through graph keywords, right.

One of the things, you know, in terms of the understanding standpoint is that, the data space, i.t or the data space type that you set it up over here. So I have testing as the one that I’ve set it up over here.

One of the things that you should be, knowing is that, you know, if you have production, you have a different sort of an endpoint. And then if you have testing, you know, the PLP widgets will query again, a different endpoint.

What does that mean? That would all make sense. Once I kind of present, those endpoints and, you know, talk about the GraphQL queries. But, you know, in general, when it’s testing, when your data space is testing, it’s just scanning it and you’re using, yeah. Catalog service. It’s just an app and sandbox to the, endpoint. And then if you use production, you know, it won’t be a sandbox. So don’t get confused with that. And I’ll be talking about that when I actually present those playgrounds, GraphQL queries on the GraphQL playgrounds. Yeah. So this is how you set things up, from a commerce service. Connect this set up. This is the, entry point that you would need in. Yeah. In terms of setting up, live. So just first place a pre request item for that. And one of the other things that I did wanted to show was a configuration that is setting, in the back end, you know, under live search over here. If I go to storefront feature, there is only one configuration that’s there. If you are in the latest of, you know, live search, you would you, it defaults to the, product listing widget, which is, you know, set to. Yes. But then if you on, look at lower, live search, releases, it could be likely that, you know, this option is set to. No. And when that happens, it’s not the widgets that are getting rendered on your front end. The PLP widgets, that I, you know, that gets rendered when you, search for a search term on your search result page. It’s, a different, you know, way that we then did our front end, which is the search adapter. If you recall, the search component, say that I’ve shown. Right. So, you know, the recommendation from product is that moving forward, you know, you should be using PLP widgets. So just in case, if you are running behind versions and stuff like that, just make sure to use, the PLP widget and make sure that this configuration is set to. Yes.

Yeah. All right. Stop sharing my screen and I’ll be talking about the GraphQL, side of the things. So excuse me a moment over here.

And apologies for the choppy demo, but we are juggling screens here.

Loading. Right. All good? Yeah. Okay. All right, so, the different endpoints that we spoke about, you know, and one is the, catalog service endpoint that I was talking about. So as you can see on my screen over here, you know, I have got catalog service, there’s an, additional, text that is being appended to the, general catalog there. So we started our video. I do have sandbox over here, and there’s a reason behind it. You know, when we were on our front end, it was, you know, sending out the GraphQL queries was being send it out to the sandbox endpoint and not the normal one that is, you know, and if you’re confused looking at that, it’s because, the Commerce Service connector that I have just presented, a few minutes back where it had the data space being set at the, testing, you know, where, testing is an option, within the data space. If it did had production, it would have something, you know, without the sandbox. Right. So, so that’s, something, that’s something that, you know, you should be knowing about. And then if ever you’re confused about that, you know, you want to go back and and just verify yet that your data space is being set correctly. The other thing that I did forget to mention about the data space was that, the, you know, you know, you should be really careful when it comes to data space. I mean, if you have multiple environments, that you are using, if you kind of use, the same sort of a database on two different environments, then that could be a collision. And you can, you know, get into data corruption and stuff like that. While you may not get into data corruption, but it could be that the products which are being rendered for that specific environment, it would be, you know, if you click on that, it would be take you to the, different environment because, you know, the sinks has, the sink utility would actually have the, catalog from a different environment. So there could be data collisions. So make sure that one environment, one, you know, sort of, data space is a structure that you kind of maintain.

Yeah. All right. So, the attribute, metadata that I have, got over here. So as you can see over here that we have we spoke about the catalog service endpoint, and then when I was talking about the popover where you were not able to see the GraphQL, queries on the developer tools side of the things, this is what I was trying to show, on your popover today. You would see, you know, when you put down the search term and search for it, it the endpoint would be, you know, different one, which is the live search endpoint, live search and catalog search, for different services, both of that have different endpoints. Popover widget that we have today points to the live search, endpoint. And the PLP widget, that we have points towards the catalog service endpoint. Yeah. And you know, the future, what what I’m hearing is that, from the product is that, you know, it’s all going to be, you know, even the popover is going to call the catalog, service, endpoint at some point of time. But, yeah, this is how it is today. Yeah. When we talk about the on the live search side of the things, live search, endpoint or the live search service, there are two specific, search queries that you have as an option today. One is the attribute metadata that you have, and the other one is the product search that you have. So I’ve got a basic query over here, which kind of gives you back the sortable and the full table attributes. It’s, you know, a self-explanatory, sort of, GraphQL queries, that you will have to, you know, put down the endpoint. And there are specific HDP headers that, you know, this, specific, GraphQL query would need to be configured with, those are the environment ID, the store of code, the store you code, the website code and the, ECS API key. I believe the three in the middle ones are quite self-explanatory. You know, what could be of a new, for you is the, environment ID, which is, you know, the, data space that you have configured. If it. Yeah. On our back end, when we were on the, connector services page, where, you know, we set up our data space to be testing. There’s an idea over there, which is your environment ID. You know, you can also find this, inspecting the elements, using the developer tools. You know, when, for the paper and you can get the environment ID from there as well, or from the backend, or, and then, you know, the zap back over here, which is, your actual, sandbox or the production, key. So given that, you know, our data space, is set up on testing, in general for catalog service. It is, that you will have to, you know, pop in the, sandbox key over here. If you are on a testing data space and if you are using production data space, you would, you know, put in, the, production, no, production API key. But when it comes to the live search endpoint, it is always the, you know, it’s not the sandbox. It is obviously production, one that you would be putting down over here.

That’s the basic difference. So if I do run this query, and, you know, I forgot to mention that I’ve been using GraphQL playground, which is a Chrome extension over here. But you can use any sort of postman or any sort of, client that you would want for your GraphQL. So it comes back with that is gives me the, sortable attributes, the label and the numeric values for those, it does, come back with all the full table, search items, category and visibility search and few of those that I have over here. So when it comes to, you know, searching the product search query, I mean, you can, you know, first run the product, attribute metadata to figure out what sort of, label items, you know, and the sortable items, are available. And then you can run through the product search to kind of filter them, for your products. Right. So this is the attribute metadata on the live service side. And then you have the second one which is the product search, which is again, on the live search, you know that the, the product search is on the live search service and it is available on the catalog service. And that’s the difference that I wanted to kind of highlight over here.

When you are on the live search, you know, you, as I said before, there are certain limitations, in terms of, you know, getting, you know, the product information, say for an example, custom attributes and stuff like that. So this endpoint, has certain limitation in getting you back, all the product related information. And that’s the reason we have, product search, which is on the, the catalog service endpoint.

And then it kind of gives you the, product complete product view in a way that, you know, it will.

So I just have it one over here if you can, you know, catalog service sandbox, the endpoint over here, if you see the difference over here.

You see under items, you know, instead of product, you see a product view over here, and then you, you have two different views over here. The simple product view and the complex product view, where your complex products are, all the bundled and group products and simple ones are simple ones and digital ones and stuff like that. So it narrows down to, you know, kind of more information, that the catalog offers when you use the catalog service endpoint. So this is no, on, on our, experience like documentation. It is being well explained, but what I wanted to kind of, you know, give highlights up on is the, the endpoints that we have today. And then, you know, how, those endpoints interact, on your luma and, you know, what sort of limitations do they have? So that’s on the GraphQL side of the things. I’ll move towards, presenting the, PLP widget in the popular, widget, the open source repositories that we have got today. Excuse me a moment over here.

Okay. I believe you should be seeing my screen. Yeah. Yep. Okay. All right. So the two widgets that we spoke about, the popover widget and the, PLP widget that you can see on the front end of the luma, and, you know, you this widget, you know, you can run it standalone. They are decoupled, you know, from your, 51ºÚÁϲ»´òìÈ commerce or in general, it works on a decouple architecture, meaning that, you know, on your headless implementations or on your, EMC side of the things, you know, this is, know this is going to be, the feature. Right? So in, you know, how until now, I mean, the live search did not have a way to kind of extend, the, you know, the popover, all the or the PLP widgets side of the things. But then with this being open source now you have, you know, the, you can basically, you know, extend, the popular and PLP widget to include additional stuff there.

So I just want to quickly, run through, the repository that I’ve got over here. Yeah. Just to give you a little bit of a background of myself, I’ve been coming, you know, with PSP and 51ºÚÁϲ»´òìÈ, ESPN, 51ºÚÁϲ»´òìÈ Commerce side of the world.

I was, you know, a few months back, I was not knowing anything about, you know, node. I’ve never worked on node before. Neither. I’ve worked on react. Right. So, this was new to me, and I thought, you know, it would be good to kind of give a small introduction, or, you know, on, on this specific webinar, if you are someone like muse coming from PSP, 51ºÚÁϲ»´òìÈ Commerce side of the world, and your back end developer, or, you know, possibly if you are front end, you might already be doing some of this stuff over here. But if you are back in developer, you know, working with BSP ended up commerce over the years. This might, be new to you, because, you know, the underlying technology is, different. But then, you know, I think, it’s not that, you know, difficult in terms of understanding if you get the basics right. So I just wanted to walk you through with some of the fundamentals, you know, with the product listing page widget over here. And it’s been well documented in terms of the, the section that we will be going through and some of the steps, that I’ll be walking, through while, you know, I’ll, I’ll share some of the experience that I’ve been, how did I get started with it? And you know, how, I’ve learned some of this right? So, basically, you know, as I said, product listing page for 51ºÚÁϲ»´òìÈ Commerce storefront using Live Search, kind of decouples the architecture. It’s a client side rendered, JavaScript widget. Right? The setup requires, if you go to the requirements of the set up, you will need to have node and npm, being installed in your local environment, with some specific versions over here, you can use nvm, which is a version manager. So, you know, you know, in the future, if you didn’t want it to switch between the versions, you can do that. Yeah. Or you can have, specific words in the latest world of node and npm being installed on your local, environment.

So, you know, one of the things that, if you’re someone like me who is coming from, you know, PSP and you know, that’ll be commerce side of things. And if node is something new for you, I would really highly recommend you to kind of, not, you know, do some fundamentals, side of how node, you know, node sort of an application works. And what are some of the fundamentals in order to run a node, application. Right. So, with that, the requirement over here is to kind of have a node version, an npm version being installed on your local, environment or wherever you, you would want that to be. And once you have node, no npm, you know, before that or after that, you would need to clone this repository. Want to clone this repository? The first step would be to run npm install.

So again, you know, this was pretty much new for me. I mean, yeah, this did not make sense for me from a, because I was coming from a different sort of a background. So npm install is nothing, but it kind of is a package manager kind of installs all this, dependency, that the widget is having. So once you kind of run through the npm install, you will get all the dependencies. So, you know, just to kind of correlate things from, from, you know, from the BSP side of the things, where we have composer and composer log file, you know, on, on the north side, you have, the package.json and, package locks, which pretty much works like the composer and the composer log files that we have today. The principal seems to be pretty much, the same where the package.json has all the, required packages and the dependencies, that the widgets required. Yeah. So once you kind of clone this repository, you run through the npm install. It would then, you know, generate a new folder within your repository called node modules. Right. It will download all the dependencies, you know, for your, widget within that node folder, node, module deposit. Node modules folder. Yeah. So that’s pretty much simple. You don’t really have to do anything. You just need to install node and npm, just clone the repository, run through npm install. You then run through a couple of other things. You have npm and run storybook, which is you know, the react side of the things, in terms of modifying those, or building, those custom, you know, styling related things and stuff like that. And then, you know, tailwind again, on the styling, side of the things, CSS and stuff. So these are all dependencies, you know, from, the node package manager that gets downloaded, as a dependency. And then you can make use of that, of those and then you have something called as the npm run dev, that you would be running through, which is, you know, when you hit the npm run dev, it will, you know, follow the instructions, that within the.

That within the, package dot Json over here, if you kind of open that, as you can see npm run. Dave. Right. So what kinds of does is it would follow the because we have run dev, it would follow the, you know, the command that’s over here, which is to run the web back, the server and then configure the map back over here. So this is being run behind the scenes. You don’t really need to know much, from that perspective on how things run behind the scenes, but, it would be beneficial if you want to kind of run through it and get some understanding on that. And, Webpack is, you know, a complete, sort of a solution to run, you know, sort of a application, you know, you can do the web server, which kinds of loads and, and, runs your application within the, browser, kind of maintains different sort of dependencies if you kind of compare it with this, early days of Ajax, where you kind of load your script before, you know, actually loading the index and stuff like that, and, you know, you have to shuffle down, your scripts and things like that. Web, Webpack would actually, you know, figure out, things around that. Yeah. So, that’s on the Webpack side of the things. Then, you know, once you hit the npm run dev, you know, things will get started. Your application would be loading, you know, on, on, on your localhost. If you’re running it on a localhost and on a specific what, this port is being, you know, you can configure this port, just in case it is being, you know, already being utilized on your local machine. You can, you know, run this, on a different port. I have, one, you know, which is, on, you know, on running. Right. I’ve taken the repository off, you know, run this on my local. I’ve been, you can log any sort of either you on 51ºÚÁϲ»´òìÈ Commerce Cloud. If your 51ºÚÁϲ»´òìÈ Commerce instance is on 51ºÚÁϲ»´òìÈ Commerce Cloud or your on premises, you know, you can, plug it, from, you know, from, anywhere, right? It is, the instructions that you have to follow and, that’s what you see next, which is about configured in various store details. So, again, all of those variables, the environment ID website go store queued, store codes to view code, the API keys. Yeah. Sandbox, versus the API, production one and, you know, there’s a specific, template, within this file template where you can put down this details. It will then connect with your instance, say for an example, my, the instance that I was showing, on my environment, I can, you know, connect to that and then, things would be, you know, rendered, based on that. Yeah. Once, you know, once you have this running, once you have the widget running on your local environment, the and next thing is that you will be customizing things, to your own, requirements, say for an instance, you might want to show products, the things, which doesn’t come, you know, out of the box today or anything, you know, in terms of your catalog that you wanted to, you know, customize and extend your help widget. Other than the one that comes out of the box, you kind of customize that to your own, requirement. And, once you have a good understanding of the widget, the widget, you know, as I said, uses, react, and then it uses the, preact, which is, you know, a smaller bundle version of react. And there is an example over here that has been provided, you know, in order to add a new button, to a product items. So these are some of the handy examples. You will find more examples, once you go to source and several other examples, it has been given, on how you can extend things. But they would all make sense when to kind of, have a good understanding around, node side of the things, react side of the things and, you know, using TypeScript, on several places. So, those are some of the fundamentals that you have to get into terms of, to become, you know, to get yourself comfortable in terms of extending the widget right? And, you know, once you kind of, you know, extended, you know, once you’re kind of satisfied with your customization and, you know, you’re ready to kind of deploy it on your, luma or elsewhere on your headless. Right? What are the steps that you need to follow? Right. So these are the steps in, you know, in terms of, you know, how you want to, you know, how you would be, building it and then deploying, you know, your, source and then how you kind of, you know, point that to, you know, render your, customized version of PLP widget on your luma. So these are some of the steps over here on how you can do that. So once you kind of, run through the build, it’s going to create a standalone file called searches. Within, you know, a this directory. So it’s just one JavaScript file. You know, that the build creates and that’s what you will have to, you know, put it on your hosting and, you know, you’ll just have to point your, you know, the hosting would then provide you with a URL. Then at step one, which you can access it through a browser, just make sure that you can access that JavaScript from your browser. And then, you know, it would be, matter of following this instructions, within your, the 51ºÚÁϲ»´òìÈ commerce, source code, you will find, gender live search module and then life search product listing module within that. There’s a file called EDC config dot XML. You would just, you know, would need to change the frontend URL to point it. The search for t, which the new build, which is your customized build, you just need to point that, within the front end URL and then, you know, replace the existing front end URL under the, you know, whitelist or the XML, PHP white list or the XML, as per the instructions. And your customized version, would then be. Yeah. Deployed, redeployed on your 51ºÚÁϲ»´òìÈ commerce store and you should be able to see your customized version of, PLP widget. Yeah. I think that’s a perfect place to pause here. Yep. I know I scrolling. I realized we were almost at the end. So I’ll let you finish up.

But yeah. Almost at time. I want to leave a couple of minutes for, Q&A. But before we jump into, Q&A, I want to first thank tap on for that very deep dive and pivot when we realized we couldn’t see the developer tool window. Thank you to everyone who noted that it wasn’t visible. So appreciate you guys all bearing with us through that. But that was a really great demo. I know I learned a few things here. So thank you again for that. And then second, I want to quickly mention, 51ºÚÁϲ»´òìÈ Summit. 51ºÚÁϲ»´òìÈ Summit is coming up on March 26th through 28th in Las Vegas. Some of the highlights include keynotes from 51ºÚÁϲ»´òìÈ and customer executives, strategy keynotes, including demos and deeper dives into some of our other solutions. Summit techniques, which provides, a sneak peek into some of the potential new innovations. And this year that’s going to be hosted by Shaquille O’Neal. So that’s definitely going to be excited.

There’s going to be hundreds of breakout sessions and hands on labs. They should be really interesting and definitely worthwhile if you can go check those out. And then of course, networking opportunities with other like minded professionals from all over the world. So, if you have questions about summit, I’m going to link out the, URL later, in the next page. But, definitely check it out. Reach out if you have questions. And check it out. It’s going to be great. So with that, let’s jump over to Q&A. We have a couple minutes. And let’s see. Okay. So we got a couple of questions that rolled in. I’m going to start with the first one obviously for you tap on how does live search work with content type like thank you CMS pages etc…

Yeah. So presently we don’t support content types natively, meaning that we don’t, you know, have index files or CMS pages on the license service side. You know, we don’t really index those stuff at this point of time. However, I think if you have the right skills, you can still index those custom content types using different methods in the existing product results with the other content types. Given that the popular is now open sourced, but then, you know, having it, from the live search side of the service side, from a, you know, once we kind of support the content types, would, you know, would be, full fledged solutions that, you know, I would be looking forward to. Great. Thanks. Next question. What are some of the upcoming new capabilities? The major focus for 24 is, you know, likely going to be on the smaller updates in order to eliminate the adoption blockers and make life search easier to adopt and on board, you know, saying that we still are considering semantic search with ML understanding for 24, which would reduce some of the pain points that we have today around the synonyms side of things.

Okay, great. Thank you. I’m actually going to switch screens here. Next question came from from William Penn Live search accommodate content on HTML pages. Or is it only limited to product searches? And if the latter is content search on the roadmap for large search. Yeah. So that’s exactly, you know, so we presently don’t support, you know, content types other than, you know, product is the only one that is being supported. CMS pages affect use and stuff like that natively. Live search doesn’t support today.

And you know, in terms of the roadmap for Live Search, you know, we don’t have any definite date at this point of time, one when, you know, life search out of the box would be supporting other content types like CMS pages in effect use.

But yeah, I would say that stay tuned on, you know, you should be hearing something soon from us. Yeah. Great. I think we have time for 1 or 2 more. Also want to bring everyone’s attention. We have a short answer question in the bottom of the box at the bottom of the screen here. If you have page blockers when choosing live search or over other search providers, pop in your answers there and just let us know.

If you have. And by and then next question is does Live Search provide boosting and burying feature.

Yeah. Life. So is this Floyd boosting embedding feature. So if you prefer to search merchandizing in the back end you know, once you have live search install, you go to Derby Commerce. Back in the screen that I was presenting, you know, just before the GraphQL playground in the back in the, dapper two here in there you will see an option called Search merchandizing from where you can set up different sort of rules to, you know, promote or demotivate, promote your products, boosting or letting in other terms, we do support that.

Great. All right. One more and then we’re going to wrap up. Does one seem to have GraphQL end points to retrieve statistics on events like pages, product views and cart, etc.? Yeah, we have a storefront, events SDK that you can refer to for all the shared services. So, you know, I know E-commerce Experience League, has a detailed guideline and SDK that you can configure and, play around with this for fun events. Awesome. Great. All right. I’m going to switch us over to here, this screen. So I want to quickly wrap up today on the screen we have a bunch of resources for you. In the web link section. You can see the link to our past recordings and experience lead experience link from Commerce and Coffee. We have another link to all of our upcoming events and the link to the summit site, as I mentioned earlier. So you also should see, the white paper that you can download with a lot of the resources that tap on mentioned today. So be sure to download that on your way out. And then of course there’s a couple of survey questions on the screen that we would really appreciate if you could, answer those for us today. If you have any questions, about today’s event, please reach out. And as a reminder, you will receive the recording of today’s event in an email from us in about 24 hours. So that’s all the time we have today. Thank you everyone for joining and for attending and bearing with us. We hope everybody has a great day, and we look forward to seeing what one of our next event. Thanks everyone. Thanks everyone.