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