Options

You can also fetch data about your product, customise overlay button colors and add event callbacks.

Option Type Default Description
cache number 300 How long to cache the product data in seconds, using local storage (if supported). This will improve performance for end users when navigating your site. To disable caching, set this to false .
checkout boolean false Bypass the item detail page and go straight to the checkout with the item already in the cart. This speeds up the purchase process.
redirect boolean false Disables redirect after successful purchase (if it's enabled in your store checkout settings).
theme.button.bg String #6d48cc The button base gradient color for primary call to actions within the overlay. This needs to be hex color code.
theme.button.text String #fff Sets the color for the button text.
theme.checkout.headerBg String #6d48cc The checkout header base gradient color.
theme.checkout.headerText String #fff Sets the color for the checkout header text.
getTracking Function undefined This function is fired as soon as the overlay is loaded allowing you to pass through your custom tracking ID (max 250 characters long) that can be received after a successful purchase within the data in your onPurchase callback, a webhook , or in your dashboard's order detail page. The function gets passed a single argument, a jQuery object for the link that triggered the overlay.
onModalOpen Function undefined Callback for when the overlay is shown. The function gets passed a single argument, a jQuery object for the link that triggered the overlay being opened.
onPurchase Function undefined Callback for when the item is purchased. The function gets passed a single argument, the data for the order as below.
onProcessing Function undefined Callback for when the item purchase is pending processing. The function gets passed a single argument, the data for the processing order.
onClose Function undefined Callback for when the overlay or window/tab is closed. The function gets passed two arguments; a jQuery object for the current link that triggered overlay and a JSON object containing data for the cart (items, buyers details and address etc) as below if the user had entered any data into the checkout and not completed. Otherwise the object will be empty.

Example data returned by onDataReady

Here's some example data returned by the onDataReady callback:

{
    "CanPickup": true,
    "CanShip": true,
    "Description": "Example of an item description",
    "ImageUrlLarge": "https://selzimg.s3.amazonaws.com/items/xxxx/xxxx/large.jpg",
    "ImageUrlSmall": "https://selzimg.s3.amazonaws.com/items/xxxx/xxxx/small.jpg",
    "IsSoldOut": false,
    "Price": "A$9.99",
    "Quantity": 8,
    "QuantityLeft": 8,
    "RegularPrice": "$29.99",
    "SellerCountryCode": "US",
    "ShipInternationalPrice": "$20.00",
    "ShipPrice": "$10.00",
    "ShortUrl": "http://selz.co/xxxxxx",
    "Title": "Example Item",
    "Url": "https://selz.com/items/detail/xxxx",
    "CheckoutUrl": "https://selz.com/checkout/item/xxxx"
}

Example data returned by onPurchase

Here's some example data returned by the onPurchase callback:

{
    "BuyerEmail": "johnny@selz.com",
    "BuyerFirstName": "Johnny",
    "BuyerLastName": "Appleseed",
    "Currency": "USD",
    "ReferenceId": "XXX",
    "Shipping": 20,
    "Timestamp": 1398921408,
    "TrackingId": "123",
    "TotalPrice": 29.99,
    "Items": [
        {
            "ItemId": "xxxx",
            "ItemTitle": "Example Item",
            "ItemVariantTitle": "Variant 1",
            "UnitPrice": 9.99,
            "DiscountCode": "",
            "Quantity": 1,
            "Currency": "USD"
        }
    ],
    "RedirectUrl": "http://example.com/thanks?selz_refid=XXX&selz_tracking=123"
}

Example data returned by onProcessing

Here's some example data returned by the onProcessing callback:

{
	ReferenceId: "XXXXXXXX",
	Timestamp: 1398921408
}

Example data returned by onClose

Here's some example data returned by the onClose callback:

{
    "id": "xxxx",
    "expires": "1433122978",
    "modal_url": "https://...",
    "url": "https://...",
    "buyer": {
        "firstname": "John",
        "lastname": "Appleseed",
        "email": "example@domain.com",
        "delivery": {
            "city": "San Francisco",
            "country": "US"
        },
        "billing": {
            "city": "San Francisco",
            "country": "US"
        }
    }
}

Example setup using options

$(() => {
    $.selz({
        theme: {
            button: {
                bg: '#5fa9df',
                text: '#fff',
            },
            checkout: {
                headerBg: '#5fa9df',
                headerText: '#fff',
            },
        },
        getTracking: $link => {
            return $link.data('tracking');
        },
        onDataReady: ($link, data) => {
            // Customise the link with item data
            $link.html(
                `<img src="${data.ImageUrlSmall}" alt="${data.Title}">
                ${data.Title}`,
            );

            // Skip to checkout
            // You can set the 'checkout' config option or set the URL yourself
            $link.data('modal-url', data.CheckoutUrl);
        },
        onModalOpen: $link => {
            // Track open in Google Analytics
            ga('send', 'pageview', $link.attr('href'));
        },
        onPurchase: data => {
            // Track purchase
        },
        onProcessing: data => {
            // Track processing
        },
        onClose: ($link, data) => {
            // Continue checkout flow
            if (data.modal_url) {
                $link.data('modal-url', data.modal_url);
            }
        },
    });
});

Please note: If you don't use the default $ as your jQuery variable name then you will need to use jQuery. rather than $. when referencing the jQuery core library, incuding in callbacks. For the majority of users, this won't be an issue.