_product.simple-bundles.liquid

{% assign current_variant = product.selected_or_first_available_variant %}
<div style="display: none" id="simple-bundles-options-html">
  {% render 'simple-bundles-options', variant: current_variant, div_id: 'simple-bundles-options' %}
  {% for variant in product.variants %}
    {% assign div_id = 'simple-bundles-options-' | append: variant.id %}
    {% render 'simple-bundles-options', variant: variant,  div_id: div_id  %}
  {% endfor %}
</div>

<style>
  #simple-bundles-options-container select {
    width: 100%;
    margin-bottom: 8px;
  }
</style>

<script>
  function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }

  function renderBundleVariantOptions(variantId) {
    if (variantId) {
      var simpleBundlesOptions = document.querySelector(
        "#simple-bundles-options-html #simple-bundles-options-" + variantId
      );
    } else {
      var simpleBundlesOptions = document.querySelector(
        "#simple-bundles-options-html #simple-bundles-options"
      );
    }
    var simpleBundlesOptionsContainer = document.getElementById(
      "simple-bundles-options-container"
    );

    if (simpleBundlesOptions) {
      if (simpleBundlesOptionsContainer) {
        simpleBundlesOptionsContainer.innerHTML = "";
        simpleBundlesOptionsContainer.appendChild(simpleBundlesOptions);
      } else {
        var cartFormHiddenInputs = document.querySelector(
          'form[action$="/cart/add"]:not([id^="product-form-installment"]) > input[type=hidden]'
        );

        var simpleBundlesOptionsContainerDOM = document.createElement("div");
        simpleBundlesOptionsContainerDOM.id = "simple-bundles-options-container";
        insertAfter(simpleBundlesOptionsContainerDOM, cartFormHiddenInputs);

        document
          .getElementById("simple-bundles-options-container")
          .appendChild(simpleBundlesOptions);
      }
    }
  }

  (function () {
    renderBundleVariantOptions(null);
  })();
</script>