Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
jacksmith1570048763

Conditional product variants working in Chrome but not safari or iOS

Question

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

Share this post


Link to post

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

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


×
×
  • Create New...