{"id":253273,"date":"2020-06-07T05:03:30","date_gmt":"2020-06-07T05:03:30","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=253273"},"modified":"2020-06-07T05:10:13","modified_gmt":"2020-06-07T05:10:13","slug":"how-to-render-the-page-using-pageloader-in-shopware-6","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/","title":{"rendered":"How to render the page using pageLoader in Shopware 6"},"content":{"rendered":"\n

In this blog, you are going to learn \u201cHow to render the page using pageLoader and event dispatcher in Shopware 6 at the storefront.\u201d
I hope you know the directory structure of Shopware<\/a> 6 plugin, if you don’t know, see here- https:\/\/docs.shopware.com\/en\/shopware-platform-dev-en\/internals\/directory-structure<\/a>.<\/p>\n\n\n\n

Firstly, you have to create a folder in <plugin root>\/src<\/code>. In my case, the folder name is \"Test\"<\/code>, after that, form three files.<\/p>\n\n\n\n

Initially in the first file, generate a getter\/setter method for the page. Then for the second file, create a loader event for the page. Now whatever you want to do on your page write in the function of the third file.
Let’s take an example:-<\/p>\n\n\n\n

First file:- TestProductPage.php<\/p>\n\n\n\n

class TestProductPage extends Page \n{\n  public $products;\n  \n  public function getTestProducts()\n  {\n     return $this->products;\n  }\n\n  public function setTestProducts($products)\n  {\n     $this->products = $products;\n  }\n}<\/pre>\n\n\n\n
In above code, there is  a two methods, getTestProducts()  which return the products and setTestProducts() which set the products.<\/p>\n\n\n\n
Second file:- TestProductPageLoadedEvent.php<\/p>\n\n\n\n
class TestProductPageLoadedEvent extends PageLoadedEvent\n{\n    \/**\n     * @var TestProductPage\n     *\/\n    protected $page;\n\n    public function __construct(TestProductPage $page, SalesChannelContext $salesChannelContext, Request $request)\n    {\n        $this->page = $page;\n        parent::__construct($salesChannelContext, $request);\n    }\n\n    public function getPage(): TestProductPage\n    {\n        return $this->page;\n    }\n}<\/pre>\n\n\n\n
Furthermore, use the first file as a construct and after that, we create events for the page. In my case, there is only one event i.e getPage. Likewise, you can create more events.<\/p><\/amp-fit-text>\n\n\n\n
Third file:- TestProductPageLoader.php<\/p>\n\n\n\n
class TestProductPageLoader\n{\n    \/**\n     * @var GenericPageLoader\n     *\/\n    private $genericLoader;\n\n    \/**\n     * @var EventDispatcherInterface\n     *\/\n    private $eventDispatcher;\n\n    \/**\n     * @var EntityRepositoryInterface\n     *\/\n    private $testRepository;\n\n    public function __construct(\n        GenericPageLoader $genericLoader,\n        EventDispatcherInterface $eventDispatcher,\n        EntityRepositoryInterface $testRepository\n    ) {\n        $this->genericLoader = $genericLoader;\n        $this->eventDispatcher = $eventDispatcher;\n        $this->testRepository = $testRepository;\n      }\n\n    public function load(Request $request, SalesChannelContext $salesChannelContext): TestProductPage\n    {\n        $page = $this->genericLoader->load($request, $salesChannelContext);\n\n        $page = TestProductPage::createFrom($page);\n\n        $criteria = new Criteria();\n        $testProducts = $this->testRepository->search($criteria, $salesChannelContext->getContext());\n        \n        $page->setTestProducts($testProducts);\n\n        $this->eventDispatcher->dispatch(\n            new TestProductPageLoadedEvent($page, $salesChannelContext, $request)\n        );\n\n        return $page;\n    }\n}<\/pre>\n\n\n\n
In this file, you have to use a generic pageLoader and an event dispatcher. Generic page loader helps to load the request of your page and event dispatcher help to dispatch the event i.e you create in the second file. <\/p>\n\n\n\n
$this->genericLoader<\/code> call the load function with request and sales channel parameter. $this->testRepository<\/code> call search function with criteria and context parameters that fetch data from databases of test repository. <\/p>\n\n\n\n
$this->eventDispatcher call the dispatch function that load the loader event of the page.<\/p>\n\n\n\n
Finally, create a controller that calls the page loader of your page i.e TestProductPageLoader<\/p>\n\n\n\n
class TestController extends StorefrontController\n{\n    \/**\n     * @var EntityRepositoryInterface\n     *\/\n    protected $testRepository;\n\n    \/**\n     * @var TestProductPageLoader\n     *\/\n    protected $testPageLoader;\n\n    public function __construct(EntityRepositoryInterface $testRepository, TestProductPageLoader $testPageLoader)\n    {\n        $this->testRepository = $testRepository;\n        $this->testPageLoader = $testPageLoader;\n    }\n\n    \/**\n     * @Route("\/test", name="test", methods={"GET"})\n     *\/\n\n     public function testProductOverview(Request $request, SalesChannelContext $context): Response\n     {\n        $page = $this->testPageLoader->load($request, $context);\n        \n        return $this->renderStorefront('@WebkulTest\/storefront\/page\/test\/index.html.twig', ['page' => $page]);\n     }\n}<\/pre>\n\n\n\n
$this->renderStorefront<\/code> function render the twig file with data stored in the variable ‘page’.<\/p>\n\n\n\n
I hope it will help you. Thanks for reading. Happy Coding \ud83d\ude42
Thank You.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, you are going to learn \u201cHow to render the page using pageLoader and event dispatcher in Shopware 6 at the storefront.\u201dI hope you know the directory structure of Shopware 6 plugin, if you don’t know, see here- https:\/\/docs.shopware.com\/en\/shopware-platform-dev-en\/internals\/directory-structure. Firstly, you have to create a folder in <plugin root>\/src. In my case, the […]<\/a><\/p>\n","protected":false},"author":284,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-253273","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to render the page using pageLoader in Shopware 6 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Rendering the page using a generic pageLoader and eventDispatcher of shopware 6, it gives a reliability and load page faster than normal.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to render the page using pageLoader in Shopware 6 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Rendering the page using a generic pageLoader and eventDispatcher of shopware 6, it gives a reliability and load page faster than normal.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-07T05:03:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-07T05:10:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Diwakar Rana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Diwakar Rana\" \/>\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:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/\"},\"author\":{\"name\":\"Diwakar Rana\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/4b025fe4ecbc5c0378cd13bb70da654f\"},\"headline\":\"How to render the page using pageLoader in Shopware 6\",\"datePublished\":\"2020-06-07T05:03:30+00:00\",\"dateModified\":\"2020-06-07T05:10:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/\"},\"wordCount\":313,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/\",\"name\":\"How to render the page using pageLoader in Shopware 6 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2020-06-07T05:03:30+00:00\",\"dateModified\":\"2020-06-07T05:10:13+00:00\",\"description\":\"Rendering the page using a generic pageLoader and eventDispatcher of shopware 6, it gives a reliability and load page faster than normal.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to render the page using pageLoader in Shopware 6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/4b025fe4ecbc5c0378cd13bb70da654f\",\"name\":\"Diwakar Rana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/46482d0264c191ccd0337892016340a80ca4e4987a37f42514a0506aaee7e8dc?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/46482d0264c191ccd0337892016340a80ca4e4987a37f42514a0506aaee7e8dc?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Diwakar Rana\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/diwakar-rana829\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to render the page using pageLoader in Shopware 6 - Webkul Blog","description":"Rendering the page using a generic pageLoader and eventDispatcher of shopware 6, it gives a reliability and load page faster than normal.","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:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/","og_locale":"en_US","og_type":"article","og_title":"How to render the page using pageLoader in Shopware 6 - Webkul Blog","og_description":"Rendering the page using a generic pageLoader and eventDispatcher of shopware 6, it gives a reliability and load page faster than normal.","og_url":"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2020-06-07T05:03:30+00:00","article_modified_time":"2020-06-07T05:10:13+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Diwakar Rana","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Diwakar Rana","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/"},"author":{"name":"Diwakar Rana","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/4b025fe4ecbc5c0378cd13bb70da654f"},"headline":"How to render the page using pageLoader in Shopware 6","datePublished":"2020-06-07T05:03:30+00:00","dateModified":"2020-06-07T05:10:13+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/"},"wordCount":313,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/","url":"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/","name":"How to render the page using pageLoader in Shopware 6 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2020-06-07T05:03:30+00:00","dateModified":"2020-06-07T05:10:13+00:00","description":"Rendering the page using a generic pageLoader and eventDispatcher of shopware 6, it gives a reliability and load page faster than normal.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-render-the-page-using-pageloader-in-shopware-6\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to render the page using pageLoader in Shopware 6"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/4b025fe4ecbc5c0378cd13bb70da654f","name":"Diwakar Rana","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/46482d0264c191ccd0337892016340a80ca4e4987a37f42514a0506aaee7e8dc?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/46482d0264c191ccd0337892016340a80ca4e4987a37f42514a0506aaee7e8dc?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Diwakar Rana"},"url":"https:\/\/webkul.com\/blog\/author\/diwakar-rana829\/"}]}},"amp_enabled":false,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/253273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/284"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=253273"}],"version-history":[{"count":23,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/253273\/revisions"}],"predecessor-version":[{"id":253298,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/253273\/revisions\/253298"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=253273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=253273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=253273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}