Tixify Shop - Widget API

quickstart to get started with using the shop widget, make sure to add the following code to the head or body of your document \<script src="//widget shop openticket tech/latest/widget js">\</script> then, initialize the shop widget with the following code if (document readystate !== 'loading') { window\ otshopwidget init( 'https //tixify shop/ fill in shop guid fill in shop guid ', ' fill in shop guid fill in shop guid ' ); } else if (document addeventlistener) { document addeventlistener('domcontentloaded', function () { window\ otshopwidget init( 'https //tixify shop/ fill in shop guid fill in shop guid ', ' fill in shop guid fill in shop guid ' ); }); } else { document attachevent('onreadystatechange', function() { if (document readystate !== 'loading') { window\ otshopwidget init( 'https //tixify shop/ fill in shop guid fill in shop guid ', ' fill in shop guid fill in shop guid ' ); } }); } now, reload the page and the shop bubble should be visible in the bottom right corner the shop is now succesfully initialized customizations it's possible to change how some things work margin the widget has a default margin of 16px to the top and bottom of the page however, the possibility exists that this places the widget on top of other components, such as a fixed header or footer by setting a css custom property, these margins can easily be changed (note that the variable needs to be visible by the widget and therefore be either on the root or body level ) \ root { \ ot shop widget margin top 96px; \ ot shop widget margin bottom 96px; } z index the widget has a default position on the z axis (z index) of 1050 this value has intentionally been chosen to not be too high as to not limit the developer's options however, by setting a css custom property on the main website, this value can be easily changed (note that the variable needs to be visible by the widget and therefore be either on the root or body level ) \ root { \ ot shop widget z index 1234; \ ot shop widget popup z index 1234; \ ot shop widget button z index 1234; } notification z index the widget propagates notifications to the host page so they are always visible by default, the z index of these notifications is determined by the z index of the widget itself plus 49, to ensure the notifications appear above the widget however, by setting a css custom property on the main website, this value can be easily changed (note that the variable needs to be visible by the widget and therefore be either on the root or body level ) \ root { \ ot shop widget notification container z index 1234; } functions there are multiple functions that can be called to interact with the shop from outside the shop addticket() increases the selection for the specified ticket by 1 syntax window\ otshopwidget addticket(" b15754c0 0f05 42c4 9ef0 014ca87a90a3 b15754c0 0f05 42c4 9ef0 014ca87a90a3 "); parameters guid guid required required the guid of the ticket that needs to be added removeticket() decreases the selection for the specified ticket by 1 syntax window\ otshopwidget removeticket(" b15754c0 0f05 42c4 9ef0 014ca87a90a3 b15754c0 0f05 42c4 9ef0 014ca87a90a3 "); parameters guid guid required required the guid of the ticket that needs to be removed addcoupon() adds the specified coupon to the shop checkout syntax window\ otshopwidget addcoupon(" coupon code coupon code "); parameters code code required required the code of the coupon that needs to be added removecoupon() removes the specified coupon from the shop checkout syntax window\ otshopwidget removecoupon(" coupon code coupon code "); parameters code code required required the code of the coupon that needs to be removed open() opens the shop widget syntax window\ otshopwidget open(); close() closes the shop widget syntax window\ otshopwidget close(); toggle() toggles the visibility of the shop widget popup syntax window\ otshopwidget toggle(); events there are multiple events they can be listened to by registering a callback widgettoggled() is called when the widget is opened or closed receives a boolean which indicates if the widget is opened or closed syntax window\ otshopwidget widgettoggled((opened) => { // put your code here }); callback parameters name type example value opened boolean true cartticketsupdated() is called when the ticket selection changes in the shop receives an object containing the count of selected tickets syntax window\ otshopwidget cartticketsupdated((tickets) => { // put your code here }); callback parameters name type example value tickets object { "b15754c0 0f05 " { "selected" 3 } } ordertotalupdated() is called when the total order price changes in the shop receives the total price formatted according to the shops locale syntax window\ otshopwidget ordertotalupdated((totalprice) => { // put your code here }); callback parameters name type example value totalprice string € 15,20 rawordertotalupdated() is called when the total order price changes in the shop receives the total price in minor units and the shops currency syntax window\ otshopwidget rawordertotalupdated((totalprice, currency) => { // put your code here }); callback parameters name type example value totalprice integer 1520 currency string eur thanks for reading, if you have feedback or questions about these guides, please contact us at mailto\ support\@tixify live