DOPP API Reference
You can enhance customer experience by integrating Regios Automatic Discounts deeply with your theme.
To do this, use the DOPP (discount on product page) API. It's a combination of event listeners (which you can fire to trigger updates to our app blocks), and public objects/functions (which you can use to handle the results of calculations yourself).
You can paste this TypeScript definition into your project as a .d.ts file.
You can also pass a specific variant ID, and/or quantity:
You can also get the discount description/badge content, and CSS:
Our app listens to the following events on the window:
In case your theme has complex behavior about selecting variants on the product page, you can manually trigger a discount calculation by firing a regios-dopp:variant-change event.
All parameters are optional unless stated otherwise.
selectedVariant.id: Required. A product variant's numerical ID.
selectedVariant.price: The variant's price, in cents. You can optionally provide this to change the number we base discount calculations on.
quantity: The quantity of the product to calculate the discount based on. Useful for volume discounts.
We want to hear about your experience with our app! Leave a review on the Shopify App Store.
To do this, use the DOPP (discount on product page) API. It's a combination of event listeners (which you can fire to trigger updates to our app blocks), and public objects/functions (which you can use to handle the results of calculations yourself).
Public API documentation
You can paste this TypeScript definition into your project as a .d.ts file.
Public API Example
const {salePrice, regularPrice} = await window.RegiosDOPP.api.v0.productPage.calculateDiscountedPrices();
const discountAmount = regularPrice.amount - salePrice.amount;
console.log('Your discounted price: ' + salePrice.formatted);
console.log('Discount amount: ' + discountAmount);
You can also pass a specific variant ID, and/or quantity:
const {salePrice, regularPrice} = await window.RegiosDOPP.api.v0.productPage.calculateDiscountedPrices({
variantId: 0123456789,
quantity: 1234,
});
You can also get the discount description/badge content, and CSS:
const {description, badge} = await window.RegiosDOPP.api.v0.productPage.calculateDiscountedPrices();
document.querySelector('.discount-description').innerHTML = description.html;
document.querySelector('.discount-description').style.cssText = description.css;
document.querySelector('.badge').innerHTML = badge.html;
Events
Our app listens to the following events on the window:
Variant Change Event
In case your theme has complex behavior about selecting variants on the product page, you can manually trigger a discount calculation by firing a regios-dopp:variant-change event.
Example
window.dispatchEvent(new CustomEvent("regios-dopp:variant-change", {
detail: {
selectedVariant: {
id: 0123456789,
price: 3000,
},
quantity: 1,
}
}))
Parameters
All parameters are optional unless stated otherwise.
selectedVariant.id: Required. A product variant's numerical ID.
selectedVariant.price: The variant's price, in cents. You can optionally provide this to change the number we base discount calculations on.
quantity: The quantity of the product to calculate the discount based on. Useful for volume discounts.
Have any feedback for us?
We want to hear about your experience with our app! Leave a review on the Shopify App Store.
Updated on: 19/05/2024
Thank you!