Need to apply offer created from VEC to multiple items

Question

I have a e-commerce site. My products list page has big list of products, i have added a small badge to first item in the list via VEC. But i want that badge to be displayed for all products in the page. How to achieve that? I am using at.js. My app is next.js SSR.

kandersen-1 · Answer

I'm not familiar with next.js, but I think your best option is to do use custom code in the experience in Target. A script along the lines of this, could do it:

(function() {
  // Function to add the badge to each product title
  function addBadgeToProducts() {
    // Update the selector below to match the product title element on your page.
    var productTitles = document.querySelectorAll('.product-title');
    
    productTitles.forEach(function(title) {
      // Create the badge image element.
      var badge = document.createElement('img');
      badge.src='https://example.com/path-to-badge.png'; // Replace with your badge image URL.
      badge.alt = 'Badge';
      badge.classList.add('product-badge'); // Optional: add a CSS class for styling.
      
      // Insert the badge at the beginning of the title element.
      title.insertBefore(badge, title.firstChild);
    });
  }

  // Ensure the DOM is fully loaded before executing.
  if (document.readyState !== 'loading') {
    addBadgeToProducts();
  } else {
    document.addEventListener('DOMContentLoaded', addBadgeToProducts);
  }
})();

Selector Adjustment: Change the selector '.product-title' to target your actual product title elements.
Image URL: Update the badge.src with the URL of your badge image.

I hope this helps.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded