Skip to main content
aaronlng_92
aaronlng_92
Level 2
July 23, 2024
Solved

Attempting to alter the text of a class of buttons. Styling changes work in browser dev tools, but not in Adobe Target

I'm attempting to alter the text of some buttons on a webpage. They are product recommendations driven by a third party company (API call). When I adjust the styling in the browser dev tools, I see the change apply as I expect. When I take that same code over to Adobe Target and implement via custom code (adding a style element to the head of the page), the change does not apply. Could this be a timing issue of when target is firing versus when the product recommendations load? Has anyone else experienced something similar?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Perrin_Ennen
    Perrin_EnnenAccepted solution
    Community Advisor
    August 1, 2024

    Hi @aaronlng_92 ,
    looks like a timing issue to me as well. This probably works in the preview in the VEC. But as @matthew_ravlich_acg writes I would use a script with a mutation observer to wait until the element exists and then set the styles with JavaScript accordingly. If all this doesn't help - you can still hide the button via CSS and show a new one that triggers the hidden one. That is not nice. But in exceptional cases it is unavoidable.

    View in thread

    2 replies

    Matthew_Ravlich_ACG
    Community Advisor
    Matthew_Ravlich_ACGCommunity Advisor
    Community Advisor
    July 25, 2024

    Hi @aaronlng_92,

    It could be a timing issue, but I would first try wrapping the custom style in '<style>' tags:

     

    <style> .add-to-cart-btn::after { content: "ADD TO CART"; background-color: #004b67; padding-top: 0.35rem; } </style>

     

    See if this allows you to apply your custom styling. If you still have issues, you could apply the styles through JavaScript and use a MutationObserver to check when the DOM is loaded.

     

    Check out the Target Custom Code documentation here: https://experienceleague.adobe.com/en/docs/target/using/experiences/vec/modifications/vec-code-editor

     

    I hope this helps.

    Matthew Ravlich | ACG Digital | albertacg.com

    Translate
      Perrin_Ennen
      Community Advisor
      Perrin_EnnenCommunity AdvisorAccepted solution
      Community Advisor
      August 1, 2024

      Hi @aaronlng_92 ,
      looks like a timing issue to me as well. This probably works in the preview in the VEC. But as @matthew_ravlich_acg writes I would use a script with a mutation observer to wait until the element exists and then set the styles with JavaScript accordingly. If all this doesn't help - you can still hide the button via CSS and show a new one that triggers the hidden one. That is not nice. But in exceptional cases it is unavoidable.

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...