TnT Snippets
Extension with Markdown, HTML, CSS, and JavaScript code snippets the DA team commonly uses.
To use them, go to the appropriate environment (e.g. open a .html file to use HTML snippets), type the prefix of the snippet, and press tab or enter. If no recommendations appear while you type the prefix, press ctrl + space.
Note: The snippets that are in bold text and marked with a * offer an alternative snippet that is used for lib v3.
In order to access the alternative, replace the tnt with old in the prefix.
Example: tntfn is changed to oldfn
That's it. Happy coding! 😊
HTML Snippets
| Name |
Prefix |
Description |
| Create template |
tnttemplate |
Inserts the latest test template |
Markdown Snippets
| Name |
Prefix |
Description |
| Read me |
tntrdm |
Inserts the Read Me template |
JSON Snippets
| Name |
Prefix |
Description |
| Creates Dynamite.json |
tntdynamite |
Inserts a template for your dynamite file |
JavaScript Snippets
| Name |
Prefix |
Description |
| Create Function |
*tntfn |
Inserts a new function in the test object |
| Wait for Element |
*tntwfe |
Calls the waitForElement method |
| Wait for Condition |
*tntwfc |
Calls the waitForCondition method |
| Wait for Object |
*tntwfo |
Calls the waitForObject method |
| Create Trigger Metric |
*tntmt |
Calls the tntTrack method passing Trigger as type |
| Create Seen Metric |
*tntms |
Calls the tntTrack method passing Seen as type |
| Intercept Ajax |
oldia |
Calls the interceptAjax method |
| Viewport |
*tntvp |
Inserts the default viewports array |
| Check Nested |
*tntcn |
Calls the checkNested method |
| Debounce |
*tntdbc |
Calls the debounce method |
| Tnt On |
*tnton |
Creates a listener to events |
| Tnt Off |
*tntoff |
Removes a previous created listener |
| Vanilla API Request |
tntrequest |
Creates a Vanilla API Request |
| Create Wait for jQuery |
oldwfj |
Creates the waitForJquery method |
| Get Closest Element |
oldclosest |
Get closest element |
| Text to camel case |
*tntcamel |
Function to return text as a camel case |
| Notification |
oldnotification |
Calls the notification method |
| Error Notification |
tnterror |
Calls Notification.error |
| Warning Notification |
tntwarning |
Calls Notification.warning |
| Bailout Notification |
tntbailoutmessage |
Calls Notification.addCustomBailoutMessage with a variable |
| Get Cookie |
tntcookieget |
Gets a cookie value from the client's machine |
| Remove Cookie |
tntcookieremove |
Deletes a cookie with the given name |
| Set Cookie |
tntcookieset |
Sets a cookie on the client's machine |
| Generate Random Number |
tntrandomnum |
Generates a random number |
| Get Element Index |
tntelementindex |
Returns the element index based on the element's parent children count |
| Normalize Text |
tntnormalize |
Normalizes a string |
| Observe Element Visibility |
tntobserveelementvis |
Observe if element is intersecting on the viewport and calls callback |
| Tnt Stop |
tntws |
Disable the timeout loop |
| Remove All Spaces |
tntremovespaces |
Removes all spaces from a string |
| Remove Special Characters |
tntremovespecial |
Remove special characters from a string |
| Set Timeout |
tntsettimeout |
Vanilla setTimeout wrapped into a try-catch block |
ShadowRoot Snippets
| Name |
Prefix |
Description |
| Create Wait for Shadow Root |
oldcreatewfsr |
Creates the waitForShadowRoot method |
| Calls Wait for Shadow Root |
*tntwfsr |
Calls the waitForShadowRoot method |
| Create Shadow Root Event |
*tntcreatesre |
Creates the shadowRootEvent method |
| Calls Shadow Root Event |
*tntsre |
Calls the shadowRootEvent method |
| Is In ShadowRoot Document |
*tntinsrdoc |
Check if the element is on the shadowRoot Document |
jQuery Snippets
| Name |
Prefix |
Description |
| Ajax Call |
oldajax |
Creates an Ajax Call |
CSS Snippets
| Name |
Prefix |
Description |
| Create default media queries |
tntmedia |
Inserts CSS media queries for the default breaking points |
Checkout Snippets
| Name |
Prefix |
Description |
| Creates Checkout Functions (Including Confirmation) |
tntcheckoutconfirm |
Creates all functions needed for checkout workflow (up to Confirmation page) |
| Creates Checkout Functions (Excluding Confirmation) |
tntcheckoutreview |
Creates all functions needed for checkout workflow (up to Review page) |
| Creates global variable |
tntcheckoutglobal |
Creates global variable 'currentStep'. To be used with tntcheckoutconfirm/tntcheckoutreview |
| Calls detectCheckoutStep (Confirmation Page) |
tntcheckoutinitconfirm |
Calls detectCheckoutStep in function main (to be used with tntcheckoutconfirm) |
| Calls detectCheckoutStep (Review Page) |
tntcheckoutinitreview |
Calls detectCheckoutStep in function main (to be used with tntcheckoutreview) |
Helpers
Is In Viewport
Creates a Helper function that checks if an element is visible for the user.
| Name |
Prefix |
Description |
| Is In Viewport Function |
oldinvp |
Creates a vanilla js helper function to check if element is entirely or partially in viewport |
Remove Special Characters
Creates a helper function to remove special characters from a string
| Name |
Prefix |
Description |
| Remove Special Characters |
oldrsc |
Creates a helper function to remove special characters from a string |
Get URL Parameter
Creates a helper function to get a parameter from a given URL
| Name |
Prefix |
Description |
| Get URL Parameter |
oldgp |
Creates a helper function to get a parameter from a given URL |
Preload Images
Creates a helper function to preload images
| Name |
Prefix |
Description |
| Preload Images |
oldpreload |
Creates a helper function to preload images |
Ready
Creates a helper function to wait for the DOM to be ready
| Name |
Prefix |
Description |
| Ready |
oldready |
Creates a helper function to wait for the DOM to be ready |
Get Node Index
| Name |
Prefix |
Description |
| Get Node Index |
oldgetnodeindex |
Gets the node index |
Fetch Data API
| Name |
Prefix |
Description |
| Fetch Data API |
oldfetch |
Fetching Data function |
| Fetch Data API Exec |
oldfetchexec |
Execute the fetch data function |
Custom Bailout Message
| Name |
Prefix |
Description |
| Custom Bailout Message Function Execute |
oldbailoutmsg |
Creates the custom bailout message function |
Get Stacks and Stacks Count Function
| Name | Prefix | Description |
| ---- | --- | --- |
| Get Stacks | *tntstacks | Calculates the number of product stacks on the page and returns a number |
Release Notes
1.5.0 (2025/08/22)
Changed
- All lib version 3 snippets now use
old as a prefix instead of tnt
tnt prefix has been updated to generate certain snippets for the current lib versiontntnotification changed to oldnotification for lib version 3 and has been split into three snippets for the current lib:
tnterrortntwarningtntbailoutmsg
tntcreatewfsr changed to oldcreatewfsr- Added snippets pertaining to the checkout page:
tntcheckoutconfirmtntcheckoutreviewtntcheckoutglobaltntcheckoutinitconfirmtntcheckoutinitreview
- The following snippets have both a current and old snippet version:
tntstackstntfntntwfetntwfotntwfctntmttntmstntvptntcntntdbctntontntofftntinsrdoctntcreatesretntwfsrtntsretntcamel
- To access a snippet that has both a current and old version, change the prefix from
tnt to old
- Example:
tntmt can be changed to oldmt
- Added snippets for the following functions within the Utils module for lib version 4:
tntcookiegettntcookieremovetntcookiesettntrandomnumtntelementindextntnormalizetntobserveelementvistntwstntremovespacestntremovespecialtntsettimeout
1.4.1 (2025/06/12)
Changed
- Updated all
var variables to let or const
- All changes in shadowroot.json:
isInDocument, waitForShadowRoot, shadowRootEvent, getClosestShadowElement
- All changes in functions.json:
tntinvp,tntgp, tntpreload, tntfetch, tntstacks
- All changes in javascript.json:
tntrequest,tntcamel
1.4.0 (2024/10/03)
Changed
- Updated
tntstacks snippet
1.3.9 (2024/10/01)
Changed
- Updated
tntgp, tntcamel snippets
- Created
tntstacks snippet - Creates the getStacks and getStacksCount functions
1.3.8 (2024/09/23)
Changed
- Updated
tntcreatesre snippet
1.3.7 (2024/07/15)
Changed
- Updated
tnttemplate lib version
- Created
tntnotification and tntbailoutmsg snippets
1.3.6 (2024/04/29)
Changed
- Updated
tnttemplate lib version
1.3.5 (2024/03/19)
Changed
- Updated
tntfetchexec snippet
- Updated readme snippet with the current portal link
- Updated
tnttemplate lib version
- Removed
tntapi snippet
1.3.4 (2024/03/12)
Changed
- Create
tntfetch snippet, a method that you can use to fetch data to APIs that are not mapped in the tntLib
- Create
tntfetchexec snippet, call execute method for fetch item
tntgetnodeindex changes- Created jsDocs for some snippets.
1.3.3 (2023/05/30)
Changed
- Creates Get the Node Index
tntgetnodeindex
1.3.2 (2023/05/03)
Changed
tnttemplate add bindMetrics functiontntswiperhelper, tntswiperapply and tntswipercall removed from the snippets
1.3.1 (2023/03/01)
Changed
tntclosest updated getClosestElement name to getClosestShadowElement
1.3.0 (2023/02/24)
Changed
tnttemplate updated lib version
1.2.9 (2022/12/23)
Changed
- Changes
isInViewport function to set default parameter to partiallyInViewport
1.2.8 (2022/12/15)
Changed
- Changes
tntinvp to detect elements partially in viewport
- metrics removed from readme template
1.2.7 - (2022/11/11)
Changed
tntclosest updated to work on shadowRoot- updated JsDocs
Added
- (
JAVASCRIPT)
- Creates Text to camel case
tntcamel
- Creates Is In ShadowRoot Document function
tntinsrdoc
