Jump to content

Conditional product variants working in Chrome but not safari or iOS

Recommended Posts

Hi, I have complex product variants set up (small, medium and large) and then quantities (bundle of 100, bundle of 200 and so on) and I want to hide certain options from the quantities list and only display those relevant to the consumer. unfortunately squarespace doesn't allow this as standard.

Here is my code (in a code block under "additional info" in the inventory product). This works fine in Chrome but not in Safari or iOS. In Safari the dropdown menus don't update to show the customer's choice (eg small, bundle of 100). Does anyone know what the issue in Safari is?


<script type="text/javascript">  

          $(function() {
    $("select[data-variant-option-name='size']").change(function () {

console.log($(this).val());
    if ($(this).val() == 'small') {

$("select[data-variant-option-name='pack of']")
    .find("option")
    .remove()
    .end()
    .val("Select pack of");
var selectSize = {"Select pack of":"Select pack of","bundle of 100":"bundle of 100","bundle of 200":"bundle of 200", "box of 1000":"box of 1000"}

$.each(selectSize, function(key, value) {
     $("select[data-variant-option-name='pack of']")
         .append($("<option></option>")
         .prop("value",key)
         .text(value));
});


    };

console.log($(this).val());
    if ($(this).val() == 'medium') {

$("select[data-variant-option-name='pack of']")
    .find("option")
    .remove()
    .end()
    .val("Select pack of");
var selectSize = {"Select pack of":"Select pack of","bundle of 50":"bundle of 50","bundle of 100":"bundle of 100", "box of 500":"box of 500"}

$.each(selectSize, function(key, value) {
     $("select[data-variant-option-name='pack of']")
         .append($("<option></option>")
         .prop("value",key)
         .text(value));
});


       };

console.log($(this).val());
    if ($(this).val() == 'large') {


$("select[data-variant-option-name='pack of']")
    .find("option")
    .remove()
    .end()
    .val("Select pack of");
var selectSize = {"Select pack of":"Select pack of","bundle of 50":"bundle of 50","box of 200":"box of 200"}

$.each(selectSize, function(key, value) {
     $("select[data-variant-option-name='pack of']")
         .append($("<option></option>")
         .prop("value",key)
         .text(value));
});


       }; 
});
  });
</script>


Edited by jacksmith
Link to comment
  • 4 months later...
  • Replies 2
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...

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.