R
Interview Deckreact · next.js · senior/staff
✓ 0·⟳ 0·122
System Design

VTEX IO & Shopify ThemeExtension

Store Framework, blocos, Pixel App, ThemeExtension do Shopify. O stack provável do Grupo SBF.

Definição

VTEX IO é a plataforma de desenvolvimento da VTEX para storefronts. Store Framework permite construir páginas como composição de blocos React com schema declarativo. Pixel App é a extensão nativa para captura de eventos. ThemeExtension (Shopify) é o equivalente: extensões que se conectam a um tema sem modificar o código base — usadas para adicionar widgets, blocos personalizados, ou tracking.

Problema → Solução
Problema
Storefront de e-commerce precisa ser performático (Core Web Vitals), customizável por marca (Centauro vs Nike), instrumentado para tracking, e seguro contra XSS (conteúdo de terceiros). Sem framework, cada marca reinventa.
Solução
VTEX IO: cada componente é um app versionado, instalável por loja. Layout é JSON (interfaces de bloco). Pixel App captura eventos sem modificar componentes. SSR + edge cache para LCP rápido. Shopify ThemeExtension: blocos plug-and-play que aparecem no theme editor — merchant ativa sem código. Para tracking: app embed que injeta script no head.
Dica de entrevista
Tip
Na entrevista, ao falar de VTEX, mencione: Store Framework (composição declarativa), Pixel App (nativo para tracking), Render Server (SSR otimizado). Para Shopify: ThemeExtension blocks, app embeds, scriptTag legacy vs Web Pixel API moderna.
Código
// VTEX IO Pixel App — captura nativa de eventos
import { canUseDOM } from 'vtex.render-runtime'

window.addEventListener('message', (e) => {
  if (!e.data || e.origin !== window.origin) return

  // Eventos da VTEX Store disparam neste channel
  const { eventName, ...data } = e.data

  if (eventName === 'vtex:productView') {
    track('view_item', {
      sku: data.product.sku,
      price: data.product.price,
    })
  }

  if (eventName === 'vtex:addToCart') {
    track('add_to_cart', {
      sku: data.items[0].id,
      quantity: data.items[0].quantity,
      price: data.items[0].sellingPrice,
    })
  }

  if (eventName === 'vtex:orderPlaced') {
    track('purchase', {
      transaction_id: data.order.orderId,
      value: data.order.value,
      items: data.order.items,
    })
  }
})

// Shopify ThemeExtension — block declaration
// shopify/blocks/tracker.liquid
{% schema %}
{
  "name": "Tracking Block",
  "target": "section",
  "settings": [
    { "type": "text", "id": "endpoint", "label": "Collector URL" }
  ]
}
{% endschema %}

// IntersectionObserver para scroll infinito
const sentinelRef = useRef(null)
useEffect(() => {
  const obs = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting && !loading) fetchNextPage()
  }, { rootMargin: '500px' })  // antecipa
  if (sentinelRef.current) obs.observe(sentinelRef.current)
  return () => obs.disconnect()
}, [loading])
Perguntas de entrevista
Q.Como implementar scroll infinito em e-commerce?▾
A.IntersectionObserver no último item da lista para detectar visibilidade próxima do fim. Quando dispara, fetch da próxima página. Estado paginado em useState/useReducer. Throttle no observer para não disparar múltiplos requests. Skeleton enquanto carrega. Track view_item_list para cada batch carregado.
Q.Como instrumentar tracking em VTEX IO sem modificar a storefront?▾
A.Pixel App: você cria uma app de tipo "pixel" que recebe eventos do VTEX Store via window.vtex events. Não toca em componentes existentes — só escuta. Vantagem: instalação por loja sem rebuild da storefront, fácil de A/B testar duas implementações.
Q.Shopify ThemeExtension vs ScriptTag: qual usar?▾
A.ThemeExtension app blocks: moderno, declarativo, merchant ativa no theme editor, performático. ScriptTag: legacy, injeta script no global, sem controle do merchant. Para tracking moderno em Shopify: usar Web Pixel API (sandbox seguro, performance otimizada) em vez de ScriptTag.
Termos relacionados
SSRLCPXSS
111/122← →