API du SDK JavaScript

L'API JS vous permet de récupérer des informations pertinentes sur la session Snipcart en cours et d'appliquer certaines opérations au panier.

L'API JS expose de multiples services :

Toutes les méthodes asynchrones retournent des promesses et lèvent un SDKError en cas d'échec. Si vous n'êtes pas familier avec le concept des promesses, pensez à lire cette introduction.

Panier

update

La méthode update met à jour les données actuelles du panier avec l'argument de payload fourni. Le payload est un objet de type UpdateCartPayload.

Les mises à jour peuvent être partielles, c'est-à-dire qu'elles ne peuvent contenir qu'un sous-ensemble des champs définis dans l’interface UpdateCartPayload.

Vous pouvez également mettre à jour les métadonnées du panier avec cette méthode.

Il est important de noter qu'il n'est actuellement pas possible de mettre à jour partiellement les adresses de facturation et de livraison, toutes les propriétés requises doivent être fournies.

try {
    await Snipcart.api.cart.update({
        email: 'john.doe@example.com',
        metadata: {
            customMetadataKey: 'value'
        },
        billingAddress:{
            name: 'John Doe',
            address1: '3671 Garfield Road',
            city: 'Neponset',
            country: 'US',
            province: 'IL',
            postalCode: '61345'
        }
    });
} catch (error) {
    console.log(error);
}

applyDiscount

La méthode applyDiscount applique un rabais au panier. Elle prend un code de rabais comme argument et retourne une promesse de type DiscountAppliedResponse.

try {
    await Snipcart.api.cart.applyDiscount('{discountCode}');
} catch (error) {
    console.log(error);
}

removeDiscount

La méthode removeDiscount supprime un rabais du panier. Elle prend le code de rabais comme argument et retourne une promesse de type DiscountRemovedResponse.

try {
    await Snipcart.api.cart.removeDiscount('{discountCode}');
} catch (error) {
    console.log(error);
}

fetchShippingRates

La méthode fetchShippingRates récupère une liste des taux de livraison disponibles pour le panier et retourne une promesse de type ShippingRatesResponse.

try {
    const response = await Snipcart.api.cart.fetchShippingRates();
} catch (error) {
    console.log(error);
}

setShippingInformation

La méthode setShippingInformation fournit les informations de livraison pour le panier. Elle prend un argument de type ShippingInformation et retourne une promesse.

try {
    await Snipcart.api.cart.setShippingInformation({
        method: '{shippingMethod}',
        cost: 0,
    });
} catch (error) {
    console.log(error)
}

Articles

add

La méthode add ajoute un article au panier. Elle peut prendre un ProductDefinition ou un array de ProductDefinition comme argument et retourne une promesse de type CartItemAddedResponse.

try {
    await Snipcart.api.cart.items.add({
        id: 'PRODUCT_ID',
        name: 'Product 1',
        price: 1.11,
        url: '/',
        quantity: 1,
    });
} catch (error) {
    console.log(error)
}

Si vous utilisez des rabais à prix alternatifs, vous devrez définir ces prix lors de l'ajout d'un article via notre SDK JavaScript, ce qui peut être fait via une propriété nommée alternatePrices. Disons que vous avez un rabais de liste de prix alternatifs appelé vip :

try {
    await Snipcart.api.cart.items.add({
        id: 'PRODUCT_ID',
        name: 'Product 1',
        price: 20.00,
        alternatePrices: {
            vip: 10.00
        },
        url: '/',
        quantity: 1,
    });
} catch (error) {
    console.log(error)
}

remove

La méthode remove permet de retirer un article du panier. Elle prend l'identifiant unique de l'article comme paramètre et retourne une promesse de type CartItemRemovedResponse.

try {
    await Snipcart.api.cart.items.remove('{itemUniqueId}');
} catch (error) {
    console.log(error)
}

update

La méthode update permet de mettre à jour un article dans le panier. Elle prend un argument de type CartItem et retourne une promesse de type CartItemUpdatedResponse.

Veuillez noter que pour mettre à jour un article, le paramètre uniqueId est requis, c'est ainsi que nous trouverons quel produit doit être mis à jour. Le uniqueId est un guid généré sur notre site lorsqu'un article est ajouté à un panier.

try {
    await Snipcart.api.cart.items.update({
      uniqueId: '70f3899b-9f2b-47fa-9eb5-648f2c2ae216',
      name: 'Updated name'
    });
} catch (error) {
    console.log(error)
}

Client

fetchOrders

La méthode fetchOrder permet de récupérer la commande d'un client. Elle prend le jeton de commande comme paramètre et retourne une promesse de type CartResponse.

try {
    const response = await Snipcart.api.customer.fetchOrders('{orderToken}');
} catch (error) {
    console.log(error)
}

signout

La méthode signout permet de déconnecter le client actuellement connecté. Elle retourne une promesse de type void.

try {
    await Snipcart.api.customer.signout();
} catch (error) {
    console.log(error)
}

Thème

cart.open

La méthode cart.open permet d'ouvrir le panier.

Snipcart.api.theme.cart.open()

customization.registerPaymentFormCustomization

Pour personnaliser le formulaire de paiement, vous pouvez utiliser la méthode customization.registerPaymentFormCustomization.

  • Cela doit être fait avant que le formulaire de paiement ne soit chargé.
Snipcart.api.theme.customization.registerPaymentFormCustomization({
  input: {
    backgroundColor: 'red',
    color: '#303030',
    border: '1px solid black',
    fontSize: '16px',
    placeholder: {
      color: 'blue',
    },
  },
  label: {
    color: '#fff',
    fontSize: '20px',
  }
});

cart.close

La méthode cart.close permet de fermer le panier.

Snipcart.api.theme.cart.close()