[{"data":1,"prerenderedAt":763},["ShallowReactive",2],{"navigation":3,"\u002Ftasks\u002Fproduct-detail-page":31,"\u002Ftasks\u002Fproduct-detail-page-surround":759},[4,14],{"title":5,"path":6,"stem":7,"children":8,"page":13},"Api","\u002Fapi","api",[9],{"title":10,"path":11,"stem":12},"Category","\u002Fapi\u002Fcategory","api\u002Fcategory",false,{"title":15,"path":16,"stem":17,"children":18,"page":13},"Tasks","\u002Ftasks","tasks",[19,23,27],{"title":20,"path":21,"stem":22},"Building A Navigation","\u002Ftasks\u002Fbuilding-a-navigation","tasks\u002Fbuilding-a-navigation",{"title":24,"path":25,"stem":26},"Product Detail Page","\u002Ftasks\u002Fproduct-detail-page","tasks\u002Fproduct-detail-page",{"title":28,"path":29,"stem":30},"Product Listing Page","\u002Ftasks\u002Fproduct-listing-page","tasks\u002Fproduct-listing-page",{"id":32,"title":24,"body":33,"description":753,"extension":754,"links":755,"meta":756,"navigation":99,"path":25,"seo":757,"stem":26,"__hash__":758},"docs\u002Ftasks\u002Fproduct-detail-page.md",{"type":34,"value":35,"toc":748},"minimark",[36,40,43,56,61,64,204,215,219,222,466,470,473,744],[37,38,39],"p",{},"You'll learn how to create a product detail page, so that customers\nare able to view a single product before adding it to the cart.",[37,41,42],{},"We can achieve this by in a couple of handful steps:",[44,45,46,50,53],"ol",{},[47,48,49],"li",{},"Define the route",[47,51,52],{},"Create a controller",[47,54,55],{},"Render a template",[57,58,60],"h2",{"id":59},"defining-the-route","Defining the route",[37,62,63],{},"First up, we need to define under which URL we can view a product.",[65,66,71],"pre",{"className":67,"code":68,"language":69,"meta":70,"style":70},"language-php shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F routes\u002Fweb.php\n\u003C?php\n\nuse App\\Http\\Controllers\\ProductController;\nuse Larasell\\Larasell\\Routing\\ProductDetailRoute;\n\nProductDetailRoute::get(ProductController::show, prefix: 'p')\n","php","",[72,73,74,83,94,101,130,155,160],"code",{"__ignoreMap":70},[75,76,79],"span",{"class":77,"line":78},"line",1,[75,80,82],{"class":81},"sHwdD","\u002F\u002F routes\u002Fweb.php\n",[75,84,86,90],{"class":77,"line":85},2,[75,87,89],{"class":88},"sMK4o","\u003C?",[75,91,93],{"class":92},"sTEyZ","php\n",[75,95,97],{"class":77,"line":96},3,[75,98,100],{"emptyLinePlaceholder":99},true,"\n",[75,102,104,108,111,114,117,119,122,124,127],{"class":77,"line":103},4,[75,105,107],{"class":106},"sbssI","use",[75,109,110],{"class":92}," App",[75,112,113],{"class":88},"\\",[75,115,116],{"class":92},"Http",[75,118,113],{"class":88},[75,120,121],{"class":92},"Controllers",[75,123,113],{"class":88},[75,125,126],{"class":92},"ProductController",[75,128,129],{"class":88},";\n",[75,131,133,135,138,140,143,145,148,150,153],{"class":77,"line":132},5,[75,134,107],{"class":106},[75,136,137],{"class":92}," Larasell",[75,139,113],{"class":88},[75,141,142],{"class":92},"Larasell",[75,144,113],{"class":88},[75,146,147],{"class":92},"Routing",[75,149,113],{"class":88},[75,151,152],{"class":92},"ProductDetailRoute",[75,154,129],{"class":88},[75,156,158],{"class":77,"line":157},6,[75,159,100],{"emptyLinePlaceholder":99},[75,161,163,166,169,173,176,178,180,183,186,189,192,195,198,201],{"class":77,"line":162},7,[75,164,152],{"class":165},"sBMFI",[75,167,168],{"class":88},"::",[75,170,172],{"class":171},"s2Zo4","get",[75,174,175],{"class":88},"(",[75,177,126],{"class":165},[75,179,168],{"class":88},[75,181,182],{"class":92},"show",[75,184,185],{"class":88},",",[75,187,188],{"class":165}," prefix",[75,190,191],{"class":88},":",[75,193,194],{"class":88}," '",[75,196,37],{"class":197},"sfazB",[75,199,200],{"class":88},"'",[75,202,203],{"class":88},")\n",[37,205,206,207,210,211,214],{},"It's required that you define a prefix for this route. In this case\nif you have product ",[72,208,209],{},"Classic T-Shirt"," the route will be\n",[72,212,213],{},"\u002Fp\u002Fclassic-t-shirt",".",[57,216,218],{"id":217},"creating-a-controller","Creating a controller",[37,220,221],{},"Next up, we'll actually fetch the product.",[65,223,225],{"className":67,"code":224,"language":69,"meta":70,"style":70},"\u002F\u002F ProductController.php\n\u003C?php\n\nnamespace App\\Http\\Controllers;\n\nuse Inertia\\Inertia;\nuse Inertia\\Response;\nuse Larasell\\Larasell\\Http\\Requests\\ProductDetailRequest;\n\nclass ProductController\n{\n    public function show(ProductDetailRequest $request): Response\n    {\n       $product = $request->product();\n\n       return Inertia::render('Products\u002FShow', [\n           'product' => $product\n       ]);\n    }\n}\n",[72,226,227,232,238,242,259,263,277,290,317,322,332,338,366,372,397,402,430,448,454,460],{"__ignoreMap":70},[75,228,229],{"class":77,"line":78},[75,230,231],{"class":81},"\u002F\u002F ProductController.php\n",[75,233,234,236],{"class":77,"line":85},[75,235,89],{"class":88},[75,237,93],{"class":92},[75,239,240],{"class":77,"line":96},[75,241,100],{"emptyLinePlaceholder":99},[75,243,244,247,249,251,253,255,257],{"class":77,"line":103},[75,245,246],{"class":106},"namespace",[75,248,110],{"class":165},[75,250,113],{"class":88},[75,252,116],{"class":165},[75,254,113],{"class":88},[75,256,121],{"class":165},[75,258,129],{"class":88},[75,260,261],{"class":77,"line":132},[75,262,100],{"emptyLinePlaceholder":99},[75,264,265,267,270,272,275],{"class":77,"line":157},[75,266,107],{"class":106},[75,268,269],{"class":92}," Inertia",[75,271,113],{"class":88},[75,273,274],{"class":92},"Inertia",[75,276,129],{"class":88},[75,278,279,281,283,285,288],{"class":77,"line":162},[75,280,107],{"class":106},[75,282,269],{"class":92},[75,284,113],{"class":88},[75,286,287],{"class":92},"Response",[75,289,129],{"class":88},[75,291,293,295,297,299,301,303,305,307,310,312,315],{"class":77,"line":292},8,[75,294,107],{"class":106},[75,296,137],{"class":92},[75,298,113],{"class":88},[75,300,142],{"class":92},[75,302,113],{"class":88},[75,304,116],{"class":92},[75,306,113],{"class":88},[75,308,309],{"class":92},"Requests",[75,311,113],{"class":88},[75,313,314],{"class":92},"ProductDetailRequest",[75,316,129],{"class":88},[75,318,320],{"class":77,"line":319},9,[75,321,100],{"emptyLinePlaceholder":99},[75,323,325,329],{"class":77,"line":324},10,[75,326,328],{"class":327},"spNyl","class",[75,330,331],{"class":165}," ProductController\n",[75,333,335],{"class":77,"line":334},11,[75,336,337],{"class":88},"{\n",[75,339,341,344,347,350,352,354,357,360,363],{"class":77,"line":340},12,[75,342,343],{"class":327},"    public",[75,345,346],{"class":327}," function",[75,348,349],{"class":171}," show",[75,351,175],{"class":88},[75,353,314],{"class":165},[75,355,356],{"class":88}," $",[75,358,359],{"class":92},"request",[75,361,362],{"class":88},"):",[75,364,365],{"class":165}," Response\n",[75,367,369],{"class":77,"line":368},13,[75,370,371],{"class":88},"    {\n",[75,373,375,378,381,384,386,388,391,394],{"class":77,"line":374},14,[75,376,377],{"class":88},"       $",[75,379,380],{"class":92},"product ",[75,382,383],{"class":88},"=",[75,385,356],{"class":88},[75,387,359],{"class":92},[75,389,390],{"class":88},"->",[75,392,393],{"class":171},"product",[75,395,396],{"class":88},"();\n",[75,398,400],{"class":77,"line":399},15,[75,401,100],{"emptyLinePlaceholder":99},[75,403,405,409,411,413,416,418,420,423,425,427],{"class":77,"line":404},16,[75,406,408],{"class":407},"s7zQu","       return",[75,410,269],{"class":165},[75,412,168],{"class":88},[75,414,415],{"class":171},"render",[75,417,175],{"class":88},[75,419,200],{"class":88},[75,421,422],{"class":197},"Products\u002FShow",[75,424,200],{"class":88},[75,426,185],{"class":88},[75,428,429],{"class":88}," [\n",[75,431,433,436,438,440,443,445],{"class":77,"line":432},17,[75,434,435],{"class":88},"           '",[75,437,393],{"class":197},[75,439,200],{"class":88},[75,441,442],{"class":88}," =>",[75,444,356],{"class":88},[75,446,447],{"class":92},"product\n",[75,449,451],{"class":77,"line":450},18,[75,452,453],{"class":88},"       ]);\n",[75,455,457],{"class":77,"line":456},19,[75,458,459],{"class":88},"    }\n",[75,461,463],{"class":77,"line":462},20,[75,464,465],{"class":88},"}\n",[57,467,469],{"id":468},"creating-a-template","Creating a template",[37,471,472],{},"Finally, create an Inertia page that receives the product from the\ncontroller.",[65,474,478],{"className":475,"code":476,"language":477,"meta":70,"style":70},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F resources\u002Fjs\u002FPages\u002FProducts\u002FShow.jsx\nexport default function Show({ product }) {\n    return (\n        \u003Cmain>\n            \u003Ch1>{product.name}\u003C\u002Fh1>\n            \u003Cp>{product.price}\u003C\u002Fp>\n            \u003Cp>{product.description}\u003C\u002Fp>\n\n            \u003Cform method=\"post\" action=\"\u002Fcart\">\n                \u003Cinput type=\"hidden\" name=\"product_id\" value={product.id} \u002F>\n                \u003Cbutton type=\"submit\">Add to cart\u003C\u002Fbutton>\n            \u003C\u002Fform>\n        \u003C\u002Fmain>\n    );\n}\n","jsx",[72,479,480,485,511,520,531,556,577,598,602,636,684,715,724,733,740],{"__ignoreMap":70},[75,481,482],{"class":77,"line":78},[75,483,484],{"class":81},"\u002F\u002F resources\u002Fjs\u002FPages\u002FProducts\u002FShow.jsx\n",[75,486,487,490,493,495,498,501,505,508],{"class":77,"line":85},[75,488,489],{"class":407},"export",[75,491,492],{"class":407}," default",[75,494,346],{"class":327},[75,496,497],{"class":171}," Show",[75,499,500],{"class":88},"({",[75,502,504],{"class":503},"sHdIc"," product",[75,506,507],{"class":88}," })",[75,509,510],{"class":88}," {\n",[75,512,513,516],{"class":77,"line":96},[75,514,515],{"class":407},"    return",[75,517,519],{"class":518},"swJcz"," (\n",[75,521,522,525,528],{"class":77,"line":103},[75,523,524],{"class":88},"        \u003C",[75,526,527],{"class":518},"main",[75,529,530],{"class":88},">\n",[75,532,533,536,539,542,544,546,549,552,554],{"class":77,"line":132},[75,534,535],{"class":88},"            \u003C",[75,537,538],{"class":518},"h1",[75,540,541],{"class":88},">{",[75,543,393],{"class":92},[75,545,214],{"class":88},[75,547,548],{"class":92},"name",[75,550,551],{"class":88},"}\u003C\u002F",[75,553,538],{"class":518},[75,555,530],{"class":88},[75,557,558,560,562,564,566,568,571,573,575],{"class":77,"line":157},[75,559,535],{"class":88},[75,561,37],{"class":518},[75,563,541],{"class":88},[75,565,393],{"class":92},[75,567,214],{"class":88},[75,569,570],{"class":92},"price",[75,572,551],{"class":88},[75,574,37],{"class":518},[75,576,530],{"class":88},[75,578,579,581,583,585,587,589,592,594,596],{"class":77,"line":162},[75,580,535],{"class":88},[75,582,37],{"class":518},[75,584,541],{"class":88},[75,586,393],{"class":92},[75,588,214],{"class":88},[75,590,591],{"class":92},"description",[75,593,551],{"class":88},[75,595,37],{"class":518},[75,597,530],{"class":88},[75,599,600],{"class":77,"line":292},[75,601,100],{"emptyLinePlaceholder":99},[75,603,604,606,609,612,614,617,620,622,625,627,629,632,634],{"class":77,"line":319},[75,605,535],{"class":88},[75,607,608],{"class":518},"form",[75,610,611],{"class":327}," method",[75,613,383],{"class":88},[75,615,616],{"class":88},"\"",[75,618,619],{"class":197},"post",[75,621,616],{"class":88},[75,623,624],{"class":327}," action",[75,626,383],{"class":88},[75,628,616],{"class":88},[75,630,631],{"class":197},"\u002Fcart",[75,633,616],{"class":88},[75,635,530],{"class":88},[75,637,638,641,644,647,649,651,654,656,659,661,663,666,668,671,674,676,678,681],{"class":77,"line":324},[75,639,640],{"class":88},"                \u003C",[75,642,643],{"class":518},"input",[75,645,646],{"class":327}," type",[75,648,383],{"class":88},[75,650,616],{"class":88},[75,652,653],{"class":197},"hidden",[75,655,616],{"class":88},[75,657,658],{"class":327}," name",[75,660,383],{"class":88},[75,662,616],{"class":88},[75,664,665],{"class":197},"product_id",[75,667,616],{"class":88},[75,669,670],{"class":327}," value",[75,672,673],{"class":88},"={",[75,675,393],{"class":92},[75,677,214],{"class":88},[75,679,680],{"class":92},"id",[75,682,683],{"class":88},"} \u002F>\n",[75,685,686,688,691,693,695,697,700,702,705,708,711,713],{"class":77,"line":334},[75,687,640],{"class":88},[75,689,690],{"class":518},"button",[75,692,646],{"class":327},[75,694,383],{"class":88},[75,696,616],{"class":88},[75,698,699],{"class":197},"submit",[75,701,616],{"class":88},[75,703,704],{"class":88},">",[75,706,707],{"class":92},"Add to cart",[75,709,710],{"class":88},"\u003C\u002F",[75,712,690],{"class":518},[75,714,530],{"class":88},[75,716,717,720,722],{"class":77,"line":340},[75,718,719],{"class":88},"            \u003C\u002F",[75,721,608],{"class":518},[75,723,530],{"class":88},[75,725,726,729,731],{"class":77,"line":368},[75,727,728],{"class":88},"        \u003C\u002F",[75,730,527],{"class":518},[75,732,530],{"class":88},[75,734,735,738],{"class":77,"line":374},[75,736,737],{"class":518},"    )",[75,739,129],{"class":88},[75,741,742],{"class":77,"line":399},[75,743,465],{"class":88},[745,746,747],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":70,"searchDepth":78,"depth":85,"links":749},[750,751,752],{"id":59,"depth":85,"text":60},{"id":217,"depth":85,"text":218},{"id":468,"depth":85,"text":469},"Create a product detail page.","md",null,{},{"title":24,"description":753},"LUCRqq9CyZw75S2VSIp_CnhBDaBaAL7-Iz5fzuwAYCc",[760,761],{"title":20,"path":21,"stem":22,"description":70,"children":-1},{"title":28,"path":29,"stem":30,"description":762,"children":-1},"Create a category-based product listing page.",1786625613995]