-2

Apologies in advance if it is a badly worded question, I welcome feedback.

On my page: https://www.dev.roletraining.co.uk/courses-schedule/ I am trying to remove the word "From: "

I've made this script which works on this page: https://www.dev.roletraining.co.uk/upcoming-courses/ but doesn't work on the page in my first link.

window.onload = (event) => {
    var elements = document.querySelectorAll('.wptf_price, .wc-bookings-availability-item-price');
    function walkText(node) {
        if (node.nodeType == 3) {
            node.data = node.data.replace("From: ", "");
        }
        if (node.nodeType == 1 && node.nodeName != "SCRIPT") {
            for (var i = 0; i < node.childNodes.length; i++) {
                walkText(node.childNodes[i]);
            }
        }
    }
    walkText(document.body);
};

I assume it is loading too early. If you put the same code in the console and run it, it works.

Is there a better way to load this JavaScript at a later point?

Eoin
  • 1,413
  • 2
  • 17
  • 32
  • Have you checked your developer's console for errors on the pages where the script doesn't work? – Scott Marcus Jul 08 '20 at 21:03
  • Wow there are quite a few JS warnings on that page. None relate to my code. – Eoin Jul 08 '20 at 21:06
  • 1
    Don't need to worry about warnings right now, just errors. – Scott Marcus Jul 08 '20 at 21:11
  • 1
    Well if the code is running too early, is the content loaded with Ajax? If yes, you should figure out how to run the script when that Ajax code runs. – epascarello Jul 08 '20 at 21:18
  • Hmm, that's a good question. I think it does load because it has lazy load. Crap. Thanks. – Eoin Jul 08 '20 at 21:30
  • 1
    You can always use CSS to hide the text node and still show the children (so FROM will be hidden). Since the HTML is not an iframe, you can apply CSS to the main page and it will be applied to the lazy loaded HTML also. – imvain2 Jul 08 '20 at 21:40
  • How would I hade the parent and show the children with CSS? If I do `display: none` on the parent it hides both – Eoin Jul 08 '20 at 21:43

1 Answers1

1

The problem that you are having is the HTML isn't being generated on page load. So the javascript is being ran against content that doesn't exist.

An alternative solution is use CSS to hide the plain text then use CSS also to show just the span and small child elements. I'm setting font-size to 0 so the text node no longer takes up space.

This is a modified answer from https://stackoverflow.com/a/15196985/3684265

.wc-bookings-availability-item-price {
    visibility:hidden;
    font-size: 0;
    -webkit-text-size-adjust: none;
}

.wc-bookings-availability-item-price *{
    visibility:visible;
    font-size:18px;
}
<div class="wc-bookings-availability-item-price">From: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>60.00</span> <small class="woocommerce-price-suffix">+VAT</small></div>

<div class="wc-bookings-availability-item-price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>175.00</span> <small class="woocommerce-price-suffix">+VAT</small></div>
imvain2
  • 15,480
  • 1
  • 16
  • 21
  • My god man it works. I knew there was a CSS solution but I couldn't work it out. Fantastic, thank you. Any chance you know where I can get my last 6 hours back from? – Eoin Jul 08 '20 at 21:45
  • 1
    I'm glad that I can help. I checked your website and refreshed the screen and I would recommend changing font-size:0 to `font-size: 0 !important;`. The reason is you have some other code that is messing with the font sizes. And that font-size 0 part allows you to accommodate the lines that don't actually have FROM in them. – imvain2 Jul 08 '20 at 22:03
  • ledge, if I could give you more delicious internet points I would do – Eoin Jul 09 '20 at 12:34