Jump to content

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

Recommended Posts

Posted (edited)

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;}

image.thumb.png.0d8f57ea866d770ba187c04dbec39f41.png

Edited by Chloe9656
Link to comment
  • Replies 3
  • Views 365
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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>
Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.