Brine Variant (Store + Detail Page)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- <script src="https://code.beaverhero.com/file?filename=1759887527305brinevariant.js"></script> -->
<script>
$(document).ready(function(){
  $('.ProductList-item').each(function(){
    var $productItem = $(this);
    var productId = $productItem.data('item-id');
    var productLink = $productItem.find('.ProductList-item-link').attr('href');
    
    if(productId && productLink){
      var jsonUrl = productLink + '?format=json-pretty';
      
      $.ajax({
        url: jsonUrl,
        method: 'GET',
        success: function(data){
          var variants = data.item.variants;
          var variantOptionOrdering = data.item.variantOptionOrdering;
          
          if(variants && variants.length > 0 && variantOptionOrdering && variantOptionOrdering.length > 0){
            var variantOptionsHtml = '<div class="variant-options">';
            
            variantOptionOrdering.forEach(function(optionName){
              var uniqueValues = [];
              var stockStatus = {};
              
              variants.forEach(function(variant){
                var value = variant.attributes[optionName];
                if(value && uniqueValues.indexOf(value) === -1){
                  uniqueValues.push(value);
                  stockStatus[value] = variant.qtyInStock > 0 || variant.unlimited;
                } else if(value && stockStatus[value] === false){
                  stockStatus[value] = variant.qtyInStock > 0 || variant.unlimited;
                }
              });
              
              if(uniqueValues.length > 0){
                uniqueValues.forEach(function(value){
                  var availabilityClass = stockStatus[value] ? 'available' : 'non-available';
                  variantOptionsHtml += '<span class="variant-option ' + availabilityClass + '" data-option-name="' + optionName + '" data-option-value="' + value + '">' + value + '</span>';
                });
              }
            });
            
            variantOptionsHtml += '</div>';
            $productItem.find('.ProductList-meta').before(variantOptionsHtml);
          }
        },
        error: function(){
          console.log('Không thể lấy thông tin variants cho product: ' + productId);
        }
      });
    }
  });
});
$(document).ready(function(){
  var $productDetail = $('.ProductItem-details');
  
  if($productDetail.length > 0){
    var $variantSection = $('.product-variants');
    
    if($variantSection.length > 0){
      var variantsData = $variantSection.data('variants');
      
      if(variantsData && variantsData.length > 0){
        var variantOptionsHtml = '<div class="variant-options">';
        var uniqueValues = [];
        var stockStatus = {};
        
        variantsData.forEach(function(variant){
          var sizeValue = variant.attributes.Size;
          
          if(sizeValue && uniqueValues.indexOf(sizeValue) === -1){
            uniqueValues.push(sizeValue);
            stockStatus[sizeValue] = variant.qtyInStock > 0 || variant.unlimited;
          } else if(sizeValue && !stockStatus[sizeValue]){
            stockStatus[sizeValue] = variant.qtyInStock > 0 || variant.unlimited;
          }
        });
        
        uniqueValues.forEach(function(value){
          var availabilityClass = stockStatus[value] ? 'available' : 'non-available';
          variantOptionsHtml += '<span class="variant-option ' + availabilityClass + '" data-size="' + value + '">' + value + '</span>';
        });
        
        variantOptionsHtml += '</div>';
        
        $('.product-variants').before(variantOptionsHtml);
        
        $('.variant-options .variant-option.available').on('click', function(){
          var selectedSize = $(this).data('size');
          
          $('.variant-options .variant-option').removeClass('selected');
          $(this).addClass('selected');
          
          $('#variant-option-Size-' + selectedSize).prop('checked', true).trigger('change');
          
          $('select[data-variant-option-name="Size"]').val(selectedSize).trigger('change');
        });
      }
    }
  }
});
</script>
<style>
.variant-options {
    display: flex;
    justify-content: space-between;
    max-width: 90%;
    margin: 0 auto;
}
  span.variant-option.available {
    color: #000 !important;
}
span.variant-option.non-available {
    color: silver;
}
section.ProductItem-details .variant-options {order: 4;justify-content: flex-start !important;max-width: 100% !important;margin-left: 0 !important;}
.variant-option-title {
    display: none;
}
span.available, span.non-available {
    margin-bottom: 10px !important;
    margin-left: 0px !important;
}
</style>