Magento 2 como solução sem cabeça

Quero saber se existem algumas práticas recomendadas para usar o Magento 2 como uma solução de comércio eletrônico sem cabeça .

Um comércio eletrônico típico em 2017 é ter uma solução omni-channel que inclua

• Comércio eletrônico
• CMS
• Multi plataforma
• Integração de sistema de camadas (ERP, ...)

Quero saber como envolver a API do Magento 2 com esse tipo de solução.

Minha abordagem:

• Use uma estrutura de front-end diferente (como angular) para aplicativos da web / aplicativos para dispositivos móveis / desktop

• Use apenas a API do Magento 2 para recuperar ou interagir com dados / ação de comércio eletrônico

• Use apenas a API do CMS para recuperar dados do CMS.

Pro: somente APIs, omnichannel

Contras: limitação de desempenho / recursos / formatação

Algumas perguntas para essa abordagem:

• Quem é responsável pela formatação dos dados, por exemplo, preços. API Magento e estrutura de front-end?
• Quem é responsável por redimensionar as imagens do produto e armazená-las em cache? Porque na API nativa do Magento 2 não há redimensionamento ou sistema de cache.
• Preciso criar uma nova API isolada personalizada ou estender o nativo para fins de atualização futura?
• Você recomenda o uso de uma camada extra para combinar CMS e Magento API?

Agradeço por compartilhar seu retorno em experiência.

Além disso, encontrei esta abordagem: http://fbrnc.net/blog/2015/10/super-scaling-magento

Links úteis:

• https://blogi.lamia.fi/verkkokaupat/headless-ecommerce/
• http://www.magetitans.it/headless-new-buzzword-magento-2-sander-mangel/
• https://www.youtube.com/watch?v=6OuzAtqtWRE

• https://pantheon.io/blog/headless-websites-whats-big-deal-decoupled-architecture

• http://buytaert.net/the-future-of-decoupled-drupal

• https://creately.com/diagram/example-v2/ihbyjjkf/Example%20Headless%20Architecture

• https://www.lullabot.com/articles/should-you-decouple

• https://alankent.me/2016/12/14/headless-magento-and-extensions/

EDIT:

Encontrei uma boa inicialização para criar sua própria lógica de cache para a API do Magento 2: https://github.com/magespecialist/m2-MSP_APIEnhancer

EDIT: Um bom projeto de código aberto para usar o Magento 2 como um comércio eletrônico sem cabeça com o VueJS PWA: https://github.com/DivanteLtd/vue-storefront

EDIT: As ferramentas oficiais do PWA Magento 2 baseadas em React: https://github.com/magento-research/pwa-studio

Respostas às perguntas

Quem é responsável pela formatação dos dados, por exemplo, preços. API Magento e estrutura de front-end?

A API Magento fornece acesso aos dados e à lógica de negócios . A formatação de dados / preços faz parte da lógica de apresentação , portanto, dessa forma, você tem mais flexibilidade para apresentar as informações da maneira que desejar (sem ser forçado a fazê-lo no Magento).

Por exemplo, você pode utilizar o javascript para detectar configurações de localidade e fornecer dados apropriados. Verifique o seguinte: navigator.language toLocaleString ()

Ou você pode optar por importar os preços do Magento para o sistema de terceiros ou a ferramenta de análise de dados, e ter preços formatados de acordo com o formato da moeda apenas interromperá o processo de importação até você resolver a "conversão de moeda".

Quem é responsável por redimensionar as imagens do produto e armazená-las em cache? Porque na API nativa do Magento 2 não há redimensionamento ou sistema de cache.

Exatamente. Como eu disse acima, o Magento fornece acesso aos dados (sem lógica de apresentação). Depende de você como o usará.

Por exemplo, você pode optar por redimensionar a imagem adaptável http://adaptive-images.com/details.htm , para poder usar facilmente a imagem original e fazer o que quiser.

Você pode escolher a maneira como armazenará as imagens em cache, deseja usar a compactação com ou sem perdas para reduzir imagens, etc.

Preciso criar uma nova API isolada personalizada ou estender o nativo para fins de atualização futura?

