1. tokenproof module initialization

Advanced users can manually initialize the tokenproof module using the window.tokenproof_init() function. This allows you to trigger the initialization when navigating to specific pages, ensuring the proper functioning of the tokenproof button.

Implementation Steps

1. Identify Navigation Trigger Points

   Determine when you want to initialize the tokenproof module. For example, you may want to initialize the module when entering the Product Details Page (PDP).

2. Implement window.tokenproof_init()

   In your JavaScript code, call the window.tokenproof_init() function at the identified trigger points. This function initializes the tokenproof module and resolves the button visibility issue.

   // Example: Manually initialize tokenproof on PDP entry
   function navigateToProductDetailsPage() {
       // Your routing logic here
   
       // Call window.tokenproof_init() to initialize Tokenproof
       window.tokenproof_init();
   }
   
   

3. Testing

   Test the implementation by navigating to the relevant pages and ensuring that the tokenproof button appears as expected.

2. Customizing Product Pages with Event Listening

In addition to the manual initialization of the tokenproof module, advanced users can leverage event listening to dynamically customize product pages based on changes in the tokenproof module. This feature allows for real-time adjustments to the user interface and content presentation.

Event Listening Implementation: checkmatchingdata_changed

To listen to changes from the tokenproof module, follow these steps:

1. Define a Function to Handle the Event

Create a function to handle the checkmatchingdata_changed event. This function will be triggered whenever there is a change in the relevant data. Here's an example:

// Define a function to handle the event
function handleCheckMatchingDataChanged(event) {
  // Create a new variable and assign the global userShopInfo data to it
  const myVariable = window.userShopInfo;

  // Now you can use myVariable, which contains the same data as userShopInfo
  console.log('myVariable:', myVariable);
}

() In the section below you can see the content of userShopInfo*

2. Add an Event Listener

Add an event listener to listen for the checkmatchingdata_changed event on the document. This ensures that the defined handleCheckMatchingDataChanged function is called whenever the event occurs.

// Add an event listener to listen for the 'checkmatchingdata_changed' event on the document
document.addEventListener('checkmatchingdata_changed', handleCheckMatchingDataChanged);