{% 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> |