Events and languages

Events

dpd.js fires two events on window that your own scripts can listen for.

dpd:cart fires whenever the cart changes, including when it first loads:

window.addEventListener('dpd:cart', (event) => {
  const { store, itemCount, cart } = event.detail;
  document.querySelector('.my-cart-count').textContent = itemCount;
});

dpd:added fires after a product is added, which is handy for analytics:

window.addEventListener('dpd:added', (event) => {
  const { store, product } = event.detail;
  gtag('event', 'add_to_cart', { items: [{ item_id: product }] });
});

Field
store	The store’s origin, like https://STORE.dpdcart.com.
itemCount	How many things are in the cart (dpd:cart only).
cart	The cart: its items and totals (dpd:cart only).
product	The ID of the product that was added (dpd:added only).

Languages

The components use your store’s language, the one set in its settings in the DPD admin. Their own words (Add to cart, Your cart, Checkout and so on) come in all 27 languages DPD’s cart supports. Product names, prices, upsell offers and license agreements are yours, so they show as you wrote them.

A button with its own label, like <dpd-add-to-cart product="123">Jetzt kaufen</dpd-add-to-cart>, keeps your label whatever the store’s language is.