Dynamic Route & Advanced Models

 Add a Unique Identifier while saving

this.id in save add this in entire Product class

Now we generate an unique url whenever someone clicks on it

Now,lets see that sure path actually exists so that user can go there.

 

 It is now showing page not found bcoz we have not assign the route.

 Now' lets go to routes and folder and shop.js and add the selected route.

Few things to note

1) To create dynamic route use :productsId .So it can support any value on that part

2) Here you notice that we have delete route below it as well but it will never reach there as dynamic route is above it

3) To ensure that delete route works , put it above dynamic route so that it can be accesed first before going to dynamic route section. Put specific route always before dynamic route.

SO ORDER MATTERS 

Next add the controller for the route. Plz note we have to extract same variable which we have assigned to the route dynamic section

 

 Now that we have got the id we can use the product model to interact with the product and than use view to render the view

 

 

 1) We have parse the content so it will be array of products

2)all product contains id

3) filter out the product and wrap it in callback. Wrraping it in callback made it a synchrnus function.

Know more about it. very important tip.

 Now in the controller we are passing everything inside callback so that it can return after performing async fn

 

Now we have created the view. We need to add the view now as well

 

 We are adding the pageTitle before hand because that's how we defined it in head section

 However we are still getting an error and that's bcoz we havent setup active link path

 So we added path thing

 Its working now..we also add to cart which skiiped I

 Passing Data with POST Request

 We now added Add to Cart and an hidden input with value of product Id

Now lets assign the route to the Routes and add controller as well.

 Now in the controller in we have add PostCart controller

We have also added the controller in the routes and assignes the route

 Since we have to use add to cart in multiple page so we have created an incldue for it itself

 

 and than we have added that include that include in all desired places

 We have an error however. it is because we cant use include inside for loop and get the varibale inside it. To do so we again write the variable which we have done above.

However, we dont need to do inside product-detail page as product is available globally there.

 

SEE REST OF THE TUTORIAL WHEN REQ


m

Comments

Post a Comment

Popular posts from this blog

Form Part 2

App.jsx import React , { useState } from 'react' ; const App = () => { const [ Name , setName ] = useState (); const [ Pass , setPass ] = useState (); const [ seename , seename1 ] = useState (); const [ seepass , seepass1 ] = useState (); const inputEvent = ( event ) => { setName ( event . target . value ); }; const inputEvent1 = ( event ) => { setPass ( event . target . value ); }; const onSubmit = ( event ) => { event . preventDefault (); seename1 ( Name ); seepass1 ( Pass ); } return ( < > < div > < form onSubmit = { onSubmit } > < h1 > Hello { seename } { seepass } </ h1 > < input type = "text" placeholder = "Enter your Name" value = { Name } ...
Read more

Event mini project by Thapa#33

 Index.jsx import React from 'react' import ReactDOM from 'react-dom' ; import "./index.css" ; import App from "./App" ; ReactDOM . render ( < App /> , document . getElementById ( "root" )); index.css * { margin : 0 ; padding : 0 ; } div { width : 100% ; height : 100vh ; background : rgb ( 221 , 39 , 221 ); display : flex ; flex-direction : column ; justify-content : center ; align-items : center ; } button { padding : 12px 20px ; background : #9b59b6 ; color : white ; border : 2px solid #ecf0f1 ; outline : none ; border-radius : 5px ; text-transform : uppercase ; cursor : pointer ; } app.jsx import React , { useState } from 'react' ; const App =() => { const Purple = "yellow" ; const Old = "Click Me" const [ bg , setBg ] = useState ( Purple ); const [ name , newName ] = useState ( Old ); const bgChange =() => { let ...
Read more

De-mystifying 'this' keyword of Javascript

 Hello today I will be talking about 'this' keyword of javascript.It is one of the most confusing term of javascript. Since it is quite a confusion thing I will be compiling stuffs based on the materials I have learnt from the internet so as to help myself in the future. 'this' keyword can be considered quite the literal this word is English alphabet atleast for the initial understanding. Let's consider a main table of a house. It will be termed in js langauge as this.table = "main table" If we console log window.table or this.table than we will be considering the main house's table console.log(window.table) //main table Now let consider the dinning table of the house. It will be  this.dinning={ table:"dinning table"} If we want to call it will be  this.dinning.table // dinning table   Now let consider a private room and in this case it will be a function and if we want to use there we can use as mentioned below let johnsroom = { table:'j...
Read more