Git Product home page Git Product logo

vtex.js's Introduction

vtex.js

Biblioteca JavaScript para acessar APIs da VTEX

Guias, exemplos e documentação completa de todos os métodos do vtex.js.

Atenção: o vtex.js e sua documentação estão em constante melhorias.

Veja também os slides da apresentação sobre o vtex.js que rolou no VTEX Day 2014.

Desenvolvimento

Para desenvolver rodando os testes, instale as dependências e use o script test-watch:

yarn install
yarn test-watch

CHANGELOG

v2.0.0

  • Introdução dos eventos checkoutRequestBegin.vtex e checkoutRequestEnd.vtex
  • Evento orderFormUpdated.vtex só é emitido quando todos os requests pendentes são resolvidos.
  • Ao enviar mais de um request para a mesma operação, todos os anteriores que não foram resolvidos serão abortados. Dessa forma, apenas o último request vai valer.

VTEX - 2014

vtex.js's People

Contributors

gberger avatar klzns avatar guifromrio avatar omninando avatar tamorim avatar caio-batista avatar lucasecdb avatar koz avatar philipedasilva avatar jeffersontuc avatar darlenedms avatar gabrielgodoy-zz avatar guilhermebruzzi avatar silviasfon avatar gugiserman avatar felipenascimento avatar rodrigomuniz avatar wdsrocha avatar

Stargazers

Hudson Martins avatar  avatar Hilquias Freitas avatar Leonardo Ghiggino avatar Victor Escandiel avatar Roberto Ramírez Aguilar avatar Bruno Diniz Ferrarezzo avatar  avatar Taka avatar Dante Souza e Souza avatar Wilson avatar  avatar Weverton dos Santos Souza Costa avatar Helder Afonso de Morais avatar Fábio Filho avatar Cristian Rojas avatar Ruan Carlos avatar Gabriel Magevski avatar Natanael Saymon avatar Éverton Vargas avatar Rodolfo_Dev avatar  avatar  avatar Paulo Freitas  avatar  avatar Juan Pablo Barrios avatar Vinícius Veloso avatar Dina Rocio  avatar  avatar Luiz Carlos Vilela dos Santos avatar Fabiano G. Rocha avatar  avatar Gabriel Felix avatar Breno Cota avatar Victor Gutierrez avatar Alessandro Lima de Miranda avatar Monique Trotta avatar Marco William avatar  avatar Leo Borlot avatar David Mosquera avatar Laura Osorio Gómez avatar Matheus avatar Artur Simões Silva avatar Brendon Guedes avatar Erick Mairink avatar Huanderson Alexandre Machado avatar Eduardo Silva avatar  avatar Gustavo Henrique da Silva avatar marcos abreu | dev avatar Aldemir Souza avatar Davi Assumpção avatar Hendrikus  van Katwijk avatar André Aragão avatar Igor Gomes avatar Jorge Quirino avatar Charles Cabral avatar Pedro Soares avatar Nicolle Nascimento avatar  avatar Rodrigo Nascimento avatar Welison Silva avatar Patrick Chagas avatar  avatar  avatar Sergio Varela avatar Lucas Alves avatar Vic avatar Tiago Almeida avatar L B avatar Carlos Nani avatar Rafael Marques avatar Lucas Gustavo  avatar Lucas Wenceslau avatar Marcelo Diament avatar Rafael Lourenço Marques avatar Rodrigo Reis avatar Kamila de fatima santos oliveira avatar Ana Arezo avatar Felipe Monteiro avatar Miguel Machado avatar Andre Tessmann avatar Victor Nery avatar Erica Noronha avatar Tiago OS avatar Cristobal Délano avatar Jorge Lemos avatar Anderson avatar Jonatas Antunes avatar Emanuel avatar Adriano Carvalho avatar Iago Melanias avatar Leandro Simões avatar Gabriel Leocadio Almeida da Silva avatar Fabio Santos avatar Gabriel Pereira avatar Lucas Fontes Gaspareto avatar Micael Pereira avatar Wellington Barreto avatar

Watchers

