[{"data":1,"prerenderedAt":821},["ShallowReactive",2],{"navigation":3,"\u002Ftasks\u002Fproduct-listing-page":31,"\u002Ftasks\u002Fproduct-listing-page-surround":818},[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":28,"body":33,"description":812,"extension":813,"links":814,"meta":815,"navigation":99,"path":29,"seo":816,"stem":30,"__hash__":817},"docs\u002Ftasks\u002Fproduct-listing-page.md",{"type":34,"value":35,"toc":807},"minimark",[36,40,43,56,61,64,205,216,220,223,516,520,523,803],[37,38,39],"p",{},"You'll learn how to create a product listing page, so that customers\nare able to browse through the products the store has to offer.",[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 browse products.",[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\\ProductListingRoute;\n\nProductListingRoute::get(ProductController::index, prefix: 'c')\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},"ProductListingRoute",[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,199,202],{"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},"index",[75,184,185],{"class":88},",",[75,187,188],{"class":165}," prefix",[75,190,191],{"class":88},":",[75,193,194],{"class":88}," '",[75,196,198],{"class":197},"sfazB","c",[75,200,201],{"class":88},"'",[75,203,204],{"class":88},")\n",[37,206,207,208,211,212,215],{},"It's required that you define a prefix for this route. In this case\nif you have category ",[72,209,210],{},"Mens -> Clothing -> Shirt"," the route will be\n",[72,213,214],{},"\u002Fc\u002Fmens\u002Fclothing\u002Fshirt",".",[57,217,219],{"id":218},"creating-a-controller","Creating a controller",[37,221,222],{},"Next up, we'll actually fetch the products",[65,224,226],{"className":67,"code":225,"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\\ProductListingRequest;\n\nclass ProductController\n{\n    public function index(ProductListingRequest $request): Response\n    {\n       $category = $request->category();\n       $products = $category->products()->visible()->get();\n\n       return Inertia::render('Products\u002FIndex', [\n           'category' => $category,\n           'products' => $products\n       ]);\n    }\n}\n",[72,227,228,233,239,243,260,264,278,291,318,323,333,339,367,373,398,429,434,462,482,498,504,510],{"__ignoreMap":70},[75,229,230],{"class":77,"line":78},[75,231,232],{"class":81},"\u002F\u002F ProductController.php\n",[75,234,235,237],{"class":77,"line":85},[75,236,89],{"class":88},[75,238,93],{"class":92},[75,240,241],{"class":77,"line":96},[75,242,100],{"emptyLinePlaceholder":99},[75,244,245,248,250,252,254,256,258],{"class":77,"line":103},[75,246,247],{"class":106},"namespace",[75,249,110],{"class":165},[75,251,113],{"class":88},[75,253,116],{"class":165},[75,255,113],{"class":88},[75,257,121],{"class":165},[75,259,129],{"class":88},[75,261,262],{"class":77,"line":132},[75,263,100],{"emptyLinePlaceholder":99},[75,265,266,268,271,273,276],{"class":77,"line":157},[75,267,107],{"class":106},[75,269,270],{"class":92}," Inertia",[75,272,113],{"class":88},[75,274,275],{"class":92},"Inertia",[75,277,129],{"class":88},[75,279,280,282,284,286,289],{"class":77,"line":162},[75,281,107],{"class":106},[75,283,270],{"class":92},[75,285,113],{"class":88},[75,287,288],{"class":92},"Response",[75,290,129],{"class":88},[75,292,294,296,298,300,302,304,306,308,311,313,316],{"class":77,"line":293},8,[75,295,107],{"class":106},[75,297,137],{"class":92},[75,299,113],{"class":88},[75,301,142],{"class":92},[75,303,113],{"class":88},[75,305,116],{"class":92},[75,307,113],{"class":88},[75,309,310],{"class":92},"Requests",[75,312,113],{"class":88},[75,314,315],{"class":92},"ProductListingRequest",[75,317,129],{"class":88},[75,319,321],{"class":77,"line":320},9,[75,322,100],{"emptyLinePlaceholder":99},[75,324,326,330],{"class":77,"line":325},10,[75,327,329],{"class":328},"spNyl","class",[75,331,332],{"class":165}," ProductController\n",[75,334,336],{"class":77,"line":335},11,[75,337,338],{"class":88},"{\n",[75,340,342,345,348,351,353,355,358,361,364],{"class":77,"line":341},12,[75,343,344],{"class":328},"    public",[75,346,347],{"class":328}," function",[75,349,350],{"class":171}," index",[75,352,175],{"class":88},[75,354,315],{"class":165},[75,356,357],{"class":88}," $",[75,359,360],{"class":92},"request",[75,362,363],{"class":88},"):",[75,365,366],{"class":165}," Response\n",[75,368,370],{"class":77,"line":369},13,[75,371,372],{"class":88},"    {\n",[75,374,376,379,382,385,387,389,392,395],{"class":77,"line":375},14,[75,377,378],{"class":88},"       $",[75,380,381],{"class":92},"category ",[75,383,384],{"class":88},"=",[75,386,357],{"class":88},[75,388,360],{"class":92},[75,390,391],{"class":88},"->",[75,393,394],{"class":171},"category",[75,396,397],{"class":88},"();\n",[75,399,401,403,406,408,410,412,414,417,420,423,425,427],{"class":77,"line":400},15,[75,402,378],{"class":88},[75,404,405],{"class":92},"products ",[75,407,384],{"class":88},[75,409,357],{"class":88},[75,411,394],{"class":92},[75,413,391],{"class":88},[75,415,416],{"class":171},"products",[75,418,419],{"class":88},"()->",[75,421,422],{"class":171},"visible",[75,424,419],{"class":88},[75,426,172],{"class":171},[75,428,397],{"class":88},[75,430,432],{"class":77,"line":431},16,[75,433,100],{"emptyLinePlaceholder":99},[75,435,437,441,443,445,448,450,452,455,457,459],{"class":77,"line":436},17,[75,438,440],{"class":439},"s7zQu","       return",[75,442,270],{"class":165},[75,444,168],{"class":88},[75,446,447],{"class":171},"render",[75,449,175],{"class":88},[75,451,201],{"class":88},[75,453,454],{"class":197},"Products\u002FIndex",[75,456,201],{"class":88},[75,458,185],{"class":88},[75,460,461],{"class":88}," [\n",[75,463,465,468,470,472,475,477,479],{"class":77,"line":464},18,[75,466,467],{"class":88},"           '",[75,469,394],{"class":197},[75,471,201],{"class":88},[75,473,474],{"class":88}," =>",[75,476,357],{"class":88},[75,478,394],{"class":92},[75,480,481],{"class":88},",\n",[75,483,485,487,489,491,493,495],{"class":77,"line":484},19,[75,486,467],{"class":88},[75,488,416],{"class":197},[75,490,201],{"class":88},[75,492,474],{"class":88},[75,494,357],{"class":88},[75,496,497],{"class":92},"products\n",[75,499,501],{"class":77,"line":500},20,[75,502,503],{"class":88},"       ]);\n",[75,505,507],{"class":77,"line":506},21,[75,508,509],{"class":88},"    }\n",[75,511,513],{"class":77,"line":512},22,[75,514,515],{"class":88},"}\n",[57,517,519],{"id":518},"creating-a-template","Creating a template",[37,521,522],{},"Finally, create an Inertia page that receives the category and products\nfrom the controller.",[65,524,528],{"className":525,"code":526,"language":527,"meta":70,"style":70},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F resources\u002Fjs\u002FPages\u002FProducts\u002FIndex.jsx\nexport default function Index({ category, products }) {\n    return (\n        \u003Cmain>\n            \u003Ch1>{category.name}\u003C\u002Fh1>\n\n            \u003Cul>\n                {products.map((product) => (\n                    \u003Cli key={product.id}>\n                        \u003Ca href={`\u002Fp\u002F${product.slug}`}>\n                            \u003Ch2>{product.name}\u003C\u002Fh2>\n                            \u003Cp>{product.price}\u003C\u002Fp>\n                        \u003C\u002Fa>\n                    \u003C\u002Fli>\n                ))}\n            \u003C\u002Ful>\n        \u003C\u002Fmain>\n    );\n}\n","jsx",[72,529,530,535,566,575,586,611,615,624,650,673,707,728,749,758,767,774,783,792,799],{"__ignoreMap":70},[75,531,532],{"class":77,"line":78},[75,533,534],{"class":81},"\u002F\u002F resources\u002Fjs\u002FPages\u002FProducts\u002FIndex.jsx\n",[75,536,537,540,543,545,548,551,555,557,560,563],{"class":77,"line":85},[75,538,539],{"class":439},"export",[75,541,542],{"class":439}," default",[75,544,347],{"class":328},[75,546,547],{"class":171}," Index",[75,549,550],{"class":88},"({",[75,552,554],{"class":553},"sHdIc"," category",[75,556,185],{"class":88},[75,558,559],{"class":553}," products",[75,561,562],{"class":88}," })",[75,564,565],{"class":88}," {\n",[75,567,568,571],{"class":77,"line":96},[75,569,570],{"class":439},"    return",[75,572,574],{"class":573},"swJcz"," (\n",[75,576,577,580,583],{"class":77,"line":103},[75,578,579],{"class":88},"        \u003C",[75,581,582],{"class":573},"main",[75,584,585],{"class":88},">\n",[75,587,588,591,594,597,599,601,604,607,609],{"class":77,"line":132},[75,589,590],{"class":88},"            \u003C",[75,592,593],{"class":573},"h1",[75,595,596],{"class":88},">{",[75,598,394],{"class":92},[75,600,215],{"class":88},[75,602,603],{"class":92},"name",[75,605,606],{"class":88},"}\u003C\u002F",[75,608,593],{"class":573},[75,610,585],{"class":88},[75,612,613],{"class":77,"line":157},[75,614,100],{"emptyLinePlaceholder":99},[75,616,617,619,622],{"class":77,"line":162},[75,618,590],{"class":88},[75,620,621],{"class":573},"ul",[75,623,585],{"class":88},[75,625,626,629,631,633,636,638,640,643,646,648],{"class":77,"line":293},[75,627,628],{"class":88},"                {",[75,630,416],{"class":92},[75,632,215],{"class":88},[75,634,635],{"class":171},"map",[75,637,175],{"class":92},[75,639,175],{"class":88},[75,641,642],{"class":553},"product",[75,644,645],{"class":88},")",[75,647,474],{"class":328},[75,649,574],{"class":92},[75,651,652,655,657,660,663,665,667,670],{"class":77,"line":320},[75,653,654],{"class":88},"                    \u003C",[75,656,47],{"class":573},[75,658,659],{"class":328}," key",[75,661,662],{"class":88},"={",[75,664,642],{"class":92},[75,666,215],{"class":88},[75,668,669],{"class":92},"id",[75,671,672],{"class":88},"}>\n",[75,674,675,678,681,684,686,689,692,695,697,699,702,705],{"class":77,"line":325},[75,676,677],{"class":88},"                        \u003C",[75,679,680],{"class":573},"a",[75,682,683],{"class":328}," href",[75,685,662],{"class":88},[75,687,688],{"class":88},"`",[75,690,691],{"class":197},"\u002Fp\u002F",[75,693,694],{"class":88},"${",[75,696,642],{"class":92},[75,698,215],{"class":88},[75,700,701],{"class":92},"slug",[75,703,704],{"class":88},"}`",[75,706,672],{"class":88},[75,708,709,712,714,716,718,720,722,724,726],{"class":77,"line":335},[75,710,711],{"class":88},"                            \u003C",[75,713,57],{"class":573},[75,715,596],{"class":88},[75,717,642],{"class":92},[75,719,215],{"class":88},[75,721,603],{"class":92},[75,723,606],{"class":88},[75,725,57],{"class":573},[75,727,585],{"class":88},[75,729,730,732,734,736,738,740,743,745,747],{"class":77,"line":341},[75,731,711],{"class":88},[75,733,37],{"class":573},[75,735,596],{"class":88},[75,737,642],{"class":92},[75,739,215],{"class":88},[75,741,742],{"class":92},"price",[75,744,606],{"class":88},[75,746,37],{"class":573},[75,748,585],{"class":88},[75,750,751,754,756],{"class":77,"line":369},[75,752,753],{"class":88},"                        \u003C\u002F",[75,755,680],{"class":573},[75,757,585],{"class":88},[75,759,760,763,765],{"class":77,"line":375},[75,761,762],{"class":88},"                    \u003C\u002F",[75,764,47],{"class":573},[75,766,585],{"class":88},[75,768,769,772],{"class":77,"line":400},[75,770,771],{"class":92},"                ))",[75,773,515],{"class":88},[75,775,776,779,781],{"class":77,"line":431},[75,777,778],{"class":88},"            \u003C\u002F",[75,780,621],{"class":573},[75,782,585],{"class":88},[75,784,785,788,790],{"class":77,"line":436},[75,786,787],{"class":88},"        \u003C\u002F",[75,789,582],{"class":573},[75,791,585],{"class":88},[75,793,794,797],{"class":77,"line":464},[75,795,796],{"class":573},"    )",[75,798,129],{"class":88},[75,800,801],{"class":77,"line":484},[75,802,515],{"class":88},[804,805,806],"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":808},[809,810,811],{"id":59,"depth":85,"text":60},{"id":218,"depth":85,"text":219},{"id":518,"depth":85,"text":519},"Create a category-based product listing page.","md",null,{},{"title":28,"description":812},"LHTtG0phrTEM-OHKXGv5qpchxmaTEpbp0kk8WvYkctc",[819,814],{"title":24,"path":25,"stem":26,"description":820,"children":-1},"Create a product detail page.",1786625613995]