{"id":1664,"date":"2020-04-01T13:44:23","date_gmt":"2020-04-01T13:44:23","guid":{"rendered":"https:\/\/www.magetop.com\/blog\/?p=1664"},"modified":"2021-07-22T02:56:37","modified_gmt":"2021-07-22T02:56:37","slug":"how-to-get-items-to-storefront-magento","status":"publish","type":"post","link":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/","title":{"rendered":"How To Get Items To Storefront In Magento 2"},"content":{"rendered":"\n

In the previous lesson, we learned together How To Use Model In Magento 2<\/a>. Continuing that lesson, I will introduce How To Get Items To Storefront In Magento 2<\/strong>.<\/p>\n\n\n\n

You should read the Magento 2 Extension Tutorial step by step to be able to understand this lesson.<\/p>\n\n\n\n

Module File Structure<\/h2>\n\n\n\n

We updated our module file structure looks as follows:<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Create Controller<\/h2>\n\n\n\n

First, we create Lists.php with the following path: Magetop\/Helloworld\/Controller\/Index\/Lists.php<\/p>\n\n\n

\n<?php\nnamespace Magetop\\Helloworld\\Controller\\Index;\n\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\n\nclass Lists extends \\Magento\\Framework\\App\\Action\\Action\n{\n    protected $_resultPageFactory;\n\n    public function __construct(\n        Context $context,\n        PageFactory $resultPageFactory\n    )\n    {\n        parent::__construct($context);\n        $this->_resultPageFactory = $resultPageFactory;\n\n    }\n\n    public function execute()\n    {\n        $resultPageFactory = $this->_resultPageFactory->create();\n\n        \/\/ Add page title\n        $resultPageFactory->getConfig()->getTitle()->set(__('Posts List'));\n\n        \/\/ Add breadcrumb\n        \/** @var \\Magento\\Theme\\Block\\Html\\Breadcrumbs *\/\n        if($resultPageFactory->getLayout()->getBlock('breadcrumbs'))\n        {\n            $breadcrumbs = $resultPageFactory->getLayout()->getBlock('breadcrumbs');\n            $breadcrumbs->addCrumb('home',\n                [\n                    'label' => __('Home'),\n                    'title' => __('Home'),\n                    'link' => $this->_url->getUrl('')\n                ]\n            );\n            $breadcrumbs->addCrumb('booking_search',\n                [\n                    'label' => __('Posts'),\n                    'title' => __('Posts')\n                ]\n            );\n        }\n        return $resultPageFactory;\n    }\n}\n<\/pre><\/div>\n\n\n
Create layout<\/h2>\n\n\n\n
You create a layout file according to the path: Magetop\/Helloworld\/view\/frontend\/layout\/helloworld_index_lists.xml<\/p>\n\n\n
\n<?xml version="1.0" encoding="UTF-8"?>\n<!--\n\/**\n * helloworld_index_lists\n *\n * @copyright Copyright \u00a9 2020 Magetop. All rights reserved.\n * @author    info@magetop.com\n *\/\n-->\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <head>\n        <css src="Magetop_Helloworld::css\/style.css" \/>\n    <\/head>\n    <body>\n        <referenceContainer name="content">\n            <block class="Magetop\\Helloworld\\Block\\Posts" name="magetop.helloworld.posts" template="Magetop_Helloworld::items.phtml" \/>\n        <\/referenceContainer>\n    <\/body>\n<\/page>\n<\/pre><\/div>\n\n\n
As you can see, I have to define Block class (Magetop\\Helloworld\\Block\\Posts) to get Data, phml file (items.phtml) to show data and (css\/style.css) to style for page.<\/p>\n\n\n\n
Get data with Block file<\/h2>\n\n\n\n
Next, we create Posts.php with the following path: Magetop\/Helloworld\/Block\/Posts.php<\/p>\n\n\n
\n<?php\nnamespace Magetop\\Helloworld\\Block;\n\nuse Magento\\Framework\\View\\Element\\Template;\nuse Magento\\Framework\\Registry;\n\nclass Posts extends Template\n{\n    protected $_coreRegistry;\n\n    protected $_postsFactory;\n\n    public function __construct(\n        Template\\Context $context,\n        Registry $coreRegistry,\n        \\Magetop\\Helloworld\\Model\\ResourceModel\\Posts\\CollectionFactory $postsFactory,\n        array $data = []\n    )\n    {\n\n        parent::__construct($context, $data);\n        $this->_coreRegistry = $coreRegistry;\n        $this->_postsFactory = $postsFactory;\n    }\n\n    \/**\n     * @return $this|mixed\n     *\/\n    function getPostItems() {\n        if($this->_coreRegistry->registry('post_items'))\n        {\n            $collection = $this->_coreRegistry->registry('post_items');\n        }\n        else {\n            $collection = $this->_postsFactory->create()\n                ->addFieldToSelect(array('title','description'))\n                ->addFieldToFilter('status',1)\n                ->setPageSize(10)\n                ->setOrder('id','ASC');\n            $this->_coreRegistry->register('post_items',$collection);\n        }\n        return $collection;\n\n    }\n\n}\n<\/pre><\/div>\n\n\n
Show data with phtml file<\/h2>\n\n\n\n
Create phtml file Magetop\/Helloworld\/view\/frontend\/templates\/items.phtml.<\/p>\n\n\n
\n<?php\n\/** @var \\Magetop\\Helloworld\\Block\\Posts $block*\/\n?>\n<?php $posts = $block->getPostItems(); ?>\n<div class="post-content">\n    <table style="width:100%">\n        <tr>\n            <th><?php echo __('Title') ?><\/th>\n            <th><?php echo __('Description') ?><\/th>\n        <\/tr>\n        <?php if(count($posts)) : ?>\n            <?php foreach ($posts as $post) : ?>\n                <tr>\n                    <td><?php echo $post->getTitle() ?><\/td>\n                    <td><?php echo $post->getDescription() ?><\/td>\n                <\/tr>\n            <?php endforeach; ?>\n        <?php endif; ?>\n    <\/table>\n<\/div>\n<\/pre><\/div>\n\n\n
Create a CSS file<\/h2>\n\n\n\n
Create file according to the path: Magetop\/Helloworld\/view\/frontend\/web\/css\/style.css<\/p>\n\n\n
\ntable, th, td {\n    border: 1px solid black;\n    border-collapse: collapse;\n}\n<\/pre><\/div>\n\n\n
You access the link created on the store page to check it out.<\/p>\n\n\n
\n<yourdomain>\/helloworld\/index\/lists\n<\/pre><\/div>\n\n\n
\"Show<\/figure>\n\n\n\n
I hope through this series you can create your own complete module. Good luck!<\/p>\n\n\n\n
In addition to How To Get Items To Storefront In Magento 2, you can read the articles How To Use Helper And Setting In Magento 2<\/a>.<\/p>\n\n\n\n
Follow us for the more helpful article!<\/p>\n\n\n\n
We hope this is a useful series for you.<\/p>\n\n\n\n
Thank you for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous lesson, we learned together How To Use Model In Magento 2. Continuing that lesson, I will introduce How To Get Items To Storefront In Magento 2.
\nYou should read the Magento 2 Extension Tutorial step by step to be able to understand this lesson.<\/p>\n","protected":false},"author":106,"featured_media":1744,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[346,345,344,107],"class_list":["post-1664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2-tutorials","tag-create-frontend-page-to-get-data-in-magento-2","tag-how-to-get-items-to-frontend-in-magento-2","tag-how-to-get-items-to-storefront-in-magento-2","tag-magento-2-tutorials"],"yoast_head":"\nHow To Get Items To Storefront In Magento 2 - Magetop Blog<\/title>\n<meta name=\"description\" content=\"We learned together How To Use Model In Magento 2. Continuing that lesson, I will introduce How To Get Items To Storefront In Magento 2.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Get Items To Storefront In Magento 2 - Magetop Blog\" \/>\n<meta property=\"og:description\" content=\"We learned together How To Use Model In Magento 2. Continuing that lesson, I will introduce How To Get Items To Storefront In Magento 2.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/\" \/>\n<meta property=\"og:site_name\" content=\"Magetop Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MagetopStore\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-01T13:44:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-22T02:56:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i2.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"813\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Aaron LX\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MagetopStore\" \/>\n<meta name=\"twitter:site\" content=\"@MagetopStore\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aaron LX\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/\"},\"author\":{\"name\":\"Aaron LX\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/b8770690a02cc53a273d6b7205229ff7\"},\"headline\":\"How To Get Items To Storefront In Magento 2\",\"datePublished\":\"2020-04-01T13:44:23+00:00\",\"dateModified\":\"2021-07-22T02:56:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/\"},\"wordCount\":256,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1\",\"keywords\":[\"Create frontend page to get data in Magento 2\",\"How To Get Items To Frontend In Magento 2\",\"How To Get Items To Storefront In Magento 2\",\"magento 2 tutorials\"],\"articleSection\":[\"Magento 2 Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/\",\"url\":\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/\",\"name\":\"How To Get Items To Storefront In Magento 2 - Magetop Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1\",\"datePublished\":\"2020-04-01T13:44:23+00:00\",\"dateModified\":\"2021-07-22T02:56:37+00:00\",\"description\":\"We learned together How To Use Model In Magento 2. Continuing that lesson, I will introduce How To Get Items To Storefront In Magento 2.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1\",\"width\":813,\"height\":450,\"caption\":\"Magento 2 How To Get Items To Storefront\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.magetop.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Get Items To Storefront In Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"name\":\"Magetop Blog\",\"description\":\"Exploring Magento Tips, Tricks, and Trends\",\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.magetop.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\",\"name\":\"Magetop.com\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"width\":475,\"height\":475,\"caption\":\"Magetop.com\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/MagetopStore\",\"https:\/\/x.com\/MagetopStore\",\"https:\/\/www.linkedin.com\/company\/magetop\",\"https:\/\/www.pinterest.com\/magetop\",\"https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/b8770690a02cc53a273d6b7205229ff7\",\"name\":\"Aaron LX\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/475315059_122137709240563546_260104055231757176_n.jpg?fit=96%2C96&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/475315059_122137709240563546_260104055231757176_n.jpg?fit=96%2C96&ssl=1\",\"caption\":\"Aaron LX\"},\"description\":\"Aaron is a passionate writer, crazy about shopping, eCommerce and trends. Besides his outstanding research skills and a positive mind, Aaron eagerly shares his experience with the readers.\",\"url\":\"https:\/\/www.magetop.com\/blog\/author\/aaron-lx\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Get Items To Storefront In Magento 2 - Magetop Blog","description":"We learned together How To Use Model In Magento 2. Continuing that lesson, I will introduce How To Get Items To Storefront In Magento 2.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/","og_locale":"en_US","og_type":"article","og_title":"How To Get Items To Storefront In Magento 2 - Magetop Blog","og_description":"We learned together How To Use Model In Magento 2. Continuing that lesson, I will introduce How To Get Items To Storefront In Magento 2.","og_url":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/","og_site_name":"Magetop Blog","article_publisher":"https:\/\/www.facebook.com\/MagetopStore","article_published_time":"2020-04-01T13:44:23+00:00","article_modified_time":"2021-07-22T02:56:37+00:00","og_image":[{"width":813,"height":450,"url":"https:\/\/i2.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1","type":"image\/png"}],"author":"Aaron LX","twitter_card":"summary_large_image","twitter_creator":"@MagetopStore","twitter_site":"@MagetopStore","twitter_misc":{"Written by":"Aaron LX","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#article","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/"},"author":{"name":"Aaron LX","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/b8770690a02cc53a273d6b7205229ff7"},"headline":"How To Get Items To Storefront In Magento 2","datePublished":"2020-04-01T13:44:23+00:00","dateModified":"2021-07-22T02:56:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/"},"wordCount":256,"commentCount":0,"publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1","keywords":["Create frontend page to get data in Magento 2","How To Get Items To Frontend In Magento 2","How To Get Items To Storefront In Magento 2","magento 2 tutorials"],"articleSection":["Magento 2 Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/","url":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/","name":"How To Get Items To Storefront In Magento 2 - Magetop Blog","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#primaryimage"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1","datePublished":"2020-04-01T13:44:23+00:00","dateModified":"2021-07-22T02:56:37+00:00","description":"We learned together How To Use Model In Magento 2. Continuing that lesson, I will introduce How To Get Items To Storefront In Magento 2.","breadcrumb":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#primaryimage","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1","width":813,"height":450,"caption":"Magento 2 How To Get Items To Storefront"},{"@type":"BreadcrumbList","@id":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.magetop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Get Items To Storefront In Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/www.magetop.com\/blog\/#website","url":"https:\/\/www.magetop.com\/blog\/","name":"Magetop Blog","description":"Exploring Magento Tips, Tricks, and Trends","publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.magetop.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.magetop.com\/blog\/#organization","name":"Magetop.com","url":"https:\/\/www.magetop.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","width":475,"height":475,"caption":"Magetop.com"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/MagetopStore","https:\/\/x.com\/MagetopStore","https:\/\/www.linkedin.com\/company\/magetop","https:\/\/www.pinterest.com\/magetop","https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA"]},{"@type":"Person","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/b8770690a02cc53a273d6b7205229ff7","name":"Aaron LX","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/475315059_122137709240563546_260104055231757176_n.jpg?fit=96%2C96&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/475315059_122137709240563546_260104055231757176_n.jpg?fit=96%2C96&ssl=1","caption":"Aaron LX"},"description":"Aaron is a passionate writer, crazy about shopping, eCommerce and trends. Besides his outstanding research skills and a positive mind, Aaron eagerly shares his experience with the readers.","url":"https:\/\/www.magetop.com\/blog\/author\/aaron-lx\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/paOdw5-qQ","jetpack-related-posts":[{"id":1402,"url":"https:\/\/www.magetop.com\/blog\/magento-2-extension-tutorial\/","url_meta":{"origin":1664,"position":0},"title":"Magento 2 Extension Tutorial","author":"Aaron LX","date":"February 15, 2020","format":false,"excerpt":"Magento 2 is an open-source platform that allows you can create a module for yourself. And those modules can extend functions for the Magento store. And in this article, I will introduce to Magento 2 Extension Tutorial.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"Magetop Extension Tutorial","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/02\/Extension-Tutorial.jpg?fit=750%2C455&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/02\/Extension-Tutorial.jpg?fit=750%2C455&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/02\/Extension-Tutorial.jpg?fit=750%2C455&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/02\/Extension-Tutorial.jpg?fit=750%2C455&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1640,"url":"https:\/\/www.magetop.com\/blog\/how-to-use-model-in-magento-2\/","url_meta":{"origin":1664,"position":1},"title":"How To Use Model In Magento 2","author":"Aaron LX","date":"April 1, 2020","format":false,"excerpt":"In this tutorial, we will learn about How To Use Model in Magento 2. This is a basic tutorial followed by How To Create Database Table in Magento 2. You should see the previous article to understand this lesson.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"Magento 2 How To Use Model","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Use-Model.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Use-Model.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Use-Model.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Use-Model.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1659,"url":"https:\/\/www.magetop.com\/blog\/how-to-use-helper-and-setting-in-magento\/","url_meta":{"origin":1664,"position":2},"title":"How To Use Helper And Setting In Magento 2","author":"Aaron LX","date":"April 1, 2020","format":false,"excerpt":"I have introduced How To Get Items To Storefront In Magento 2 in the previous lesson. In this lesson, I will introduce you to How To Use Helper And Setting In Magento 2. This lesson is very important, you will need to use it a lot. You should read the\u2026","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"Magento 2 How To Use Hepler And Setting","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Use-Hepler-And-Setting.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Use-Hepler-And-Setting.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Use-Hepler-And-Setting.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Use-Hepler-And-Setting.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1458,"url":"https:\/\/www.magetop.com\/blog\/magento-2-folder-structure\/","url_meta":{"origin":1664,"position":3},"title":"Magento 2 Folder Structure","author":"Aaron LX","date":"March 6, 2020","format":false,"excerpt":"In the first lesson, I want to introduce to you the folder structure of Magento 2 and the function of each of those directories. This is a very important lesson in this series. If you know the functions of each of these folders, it will become easier to absorb the\u2026","rel":"","context":"In "Magento 2 Knowledge Base"","block_context":{"text":"Magento 2 Knowledge Base","link":"https:\/\/www.magetop.com\/blog\/magento-2-knowledge-base\/"},"img":{"alt_text":"Magento 2 Folder Structure","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/03\/Magento-2-Folder-Structure.png?fit=638%2C384&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/03\/Magento-2-Folder-Structure.png?fit=638%2C384&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/03\/Magento-2-Folder-Structure.png?fit=638%2C384&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":10868,"url":"https:\/\/www.magetop.com\/blog\/how-to-build-a-headless-magento-2-storefront-using-graphql-step-by-step-guide\/","url_meta":{"origin":1664,"position":4},"title":"How To Build A Headless Magento 2 Storefront Using GraphQL (Step-by-Step Guide)","author":"Aaron LX","date":"November 11, 2025","format":false,"excerpt":"Headless commerce is rapidly reshaping the Magento ecosystem. With the growing adoption of GraphQL, developers can now build fast, flexible, and decoupled storefronts that enhance performance and scalability.In this guide, we\u2019ll explore how to build a headless Magento 2 storefront using GraphQL, from enabling the API to integrating it with\u2026","rel":"","context":"In "Magento 2 Knowledge Base"","block_context":{"text":"Magento 2 Knowledge Base","link":"https:\/\/www.magetop.com\/blog\/magento-2-knowledge-base\/"},"img":{"alt_text":"Build A Headless Magento 2 Storefront With GraphQL","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/Headless-Magento-2-GraphQL.png?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/Headless-Magento-2-GraphQL.png?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/Headless-Magento-2-GraphQL.png?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/Headless-Magento-2-GraphQL.png?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/11\/Headless-Magento-2-GraphQL.png?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1709,"url":"https:\/\/www.magetop.com\/blog\/how-to-add-mass-actions-in-magento\/","url_meta":{"origin":1664,"position":5},"title":"How To Add Mass Actions In Magento 2","author":"Aaron LX","date":"April 2, 2020","format":false,"excerpt":"In the previous lesson, I showed you How To Custom Admin Grid In Magento 2. Following that lesson, I will show you How To Add Mass Actions In Magento 2. This is a series on Magento 2 Extension Tutorial. The lessons are related to each other so you should read\u2026","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"Magento 2 How To Add Mass Action","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Add-Mass-Action.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Add-Mass-Action.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Add-Mass-Action.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Add-Mass-Action.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/comments?post=1664"}],"version-history":[{"count":6,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1664\/revisions"}],"predecessor-version":[{"id":1760,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1664\/revisions\/1760"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media\/1744"}],"wp:attachment":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media?parent=1664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/categories?post=1664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/tags?post=1664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}