Hi, I'm Katja from Zurich and some weeks ago I realized a little expert search integrated in a Plone Classic site and I would like to show you how you can achieve this. I've already opened my Plone site with a welcome page and I integrated a little

experts, Lisa Meyer, John Sommer. You see two examples and I want to have a search field and I want to filter per region. So how can we do this? Everything we do now, we

can do in one Plone add-on. So we start creating one. You have the Plone command line client

installed and you create a new Plone add-on, greenthumb expert search. You change to the directory and you add the Svelte code skeleton. This is a good point to start and then you

answer the questions, you name your Svelte app expert search plus and you change to this created directory named expert search plus in the Svelte source code directory.

You install the Svelte app and you start it with npm run dev. And then the Svelte is already running on port 10,001 and looks like this path here under the information

where you can find some more information about Svelte. And then we will build step by step this form with displaying the search results. And we start with the form. And

for this form, we create one file expert search Svelte. The file name already says

that the component we are now building has the name expert search, which we will later on integrate in our Svelte app. And this Svelte app we integrate in the home page of the Plone site. So we will build a simple Svelte component here. We have in Svelte

always three parts. First some JavaScript code, then the markup. And later on we will theme a little bit, then we will have a third section style. Okay, and this what's now

highlighted is our form. We have an input field here. And we have the region buttons for filtering per region. And what you see here is that we bind the input value to

a variable search string. And this binding means that our variable here, that search

string defaults to an empty string is updated as soon as the user types in a search string. So if you're familiar with React, this is a little bit like a component state. So

we have our search string and we have, we define another variable region. And this should be set by clicking of the user to a region button. He wants to filter per region, wants to see experts only from one region. So we have here our button and we have a click

handler here. And the click handler handle click region is defined above in the script part here. And the click handler does not explicitly call a fetch of data, but it only sets the

component state region. Same as the what happens when a user types in a search string. So we have our component state and this we use to fetch the data. So I add

in the next step a function which can fetch data from the backend, in this case our clone site we are in. Before I want to show how you can integrate this simple

form of a component. The main part, I cannot find the right word,

is the Svelte app. You can find it in the file app Svelte. And this is if you start with Svelte's skeleton code, you have a short script section and you have the main part where you can include your components that you build. And now we will only include our expert

search component. And when you now start Svelte, you will see additional to the welcome text that you will see the form for the input field and the buttons.

And then the next step would be, so this would look like this. And before I start with the fetching asynchronous function, here's one thing that is also

interesting and very essential, typical for Svelte. These are simple variable declarations but they act as a component state. So you can display them and they are automatically updated.

So if I want to show under the form information what the user typed in, which filter you selected, I can write something like this that we are showing later on results for the search string

and a region. And this is our variable search string, our variable region.

And this is automatically re-rendered as soon as the component state changes. So if the user types in here, this info line will be updated instantaneously. So okay, next step.

The function that will fetch data from Plone, it will fetch by addressing the REST API endpoint search. So if you install the REST API add-on on Plone

and you have these default endpoints available, you can address the endpoint search. So I scroll down to the asynchronous function here. I call it get experts

and it takes two arguments, search string and region. And then I use the the fetch API which takes an address where it wants to fetch

request method. And the response, I take the JSON part and I save the fetch data in my component state variable experts. And then I can work with this.

I can add some more mark. I fill these cards and I make a loop over the list of experts here. And this is one single card where I display the expert data, last name, first name and so on.

And then if you have REST API add-on installed, you will see the

you are ready to search. And then you can see something like this. Here we can search for, for example, John or we can

filter by only winter tour or only parcel. And this is the standalone version from Svelte. If I say npm run dev, Svelte is started and I

can address the Svelte app by this address. And we have seen already the integration here, our clone site by, I recall it by integrating just the snippet and the

as we have our Svelte code in our clone add-on, the JavaScript gets loaded and Svelte

sees the snippet with the class expert search plus, which indicates our Svelte app and integrates the app. So we have a welcome page like this.

That we can also search like before. Yeah, this is the expert search and

and this is now running in development mode. For deploying, I will do a production build and just for information, the size of the production build is just 88 kilobytes in this case. If you make a little bit more complex Svelte a little bit more, but I think it's interesting

that it's in fact really a small code that you're loading in your clone site. And just one more thing, micro interaction. What I really like about Svelte that you

that it brings per default really useful help us to create this behavior here. What you see

flipping the card, they are scaled, they are popping up. So I skipped the part where I define a behavior with fields for the expert. If you're interested, you can find the script online

and read the parts. It's just left to mention that there is very good information, very good tutorials about Svelte. You can find the official website svelte.dev. There's an excellent training from Maximilian Schwarzmuller.

And there are also Mozilla tutorials about Svelte. So thank you for listening. See you. Thank you.