#40 Make E-com Website in Laravel 7 | Products Attributes in Admin (II) | Create Add Attributes Form

In Part-40 of Advance E-com Series in Laravel 7, we will continue working on Products attributes module. From this video, we will start working on Add/View Product Attributes page in admin panel. For Products Attributes, we will add Product Size, SKU, Price and Stock. Like if Product is Red Casual T-Shirt then its product attributes can be like below :-

Size SKU Price Stock
Small RC01-S 1000 10
Medium RC01-M 1100 10
Large RC01-L 1200 10

There is a common page in which we will show Add Products Attribute form and at bottom we will show the products attributes that we have added so far for the product. In this video, we will create Add Products Attribute Page and going to show some Product Details like Product Code, Name, Color along with Product Image. Also, we are going to find and integrate Multiple fields Add/Remove script for product attributes.

1) Update products.blade.php file :-
First of all, we will update products.blade.php file to add product attributes link in Actions column. Also we are going to update all action links to fontawesome icons that will look good and attractive.

2) Create Route :-
Now we will create GET/POST Route for add-attributes in web.php file like below :-


3) Create addAttributes function :-
Now we will create addAttributes function in ProductsController and return product data that we will get from product id and return to add_attributes.blade.php file.

4) Create add_attributes.blade.php file :-
Now we will create add_attributes.blade.php file under /resources/views/admin/products/ folder and will show product details like Product Name, Product Code, Product Color and Product main image.

5) Search Google for Multiple Add/Remove fields script :-
Now we will search in Google for “add remove fields dynamically in jquery” so that we can add multiple attributes like multiple sizes, stock, price and there sku’s. It will save our time otherwise we can also build of our own as well.

We can take help from below website :-

Add Remove Input Fields Dynamically using jQuery

6) Update admin_script.js
Now we will update admin_script.js to add the jquery script from the website that we have found in last step.

7) Update add_attributes.blade file
Now we will update add_attributes.blade file to add all attributes fields Size, SKU, Price and Stock with Add/Remove link.

We need to update both add_attributes.blade.php file and admin_script.js vice versa so please watch in video..

8) Update addAttributes function :-
Update addAttributes function once again to get the posted attributes and check/debug in function if we are getting complete data.

In next video, we will continue and save products attributes in products_attributes table after adding some conditions.

Thanks for watching 🙂



Build A Site Info