Introducing the Bagisto E-commerce Project
Hello everyone, this is Yamin and in this tutorial I'm going to show you how you can create a complete e-commerce project using a package called Bagisto. So here you can see an e-commerce project and you can create this e-commerce project really easily using a package in Laravel. Just like other e-commerce projects we have all the options over here: search option, the cart option, the checkout option, the login/signup option over here.
And if you go down here you can see new products, then you'll see featured products, all product section over here. So this is a complete e-commerce project. And let me just show you the admin panel. So this is the admin dashboard. So over here you'll be able to check everything that the e-commerce project needs. So here you can see the sales section and here you can see the catalog section. So here in the catalog section, here you can see product and here you can see the create product. So once you click this you'll be able to add a new product. Then we have the customer section where we'll be able to see all the customers and their orders. Then we also have the reporting option, how many sales there is, how many customers, and how many products do you have. And we also have the setting option. We also have the dark mode available as well.
So this is a complete e-commerce project. So I'm going to show you how we can create this project using Laravel in just 10 minutes. And I will also try to explain everything step by step from the very beginning. So let me just close those two tabs from here and here you can see Bagisto documentation, and this is the installation part. So I'll give this link in the description so that you can just check it out.
Starting the Bagisto Installation
Right now, I'm going to show you how you can install this package in your device. So here we have the first command: install Bagisto using Composer. So in order to install that we need to write a command composer create-project bagisto/bagisto. So it will just directly create a project for us and the project name will be Bagisto. So I'm going to copy this command, composer create-project bagisto/bagisto.
So Control-C, and let me just go to my file explorer and let's say I create my project over here in my new volume F. So let me just open a command prompt here. I'll search over here cmd, press enter. Let me just zoom in. So here I'll just directly paste the command, this command, and after that I need to press enter. So it will install required files for creating our Bagisto e-commerce project. So it may take some time. So while it is installing let me just show you one thing, and that is some people may face an issue while installing Bagisto that I just faced. So I'd like to show that to you.
Enabling the Required GD Extension
So Bagisto require an extension called GD. So for a lot of people's case, that extension GD may not be enabled in the XAMPP. So for it, what you need to do is that, let me just show you. Let's go to my XAMPP. So here you can see my XAMPP over here. Let's go inside and then we'll go to the PHP folder. So here you can see PHP folder. And inside PHP we have php.ini, which is this one. Here you can see this is php.ini file. So I'll just right click over here, then open with, let's say Notepad. And here I'm going to search for, let's say Control-F, and here I need to search for this one, 'gd', then press enter.
And here you can see extension GD. So normally what will happen is that you will see a semicolon over here. So what you need to do is that you need to remove the semicolon, okay? So you must have this extension GD enabled while you are installing Bagisto. So we can just close this because my extension GD is already enabled. So right now, let me just check, it is still installing. So right now I'll just pause the video. So here you can see the package installation is complete.
Configuring the Database Connection
Right now let me just close this and let me just go to the project directory, new volume F, and here is the Bagisto project that we just created. So let's go inside and we need to open another command prompt in the project directory. So we'll search over here again cmd, press enter. And let me just zoom in. So right now we already just installed a package called Bagisto. So we need to run this command right now, but before that, we need to set up our database.
So for it, what we are going to do is that we'll just open our project using Sublime Text. And here we'll click file, then open folder. And over here we'll go to new volume F, and our project name was Bagisto, this one. I'll click on Bagisto then select folder. Let me just minimize it, close the previous project. So over here we just directly need to go to the .env file. We click .env and here you can see DB_DATABASE. So we need to give our database name. Let's say our database name will be by stop. So username for my case will be root, password will be null and this is not needed right now, okay?
So we can just save this, Control-S. And let me just open my XAMPP. Apache and MySQL, start. So let's go and go to our phpMyAdmin. Click phpMyAdmin admin. So right now currently we are in our PHP MyAdmin. So here you can see the new option. We'll click on New and we'll create the database and the database name was Bagisto, that we just gave over here. So we'll just say over here Bagisto and then click Create. So the database is created.
Running the Bagisto Installer & Serving the Project
After creating the database we can run our this command, which is php artisan bagisto:install. So I'll just copy this and let's go to our Command Prompt again, paste the command, and press enter. And there you can see a lot of database tables are migrating in our project. The link also created over here with the public, with the storage folder. And there you can see the installation is complete.
And right now, here you can see some warning that app time zone, and here it is mentioned that the time zone we should mention Asia or Kolkata. And the currency we should give USD. The database name should be Bagisto and username and password will be depending on your device. So right now, let's go and run our project. So in order to run the project, all we need to do is that we need to say over here php artisan serve. And there you can see at the top, it is showing us that the admin username is [email protected] and password is admin123, which you will also find over here. You can see in the website, you can see email and password for admin login. So right now our project is running over here. So let me just copy this control C and paste it in our browser. Press Enter. So there you can see this is our project that we just created. Everything else is working properly as you can see, we have everything.
Accessing the Admin Dashboard
So right now, let's go and check our admin panel. So in order to go to the admin panel all we need to do is that we need to give over here /admin, then press enter. So it will take us to the login page and there you can see the sign-in page. So here we're going to say, let me just copy it from here. [email protected], we'll paste it here. And password was this admin123, Control-C, Control-V. You can see the password from here as well. Click sign in. And you can obviously change the email address and password also, you login as admin. So currently, we are in our admin dashboard. So you can see the dashboard is black. We can make it white. So there is two modes, dark mode and light mode. So let's go and try to add a product.
Creating a New Product
So over here we have the catalog option. If we click catalog, and there you can see it is showing us a few options: product, categories, attributes and families. Let's just click product. And by default at the beginning it will show this product. And here you can see create product option. So if we click create product, we need to give a type. Let's say sample, default SKU, just a random number let's say. And click Save Product. Once you click save product, it will take you to a different page where you'll be able to give the product details. Let's say product number, random things. And let's say product name is Shirt. This will be the URL key as well. No tax category. Let's say none. Color will be black, size is XL, that's my size. And brand will be... Okay, there we need to add the brand over here. We did not add any brand. So a short description, let's just say shirt. Description, shirt. You can add meta title but we'll keep this empty. We'll only fill the required field. The price is required. So let's say price will be $70, cost is $50, and special price is $65, let's say. And we can choose the special price date, from which date to which date you want to offer this price. And we need to give the weight, which will be 0.5. Let's keep new, featured. Visibility, status, guest checkout, everything enabled. And quantity, we must give the quantity. Quantity will be let's say 10 on hand, whatever. And we need to add an image over here. So let's click over here 'Add Image' and let's choose this image. Click open. And we are seeing the image. We can add multiple images. Let me just add multiple images and let's choose this image, click open. So we have multiple images. So we can add related product, there's a lot of option but we are not going to see those. We will just directly click on 'Save product'. If we click save product, it will reload and there you go, product updated successfully. Let's close this. Okay, that image is not showing over here. Image is broken.
Fixing the Product Image URL
So what we'll do is that we'll go to our .env again and we need to find APP_URL. Which is this one. Here you can see APP_URL=http://localhost. So what we need to do is that, I'll just copy this, Control-C, and I'll paste it over here, Control-V. And make sure to remove this slash from here, okay? Just save this again, Control-S. You need to write this for APP_URL, okay? And do not give any slash for this. So save it and let's refresh again. And the image issue is fixed. And here you can see, if you want to modify it, we have this option. If we now click here, this arrow sign, this will take us to this page where we'll be able to update a product, save product, or let's just go back.
Customer Registration and Cart Functionality
So right now let's go to our homepage. So let's go to our homepage and let's see if this product is showing or not. So right now in our website if we go down here, you can see 'New Product', we are able to see our product that we just added. So we have all the options over here. We can add categories for each product. We can have different categories like for male, female, for kids, electronics.
We can see customers. Currently we don't have any customer data so there won't be any data over here. But once we have customers, we'll be able to see them. Okay, let's try to register a user. Let's click here and let's click 'Sign up'. Then give the username, let's say Yamin Shakil, email will be [email protected], password 12345678, and confirm password 12345678, and click 'Register'. And there you go, the account creation is successful. So we'll be able to log in here. Let's give the password and click 'Sign In'. And we are able to login as a customer. So right now let's try to add a product. So here we'll add this product, let's say. Click 'Add to cart'. Product is, item is added successfully. Here you can see, we'll click here. We'll 'Continue to checkout'. And then also we give the address and click confirm the order will be submitted. So right now if we refresh, we should be able to see a customer here. And there you can see, we can see a customer here. So everything over here is perfect for an e-commerce project.
Customizing Your Store from the Admin Panel
You can use this for your project and if you want to modify the design or make some changes in your project here and there, you can modify all the design over here as well. So for example, let me just go to our dashboard and here you can see the 'Configure' option. If you click on configure, then you will see a lot of option here from start to bottom. And let's just click 'General' option and here you can choose how the weight will be, it will be LBS or kg. Or let me just click the, let's say the 'Content' option. If you click content, here we have the compare option here you can see. So if you want to remove them, the wishlist option, image search option. There you can see we have the image search option, you can upload the image, you can turn them off. And you can also write some default CSS and JavaScript. So right now if I click 'Save Configure', and if we now refresh our project here, then you can see there is no image search option or wishlist option. So you can modify all of them one by one from here, you just need to check them out. If I start explaining everything it will take like one hour, so I'll just leave it up to you to check them one by one. So here we have the product option, allow guest. Can a guest save a product? I mean, can a guest check out a product or order a product? There's a lot of option like social media enable option. Just check them out by yourself.
So this is a complete e-commerce project. You can modify it from anywhere, and the design for the e-commerce project is really great. And it's simple but nice. So I think this is the best e-commerce project package in Laravel. So I think that you will like this package a lot if you just know how to use them and how to configure them. If you configure it properly you can modify every detail over here. So this is all for this tutorial. I hope you like this tutorial. If you have any question, just let me know in the comment section. And make sure to subscribe for more amazing packages that we have in Laravel. I will make more tutorials on Laravel amazing packages. So thanks for watching and I hope to see you in the future tutorials.