Rafael Floriano da Silva avatar Lucas Marinho avatar Alan Prando avatar Guilherme Carvalho avatar Ricardo Dantas avatar Lailson Bandeira avatar Rodrigo Dellacqua avatar Thiago Emmanuel Pereira avatar Douglas Lima avatar Jonathan Korn avatar Guilherme Henrique Bueno avatar Fred avatar Cláudio Luz avatar Kim Vieira Tolentino avatar José Antonio Leal de Farias avatar Cyro Thadeu avatar James Cloos avatar Merca Ionel avatar Lenderson Morais avatar Luciano Pessoa avatar JM avatar Gabriel Arrais avatar Karla Santos avatar  avatar Jeyson Maia avatar Raony Benjamim de Assis Alves avatar  avatar Felippe Nardi avatar Jonas Bolognim avatar Lucian Sturião avatar Anderson Moreira avatar Raphael Saez avatar Henrique Bejgel avatar ronanpcruz avatar Tiago Gimenes avatar Osmar Moreira de Oliveira avatar Jessé Soares avatar  avatar Alexandre Fumes avatar Lincolnn avatar  avatar  avatar Carla Demarchi avatar  avatar  avatar Antonio Freire avatar  avatar Renan Servare avatar Melissa Otero avatar kevin avatar  avatar Ramon Silva avatar Victor Jamal Almeida avatar Alexandre PhoeniX avatar Rubia Dias avatar Adriano Carvalho avatar James Van Arsdale III avatar  avatar  avatar igVtex avatar Renan Sies avatar Ellen Silva avatar Ernesto Barbosa avatar Bruno Malater Magalhães avatar Ricardo Neto avatar Will Ferri avatar Carolina Krrô avatar Pedro Gabriel avatar Micael Pereira avatar Tiaraju Smaneoto avatar Dandy Hirama avatar Leandro Karam avatar Ana Luiza Motta avatar Vítor de Albuquerque Torreão avatar Válber Laux avatar Leandro Costa avatar Renan Porto avatar Marcio Mendes avatar Raildo Mascena de Sousa Filho avatar  avatar Hector Tinjaca Sanchez avatar Artur Magalhães avatar Marcos Candeia avatar Eric Reis Figueiredo avatar Filipe Belmont avatar Rafael Bacelar avatar Mayza Nunes avatar Vtex Integration Tool avatar Felipe Cardoso Barbosa avatar Everton Strack avatar Enzo H. Nakamura avatar  avatar Eduardo Insaurriaga avatar  avatar Lucas Schenatto avatar Natália Medina avatar Arnett avatar Bernardo Lemgruber avatar Augusto Lazaro avatar  avatar

vtex.js's Issues

cart not being update after adding item

below I have POC snippet that adds the item to the cart (load all deps and then call add to cart).
item was added but it's not causing the cart to reload and you will see that item was added on the next refresh is there any way to trigger the refresh without reloading the page?
im trying to create thrid party app.
function loadJS(file) {
var jsElm = document.createElement("script");
jsElm.type = "application/javascript";
jsElm.src = file;
document.body.appendChild(jsElm);
}

loadJS("https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js")
loadJS("https://io.vtex.com.br/vtex.js/2.0.0/vtex.min.js")

var item = {
id: 355027,
quantity: 1,
seller: "1",
}
vtexjs.checkout
.getOrderForm()
.then(function(orderForm) {
console.log(orderForm)
vtexjs.checkout.addToCart([item], null, "1").done(function(orderForm) {
alert("Item added!")
console.log(orderForm)
})
})

Pegar orderForm antes de todos os métodos caso ainda não tenha o orderForm ID

Adicionar a todos os métodos do vtex.js uma verificação se o orderFormId já existe no contexto, se sim, o método é chamado normalmente. Caso não tenha, o vtex.js deve fazer um getOrderForm e quando completo, chamar o método chamado originalmente.

Isso pretende facilitar o uso para que o getOrderForm não seja chamado sem necessidade.

Esta trayendo las medidas para flete, Deberia traer medidas reales o las dos

Você quer pedir uma nova feature ou reportar um bug?
Es un Bug que deberia tener un feature

Qual o comportamento atual?
Esta trayendo solo las medidas del sku para flete

Se o comportamento atual é um bug, por favor, forneça os passos para reproduzir o problema.
Hacer una petición por medio de vtex js con la funcion getCurrentProductWithVariations y mirar en el arreglo que retorna las medidas del sku que vienen y compararlas con las que hay almacenadas

