Novas Checkout Extensions – Shopify Plus

A Shopify Plus permite um nível avançado de personalização no checkout através das UI Checkout Extensions. Estas extensões foram desenvolvidas para criar uma experiência de checkout mais ajustada às necessidades das lojas, mantendo a segurança e simplicidade da plataforma.

O que são as UI Checkout Extensions?

As UI Checkout Extensions são componentes que os developers podem integrar diretamente no checkout da Shopify Plus. Isto permite a adição de funcionalidades personalizadas, sem a necessidade de modificar o código principal da Shopify, o que assegura que a segurança e a performance da loja online não são comprometidas.

Benefícios de utilizar as Checkout Extensions:

  • Flexibilidade: Permite aos lojistas adaptar o checkout à sua realidade de negócios, adicionando elementos informativos ou interativos.
  • Escalabilidade: Através do uso de frameworks como React e TypeScript, as extensões são facilmente escaláveis e mantêm-se alinhadas com as atualizações da Shopify.
  • Manutenção simplificada: As extensões são mantidas fora do core da plataforma, o que facilita futuras atualizações sem causar problemas de compatibilidade.

Exemplos de Implementações

Alguns exemplos de como estas extensões podem ser utilizadas:

  • Exibir uma mensagem personalizada aos clientes sobre os prazos de expedição.
  • Adicionar caixas de seleção para consentimentos ou preferências.
  • Apresentar meios de pagamento adaptados ao País do utilizador
  • Mostrar recomendações de produtos adicionais com base na seleção do cliente.

Implementação prática de uma UI Checkout Extension

Agora, vamos passar à parte prática, onde irei demonstrar como criar uma extensão no checkout usando React, TypeScript e Remix. Vamos criar uma caixa informativa que diz:
“Todas as encomendas recebidas até às 12h são expedidas no próprio dia”.

Requisitos:
Passo 1: Configurar o Ambiente
  1. Certifica-te que tens Node.js e Shopify CLI instalados nas versões mencionadas.
  2. Cria uma nova aplicação com o comando:

npm init @shopify/app@latest

App name: checkout-extension-plus

Get started bulding your app: Build a Remix App

For your Remix template, which language do you want: Typescript

A seguir corre o comando:

npm run shopify app generate extension

Type of extension: Checkout UI

Name your extension: checkout-extension-plus

What would you like to work in: Typescript React

A seguir corre o comando:

shopify app dev

Passo 2: Construir a Extensão

Após a configuração inicial, vais desenvolver o código da extensão em React e TypeScript. Aqui está um exemplo simples:

import {
reactExtension,
Banner,
BlockStack,
Checkbox,
Text,
useApi,
useApplyAttributeChange,
useInstructions,
useTranslate,
} from "@shopify/ui-extensions-react/checkout"; // 1. Choose an extension target
export default reactExtension("purchase.checkout.block.render", () => (

)); function Extension() {
const translate = useTranslate();
const { extension } = useApi();
const instructions = useInstructions();
const applyAttributeChange = useApplyAttributeChange();

// 2. Check instructions for feature availability, see https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions for details
if (!instructions.attributes.canUpdateAttributes) {
return null;
} // 3. Render the information box
return (


Todas as encomendas recebidas até às 12h são expedidas no próprio dia


);
}

Este componente exibe uma mensagem simples no checkout. Claro, podes expandi-lo conforme necessário.

Passo 3: Testar e Publicar

Após o desenvolvimento, testa a tua extensão utilizando a Shopify CLI e, quando estiver pronta, podes publicá-la na tua loja Shopify Plus.

Com este artigo, deves conseguir criar a tua primeira extensão para personalizar o checkout da Shopify Plus. Continuarei a explorar mais sobre o potencial destas extensões nos próximos artigos.