Ao realizar atualizações de versão major em aplicativos do VTEX IO, as vezes enfrentamos o desafio de perder o conteúdo previamente cadastrado via site-editor. No entanto, é possível tomar medidas para preservar esses dados cruciais e evitar perdas indesejadas. Neste guia, vamos explorar como manter o conteúdo mesmo após atualizações de major. Utilizando GraphQL IDE da VTEX Antes de começar, certifique-se de ter instalado o GraphQL IDE em seu ambiente VTEX. Se ainda não o fez, execute o seguinte comando: vtex install vtex.admin-graphql-ide@3.x Com o app vtex.admin-graphql-ide@3.x instalado, acesse o GraphQL IDE pelo admin (admin/graphql-ide). Executando a Mutation Na lista “Escolher um aplicativo”, selecione vtex.pages-graphql@2.x. Copie e cole o código abaixo na GraphQL IDE: mutation{updateThemeIds(from:”{appvendor}.{appname}@{oldmajor}.x”, to:”{appvendor}.{appname}@{newmajor}.x”)} Essa mutation específica auxilia na atualização adequada das IDs de tema, preservando assim o conteúdo cadastrado durante atualizações de major.   Ao seguir esse procedimento durante atualizações de major, você assegura a continuidade do seu conteúdo valioso, mantendo a consistência e evitando perdas desnecessárias. Complemento Para mais detalhes e informações adicionais, consulte a documentação oficial da VTEX

Ao lidar com a VTEX IO, surge a pergunta prática: “É mais vantajoso usar o componente responsive-layout ou simplesmente estilizar com CSS?”. A escolha entre essas abordagens impacta diretamente o desempenho e a praticidade no desenvolvimento. Neste post, vamos esclarecer essa decisão, analisando experiências práticas e considerando cenários específicos. Necessidade de navegações distintas, casos específicos e uso estratégico Se a aplicação requer diferentes conjuntos de blocos para as versões desktop e mobile, o responsive-layout se torna uma escolha natural. Ele oferece a flexibilidade necessária para adaptar o layout conforme a necessidade de navegações distintas, melhorando a experiência do usuário.   A escolha entre responsive-layout e CSS dependerá, em última análise, dos requisitos específicos de cada projeto. Em situações em que é estritamente necessário um conjunto diferente de blocos para dispositivos diferentes, o responsive-layout brilha. No entanto, quando a adaptação pode ser alcançada eficientemente com CSS, essa alternativa pode ser mais leve e direta. Preferência por CSS quando possível Em cenários mais simples, onde a adaptação responsiva pode ser facilmente alcançada com CSS puro, essa abordagem pode ser mais direta. A simplicidade do CSS evita a introdução de componentes adicionais e reduz a complexidade, favorecendo a manutenção e evitando situações inesperadas na falha do responsive-layout. Em resumo, a escolha entre o componente responsive-layout e o CSS na VTEX IO dependerá das exigências específicas de cada projeto. Cada abordagem tem seus méritos e desafios, e a decisão final deve ser orientada pelo contexto e pelos objetivos de desenvolvimento.

Neste post, vamos explorar uma maneira pouco conhecida, mas extremamente útil, de adicionar produtos diretamente ao carrinho por meio de uma URL específica. Se você ainda não conhece essa funcionalidade, continue lendo para descobrir como simplificar esse processo. URL https://{{account}}.myvtex.com/checkout/cart/add?sku={ID_SKU}&qty=1&seller={ID_Seller}&redirect=true&sc={ID_Sales_Channel} Variáveis Valores Account Nome da conta ID_SKU ID do SKU do produto desejado ID_Seller ID do vendedor ID_Sales_Channel ID do canal de vendas