Qual o comportamento esperado?
Deberia estar trayendo o las medidas del sku reales, o las dos, las reales y las de flete

O método vtexjs.checkout.getOrderForm não trás dados atualizados

Quando eu executo o método
vtexjs.checkout.getOrderForm(["items","totalizers","shippingData"]) ele faz a requisição $.ajax e traz os dados do checkout. OK.

Porém se executo uma segunda vez na tela ele não faz a requisição e usa os dados "cacheados" no
vtexjs.checkout.getOrderForm e não me traz os dados de um produto recentemente adicionado por exemplo.

How to test with vtexjs

Expected Behavior

I have installed text-tools/react from vtex that implements jest and @testing-library/react under the hood
but when i try to test it throws me a vtexjs is undefined error, since is a native module of js I cannot import it in the test file

image

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

  1. instal vtex-test-tools
  2. run yarn test

Context

I'm trying to test components of the checkout with the app installed checkout-ui-custom

Your Environment

  • Version used:
  • Environment name and version (e.g. Chrome 39, node.js 5.4):
  • Operating System and version (desktop or mobile):
  • Link to your project:

AddToCart não adiciona promoção por UTM automaticamente

Você quer pedir uma nova feature ou reportar um bug?
feature

Qual o comportamento atual?
AddToCart não adiciona promoção por UTM automaticamente

Se o comportamento atual é um bug, por favor, forneça os passos para reproduzir o problema.
Adicionar um cookie de UTM
Chamar a API de addToCart
A promoção do produto não será aplicada

Qual o comportamento esperado?
Chamar a API de addToCart e a promoção do produto ser aplicada automaticamente

Qual browser e sistema operacional são afetados por esse problema?
Todos

Retornar serviço associado ao SKU no módulo Catalog

Pessoal,

Existe a possibilidade de retornar os dados de um serviço (como garantia estendida) associado ao SKU de um produto? Por exemplo:

skus: [
  0: {
    available: true,
    sku: 93649,
    installments: 12,
    service: {
      sku: 26139,
      name: 'Garantia Estendida',
      price: 109.90,
      installmentValue: 9.16,
    },
    ...
  }
]

Atualmente só tenho essa informação através da viewpart "stockKeepingUnitService".

Não é possível passar geoCoordinates ao método simulateShipping

Você quer pedir uma nova feature ou reportar um bug?
Feature

Qual o comportamento atual?
O método simulateShipping pede o codigo postal, mas não é possivel passar geoCoordinates

Qual o comportamento esperado?
Poder usar geoCoordinates em método simulateShipping e que devolva logisticsInfo correspondente.

Qual browser e sistema operacional são afetados por esse problema?
Todos

Adicionar múltiplos itens ao carrinho

A função abaixo funciona corretamente.

vtexjs.checkout.addToCart([item], null, 1) .done(function(orderForm) { alert('Item adicionado!'); console.log(orderForm); });

Mas seria interessante se ela funcionasse para adicionar vários itens ao carrinho de uma só vez, ali em [item] ela poderia receber um [items], +/- assim:

var items = [ { "seller":"1", "quantity":1, "id":"708", }, { "seller":"1", "quantity":1, "id":"737", } ];

Navegar entre os objetos dentro da array acima e adicionar os produtos um a um.

Tem alguma função que faça isso?

Problem with changing deliveryWindow

I try to update the delivery window when the address is changed and does not work. In the payload I have all the updated data, the delivery window and the addressID in the slas but the response received back contains the original deliveryWindow.

I also tried to reset it and send it in request logisticsData = [] but it doesn't work like that either.

Problema ao enviar shippingData

Estou com dificuldades para adicionar o address number e o address complement ao orderForm.shippingData, os valores até aparecem num console.log após atribuir os dois valores, mas depois de enviado, exibo o orderForm no console e não contem mais os dois valores..

Feature adicionar itens no carrinho com attachments

  • Feature
  • Bug

Qual o comportamento atual?
Atualmente ao adicionar no carrinho um produto com AddToCart é preciso procurar pelo index dele para poder adicionar o attachment do mesmo.

Qual o comportamento esperado?
Seria interessante uma função AddToCartWithAttachments que adiciona um ou mais itens no carrinho e inclui os attachments por parâmetro.

Ainda se fosse possível, seria muito bom otimizar a requisição em uma só, adicionando produto + attachment numa unica requisição.

