Laravel Subscriptions
This episode is for members only

Sign up to access "Laravel Subscriptions" right now.

Get started
Already a member? Sign in to continue
Playing
05. Displaying plans

Episodes

0%
Your progress
  • Total: 2h 38m
  • Played: 0m
  • Remaining: 2h 38m
Join or sign in to track your progress

Transcript

00:00
We're going to create a relatively static plans page and then I'm going to show you how you can use the config that we've built to extract any information out if you want. That means that you can take the price out or any other information and display that instead of hard coding it. We'll keep this really simple because I'll let you decide how you want this to work.
00:19
The most important thing is that we can click to actually access and pay for a subscription. Okay, so we'll go ahead and create a new controller to work for our plans page. So let's call this our plan controller and let's go over to our web routes and define out a new route for this. Okay, so we'll create out a route here with the url forward slash plans. We'll
00:43
reference our plan controller and let's do things slightly differently here and instead of using an invocable controller we'll go ahead and use a controller that references an index method. Okay, so over to our plan controller let's go ahead and create out this index method. So we'll just create out a method called index here and let's return what we want
01:03
this view to be called. Let's just keep this really simple and just call this plans. We already know how to create out a template so let's go ahead and make out a view here called plans and that should just about do. Okay, so let's add this to our navigation. So just at the top where our other navigation links are directly after dashboard. I'm going to go ahead and hook this up to that
01:25
plans page that we've just created. We haven't given that a name yet but we can do that in just a second and now that we've done that let's give that a name. So let's call this plans and we should be good. So let's head back over click plans and we should just have an empty page. Okay, so I'm going to go ahead and create out a similar view to the dashboard for this but I'm going to use a
01:49
predefined template for this which you can find in the github repository. So we're going to go ahead and create out a page that wraps this overall app layout. So let's go over to our plans page and we'll change this over to our x app layout and then inside of here I'm just going to grab the code that you can find on the github repository and this just gives us the design that we saw from
02:10
the introduction. So once we've done that we should see something like this over on the plans page. We need to figure out this button which we'll do in just a second but obviously you can tweak this to do whatever you want. Okay, so first step let's just go ahead and change around some of the prices here. So for yearly this is going to be $120 per year and that should be good. Now let's figure out
02:34
these buttons. So with Laravel Breeze we have a bunch of components that this gives us if you've not used it before. So under resources, views and components you'll find all of these sort of buttons and primary navigation links, primary buttons. What we're going to do is we're going to take a primary button here but we're going to change this over and create a new component which acts like a link
02:57
just so we can reuse some of the same styles that we get with Breeze. So let's go ahead and create out a new file in here and we will call this primary link button dot blade dot php and let's go ahead and just paste in everything from this primary button. The only thing I'm going to do here is just change this over to an anchor so we can use this like a link. Okay, so now that we've
03:22
done that let's go over and we'll add a button which will eventually link through to our checkout. So let's start with monthly first. I'm going to change this button over to x primary link button and I'm going to give this an href because we're going to need to link over to stripes checkout. Okay, we'll do the same thing for here as well. So x primary link button and again we'll just set
03:44
the href in here to a hash. We should have something that looks a little bit nicer. You can see that links you to a hash. Once we get to actually linking this we will link it through properly. Okay, so the next thing that we're going to tackle is how do we make this a little bit more dynamic. We know that we are using our subscription config which has the name in here but how do we
04:04
access that information? What we could do is over in the plan controller we could just pass down some data here about each of the plans. If you were doing this in the database you'd be able to iterate through it so feel free to change this over. I'm going to show you how to do this if you want to stick with the config. So what we'd want to do is go ahead and take our config from that
04:27
subscription file. So that is going to be config and subscriptions.plans. Let's go ahead and just dump that out over on our plans page just to see what this looks like. So let's dump it out just up here. We call that monthly so let's go ahead and output monthly here and let's come over. Okay yeah so because this is an array we can't just dump it out directly but let's go ahead and just use
04:48
something like var dump in here to output that to the page. Okay yeah so you can see that we've got the monthly plan in here with the name. We've got the yearly plan in here with the name as well. So what we could do is go ahead and extract this out of the controller level. So we could say config subscription plans and we could add this to a collection. So we could collect this up and
05:11
then we could go ahead and get the specific plan at that key that we gave the name as. So remember over in the subscription config this is the key and using that we can grab this specifically out. Now it would work better if because we want to grab multiple plans if we cut this out and set this to a plans variable we could put this up here like this and just access that plan directly from
05:36
there. What that's going to do is it's going to give us all the information in this array of all of the plan details that we need. So what we could do now is over in our plan section we could get rid of this and down where we have our monthly plan we could output using the monthly array any of the details that we want like so and you can see we get exactly the same thing. The only
06:02
difference now is that when we change this over in our config it's going to reflect within our UI as well. So that's just an option. I'm just going to leave this here so you can decide but again a little bit later you might want to add these plans to the database to make it a little bit easier to iterate over them and extract the information out properly.

Episode summary

In this episode, we're setting up a static 'Plans' page for our app where users can see the different subscription options available. First, we create a new controller and a route for the page, making sure it's easy to access from our navigation. We're keeping things straightforward: just a simple view (using a starter template from the GitHub repo) with options to switch between monthly and yearly pricing.

To make things look better and follow the existing design, we tweak the prices and also build a custom button component based on Laravel Breeze's style, but as a link – this way, users will eventually be able to click it to start the checkout process.

Next, instead of hardcoding all the plan details into our view, we show how to pull the plan info straight from our app's configuration. This means if you ever update your plans or their prices in your config file, your plans page updates automatically – no need to touch the view! We walk through dumping out the config, accessing the array of plans, and wiring everything up so it's easy to work with whether your plans are coming from config or (later on) from a database.

This episode is all about building a flexible, maintainable plans page you can improve later, and hooking it up visually so users can see their options and, soon, get started with a subscription.

Episode discussion

No comments, yet. Be the first!