Raul Watson Apr 15, 2018 2 min de lectura

Como: Renderizar un Grid en el Frontend usando un Ui Component en Magento 2

En esta página

Los listing Ui Components están por todas partes en el admin, pero nada te impide renderizar uno en la tienda, una página de “mis descargas”, una lista de registros asociados al cliente, ese tipo de cosas. No es algo que se vea todos los días, así que déjame mostrarte el pequeño truco que lo hace funcionar.

Este post asume que ya tienes un módulo con un route de frontend y un controlador. Si lo necesitas, echa un vistazo a Como: Crear una pagina de success diferente para un método de pago en Magento2, donde creo un route de frontend.

Declarar el listing

Un listing de frontend se declara igual que uno de admin, pero vive bajo view/frontend/ui_component/. El data provider apunta a una colección de tus registros.

xml
<?xml version="1.0"?>
<!-- app/code/Vendor/Module/view/frontend/ui_component/vendor_entity_listing.xml -->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <settings>
        <spinner>vendor_entity_columns</spinner>
    </settings>
    <dataSource name="vendor_entity_listing_data_source" component="Magento_Ui/js/grid/provider">
        <settings>
            <updateUrl path="mui/index/render"/>
        </settings>
        <dataProvider name="vendor_entity_listing_data_source" class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>entity_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <columns name="vendor_entity_columns">
        <column name="title">
            <settings>
                <label translate="true">Title</label>
            </settings>
        </column>
    </columns>
</listing>

Renderizarlo en un layout de frontend

Este es el truco. En el layout de la página de tu controlador, colocas el listing con el nodo <uiComponent>, exactamente como lo hace mui internamente.

xml
<?xml version="1.0"?>
<!-- app/code/Vendor/Module/view/frontend/layout/vendor_entity_index.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <uiComponent name="vendor_entity_listing"/>
        </referenceContainer>
    </body>
</page>

Nota: El updateUrl del data source aún apunta a mui/index/render, que es un route de admin. Si tu grid necesita AJAX (ordenar, paginar), tendrás que exponer un controlador de render de frontend o mantener el grid simple y renderizado en servidor. Para una lista de solo lectura el render por defecto suele ser suficiente.

Registra la colección de tu listing en el di.xml (el mismo argumento collections que usas para los grids de admin), despliega el static content, limpia la caché y tu grid se renderiza ahí mismo en la tienda.

Espero que esto ayude.

Si tienes alguna pregunta o conoces una mejor manera de lograr esto, siéntete libre de compartir en los comentarios a continuación.