Este tutorial tem como base demonstrar um dos métodos para atualização de dados dinâmicos em interfaces Magento 2, estas interfaces são desenvolvidas usando um conjunto de frameworks javascripts orquestrados para melhor atender o Magento como um todo, vamos fazer uso da biblioteca Knockout para atualização de dados dinamicos vindos do backend via json.

Primeiramente vamos criar a estrutura Básica do módulo:

app/code/Joridos/CheckoutAjax/etc/module.xml

 

app/code/Joridos/Checkout/registration.php

 

Agora habilitamos nosso módulo

 

O Magento 2 trás um novo conceito que é o de conteúdos privados e conteúdos públicos, conteúdos públicos são os dados em que todos os clientes veem da mesma forma sem alterações, já os privados são dados que ficam armazenados na sessão do browser.

Conteúdo público: Estes tipos de dados são armazenados no cache configurado que pode ser em arquivos do sistema, MySQL, ou Redis, armazenados até mesmo no Varnish. Exemplos desses conteúdos são header, footer e catálogo.

Conteúdo privado: Esses tipos de dados são armazenados no cache do navegador do cliente, o famoso localstorage. Exemplos desses conteúdos são lista de presentes, nome do cliente, endereço do cliente, informações do carrinho de compras. Lembrando que esse tipo de conteúdo deve representar apenas uma pequena parte da página.

Mais informações sobre sections e conteúdo público/privado podem ser vista na documnenntação http://devdocs.magento.com/guides/v2.0/config-guide/cache/cache-priv-priv.html
OBS: usarei apenas o código necessário nos exemplos, de qualquer modo só usar o fallback do luma ou blank

Com o módulo já criado, precisa ser informado ao Magento 2 que queremos adicionar um novo provedor de dados para o cliente, lembrando que o magento 2 usa dependency injection através de arquivos xml de configurações, precisamos criar então nosso di.xml em app/code/Joridos/CheckoutAjax/etc/frontend/di.xml conforme o seguinte exemplo.

app/code/Joridos/CheckoutAjax/etc/frontend/di.xml

 

Agora que o Magento 2 sabe que criamos um provedor vamos criar a classe que implementa a interface SectionSourceInterface para podermos prover os dados atualizados.

app/code/Joridos/CheckoutAjax/CustomerData/AjaxCart.php

 

Nesta classe o que precisamos ter atenção é o método getSectionData que é obrigado pelo contrato com a interface SectionSourceInterface a implementarmos, esse método retorna as informações privadas a serem atualizadas.
Agora vamos atualizar nossa página de checkout com o bloco do nosso template Knockout que ira renderizar os dados na tela buscando da nossa section.

app/code/Joridos/CheckoutAjax/view/frontend/layout/checkout_cart_index.xml

 

Vamos agora criar o conteúdo do nosso template que será atualizado via section.

app/code/Joridos/CheckoutAjax/view/frontend/templates/cart/form.phtml

Como podem ver nosso componente é chamado e inicializado buscando da configuração do xml pelo <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>, vamos agora definir nosso componente javascript Knockout em app/code/Joridos/CheckoutAjax/view/frontend/web/js/view/ajax-cart.js

Através do this.ajaxCart definimos que nossos dados vão vir apartir da section ajax-cart, no template através do ajaxCart().grand_total por exemplo podemos agora fazer bind do dado direto no backend através das sections.

Bem esses foi um post bem básico sobre sections, tem muita coisa que pode ser feita com ela, vou deixar abaixo alguns links para consultarem e entenderem mais sobre as sections.

 

Referencias:

Magento 2 Knockout Library & Invalidate Private Data

http://devdocs.magento.com/guides/v2.0/config-guide/cache/cache-priv-priv.html

https://mage2.pro/t/topic/1001/2