Can I add a link to a text on a cart page?

Hello, I was able to add a paragraph to the cart page. But I'm trying to add a link to a paragraph. 

What I'm trying to do is to add a link to 'WhatsApp' within the paragraph. I tried with the below code on the header, but it didn't work with even adding a console. 

What is wrong with the code or the system? does Squarespace not support Javascript on the cart page? 
 

Quote

Customers who wish to make payment through WeChat Pay, Alipay, FPS, or bank transfer can go to WhatsApp to connect with customer service. We will assist you in placing your order conveniently. Alternatively, please contact Vinalie CS through WhatsApp at +852-5506-1330. 2. The option to pay with Apple Pay is only visible to custmers who have set up Apple Pay on their device(mobile). Must use Safari on a supported device.

Here is the code I tried with the inject code. I added this to the header. 

Quote

<script type="text/javascript">
  var paragraph = document.querySelector('.cart-container');
    var link = document.createElement('a');
    link.href = 'https://api.whatsapp.com/message/TJOJYPO7OSXAM1?autoload=1&app_absent=0';
    link.textContent = 'WhatsApp';

    paragraph.appendChild(link);
</script>

Here is the CSS

Quote

#cart .cart-container::after {
  content:'1. Customers who wish to make payment through WeChat Pay, Alipay, FPS, or bank transfer can go to WhatsApp to connect with customer service. We will assist you in placing your order conveniently. Alternatively, please contact Vinalie CS through WhatsApp at +852-5506-1330.\00000a 2. The option to pay with Apple Pay is only visible to custmers who have set up Apple Pay on their device(mobile). Must use Safari on a supported device.';
    white-space: pre-wrap;
    display: block;
    margin-top: 20px;
    color: #5B7456;}

You may be running into the fact that the cart page is lazy loaded. When your code runs the element you are looking for isn't on the DOM yet.

You can check this by adding a console.log ( 'paragraph : ', paragraph ); statement below your var paragraph line.

If the console returns null, then its not there.

The only reliable way to add elements to the cart is with a MutationObserver. This is advanced stuff.

I've written some code that observes the cart and calls callbacks. Please see the following.

This code by itself won't solve your issue. You would still have to write the callback code.

Let us know how it goes.

4 hours ago, creedon said:

You may be running into the fact that the cart page is lazy loaded. When your code runs the element you are looking for isn't on the DOM yet.

You can check this by adding a console.log ( 'paragraph : ', paragraph ); statement below your var paragraph line.

If the console returns null, then its not there.

The only reliable way to add elements to the cart is with a MutationObserver. This is advanced stuff.

I've written some code that observes the cart and calls callbacks. Please see the following.

 

This code by itself won't solve your issue. You would still have to write the callback code.

Let us know how it goes.

@creedon So I added a text to a console.log, but the text 'message' didn't show up. Do you have any idea what was wrong?

<script type="text/javascript">
  var paragraph = document.querySelector('.cart-container');
    console.log('message',paragraph)
    var link = document.createElement('a');
    link.href = 'https://api.whatsapp.com/message/TJOJYPO7OSXAM1?autoload=1&app_absent=0';
    link.textContent = 'WhatsApp';

    paragraph.appendChild(link);
</script>

I've already described what I think is happening, why the code isn't working, and potential corrective action. The line I suggest was not meant as a fix but a diagnostic to confirm my suspicion. You've not shown what the console results were of the console.log output. It would also help if you provided a URL where we can see your issue.