[{"data":1,"prerenderedAt":871},["ShallowReactive",2],{"navigation":3,"\u002Ftasks\u002Fproduct-listing-page":72,"\u002Ftasks\u002Fproduct-listing-page-surround":868},[4,42,55],{"title":5,"path":6,"stem":7,"children":8,"page":41},"Api","\u002Fapi","api",[9,13,17,21,25,29,33,37],{"title":10,"path":11,"stem":12},"Cart API","\u002Fapi\u002Fcart","api\u002Fcart",{"title":14,"path":15,"stem":16},"Category API","\u002Fapi\u002Fcategory","api\u002Fcategory",{"title":18,"path":19,"stem":20},"Checkout API","\u002Fapi\u002Fcheckout","api\u002Fcheckout",{"title":22,"path":23,"stem":24},"Inventory","\u002Fapi\u002Finventory","api\u002Finventory",{"title":26,"path":27,"stem":28},"Order Numbers","\u002Fapi\u002Forder-numbers","api\u002Forder-numbers",{"title":30,"path":31,"stem":32},"Product API","\u002Fapi\u002Fproduct","api\u002Fproduct",{"title":34,"path":35,"stem":36},"Promotions API","\u002Fapi\u002Fpromotions","api\u002Fpromotions",{"title":38,"path":39,"stem":40},"Taxes","\u002Fapi\u002Ftaxes","api\u002Ftaxes",false,{"title":43,"path":44,"stem":45,"children":46,"page":41},"Getting Started","\u002Fgetting-started","getting-started",[47,51],{"title":48,"path":49,"stem":50},"Admin panel","\u002Fgetting-started\u002Fadmin-panel","getting-started\u002Fadmin-panel",{"title":52,"path":53,"stem":54},"Installation","\u002Fgetting-started\u002Finstallation","getting-started\u002Finstallation",{"title":56,"path":57,"stem":58,"children":59,"page":41},"Tasks","\u002Ftasks","tasks",[60,64,68],{"title":61,"path":62,"stem":63},"Building A Navigation","\u002Ftasks\u002Fbuilding-a-navigation","tasks\u002Fbuilding-a-navigation",{"title":65,"path":66,"stem":67},"Product Detail Page","\u002Ftasks\u002Fproduct-detail-page","tasks\u002Fproduct-detail-page",{"title":69,"path":70,"stem":71},"Product Listing Page","\u002Ftasks\u002Fproduct-listing-page","tasks\u002Fproduct-listing-page",{"id":73,"title":69,"body":74,"description":862,"extension":863,"links":864,"meta":865,"navigation":140,"path":70,"seo":866,"stem":71,"__hash__":867},"docs\u002Ftasks\u002Fproduct-listing-page.md",{"type":75,"value":76,"toc":857},"minimark",[77,81,84,97,102,105,246,257,261,264,552,555,563,566,570,573,853],[78,79,80],"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.",[78,82,83],{},"We can achieve this by in a couple of handful steps:",[85,86,87,91,94],"ol",{},[88,89,90],"li",{},"Define the route",[88,92,93],{},"Create a controller",[88,95,96],{},"Render a template",[98,99,101],"h2",{"id":100},"defining-the-route","Defining the route",[78,103,104],{},"First up, we need to define under which URL we can browse products.",[106,107,112],"pre",{"className":108,"code":109,"language":110,"meta":111,"style":111},"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","",[113,114,115,124,135,142,171,196,201],"code",{"__ignoreMap":111},[116,117,120],"span",{"class":118,"line":119},"line",1,[116,121,123],{"class":122},"sHwdD","\u002F\u002F routes\u002Fweb.php\n",[116,125,127,131],{"class":118,"line":126},2,[116,128,130],{"class":129},"sMK4o","\u003C?",[116,132,134],{"class":133},"sTEyZ","php\n",[116,136,138],{"class":118,"line":137},3,[116,139,141],{"emptyLinePlaceholder":140},true,"\n",[116,143,145,149,152,155,158,160,163,165,168],{"class":118,"line":144},4,[116,146,148],{"class":147},"sbssI","use",[116,150,151],{"class":133}," App",[116,153,154],{"class":129},"\\",[116,156,157],{"class":133},"Http",[116,159,154],{"class":129},[116,161,162],{"class":133},"Controllers",[116,164,154],{"class":129},[116,166,167],{"class":133},"ProductController",[116,169,170],{"class":129},";\n",[116,172,174,176,179,181,184,186,189,191,194],{"class":118,"line":173},5,[116,175,148],{"class":147},[116,177,178],{"class":133}," Larasell",[116,180,154],{"class":129},[116,182,183],{"class":133},"Larasell",[116,185,154],{"class":129},[116,187,188],{"class":133},"Routing",[116,190,154],{"class":129},[116,192,193],{"class":133},"ProductListingRoute",[116,195,170],{"class":129},[116,197,199],{"class":118,"line":198},6,[116,200,141],{"emptyLinePlaceholder":140},[116,202,204,207,210,214,217,219,221,224,227,230,233,236,240,243],{"class":118,"line":203},7,[116,205,193],{"class":206},"sBMFI",[116,208,209],{"class":129},"::",[116,211,213],{"class":212},"s2Zo4","get",[116,215,216],{"class":129},"(",[116,218,167],{"class":206},[116,220,209],{"class":129},[116,222,223],{"class":133},"index",[116,225,226],{"class":129},",",[116,228,229],{"class":206}," prefix",[116,231,232],{"class":129},":",[116,234,235],{"class":129}," '",[116,237,239],{"class":238},"sfazB","c",[116,241,242],{"class":129},"'",[116,244,245],{"class":129},")\n",[78,247,248,249,252,253,256],{},"It's required that you define a prefix for this route. In this case\nif you have category ",[113,250,251],{},"Mens -> Clothing -> Shirt"," the route will be\n",[113,254,255],{},"\u002Fc\u002Fmens\u002Fclothing\u002Fshirt",".",[98,258,260],{"id":259},"creating-a-controller","Creating a controller",[78,262,263],{},"Next up, we'll actually fetch the products",[106,265,267],{"className":108,"code":266,"language":110,"meta":111,"style":111},"\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 = $request->products()->get();\n\n       return Inertia::render('Products\u002FIndex', [\n           'category' => $category,\n           'products' => $products\n       ]);\n    }\n}\n",[113,268,269,274,280,284,301,305,319,332,359,364,374,380,408,414,439,465,470,498,518,534,540,546],{"__ignoreMap":111},[116,270,271],{"class":118,"line":119},[116,272,273],{"class":122},"\u002F\u002F ProductController.php\n",[116,275,276,278],{"class":118,"line":126},[116,277,130],{"class":129},[116,279,134],{"class":133},[116,281,282],{"class":118,"line":137},[116,283,141],{"emptyLinePlaceholder":140},[116,285,286,289,291,293,295,297,299],{"class":118,"line":144},[116,287,288],{"class":147},"namespace",[116,290,151],{"class":206},[116,292,154],{"class":129},[116,294,157],{"class":206},[116,296,154],{"class":129},[116,298,162],{"class":206},[116,300,170],{"class":129},[116,302,303],{"class":118,"line":173},[116,304,141],{"emptyLinePlaceholder":140},[116,306,307,309,312,314,317],{"class":118,"line":198},[116,308,148],{"class":147},[116,310,311],{"class":133}," Inertia",[116,313,154],{"class":129},[116,315,316],{"class":133},"Inertia",[116,318,170],{"class":129},[116,320,321,323,325,327,330],{"class":118,"line":203},[116,322,148],{"class":147},[116,324,311],{"class":133},[116,326,154],{"class":129},[116,328,329],{"class":133},"Response",[116,331,170],{"class":129},[116,333,335,337,339,341,343,345,347,349,352,354,357],{"class":118,"line":334},8,[116,336,148],{"class":147},[116,338,178],{"class":133},[116,340,154],{"class":129},[116,342,183],{"class":133},[116,344,154],{"class":129},[116,346,157],{"class":133},[116,348,154],{"class":129},[116,350,351],{"class":133},"Requests",[116,353,154],{"class":129},[116,355,356],{"class":133},"ProductListingRequest",[116,358,170],{"class":129},[116,360,362],{"class":118,"line":361},9,[116,363,141],{"emptyLinePlaceholder":140},[116,365,367,371],{"class":118,"line":366},10,[116,368,370],{"class":369},"spNyl","class",[116,372,373],{"class":206}," ProductController\n",[116,375,377],{"class":118,"line":376},11,[116,378,379],{"class":129},"{\n",[116,381,383,386,389,392,394,396,399,402,405],{"class":118,"line":382},12,[116,384,385],{"class":369},"    public",[116,387,388],{"class":369}," function",[116,390,391],{"class":212}," index",[116,393,216],{"class":129},[116,395,356],{"class":206},[116,397,398],{"class":129}," $",[116,400,401],{"class":133},"request",[116,403,404],{"class":129},"):",[116,406,407],{"class":206}," Response\n",[116,409,411],{"class":118,"line":410},13,[116,412,413],{"class":129},"    {\n",[116,415,417,420,423,426,428,430,433,436],{"class":118,"line":416},14,[116,418,419],{"class":129},"       $",[116,421,422],{"class":133},"category ",[116,424,425],{"class":129},"=",[116,427,398],{"class":129},[116,429,401],{"class":133},[116,431,432],{"class":129},"->",[116,434,435],{"class":212},"category",[116,437,438],{"class":129},"();\n",[116,440,442,444,447,449,451,453,455,458,461,463],{"class":118,"line":441},15,[116,443,419],{"class":129},[116,445,446],{"class":133},"products ",[116,448,425],{"class":129},[116,450,398],{"class":129},[116,452,401],{"class":133},[116,454,432],{"class":129},[116,456,457],{"class":212},"products",[116,459,460],{"class":129},"()->",[116,462,213],{"class":212},[116,464,438],{"class":129},[116,466,468],{"class":118,"line":467},16,[116,469,141],{"emptyLinePlaceholder":140},[116,471,473,477,479,481,484,486,488,491,493,495],{"class":118,"line":472},17,[116,474,476],{"class":475},"s7zQu","       return",[116,478,311],{"class":206},[116,480,209],{"class":129},[116,482,483],{"class":212},"render",[116,485,216],{"class":129},[116,487,242],{"class":129},[116,489,490],{"class":238},"Products\u002FIndex",[116,492,242],{"class":129},[116,494,226],{"class":129},[116,496,497],{"class":129}," [\n",[116,499,501,504,506,508,511,513,515],{"class":118,"line":500},18,[116,502,503],{"class":129},"           '",[116,505,435],{"class":238},[116,507,242],{"class":129},[116,509,510],{"class":129}," =>",[116,512,398],{"class":129},[116,514,435],{"class":133},[116,516,517],{"class":129},",\n",[116,519,521,523,525,527,529,531],{"class":118,"line":520},19,[116,522,503],{"class":129},[116,524,457],{"class":238},[116,526,242],{"class":129},[116,528,510],{"class":129},[116,530,398],{"class":129},[116,532,533],{"class":133},"products\n",[116,535,537],{"class":118,"line":536},20,[116,538,539],{"class":129},"       ]);\n",[116,541,543],{"class":118,"line":542},21,[116,544,545],{"class":129},"    }\n",[116,547,549],{"class":118,"line":548},22,[116,550,551],{"class":129},"}\n",[78,553,554],{},"The request supports sorting and product attribute filters through query\nparameters:",[106,556,561],{"className":557,"code":559,"language":560,"meta":111},[558],"language-text","\u002Fc\u002Fmens\u002Fclothing\u002Fshirts?sort=price_asc&attributes[size][]=small&attributes[size][]=medium&attributes[color]=black\n","text",[113,562,559],{"__ignoreMap":111},[78,564,565],{},"Multiple values for the same attribute match any selected value. Multiple\nattributes must all match.",[98,567,569],{"id":568},"creating-a-template","Creating a template",[78,571,572],{},"Finally, create an Inertia page that receives the category and products\nfrom the controller.",[106,574,578],{"className":575,"code":576,"language":577,"meta":111,"style":111},"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",[113,579,580,585,616,625,636,661,665,674,700,723,757,778,799,808,817,824,833,842,849],{"__ignoreMap":111},[116,581,582],{"class":118,"line":119},[116,583,584],{"class":122},"\u002F\u002F resources\u002Fjs\u002FPages\u002FProducts\u002FIndex.jsx\n",[116,586,587,590,593,595,598,601,605,607,610,613],{"class":118,"line":126},[116,588,589],{"class":475},"export",[116,591,592],{"class":475}," default",[116,594,388],{"class":369},[116,596,597],{"class":212}," Index",[116,599,600],{"class":129},"({",[116,602,604],{"class":603},"sHdIc"," category",[116,606,226],{"class":129},[116,608,609],{"class":603}," products",[116,611,612],{"class":129}," })",[116,614,615],{"class":129}," {\n",[116,617,618,621],{"class":118,"line":137},[116,619,620],{"class":475},"    return",[116,622,624],{"class":623},"swJcz"," (\n",[116,626,627,630,633],{"class":118,"line":144},[116,628,629],{"class":129},"        \u003C",[116,631,632],{"class":623},"main",[116,634,635],{"class":129},">\n",[116,637,638,641,644,647,649,651,654,657,659],{"class":118,"line":173},[116,639,640],{"class":129},"            \u003C",[116,642,643],{"class":623},"h1",[116,645,646],{"class":129},">{",[116,648,435],{"class":133},[116,650,256],{"class":129},[116,652,653],{"class":133},"name",[116,655,656],{"class":129},"}\u003C\u002F",[116,658,643],{"class":623},[116,660,635],{"class":129},[116,662,663],{"class":118,"line":198},[116,664,141],{"emptyLinePlaceholder":140},[116,666,667,669,672],{"class":118,"line":203},[116,668,640],{"class":129},[116,670,671],{"class":623},"ul",[116,673,635],{"class":129},[116,675,676,679,681,683,686,688,690,693,696,698],{"class":118,"line":334},[116,677,678],{"class":129},"                {",[116,680,457],{"class":133},[116,682,256],{"class":129},[116,684,685],{"class":212},"map",[116,687,216],{"class":133},[116,689,216],{"class":129},[116,691,692],{"class":603},"product",[116,694,695],{"class":129},")",[116,697,510],{"class":369},[116,699,624],{"class":133},[116,701,702,705,707,710,713,715,717,720],{"class":118,"line":361},[116,703,704],{"class":129},"                    \u003C",[116,706,88],{"class":623},[116,708,709],{"class":369}," key",[116,711,712],{"class":129},"={",[116,714,692],{"class":133},[116,716,256],{"class":129},[116,718,719],{"class":133},"id",[116,721,722],{"class":129},"}>\n",[116,724,725,728,731,734,736,739,742,745,747,749,752,755],{"class":118,"line":366},[116,726,727],{"class":129},"                        \u003C",[116,729,730],{"class":623},"a",[116,732,733],{"class":369}," href",[116,735,712],{"class":129},[116,737,738],{"class":129},"`",[116,740,741],{"class":238},"\u002Fp\u002F",[116,743,744],{"class":129},"${",[116,746,692],{"class":133},[116,748,256],{"class":129},[116,750,751],{"class":133},"slug",[116,753,754],{"class":129},"}`",[116,756,722],{"class":129},[116,758,759,762,764,766,768,770,772,774,776],{"class":118,"line":376},[116,760,761],{"class":129},"                            \u003C",[116,763,98],{"class":623},[116,765,646],{"class":129},[116,767,692],{"class":133},[116,769,256],{"class":129},[116,771,653],{"class":133},[116,773,656],{"class":129},[116,775,98],{"class":623},[116,777,635],{"class":129},[116,779,780,782,784,786,788,790,793,795,797],{"class":118,"line":382},[116,781,761],{"class":129},[116,783,78],{"class":623},[116,785,646],{"class":129},[116,787,692],{"class":133},[116,789,256],{"class":129},[116,791,792],{"class":133},"price",[116,794,656],{"class":129},[116,796,78],{"class":623},[116,798,635],{"class":129},[116,800,801,804,806],{"class":118,"line":410},[116,802,803],{"class":129},"                        \u003C\u002F",[116,805,730],{"class":623},[116,807,635],{"class":129},[116,809,810,813,815],{"class":118,"line":416},[116,811,812],{"class":129},"                    \u003C\u002F",[116,814,88],{"class":623},[116,816,635],{"class":129},[116,818,819,822],{"class":118,"line":441},[116,820,821],{"class":133},"                ))",[116,823,551],{"class":129},[116,825,826,829,831],{"class":118,"line":467},[116,827,828],{"class":129},"            \u003C\u002F",[116,830,671],{"class":623},[116,832,635],{"class":129},[116,834,835,838,840],{"class":118,"line":472},[116,836,837],{"class":129},"        \u003C\u002F",[116,839,632],{"class":623},[116,841,635],{"class":129},[116,843,844,847],{"class":118,"line":500},[116,845,846],{"class":623},"    )",[116,848,170],{"class":129},[116,850,851],{"class":118,"line":520},[116,852,551],{"class":129},[854,855,856],"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":111,"searchDepth":119,"depth":126,"links":858},[859,860,861],{"id":100,"depth":126,"text":101},{"id":259,"depth":126,"text":260},{"id":568,"depth":126,"text":569},"Create a category-based product listing page.","md",null,{},{"title":69,"description":862},"cv6heSiDbs-wdycNRYPVh11zsBOSuXB1fjMlOmKzvKQ",[869,864],{"title":65,"path":66,"stem":67,"description":870,"children":-1},"Create a product detail page.",1789114878152]