Buy buttons and links
Before the embed components, DPD’s embed codes were cart links that open the cart in a lightbox over your page. They still work, and the button code page in the DPD admin still makes them. If you’ve had DPD buttons on your site for years, this is what you’ve got.
Every embed code is an <a> tag with the dpd.js script tag after it:
<a href="https://STORE.dpdcart.com/cart/add?product_id=123&method_id=456" class="dpdcart">Add to cart</a><script src="https://STORE.dpdcart.com/dpd.js"></script>You only need the script tag once per page, but pasting it more than once does no harm.
Kinds of embed code
Section titled “Kinds of embed code”Cart links. An <a class="dpdcart"> with your own text or image. dpd.js
opens the link in the lightbox.
Buttons. An <a data-dpd-type="button">, which dpd.js turns into a
styled button with the price beside it. See
Buttons and widgets.
Widgets. An <a data-dpd-type="widget">: a product card with an image,
name, price, description and buy button. Also in
Buttons and widgets.
Price choosers. A <select> of a product’s prices inside a
.dpd-selectomatic wrapper. Picking a price (or clicking the button under
it) opens that price’s cart link in the lightbox.
Where a link goes
Section titled “Where a link goes”The button code page builds each link for you. The parts you can change by hand are the query parameters:
| Parameter | |
|---|---|
product_id |
The product. |
method_id |
The product’s price (/cart/add links). |
product_price_id |
The product’s price (/cart/buy links). |
coupon |
A coupon code to apply. |
/cart/add adds the product and shows the cart. /cart/buy skips the cart
and goes straight to checkout with just that product. /cart/view shows
the cart as it is.
The lightbox
Section titled “The lightbox”Cart links and buttons open the cart in a lightbox, an overlay on your page, so the visitor never leaves your site until they pay.
data-lightbox="0"on a cart link makes it a normal link to the cart page.- On buttons and widgets the lightbox is off unless the code has
data-lightbox="1"(the button code page’s lightbox setting). - On iPhones and iPads the lightbox is always off, and links go to the cart page.
- Ctrl-click or Cmd-click opens the cart in a new tab as usual.
Use the drawer instead
Section titled “Use the drawer instead”Add data-dpd-mode="inline" to a cart link and it adds the product with
the embed components’ cart drawer in place of the
lightbox. It’s an easy way to try the new cart without changing your
links. The link needs to be a /cart/add link, and your site needs to be
one of your store’s embed domains.
<a class="dpdcart" data-dpd-mode="inline" href="https://STORE.dpdcart.com/cart/add?product_id=123&method_id=456">Add to cart</a>Embed codes added later
Section titled “Embed codes added later”dpd.js builds the buttons and widgets that are on the page when it loads.
If your page adds embed codes afterwards (a single-page app, or content
loaded with JavaScript), call dpd.buildEmbed() once they’re in the page:
dpd.buildEmbed('#new-products'); // a CSS selectordpd.buildEmbed(someElement); // or an elementIt builds each embed code only once, so calling it again is safe.