Laravel 8 E-Commerce - Add Attribute Option on Add New Product Page

hi everyone welcome back to the laravel 8 e-commerce tutorial in this video we are going to learn about add attribute option on add new product page so let's see how can we add attribute option on add a new product page you can see here this is the all attribute page and here there is one product attribute which is color now let's add one more attribute here so just click on add new and add here the attribute size now click on submit and now if i click on edit all attributes you can see here there are two attributes color attribute and size attribute okay now go to the all products page and now just click on add new and you can see here this is the add new product page now here after this sub category let's add here our attribute option okay so for that uh first of all let's create a migration okay so switch to the command prompt and just stop the running application so just press your control plus c clear the screen and now let's create a model and migration so for creating the migration just right here php artisan make and right here the model model name attribute attribute value this is the model name and for migration just add here dash m now press enter okay model and migration created now switch to the project and let's open the migration so just go inside the database directory then migration and from here let's open this one create attribute values table migration okay this one and inside this migration let's add here some column so first add here the column which is attribute id dollar table data type begin teaser and column name attribute id okay and set here the unsigned and the label okay and then dollar table another column which is value data type string and column name value okay and also add here the product id column so right here the table data type big increaser and column name product underscore id all right and add here the unsigned and also 11 this one and after this just sit here the foreign key so right here dollar table arrow foreign okay and then add the other column name so first set the foreign key for this column name so just copy and paste here add here the references references okay inside here arrow references and column name id of attributes table okay so just write here attributes attributes product attribute channel this one okay so just copy and paste here product attributes uh and also here change the column name product underscore attribute underscore id okay this one also change here and now just add here the on delete casting all right now add here the foreign key for the product id so right here foreign and column name this one product dress code id arrow the references on id on table name products okay and set here the on delete cascade all right now save this migration and let's migrate this migration so switch to the command prompt and just type here the command php artisan migrate okay now press enter all right migration done now run the application so right here php rt107 all right now switch to the project and let's open the admin add product uh component class file okay so just go inside the app directory i have directory then http livewire admin and from here let's open this one admin add product component.php file this class file and inside the inside this class file just go inside the render method and after this just fetch here the product attribute so just right here just write here p attributes attributes is equal to product product attribute this model name colon colon all all right and now just return this p attributes to the view file so inside this array add here comma then p attributes arrow dollar p attributes okay now save this file and now let's open the admin add product component view file so just to inside the resources directory views uh livewire admin and from here let's open this one admin add product component.blade.php file okay and inside this file you can see here this is the subcategory select control so after this sub categories select control let's add here a select control for attributes okay so here [Music] let's copy this one so i'm just going to copy this tip and paste here and change here the text label and just write here product attributes product okay and here inside the for each just copy this one the attributes and paste here as be attribute okay now just copy and paste here and also paste here here is id and here display the name and just remove this validation okay and [Music] change here the text select attribute now go to the class file and here let's create some properties so after this just write here uh first create here property dollar attr okay for attribute selected attribute so just bind this property with this select control so right here a double tr this one and okay now save this file and here let's create three more properties so write your public dollar inputs and this is the array another property which is attributes array attribute array like this and another property which is attribute address for values all right now save this file and uh first of all let's check this select control so switch to the browser and if i refresh the page you can see here the product attribute select control and inside this electron code there are two proper attributes first is color and second is size now let's create here a add button okay for adding the attribute to the product so after this just here and let's add here add a button okay so go to the view file and here after this div just right here call md 1 and make this column size three okay and this is one and inside this tip just create first button so right here button type is equal to button and add another class btn vtn info and just close this and add here the text add okay now save this and if i refresh the page here you can see here the add button okay after just after the select control all right now uh go to the class file and here after this mount method uh let's create a function for adding the attribute okay so if i select color and when i click on add just create here a text control for getting input for color okay so just write here public function and function name add and inside this what is this add and inside this just right here first check here if not in array this is your function and just check here if note uh dollar this arrow this value attribute a double tr is not exist in this attribute area okay this array internal this arrow attribute arrow attribute underscore array this one if not exist this value is not exist inside this area just then execute this this this line of code so here have you had a underscore push and just push here the attribute value inside the inputs okay so just right here dollar this arrow inputs and push here the value which is inside the attribute draw the a double tr inside this and now also right here here opposed dollar this arrow attribute array this one and just push here the value dollar dollar this arrow a down here this one no taller here like this okay now save this file and let's copy this function name and here inside this button add a button just right here wire colon click dot prevent is equal to this add function okay like this now save this file and let's check again so switch to the browser and refresh the page and one more thing uh after adding this for creating the input control text control just right here after this steve after this closing div just add here the for each and inside this for it just write here dollar inputs as key arrow value and here let's copy any text control so input text let's copy this one okay so just copy and inside this porridge just paste here now for displaying the label just right here curly bracket dollar p attributes attributes where column id is equal to dollar attributes array okay i attribute this one this property and inside this just pass here the key value dollar key and then add here the first and just access the name okay and also remove this placeholder and just copy this and paste here inside this placeholder and remove this validation okay and here uh for binding the property just right here in wire column model is equal to attribute value this one this property inside the curly bracket dollar new value okay now save this file and let's check this so switch to the browser and just refresh the page okay now select the attribute let's select the color attribute and if i click on add you can see here the input text field for the color and if i select the size and just click on add you can see here the size control size input text field okay now let's add here the remove button for removing the input text field so for that go to the view file and after this just add here a tip column md one and make this column size three and here let's add a button so right here button type is equal to button and class btn btn btn denzer and vtn small sm okay and add here the text to remove now save this and if i refresh the page just select any attribute click on add and you can see here the remove button okay now let's create a function for removing the control so go to the class file and after this function just create another function so right here public function and function name that's the function name is remove and inside this just pass here the attr this one the general argument and just write here just use here the unset method and set this one and inside this just pass here download this arrow inputs okay and inside this just pass here this one awt okay and now let's copy this function name and go to the view file and from this button just add here the action wired column click dot prevent is equal to this function name and inside this function just pass here the value bracket then dollar key okay q value now save this file and just check this so let's refresh the page now select the attribute color click on add and if i click on remove you can see control has been input text field has been removed okay all right now let's uh add the code for saving the attribute inside the product okay so just go to the class file and in this one side the add product function and after this let's add here now first idea the porridge for each dollar this arrow attribute values this one attribute underscore value this one and just close here the forage [Music] like this now taller let's create a variable here of value is equal to use here the explode method and add another separator comma then dollar this one all right now another add here another for each and inside this just write here a values this one dollar your values as dollar value and instead inside this just right here dollar attribute attribute value is equal to new attribute value this model name okay and then dollar attr under school value and just add here the attribute id and preview underscore id which is dollar key and then set here the a value this value okay so inside the value now just write here interval tr underscore value arrow value is equal to dollar value this one here and after this just sit here the product id so right here this one product underscore id is equal to dollar product arrow id okay this object product object and after this just call here the save method so right here this one okay now save this file now it's done so let's check this so switch to the browser and okay so let's check this so switch to the browser and just refresh the page and now let's add a create a new product here so just add here the product name so just write here the product name new test product attribute okay and just copy this and paste inside the short description sort of description enter here the description description here regular price let's say this one 590 90 and selling price five five zero sku dc this one in stock not featured quantity 11. browse the product image so select any one now select the category okay and now select the attribute product attributes so first select color add color and add here the some colors so just write the color name red and separate it with comma okay red green uh black okay and now add here the size attribute and let's say size is 24 32 43 and 50 okay now click on submit uh column note found attribute id okay here is the mistake so what is the column name let's check the column name first so [Music] inside the database directory database migration and column name is this one product underscore uh attribute underscore id this is the mistake and column name so just write here this one all right now save this and let's check one more time so just replace the page now enter the product name another test attribute product okay copy and just paste here i had here the regular price 700 sale by 600 650 sku this one and quantity 11 and the product image now select the category product attribute add set here the color red green black instead of blue now set the site 24 32 43 and 50 okay now click on submit and this time you can see how the message product has been created successfully if i click on all products you can see here the new product okay and now let's check the attribute value inside the table so just go inside the phpmyadmin now go to the phpmyadmin and just open the database laravel at e-commerce tv and browse the table attributes value which is this one click on browse and here you can see the product attribute id and this value okay and here is the product id so in this way you can add attribute option on add a new product page so that's all about add attribute option on add new product page so thanks for watching this video and if you still have any kind of question you can ask me in the comment box don't forget to subscribe my channel thanks for watching

Channel: Surfside Media

Views: 1,166

Keywords: How, to, Program, laravel (Software), laravel, laravel v8, laravel 8, laravel project, laravel setting up, laravel v8 setting up, laravel v8.0, v8.0, laravel 8.0, laravel 8 playlist, laravel 8 tutorial, laravel tutorial, laravel 8.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, laravel8, laravel 8 ecommerce tutorial, laravel 8 ecommerce, ecommerce project in laravel 8, laravel 8 ecommerce project, add attribute option on add new product page

Id: 8Udlzx5dRM0

Length: 28min 39sec (1719 seconds)

Published: Sat Oct 09 2021