On this Craft Cms lesson we install the Wishlist plugin, review the syntax and apply to our own templates.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
All right guys. So for the wishlist, it's just as simple as installing the plugin. So let's give it a try. I'm kidding. It's not that simple. We're going to have to do some work, so let's go ahead and look at the documentations. And so the first thing we want to do is create a wishlist.php under our folder config.
So we go back to the visual studio code. The very first folder is config. So we just need to create a new file called wishlist.php. And we're just going to copy and paste this little snippet of code over here. And these are just some simple settings that we can handle. For the app. Now we're going to see that in our control panel in a little bit, let's not worry about some of these settings because we want to try to keep it as simple as possible.
Once that's installed, we can head over to the settings and under plugins. You can see here we have access to documentation and settings, and we'll see that same exact settings that live on the wishlist.php file that you can toggle on and off, directly from here, all right.
The next thing we want to do is head over to our lists and notice we have already a list type created, so if we go over to wish or list type, sorry, we have wishlist, which is our default handle wishlist. And you can create as many lists as you want. In this case, I'm actually looking at the managing list. We wanted to create new lists directly from the front end. But what we're actually looking for is managing items because we have movies and games that we want to add, remove, update into our stuff.
Right here we can see the code that is required to add an item into our list. And it's simply having the value of a server link and you can see that here the value, so we're just going to copy this little snippet of code, and we want to open up our movie template because this is where we have that button.
Actually. Now that I see this, we have that in the include slide meta. So we want to open that one. And this is great because it's going to take care of both the movie details and the slide show.
Over here. We can find the button to add to my stuff, the same button that we created in Webflow. Let's go ahead and paste in that form. Just going to add a simple comment so that we can easily identify this button. Right. And then all we got to do is simply change this to a button instead of a link by changing the HTML element.
Button and then close the form. Notice how the token is also included that token is important because it won't let us do anything with Craft, unless it exists.
Once you preview that, you're going to see there's an actual field happening here. That's because we have the element ID as a text field. We want to make sure we swap that out to a hidden field.
Okay. Once we have that button ready. We're going to need to show or have a place, basically a template for us to display all the elements that we're going to choose from. All right. So I've already gone ahead and created a wishlist template and I've repurposed the tab system from our movie details page for accessing the different categories.
But before we do that, we want to check out the documentation in the wishlist to see what is the actual code to getting the items, we can see here that the script that wishlist is providing is relatively simple. It's a variable that calls in the list and then we have kind of like a it's outputting the list items and a for loop.
So thinking again, the same idea as querying items, it's the same concept. So I'm just going to paste in that code from the documentation. All right, and then we want to bring over the for loop that calls in the list item, because we have a for loop of all the items in the list. Now we need to identify which movie are we going to find to display on the movie card.
And that's where we need to create this variable that is going to be called entry. And we're just going to do the same thing. We're going to query only one single element from our database using the ID. So the parameter ID and one as the final output. Gonna do is pass on the element ID that the item has in our wishlist.
And we can do that by finding that information on that documentation. So you can see here on the wishlist, we can see items, how we can, what kind of variables we have access to from the wishlist. One of the variables we have access from the wishlist is the item object and the attribute element ID. This element ID is the same as the entry ID.
So we just want to make sure we pass that inside the ID parameter. So item.elementId because that's from the for loop that we have above. And now that movie card is going to work well whenever we had those movies. So let's refresh and there you go. All right, so let's go ahead and try it with another movie.
Let's click on, add to my stuff. If we go over to my stuff, you're going to see that it's now added in our wishlist. All right. So let's say we wanted to remove one item from the list. We're basically just going to copy the same button, bring it over to our wishlist. I'm just going to paste it right below the cart, just for demo purposes. We want to change the value to remove that's it. The label of the button we'll want to change it to remove.
And let's click refresh. There we go. So we can simply remove items using a, another button within our wishlist.
We can go back to our wet flow stylized button, you know, that looks a little bit better. We can export the code and simply add that little code or snippet of code into the movie card itself. Add in the class that we just created. So you can see here. What I'm doing is I'm simply adding that extra button directly from the wishlist, but I'm using an embed instead of an include.
And I added the block extra inside the movie card because that movie card is I want to keep it as clean as possible. And all I'm doing is I'm pushing any new snippet of code from an outside template. Once we refresh this and we have updated our CSS. We'll see a button, nicely styled. All right. And to finalize, we want to rename our wishlist of course, to just movies, because we will have another list type called games or shows.
And if we go over to our documentation in the wishlist, we can pass a specific list type on the button itself. So when we go to the button, we want to do that using an input field called the list type handle, and we just change the value to whichever value we want. In this case, I've added the value of course, to be movies.
Cause that's the name of that list. So all we have to do is create our list types and once we've done that, Simply make sure we use the correct value on each button.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS