Created
January 20, 2016 16:30
-
-
Save it-ony/1fe8048b19b9492e874c to your computer and use it in GitHub Desktop.
Embed Tablomat + parse Deeplinks with JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Embed Tablomat</title> | |
| </head> | |
| <body> | |
| Pass deeplinks via Url Parameters, e.g. ?productTypeId=812&tx1=Hello&tx2=World | |
| <!-- designer goes into this div --> | |
| <div id="designer"></div> | |
| <script type="text/javascript"> | |
| (function(window, undefined) { | |
| // list of every deeplink that you like to allow | |
| var allowedDeeplinks = { | |
| designUrl: null, | |
| designId: null, | |
| designColor1: null, | |
| designColor2: null, | |
| designColor3: null, | |
| designColorRgb1: null, | |
| designColorRgb2: null, | |
| designColorRgb3: null, | |
| // product | |
| articleId: null, | |
| productId: null, | |
| appearanceId: null, | |
| sizeId: null, | |
| quantity: null, | |
| viewId: null, | |
| // product type | |
| productTypeId: null, | |
| tx1: null, | |
| tx2: null, | |
| tx3: null, | |
| textColorRgb: null, | |
| textColor: null, | |
| // independent | |
| departmentId: null, | |
| productTypeCategoryId: null, | |
| designCategoryId: null, | |
| designSearch: null, | |
| panel: null, | |
| basketId: null, | |
| basketItemId: null, | |
| editBasketItemUrl: undefined | |
| }; | |
| // parameter that will always be set | |
| var fixedParameters = { | |
| shopId: 205909, // your shop id | |
| platform: "EU", // or NA | |
| target: document.getElementById("designer"), | |
| shareUrlTemplate: "https://example.com/create#productId={PRODUCT_ID}&viewId={VIEW_ID}" | |
| }; | |
| // start parsing the deeplinks form the url parameters | |
| parseDeeplinks(allowedDeeplinks); | |
| fixedParameters = defaults(allowedDeeplinks, fixedParameters); | |
| // register the callback whenever the spreadshirt library has been loaded | |
| window.spreadshirtLoaded = window.spreadshirtLoaded || []; | |
| window.spreadshirtLoaded.push(function(spreadshirt) { | |
| // invoked when the spreadshirt library is loaded | |
| spreadshirt.create("tablomat", fixedParameters); | |
| }); | |
| function parseDeeplinks (deeplinks) { | |
| var urlParameter = location.search.replace(/^\?/, '').split('&'), | |
| parameter, i; | |
| for (i = 0; i < urlParameter.length; i++) { | |
| parameter = urlParameter[i].split('='); | |
| if (deeplinks.hasOwnProperty(parameter[0]) && parameter[1]) { | |
| deeplinks[parameter[0]] = decodeURIComponent(parameter[1]); | |
| } | |
| } | |
| } | |
| function defaults (target) { | |
| for (var i = 1; i < arguments.length; i++) { | |
| target = target || {}; | |
| var d = arguments[i] || {}; | |
| for (var key in d) { | |
| if (d.hasOwnProperty(key)) { | |
| if (target[key] === undefined && d[key] !== undefined && d[key] !== null) { | |
| target[key] = d[key]; | |
| } | |
| } | |
| } | |
| } | |
| return target; | |
| } | |
| })(window); | |
| </script> | |
| <!-- lazy load the spreadshirt library for performance improvement of the webpage itself --> | |
| <script type="text/javascript" src="//spreadshirt.github.io/apps/spreadshirt.min.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
Tablomat tool is deprecated?
It's seem that the result always redirect to the spreadshirt homepage (like your previous link exemple).
How to use the tablomat now?
Thanks.