ShoptetDot

Shoptet Developer Tools is a set of JavaScript functions and events available in Shoptet templates. Additionally, the whole shoptet. object is available in the browser console, providing access to various functions and events.

Shoptet Developer Tools Information

note

The Shoptet Developer Tools are not activly maintained.

Activate events monitoring with shoptet.dev.enableEventsMonitoring() in the browser. By default, it expires in one day. Use the expires parameter for custom duration:

/**
 * Enable events monitoring by setting a cookie and optionally reload the page.
 *
 * @param {boolean} [reload=false] - Whether to reload the page after enabling monitoring.
 * @param {Object} [expires={}] - Expiration settings for the cookie.
 * @returns {boolean} - Returns true when the function completes.
 */
shoptet.dev.enableEventsMonitoring(true, { days: 0, hours: 1 });

Using this command reloads the page, enabling function and event monitoring. Supported functions will log details and parameters in the console, and you can add a listener or modify the function callback.

danger

Be cautious when using the reload option in custom code (or other than the developer console), as it may cause endless loops.

Useful emitted events

Event name	Description
ShoptetDOMContentLoaded	The event is primarily dispatched to signal that certain DOM-related tasks are completed, such as form validation, modal content loading, or updating specific UI elements.
ShoptetCartLoaded	The event is emitted in the addToCart function when items are added to the cart or when various cart-related operations are completed (amount update, etc.).

Shoptet function wrap example

Sometimes, you may want to add your own logic around a Shoptet function. Here’s an example of wrapping the updateCartDataLayer function, which is triggered when the cart updates. You can adapt this approach for other functions as needed.

const tmpUpdateFunction = shoptet.tracking.updateCartDataLayer;
shoptet.tracking.updateCartDataLayer = response => {
  console.log({ response });
  tmpUpdateFunction(response);
};