时间戳

首页 > 解决方案 > 自定义变体选择脚本冲突

javascript - 自定义变体选择脚本冲突

问题描述

所以，我有一个自定义脚本来更改默认的 WooCommerce 变体选择，到目前为止一切都很好，问题是当变体缺货时，自定义选择应该具有与默认选择相同的选项。

上面自定义“选择”，下面默认。布兰科和 P 缺货。

风俗

我发现WooCommerce Variations JS以编程方式删除了缺货期权，但是当我的脚本在 Variations JS 之后运行时，我认为它应该可以工作。我设法让它工作添加一个 2000 毫秒的 setTimeout，但这太多了，它实际上破坏了我拥有的其他功能。如果有人知道如何解决这个问题，我将不胜感激。

$('.variations select').each(function(){
    var select = $(this);
    var div = $('<div class="grupo-atributos">');
    var ul = $('<ul>');
    select.parent('.value').siblings('.label').find('label').each(function(){
      var label = $(this).text();
      div.append('<span>'+label+'</span>');
    });

    $('#custom-select-produto-variavel').append(div);
    div.append(ul);

    select.find('option').each(function(){
      var titulo = $(this).text();
      var data_value = $(this).val();
      ul.append('<li data-value='+data_value+'>'+titulo+'</li>');
    
    select.change(function(){
    select.find('option:selected').each(function(){
      var opcao_selected = $(this);
      select.find('option:not(:selected)').each(function(){
        var opcao_not_selected = $(this);
        $('#custom-select-produto-variavel li').each(function(){
          var opcao_custom = $(this);
          if(opcao_custom.attr('data-value')==opcao_selected.val())
              opcao_custom.addClass('atributo-selected');
          if(opcao_custom.attr('data-value')==opcao_not_selected.val())
              opcao_custom.removeClass('atributo-selected');
        });
      });
    });
    }).change();

    });
  });

  $('#custom-select-produto-variavel div ul li:contains("Escolha uma opção")').remove();

  $('#custom-select-produto-variavel ul li').click(function() {
    var novoVal = $(this).data('value');
    $('.variations select:has([value='+novoVal+'])').val(novoVal);
    $('.variations select').trigger('change');
  });
<div id="custom-select-produto-variavel"></div>

标签： javascriptjquerydomwoocommerce

解决方案

我发现变体选择的启动延迟为 100 毫秒，因此为了使我的脚本正常工作，我需要添加这些行。

$(document).ready(function(){
setTimeout(function(){
 // My script
}, 150);
});

推荐阅读