Link in shopping cart page

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

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?

18 hours ago, bangank36 said:

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

Sapphire Paradise Cart

16 hours ago, Guest41 said:

Sapphire Paradise Cart

Here is a picture of what it looks like I want the link there to be clickable if this is possible.

On 9/18/2022 at 10:29 AM, Guest41 said:

Here is a picture of what it looks like I want the link there to be clickable if this is possible.

So, would this be possible with this type of code, or can I expect to use JavaScript?

Quote

So, would this be possible with this type of code, or can I expect to use JavaScript?

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

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

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

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.

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?

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.

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

While two things are in my cart

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.

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?

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.

5 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.

Alright thanks for your help creedon!

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?

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.