Magento Question posted in
The official documentation can be found here.

Changing the Text of a Span Class by script (magento)

Hello. First of all, sorry for eventual English mistakes, since I’m Brazilian:

I have a ecommerce based on magento 1.9.2.2, and the company that hosts it does not allow the user to access the server files (header, body, footer, etc). You can only edit the website via css and html external scripts.

So there’s this div:

                <p class="old-price">
            <span class="price-label">De:</span>
            <span class="price" id="old-price-1046">
                R$2.500,00                </span>
        </p>

                        <p class="special-price">
                **<span class="price-label">Preço Promocional</span>**
            <span class="price" id="product-price-1046">
                R$2.299,90                </span>
            </p>

Which I just need to replace the text “Preço Promocional” (within the “price-label” class) for “Por:”

So far I’ve tried:
document.getElementsByClassName(‘price-label’).innerHTML = ‘Por:’;
javascript:document.getElementsByClassName(‘price-label’).innerHTML = ‘Por:’;
javascript:void(document.getElementsByClassName(‘price-label’).innerHTML = ‘Por:’);

Thanks for any help in advance…

Tags:

2

Answers


  1. 0

    getElementsByClassName returns a collection and not a single element. In your example you have two elements with the same class name, you’d access the first one with the index 0 and the second one with the index 1.

    <p class="old-price">
    <span class="price-label">De:</span>
    <span class="price" id="old-price-1046">R$2.500,00</span>
</p>

<p class="special-price">
    <span class="price-label">Preço Promocional</span>
    <span class="price" id="product-price-1046">R$2.299,90</span>
</p>

<script>
    document.getElementsByClassName('price-label')[1].innerHTML = "Por:";
</script>

    This code will change the second one that says “Preço Promocional” for “Por:”

    //EDIT

    Now that I’ve seen the full page, in javascript you could achieve this with:

    <script>
document.querySelectorAll('.special-price .price-label').forEach(function(node) {
    node.innerHTML = 'Por: ';
});
</script>

    This will target all elements with the class price-label inside elements with the class special-price, loop through each and change their contents. This will change the main, related and recommended products as long as it’s put after they are created.

    As a preferred alternative, try using the following css:

    <style>
.special-price .price-label {
    display:none !important;
}
.special-price::before {
    content: 'Por: ';
}
</style>

    This should hide the content and then prepend the text on the parent and doesn’t required to be placed at the end to work.

    // EDIT (To address new information added in the comments for this answer)

    In order to avoid changing the homepage, you can use the :not() css’ pseudo-class (info here) to exclude those instances of special-price that are found within the homepage. I searched for and id or class that was unique to the homepage (found the class cms-home on the body tag for the homepage) so I’m using that to both exclude and target the different price-labels. I also changed the font-size to match the original one:

    <style>
// this targets price-label that's NOT in the homepage
body:not(.cms-home) .special-price .price-label {
    display:none !important;
}
body:not(.cms-home) .special-price::before {
    content: 'Por: ';
    font-size:15px;
}
// this targets price-label on the homepage
.cms-home .special-price .price-label {
    display:none !important;
}
</style>

    If I understood correctly, on the homepage you’re simply hiding the text, while on the other pages you’re replacing it with “Por: “, this should do it (hopefully) unless there’s another special case I’m unaware of.

    Login or Signup to reply.
  2. 0

    Try this 

    <script>
            $('.special-price .price-label').text('Por:');
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search