Como recuperar o carrinho entre dispositivos

Este guia mostra como implementar a recuperação automática do carrinho de compras quando o cliente faz login em um novo dispositivo ou navegador, utilizando as queries checkoutRecoverLastCart e checkoutLite.

Com essa abordagem, o usuário mantém os produtos adicionados ao carrinho em qualquer dispositivo, proporcionando uma experiência de compra contínua.

Fluxo de funcionamento

1. Detectar usuário logado — via customerAccessToken salvo em cookie.
2. Checar se já existe carrinho local — via cookie carrinho-id.
3. Consultar se o carrinho local tem produtos — query checkoutLite.
4. Caso não tenha produtos, recuperar último carrinho do usuário — query checkoutRecoverLastCart.
5. Substituir carrinho atual pelo recuperado e atualizar a página.
6. Evitar execução repetida — usando um cookie de controle (sf_cart_recovered).

Exemplo de implementação em JavaScript

JavaScript

// 1. Verifica se o checkout tem produtos
async function hasProductsCheckout(checkoutId) {
  if (!checkoutId) return false;

  try {
    const query = `
      query GetCarrinho { 
        checkoutLite(checkoutId:"${checkoutId}") {
          hasProducts
        }
      }`;
    
    const result = await client.query(query);
    return result?.checkoutLite?.hasProducts || false;
  } catch {
    return false;
  }
}

// 2. Recupera o último carrinho do usuário
async function recoverLastCart(customerAccessToken) {
  if (!customerAccessToken) return null;

  try {
    const query = `
      query GetUltimoCarrinho { 
        checkoutRecoverLastCart(customerAccessToken:"${customerAccessToken}") {
          checkoutId
        }
      }`;

    const result = await client.query(query);
    return result?.checkoutRecoverLastCart?.checkoutId || null;
  } catch {
    return null;
  }
}

// 3. Função principal
async function carrinhoCompartilhado() {
  const cartRecoverCookieName = "sf_cart_recovered";
  const cartRecoverStatus = client.cookie.get(cartRecoverCookieName);
  const customerAccessToken = client.cookie.get("sf_customer_access_token");

  if (!customerAccessToken || cartRecoverStatus) return;

  const checkoutId = client.cookie.get("carrinho-id");

  const executarRecuperacao = async () => {
    const lastCheckoutId = await recoverLastCart(customerAccessToken);
    client.cookie.set(cartRecoverCookieName, "1");
    if (lastCheckoutId) {
      await client.checkout.setCheckoutId(lastCheckoutId);
      refreshPage();
    }
  };

  if (!checkoutId) {
    await executarRecuperacao();
  } else {
    client.cookie.set(cartRecoverCookieName, "1");
    const hasProducts = await hasProductsCheckout(checkoutId);
    if (!hasProducts) {
      await executarRecuperacao();
    }
  }
}

Pontos de atenção

• Idempotência: use um cookie (sf_cart_recovered) para evitar múltiplas execuções no mesmo login.
• Customização: este exemplo pode ser adaptado para outros cenários, como sempre sobrescrever o carrinho ou mesclar itens.
• Fallback seguro: em caso de erro nas queries, funções retornam false/null para não quebrar o fluxo.
• Atualização imediata: refreshPage() garante que a UI exiba o carrinho atualizado.

Links úteis

• Documentação da query checkoutRecoverLastCart - Link
• Documentação da query checkoutLite - Link