2.7 Adding the “Pricing” Entries and Template
We’ll now go ahead and add four different pricing package entries to our site. Then we'll create a template to display them, outputting different code every second entry once again.
1.Introduction1 lesson, 00:51
2.Building Landing Pages With Craft CMS11 lessons, 1:15:44
3.Conclusion1 lesson, 01:43
2.7 Adding the “Pricing” Entries and Template
Hey welcome back to Building Landing pages with Craft CMS. In the last lesson, we just finished setting up all the back-end requirements for our pricing panel. In this lesson, we're gonna set up an entry for each one of these pricing packages and then we're gonna create our template for this pricing panel. So, let's jump into our back-end. We'll go into entries, and we're going to create a new home panels entry, From the entry type. We're gonna select pricing. And there's all the fields, that we just set up in the last lesson. Now ,we're ready to start adding in all of the content that we need. So we'll speed things up by doing a little bit of copy paste. So the first plan is the personal plan. Now in order to get the same icon, you can either inspect the code here and look for the name of the icon here. So then, you will be able to copy and paste. Or if you don't wanna do that, you can go through the template in our studyguide.html, look for the section with the ID plan. And then go down here, and you can see the icon that's used for each one of the pricing packages. So then we'll add that in here. For currency, we're just gonna leave that blank, because when we code up the template, I'm gonna show you how to complete a fallback default. The price we need to set to 29. And then the features, we're gonna copy all of these. Paste it into the rich text field. And then just get rid of that space at the beginning. So, that is our first one done. Save that and on to the next one. Choose the pricing type, we need a small team, You gonna inspect that icon and this one is fa-users, plural. The price is $39, And then a copy in now feature list. There we go. We'll save that one too, the third package. Same thing again. Let's get this out of the way. Copy everything over. See what the icon is. If a bank, Price is 49. Copy the feature list. And save, and then the last one. Corporate. The icon is fa-briefcase. The price is 59. And then we'll get our feature list in. And let's save. So now we've got all four of our entries there, and we're ready to move on to coding up our template. So we'll head into our templates folder, and create another new template. We'll call this one _pricingPanel. And open that up for editing. And to start with, we're gonna go into a static HTML template. And we're gonna copy all the HTML for the entire panel. So that's the section with the ID plan, which grabs the whole lot. Right down to where it says end plan, then we drop then we'll drop that into our new template. Now we need to figure out which elements of this code we need to repeat for every entry, which elements we need to repeat maybe every second time, and which elements don't need to repeat at all. So we'll do that by inspecting the code on the static version of what we're working with. So if we look here, we can see that there are a couple of things that only need to be in there once. So the section with the ID plan, only need that once. This div container, we only need that once. This title section, With this text here, is also only needed once. And if we keep working through these elements, there's another div in the class that's also, you can see, is only needed once. Here though, we start to get into another section of code that is repeated. So if you have a look at this div here with the class col-md-6, this is used twice in this panel. And that's so that as you shrink down the window, the panel can collapse itself into two rows of two columns. So we're gonna need to make sure that we have this repeating itself twice. We're gonna do that by using that divisible by function that we used in the last lesson. For the first entry, we're gonna have these opening divs col-md-6 and row. And then every second entry, we're gonna close those two divs. Then inside that, this is the code that's gonna need to be repeated for every single entry. And you can identify it by looking for the class price table. So we're gonna make sure that this HTML repeats for every single entry. If that doesn't make complete sense yet, don't worry, because we're gonna be stepping through all of that coding and that's all gonna make sense as you're putting the code together. All right, so back into our HTML, and we know from what we just looked at, that this HTML here only needs to be in once. So our for loop that we used to start outputting our entries, needs to be inserted here after the first div that has the class row. So just like before, we're gonna say for entry in, and then we'll dig into craft.entries.section. We want something from our home panel section. And what we want is an entry type, And we want the entry type pricing. Let me just set up our syntax highlighting again or I said that is the for loop that we want. Now we just need to go down, all the way down here and finish a for loop. Right at the bottom here, before these last two closing divs, and this closing section tag. Now, let's organize the code that we need to have be output for every single entry. And as we learnt when we went through and inspected the code in a static version of this, what we need is this HTML here that starts with a div that has the class price table and it ends with this comment here, price table. So let's just copy that, we're gonna scroll all the way back up. And we're gonna add this code again, just inside the for loop we just created. Now, we're gonna replace this static content with dynamic content that we're pulling in from our craft site. So first up, this is the class that determines what icon is displayed at the top of each entry. So we're gonna replace that with entry.fontAwesomeIcon. This is where our entry.title goes. We're just gonna skip the currency symbol for a second, we'll come back to that shortly. The price we replace with entry.price. And then this entire unordered list can be deleted and replaced with entry.featureList. Now up here, with our dollar sign here, we're gonna do something a little different. We're gonna include a default to act as a fallback, so like normal, we put in a pair of curly brackets. We're gonna add entry.currency. And if the entry's currency field has been filled in, that would be output. But then we're gonna add a space and a pipe symbol to say, and then we're gonna say default. Then we'll add "$". So this basically says, if this has a value, output it, or fall back on the default of $. And we're also gonna add the same thing for the icon. If that doesn't get filled in, then we're gonna have it output the generic looking icon that we chose earlier, which was fa-arrow-down. So, that's all the code that we need for every individual entry. Now we need to set things up so that the first and third entry have the two opening divs that we need, in order to allow the layout to collapse down to two rows of two columns. And then we need to make sure the second and fourth entries close those divs off. And we're gonna do this by checking if loop.index is divisible by 2 or not, just like we did with the last panel. So above the code that we just added in, we're gonna add in those opening divs for the first and third entries by checking if loop.index is not divisibleby(2). And then we're going to say endif. In here, is where we need to put our opening divs. So if we just, we're gonna make a bit of space under here to separate the code that we're keeping from the code that we just added in, we copy and paste. Here, are the two opening divs that we need. So we're gonna copy those, and we're gonna put them inside our if check. Now, we need to do roughly the same thing to close those divs off. But we need to do it after this code. So just copy that, paste it down here. This time though, we wanna make sure that loop.index is divisibleby(2). So then the code name here, is only gonna be output on the second and fourth entries. And this time, we scroll down. These are the closing divs that we need. So we head back up here, and add that inside our if check. And then, we can highlight all of this code that we copied over earlier for our reference. Everything all the way down to the endfor line and just delete that. And actually, we're just gonna fix up one quick thing that's a little messy. You can see here, we have quotation marks wrapped around this code here and you should generally not use two lots of quotation marks. So to make that a little neater and a bit more correct, we'll just replace that with single quotes. All right, so that's the pricing panel template finished. Now, we just need to load it up into our index template just the same way that we've been doing so far, and we'll change that to pricing. And now let's see what we've got. And there we go, so that is all perfect. We've got our title and description here that we left in just hard-coded. And then we've got each one of our four pricing entries is showing up. If we downsize the window, that collapses properly. So, we've got the correct code being output for that. And it looks just like, Our original pricing panel in the static HTML template. So now the only two panels that are left, we have what we're gonna call footer one and footer two. So in the next lesson, we're gonna do the back-end set up for the footer one panel. I'll see you there.