Eu recomendo que você faça sua API que será usada para a lógica de apresentação, e você terá 99,9% (meu palpite) de que não será afetado por uma futura atualização da API Magento2.

Você recomenda o uso de uma camada extra para combinar CMS e Magento API?

Altamente recomendado. Mas, a camada extra não precisa ser um aplicativo adicional; também pode ser um módulo Magento2. O bom disso é que você é livre para combiná-lo como quiser; você pode criar sua camada de proxy usando qualquer idioma / tecnologia que desejar.

Agradeço por compartilhar seu retorno em experiência.

Existem muitas abordagens que você pode usar aqui. Vou compartilhar minha opinião sobre isso.

Minha abordagem ao decapitado

Primeiro, eu o dividiria em duas camadas: camada proxy e camada de apresentação .

Camada de proxy

A primeira coisa que você deve considerar é sobre a criação da camada Proxy. Nos bastidores, você pode utilizar a API Magento, API CMS, API ERP, API x, o que quiser ...

Na camada de proxy, você pode usar e organizar os dados da maneira que desejar. Você pode implementar a camada de cache lá, bem como funcionalidades adicionais para formatação de dados, rastreamento de clientes, várias automatizações, etc. Em geral, tudo o que você precisa para fazer malabarismos fáceis na camada de apresentação.

A camada de proxy não precisa ser codificada em PHP; ele pode ser codificado em Java, NodeJS ou você pode utilizar o AWS API Gateway, o AWS SQS e o Lambda para fornecer uma camada proxy inteira ou apenas parte dela.

Uma das abordagens que você pode usar é descrita por Fabrizio Branca em http://fbrnc.net/blog/2015/10/super-scaling-magento

Camada de apresentação

A camada de apresentação depende da plataforma do cliente; se você for usá-lo no aplicativo móvel, as coisas ficam bem claras sobre como você deve utilizar a API proxy.

Para um aplicativo da web, existem muitas possibilidades. Você pode usar:

• Solução PHP padrão (desenvolvida por qualquer estrutura), na qual você pode utilizar qualquer um dos mecanismos de modelagem PHP (como Smarty, Twig, Dwoo ...) para fornecer saída HTML
• Java / NodeJS / qualquer idioma com o qual você se familiarize
• Solução puramente baseada em javascript, que renderizaria todo o HTML e chamaria APIs apropriadas por meio do ajax para preenchê-lo com dados
• Qualquer híbrido / combinação dessas abordagens acima

Isso não está na lista de livros , acabei de compartilhar algumas combinações. Na realidade, sua imaginação é o único limite.

Pensamentos finais

Use a solução baseada em javascript o máximo possível, pois pode proporcionar uma melhor experiência ao Cliente, menor carga útil para carregamentos de páginas, você pode até carregar dados especulativos se puder prever as próximas ações do cliente.

MAS, o problema com a solução puramente javascript é SEO. Se todos os seus dados forem carregados pelo Ajax, o Google provavelmente não poderá analisá-los.

A solução é criar um aplicativo híbrido que atenda a página HTML inteira no primeiro carregamento, por exemplo, quando você clica em / catalog / shoes. Para qualquer navegação adicional no site, você pode utilizar o ajax para buscar apenas os blocos necessários.

Uma das abordagens seria criar instantâneos da sua página, por exemplo, usando o PhantomJS . Também existem poucas soluções pagas para isso, como:

• https://prerender.io
• http://www.brombone.com

Posso compartilhar algumas idéias sobre o desenvolvimento de projetos magento sem cabeça, já que minha empresa criou 2 deles.

Decidimos usar o reactjs como um aplicativo de front-end e conectá-lo ao back-end alimentado por nó. As chamadas de API para o magento foram realizadas pelo nó no lado do servidor. Isso significava que nenhuma chamada ao magento foi enviada pelo navegador.

Do ponto de vista da API, é bom, mas há alguns problemas que encontramos durante o desenvolvimento. Às vezes, os pontos de extremidade do Magento2 são muito limitados. Por padrão, o manipulador de terminal não permite injetar dados adicionais na resposta, pois eles não são fornecidos extension_attributesa cada um. Com o frontend escrito separadamente, não é uma boa notícia. Muitas vezes enfrentamos a necessidade de adicionar alguns dados e não conseguimos fazer isso para o endpoint nativo do magento devido à falta de extension_attributes. Essas instâncias necessárias para substituir o terminal do magento e fornecer campos adicionais à nossa própria interface ou criar nosso terminal personalizado estendendo o terminal do magento e alterando o que precisamos.

