Jump to content

Link in shopping cart page

Recommended Posts

1 hour ago, Guest41 said:

Hi,

I was wondering if I could make this text clickable within the websites shopping cart page using this code

#cart .cart-container::before {
   font-weight: bold;
   font-style: italic;
  content: 'text'

Thanks in advance

Can you share your site with protected password so I can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
17 hours ago, creedon said:

CSS can not make links. To make links you need JavaScript.

Ok thanks would this code potentially work with a basic coded link?

<!-- Note For Free Legacy Tumblers -->

<script>

  $( document ).ready(function() {

    // You change change the text you want to display in the below line

    var yourText = "Note with a $40 or more purchase you get one free legacy jar tumbler. With a $55 or more purchase you get two free legacy jar tumblers. Click the following link to select your free legacy jar(s): https://www.sapphireparadise.com/clearance/p/legacy-tumblers This is a discount code that is automatically applied at checkout.";

    $("<p>" + yourText + "</p>").prependTo("#sqs-cart-root");

  });

</script>

<!-- End Of Note For Free Legacy Tumblers -->

Link to comment
3 hours ago, Guest41 said:

Ok thanks would this code potentially work with a basic coded link?

<!-- Note For Free Legacy Tumblers -->

<script>

  $( document ).ready(function() {

    // You change change the text you want to display in the below line

    var yourText = "Note with a $40 or more purchase you get one free legacy jar tumbler. With a $55 or more purchase you get two free legacy jar tumblers. Click the following link to select your free legacy jar(s): https://www.sapphireparadise.com/clearance/p/legacy-tumblers This is a discount code that is automatically applied at checkout.";

    $("<p>" + yourText + "</p>").prependTo("#sqs-cart-root");

  });

</script>

<!-- End Of Note For Free Legacy Tumblers -->

When I use this code people then aren't allowed to use the shopping cart

Edited by Guest41
Link to comment
Quote

would this code potentially work with a basic coded link?

You could do something like the following.

<!-- Note For Free Legacy Tumblers -->

<script>

  $( ( ) => {
  
    // You change change the text you want to display in the below line
    
    const html = `
    
      <p id="tumblers">
      
        Note with a $40 or more purchase you get one free legacy jar tumbler.
        With a $55 or more purchase you get two free legacy jar tumblers.
        
        <a href="https://www.sapphireparadise.com/clearance/p/legacy-tumblers">
        
          Select your free legacy jar(s)
          
          </a>.
          
        This is a discount code that is automatically applied at checkout.
        
        </p>
        
      `;
      
    $( '#sqs-cart-root' )
    
      .prepend ( html );
      
    } );
    
  </script>

<!-- End Of Note For Free Legacy Tumblers -->

If you want to have just text like in your example JavaScript you could do a CSS only solution. To have an actual link you need JavaScript.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
18 hours ago, creedon said:

You could do something like the following.

<!-- Note For Free Legacy Tumblers -->

<script>

  $( ( ) => {
  
    // You change change the text you want to display in the below line
    
    const html = `
    
      <p id="tumblers">
      
        Note with a $40 or more purchase you get one free legacy jar tumbler.
        With a $55 or more purchase you get two free legacy jar tumblers.
        
        <a href="https://www.sapphireparadise.com/clearance/p/legacy-tumblers">
        
          Select your free legacy jar(s)
          
          </a>.
          
        This is a discount code that is automatically applied at checkout.
        
        </p>
        
      `;
      
    $( '#sqs-cart-root' )
    
      .prepend ( html );
      
    } );
    
  </script>

<!-- End Of Note For Free Legacy Tumblers -->

If you want to have just text like in your example JavaScript you could do a CSS only solution. To have an actual link you need JavaScript.

This does work but it blocks the user from being allowed to use the cart could this be applied after the cart title?

Edited by Guest41
Link to comment
Quote

it blocks the user from being allowed to use the cart

Not sure what is going on there. When I run the code locally it doesn't interfere with the cart functionality.

Quote

could this be applied after the cart title?

It can be done but it gets trickier as the cart is loaded in stages. Please see the following.

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
19 minutes ago, creedon said:

Not sure what is going on there. When I run the code locally it doesn't interfere with the cart functionality.

This is what it shows in both the editor mode and the live website

 

Image 1.png

While two things are in my cart

 

Image 2.png

Edited by Guest41
Link to comment
Quote

This is what it shows in both the editor mode and the live website

I dug a little deeper and was able to reproduce the issue you are seeing.

Obviously altering #sqs-cart-root with JavaScript is making SS unhappy and preventing the cart from loading the rest of its contents.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
1 hour ago, creedon said:

I dug a little deeper and was able to reproduce the issue you are seeing.

Obviously altering #sqs-cart-root with JavaScript is making SS unhappy and preventing the cart from loading the rest of its contents.

Is there any possible work around for this?

Link to comment
25 minutes ago, creedon said:

My Cart Page Observe Changes code mentioned in a previous post in this thread gives you a start then you write a callback for it.

One last question the script I have doesn't have a function name so do I just create a function id above the html line?

Link to comment
Quote

One last question the script I have doesn't have a function name so do I just create a function id above the html line?

My cited code has an example of a callback function which shows the structure of a minimal callback. Actually the example callback is good to install for initial testing to see what elements are passed into the callback. Then you can tune your code to skip elements you are not interested in.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.