Guest41

41 minutes ago, paul2009 said:

I am not sure I understand your question. Can you explain what isn't working for you and why? A working link to the website may also help us.

So, when the user clicks on the button a popup form will appear this will allow the user to any options that they want, and the results would be sent to us via email or when they purchase the item.

It would look like this

Ambré Joy — Test Website (squarespace.com)

PW- 123456789

On 10/21/2022 at 2:42 AM, paul2009 said:

Squarespace does not have a feature to selectively show/hide variant options. All variant options will appear, even unavailable combinations.

Thank you for this. If this isn't available is there a way to add an additional button to the product page so that it shows a popup form where they can select the items they want, and it gets sent to us?

On 10/15/2022 at 3:34 PM, Guest41 said:

Hi there,

I was wondering if there was a way to have a controlled event in the product page so when a user selects an option from a drop-down menu another drop-down menu would appear.

Would this be possible in squarespace?

Hi there,

I was wondering if there was a way to have a controlled event in the product page so when a user selects an option from a drop-down menu another drop-down menu would appear.

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?

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!

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?

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

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?

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

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

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?

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.

18 hours ago, bangank36 said:

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

Sapphire Paradise Cart

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

On 1/24/2022 at 1:25 PM, likemindedproductions said:

Are you still in need for a solution to this?

I just found this post but do need a solution for this.

4 hours ago, Guest41 said:

Would I need to use the lightbox form id in order to run a check for when it's pulled up like when it says .enabled.

What specific content wrapper do I need in order to see what content I need to check is enabled?

5 minutes ago, paul2009 said:

This shows the checkbox limiting part but as I mentioned it will require a Squarespace specific wrapper that loads this every time the lightbox form appears.

 

Would I need to use the lightbox form id in order to run a check for when it's pulled up like when it says .enabled.

On 5/17/2022 at 2:30 AM, paul2009 said:

It is possible but it is reasonably complex to achieve and so you’re unlikely to find an answer in a post. This is because Product Forms are not loaded with the page. The code will therefore require a mutation observer that loads on product detail pages and product blocks and looks for a Product Form to be added to the page.

When a form has been added, the code needs to inspect the newly added form to see if it contains checkboxes. If it does, the code must look for checkboxes to be clicked. When clicked, the code will need to check if the checkbox is being checked or unchecked. If being checked, the code must count the checkboxes that are already checked to determine whether the limit has been reached. If it hasn’t, the box can be checked; if the limit has been reached, it should remain unchecked.

The code will also need to do the same on the cart page where the user can also edit the product form.

Do you have any way I can go about doing this? I have multiple products that need different maximum values and I'm pretty new to using code with applications such as squarespace so would I need to learn more about different languages such as jQuery and JavaScript or find a different solution all together?

Are there any answers on this yet?

On 5/9/2020 at 11:04 AM, paul2009 said:

You can check all the checkboxes on this form by adding the code below to Settings > Advanced > Code Injection > Footer [or to a Code Block inserted below the Form Block. If using a Code Block, choose HTML and uncheck Display Source].

<script>
window.Squarespace.onInitialize(Y, function(){
  var checkboxes = document.querySelectorAll('input[name="checkbox-yui_3_17_2_1_1588700112150_14382-field"]');
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = true;
  }
});
</script>

For the benefit of others who read this post:

• This snippet is for Squarespace 7.0 only, tested on the Brine-family template in the author's question.
• If used on another site, the form's checkbox ID will need to be substituted for the ID used above (shown in green). Each ID is unique (unless a form is duplicated). 
• All code snippets provided on the forum are simplified and provided "as is", without warranty of any kind. If you need code for a business-critical website, consider hiring an experienced web developer who you can trust to keep your site running securely at a competitive price.

 

Could I use something like this to limit the number of checkboxes they can select?

6 hours ago, Guest41 said:

I wanted to know if there was a way to limit the number of checkboxes a person can select. So, after a person clicks the add to cart, they are greeted with a form that has multiple checkboxes I wanted to know if there was a way to limit it.

Would something like this be possible within squarespace using jQuery or Javascript? Or if there are any possible plugins that may work?

I wanted to know if there was a way to limit the number of checkboxes a person can select. So, after a person clicks the add to cart, they are greeted with a form that has multiple checkboxes I wanted to know if there was a way to limit it.

13 minutes ago, creedon said:

Could you point us to a specific page where you are seeing this effect?

I just figured out that square space has this already within their website.

1 minute ago, creedon said:

Could you point us to a specific page where you are seeing this effect?

I didn't know they recently updated their website but here would be what it may look like the first image here is scrolling with different products I would want it where it just displays different pictures.
Bath & Body Works: Body Care & Home Fragrances You'll Love (bathandbodyworks.com)