Por exemplo, precisamos substituir /rest/V1/categoriescomo magento, por padrão, não adiciona o caminho da URL à árvore de categorias. /rest/V1/productso que deveria buscar dados do produto também era muito limitado para nós, pois precisávamos usá-los para exibição de categoria e queríamos receber filtros disponíveis nessa resposta.

Outro problema estava faltando terminais. Tivemos que criar um para enviar e-mail de contato, navegação por categoria, buscar dados de cotação de quoteId e mais alguns para lidar com elementos específicos do projeto. De um modo geral, onde na frente normal do Magento2 você criaria um bloco buscando alguma coleção personalizada para lidar com isso, pode ser necessário adicionar seu ponto de extremidade da API.

A parte mais complicada foi o check-out. Embora esteja preparado para o modo sem cabeça, ainda existem algumas peças que exigiram ajustes específicos. Se você estiver usando paypal, normalmente você será redirecionado para o site paypal para pagamento com algum tokent. Para nós, esse token precisa ser buscado separadamente, pois não seguimos o caminho padrão de redirecionamento. Caso semelhante ocorreu com a conexão da Adyen, que exigiu o redirecionamento após a realização do pedido. O endpoint padrão do magento retorna apenas o ID do pedido com sucesso e não permite injetar URL de redirecionamento. Também tivemos alguns problemas com a implementação do 3dSecure.

Uma coisa importante a considerar e deixar claro para o cliente antes de ficar sem controle é que todas as partes relacionadas aos frontend dos módulos externos precisarão ser reescritas para sua implementação específica. Como atualmente não há como um módulo adicionar seus próprios dados a qualquer parte sem cabeça. A única coisa que o módulo pode fazer é fornecer pontos de extremidade da API.

No geral, o magento sem cabeça é definitivamente possível. Acabamos tendo um módulo personalizado para esses ajustes e novos pontos de extremidade que poderiam ser usados ​​com outros projetos.

O reagir front funciona muito bem, pois o reag front pode armazenar muitas coisas em cache e o back-end do nó é extremamente rápido. Estamos removendo o tempo necessário para visualizar parte da solicitação padrão do magento dessa maneira.

Se você quiser verificar como ele se comporta, aqui estão os links para os projetos:

https://therake.com/

https://www.emperia.ch/

Se alguém fala holandês, pode consultar também este artigo sobre o therake: http://www.marketingfacts.nl/berichten/headless-magento-2-de-toekomst-van-e-commerce

[ATUALIZAR]

Atualização sobre a questão do fluxo de checkout. Enquanto escrevia, o check-out foi complicado. Os gateways de pagamento nos níveis da API são basicamente inexistentes. Por exemplo, no check-out regular, a maioria dos gateways de pagamento o redireciona para outro site para concluir o pagamento. Alguns desses módulos estão criando pedidos no magento no estado pendente, outros (paypal express) redirecionam antes que o pedido seja criado. Esses redirecionamentos geralmente dependem da sua sessão para recuperar detalhes após o retorno. Esse foi um problema, pois o ponto de extremidade da API placeOrder retorna apenas o ID do pedido recém-criado e não as informações de um redirecionamento. Como também estávamos acessando não o magento diretamente, mas o back-end do nó, a sessão precisa ser restaurada adequadamente ao retornar do gateway. Nossos projetos atuais têm gateways paypal e Adyen integrados e demoramos mais de 150h.

Aqui está o projeto de código aberto https://github.com/ishakhsuvarov/going-headless

Este repositório é criado por discussão "Going Headless", que fazia parte das sessões do Imagine 2017 DevExchange, para coletar e discutir idéias sobre o uso da API Web do Magento com front-end personalizado. O principal objetivo deste projeto é coletar os pontos mais críticos e dolorosos nos fluxos de API da Web e desenvolvimento de uma solução que satisfaça a maioria dos casos de uso.