feat(opencart): add docs

docs/ecommerce/opencart/_category_.json

@@ -0,0 +1,13 @@
+{
+  "label": "OpenCart",
+  "collapsible": true,
+  "collapsed": true,
+  "className": "red",
+  "link": {
+    "type": "generated-index",
+    "title": "OpenCart 4"
+  },
+  "customProps": {
+    "description": "Veja como integrar o Pix em sua loja OpenCart 4"
+  }
+}

docs/ecommerce/opencart/opencart-extension.mdx

@@ -0,0 +1,189 @@
+---
+id: opencart-extension
+title: Como integrar o Pix em sua loja OpenCart 4
+sidebar_label: Extensão pro OpenCart 4
+tags:
+  - ecommerce
+  - opencart
+  - plugin
+  - extension
+---
+
+A Woovi disponibiliza uma extensão para o OpenCart 4 que permite a integração do Pix em seu checkout, com suporte à atualização automática do status de seus pedidos e logs.
+
+A plataforma efetua em tempo real a conciliação entre seu Banco e sua loja. Após conectar a sua conta na Woovi é possível cobrar clientes em tempo real com QrCodes Pix, enviar links de pagamento e gerenciar cobranças incluindo extornos.
+
+Veja como é fácil aumentar suas vendas integrando o Pix em sua loja:
+
+## Pré-requisitos
+
+:::caution Preste atenção
+- Uma loja com o OpenCart 4 instalado.
+:::
+
+## Instalação
+
+Antes de instalar a extensão, é importante garantir que ela esteja disponível na sua loja. Isso pode ser feito de duas maneiras: através do marketplace ou fazendo o upload do arquivo da extensão.
+
+### Marketplace
+
+A maneira mais conveniente de baixar a extensão em sua loja é acessando o [marketplace oficial](#coloque-o-link-da-extensao) do OpenCart. Lá, você encontrará a extensão pronta para ser baixada e instalada com facilidade.
+
+Veja como você pode baixar utilizando o marketplace:
+
+#### 1) Acesse o painel de administração
+
+Para acessar o marketplace e carregar a extensão na sua loja, siga estes passos simples:
+
+1. No painel de administração da sua loja, localize a barra lateral e clique na opção _Extensions_.
+
+2. Em seguida, no submenu que é exibido, clique na opção _Marketplace_:
+![Acesso ao submenu com o marketplace como opção](/img/ecommerce/opencart/marketplace-access.png)
+
+Ao seguir essas etapas, você será direcionado para o marketplace oficial do OpenCart.
+
+#### 2) Pesquise a extensão
+
+Ao acessar o marketplace, pesquise pela extensão _Woovi - Simplifique e ganhe mais, nosso Pix é demais._:
+
+![Listagem do marketplace com a extensão](/img/ecommerce/opencart/marketplace-search.png)
+
+#### 3) Inicie o download
+
+Role um pouco a página até encontrar a seção _Download_. Clique nessa seção e em seguida no botão _Download_ para carregar a nossa extensão na sua loja:
+
+![Página da extensão com o botão de Download](/img/ecommerce/opencart/extension-download-page.png)
+
+### Upload do arquivo
+
+Além do marketplace, você também tem a opção de carregar manualmente o arquivo da extensão. Para isso, acesse a página do instalador de extensões, localizado na opção _Installer_ no menu _Extensions_ do OpenCart:
+
+![Opção do instalador de extensões no menu do OpenCart](/img/ecommerce/opencart/extension-installer-menu-option.png)
+
+Ao acessar a página do instalador de extensões, localize o botão de upload azul localizado no canto superior direito do seu painel. Clique nesse botão e selecione o arquivo da extensão que deseja carregar:
+
+![Seleção do arquivo](/img/ecommerce/opencart/extension-file-selection.png)
+
+### Instalando a extensão
+
+Após baixar a extensão, seja através do marketplace ou por upload, você encontrará a extensão na página do instalador de extensões. Nessa página, localize a extensão _Woovi_ e clique no botão verde com o símbolo "+" para dar continuidade à instalação:
+
+![Botão para instalar a extensão](/img/ecommerce/opencart/install-extension-button.png)
+
+### Instalando o método de pagamento
+
+Acesse a página de extensões por meio da sub-opção _Extensions_ dentro da outra opção _Extensions_:
+
+![Sub-opção "Extensions" selecionada](/img/ecommerce/opencart/extensions-menu-option.png)
+
+Na página de extensões, utilize a opção de filtro para selecionar extensões do tipo _Payment_:
+
+![Filtro pelo tipo _Payment_ habilitado](/img/ecommerce/opencart/extension-list-filtered-by-payment-type.png)
+
+Para instalar _definitivamente_ nossa extensão como um método de pagamento, role um pouco para baixo na página e clique no botão verde com o símbolo "+" na extensão Woovi:
+
+![Instalação da extensão Woovi como método de pagamento](/img/ecommerce/opencart/install-payment-method.png)
+
+Após isso, clique no botão azul com o ícone de um lápis para acessar a página de configuração da extensão.
+
+## Configuração
+
+Após acessar a página de configurações da extensão, é necessário ativar a extensão no checkout pressionando o botão _Status_: 
+
+![Página de configurações com o botão _Status_](/img/ecommerce/opencart/admin-settings-status.png)
+
+Tendo habilitado o botão Status, _Pix_ deverá aparecer como método de pagamento no checkout.
+
+No entanto, é necessário integrar a extensão com a plataforma Woovi e isto pode ser feito adicionando a url de _webhook_ na plataforma.
+
+Para obter essa URL, vá até a página de configurações e copie ela:
+
+![Página de configurações com a url de webhook](/img/ecommerce/opencart/admin-settings-webhook.png)
+
+Entre na plataforma da Woovi e [clique aqui](https://app.woovi.com/home/applications/opencart/add/oneclick) ou vá em `API/Plugins` > `OpenCart` > `Adicionar`:
+
+![Botão de adicionar um plugin na plataforma Woovi](/img/ecommerce/opencart/woovi-plugin-card.png)
+
+Cole a URL de webhook no campo _Preencha a url do seu site_ e pressione o botão _Salvar_:
+
+![Formulário para adicionar uma integração na plataforma Woovi](/img/ecommerce/opencart/woovi-add-plugin-form.png)
+
+Após isto, verifique se o _AppID_, um código que identifica sua loja, se encontra na página de configurações:
+
+![Página de configurações com o AppID adicionado](/img/ecommerce/opencart/admin-settings-appid.png)
+
+Pronto, agora vamos aprender como utilizar o Pix no seu checkout.
+
+## Como utilizar o Pix no checkout
+
+Ao realizar uma compra em sua loja OpenCart, o cliente será redirecionado para a página de checkout.
+
+Nesta página, o cliente deverá inserir seu CPF ou CNPJ, que será utilizado para a cobrança Pix:
+
+![Formulário de checkout com o CPF/CNPJ](/img/ecommerce/opencart/checkout-form-with-tax-id.png)
+
+Após isso, o cliente deve selecionar _Pix_ como método de pagamento (_Payment Method_):
+
+![Selecionando Pix como método de pagamento](/img/ecommerce/opencart/checkout-payment-method-selector.png)
+
+Ao confirmar a compra, o QR Code do Pix será exibido na página de sucesso, pronto para ser escaneado pelo seu cliente:
+
+![Página de sucesso do checkout](/img/ecommerce/opencart/checkout-success-js-plugin.png)
+![QrCode do Pix na página de sucesso do checkout](/img/ecommerce/opencart/checkout-success-js-plugin-part2.png)
+
+## CPF/CNPJ
+
+O CPF/CNPJ utilizado nas cobranças do Pix pode ser obtido de duas formas:
+
+- Através dos _custom fields_ (campos personalizados) do OpenCart.
+- Ou diretamente durante o checkout.
+
+Os custom fields são uma funcionalidade do OpenCart que permitem adicionar campos adicionais nos dados dos clientes.
+
+Durante a instalação, a extensão configura automaticamente o custom field necessário para que os clientes possam inserir seu CPF/CNPJ durante o registro:
+
+![CPF/CNPJ durante o registro](/img/ecommerce/opencart/account-register-with-taxid.png)
+
+Caso deseje, é possível alterar o custom field utilizado ou até mesmo desativar essa configuração no painel de administração, selecionando a opção _None_ (Nenhum):
+
+![Configuração ou desativação do custom field](/img/ecommerce/opencart/admin-settings-custom-field.png)
+
+Se a extensão não puder encontrar um custom field, no checkout irá aparecer diretamente um campo para que o cliente possa inserir seu CPF ou CNPJ, logo acima do botão de confirmação do pedido:
+
+![Campo CPF/CNPJ durante o checkout](/img/ecommerce/opencart/checkout-custom-field.png)
+
+## Como configurar os status dos pedidos
+
+As configurações dos status de cada pedido podem ser encontradas na página de configurações:
+
+![Configurações dos status dos pedidos](/img/ecommerce/opencart/admin-settings-order-status.png)
+
+### Quando um pedido for criado
+
+Por padrão, quando a cobrança da Woovi é criada, o status do pedido é alterado para _Pending_ (pendente). No entanto, é possível configurá-lo para qualquer status desejado:
+
+![Configuração do status quando um pedido for criado](/img/ecommerce/opencart/admin-settings-order-status-when-waiting.png)
+
+Veja um exemplo de pedido que acabou de ser criado:
+
+![Pedido de exemplo com o status pendente](/img/ecommerce/opencart/example-order-pending-status.png)
+
+### Quando o pedido for pago
+
+Por padrão, quando a cobrança da Woovi é paga, o status do pedido é alterado para _Processing_ (processando). No entanto, é possível configurá-lo para qualquer status desejado:
+
+![Configuração do status quando um pedido for pago](/img/ecommerce/opencart/admin-settings-order-status-when-paid.png)
+
+Veja um exemplo de pedido que acabou de ser pago:
+
+![Pedido de exemplo com o status processando](/img/ecommerce/opencart/example-order-processing-status.png)
+
+## Como visualizar os logs da sua loja
+
+Você pode acessar os logs da sua loja acessando a página localizada na barra lateral do seu painel de administração, em _System_ (Sistema) > _Maintenance_ (Manutenção) > _Error logs_ (Registro de erros):
+
+![Opção de log na barra lateral do painel](/img/ecommerce/opencart/admin-sidebar-log-option.png)
+
+Na página de logs, clique no botão "woovi.log" para acessar a página com os logs da extensão:
+
+![Página de logs da extensão](/img/ecommerce/opencart/admin-logs-page.png)

src/pages/index.tsx

@@ -9,7 +9,8 @@ import {
   FaPhp,
   FaJava,
   FaPython,
-  FaWhatsapp
+  FaWhatsapp,
+  FaOpencart,
 } from 'react-icons/fa';
 import { GrOracle } from 'react-icons/gr';
 import { SiVtex, SiNodedotjs, SiPowershell, SiWoo, SiDelphi } from 'react-icons/si';
@@ -234,6 +235,14 @@ const cards = [
     icon: <SocPanelIcon size={30} />,
     docsTo: '/docs/integrations/socpanel-openpix',
   },
+  {
+    title: 'OpenCart',
+    content:
+      'Aumente suas vendas agora no OpenCart 4 recebendo pagamentos instantâneos com Pix!',
+    icon: <FaOpencart size={30} />,
+    docsTo: '/docs/ecommerce/opencart/opencart-extension',
+    to: 'https://app.woovi.com/home/applications/opencart/add',
+  },
 ];
 
 const Home = () => {
@@ -291,4 +300,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;