Matar "cache" de orderForm no método `getOrderForm`

Você quer pedir uma nova feature ou reportar um bug?
Feature

Qual o comportamento atual?
O vtexjs centraliza todas as chamadas ao Checkout. Por conta disso, ele está cacheando o orderForm nas chamadas ao getOrderForm se nenhum método da biblioteca foi chamada.

Se o comportamento atual é um bug, por favor, forneça os passos para reproduzir o problema.
n/a

Qual o comportamento esperado?
O método getOrderForm deve sempre consultar a API pelo carrinho mais atualizado.

Qual browser e sistema operacional são afetados por esse problema?
Todos

Melhorar documentação de addItemAttachment

Gostaria de saber as dificuldades enfrentadas com o uso do método de addItemAttachment para melhorar nossa documentação.

Poderiam descrever o cenário para reproduzir o problema que estão tendo? Talvez possa esclarecer as dúvidas e com isso as próximas pessoas não passem pela mesma dificuldade.

Delivery estimate

Endpoint:

{host}/api/checkout/pub/orderForms/simulation

Request Body:

{
  "items": [
     {"id":"2005203","quantity":1,"seller":"1"}
  ],
  "postalCode": "20940060",
  "country":  "BRA"
}

a função "addToCart" não esta funcionando.

Estou tentando usar a função descrita no DOC, e não esta funcionando.

item = {
    id: 2000017893,
    quantity: 1,
    seller: 1
};
vtexjs.checkout.addToCart([item]).done(function(orderForm){
    alert('Item adicionado!');
    console.log(orderForm);
});

screenshot at jul 24 11-45-17

há especificações do produto de carga / No carga las especificaciones del producto

Você quer pedir uma nova feature ou reportar um bug?
ESP
Quiero reportar un bug, al ejecutar el codigo vtexjs.catalog.getProductWithVariations(1000).done(function(product){ console.log(product); });
no carga la información completa del producto
POR
Quero relatar um bug, executar o código
vtexjs.catalog.getProductWithVariations(1000).done(function(product){ console.log(product); });
não carrega a informação completa do produto

Se o comportamento atual é um bug, por favor, forneça os passos para reproduzir o problema.
ESP Ir al perfil de un producto, y ejecutar el codigo
POR Para o perfil de um produto para, e executar o código

Qual o comportamento esperado?
ESP
El comportamiento esperado es que todos los campos personalizados de producto salgan en el arreglo
POR
O comportamento esperado é que todos os produtos de campos personalizados no arranjo
especificaciones-productos
vtex-js_2

Access-Control-Allow-Origin - CORS

  • Feature
  • Bug

What is the current behaviour?

What is the expected behaviour?
Adicionar o produto ao carrinho

If it's a bug, describe the steps to reproduce:

screenshot_2

Add documentation for setCustomData method

Currently readers might assume that vtexjs.checkout.sendAttachment() can be used to set customData on the orderForm. Please update documentation to include a section on how to set custom data fields on an account and how to use setCustomData to fill the custom fields with data.

Add removeCustomData method to checkout

Expected Behavior

Since there is already a setCustomData method, it would be nice to be able to remove the edited customField with a removeCustomData({app: <app id>, field: <field-to-remove>}).
It would be really nice also to have the setCustomData method documented as mentioned two years ago here.

Usar nova rota do Catálogo

Usar a rota ainda em desenvolvimento:

/api/catalog_system/pub/products/search?fq=productId:2001008

Ela será usada no Portal novo.

No evento orderFormUpdated.vtex enviar o expectedOrderFormSections

Ao disparar o evento orderFormUpdated.vtex, enviar um segundo parâmetro com o expectedOrderFormSections da chamada.

Assim funções que escutam o evento podem saber o motivo de uma propriedade não estar preenchida: se veio realmente vazia da API ou se não era esperada (não estava no expectedOrderFormSections).

Adicionar dados de promoções à nova rota de catalogo

Na questão #8 o @BrenoC falou sobre a nova rota do catalogo, é possível acrescentar os dados de promoções existentes para aquele produto nesse JSON, isso é muito útil para resolver alguns pedidos já existentes de clientes além de abrir o leque para mais evoluções.

/api/catalog_system/pub/products/search?fq=productId:2001008

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.