${content}

`; } }; const createInputHTML = ( variantIndex, containerClass, inputClass, optionLabel, optionTitle, windowName, limitText, variantData ) => { try { const variantsContainer = document.querySelector( `.awesome-quantity-variant-button-container-${variantIndex}` ); updateContentButton(variantIndex, variantData.option1, variantData.option2, variantData.option3); if (variantsContainer.querySelector(`.${containerClass}-${variantIndex}`)) { return; } if (variantData) { updateContentButton(variantIndex, variantData.option1, variantData.option2, variantData.option3); } const containerInput = document.createElement('div'); const WINDOW_DATA = windowName === 'text' ? window.AwesomeText : null; // Create the input field with maxlength and a span for showing the remaining characters containerInput.setAttribute('class', `${containerClass}-${variantIndex}`); containerInput.innerHTML = ` ${optionLabel}

${limitText}/${limitText}

`; const optionPanel = variantsContainer.querySelector(`[data-variant-name="${optionTitle}"]`); // The panel only exists while this piece's dropdown is open, and the app // calls this hook for closed pieces too (picking a set re-selects a // variant on every piece). Nothing to attach to yet - the field gets // built when the customer opens that piece. if (!optionPanel) { return; } optionPanel.append(containerInput); const inputElement = variantsContainer.querySelector(`.${inputClass}-${variantIndex}`); const remainingCharsElement = variantsContainer.querySelector(`.${inputClass}-remaining-${variantIndex}`); const updateRemainingChars = () => { const remainingChars = inputElement.value.length; remainingCharsElement.textContent = remainingChars; }; // Initial update when the input is created updateRemainingChars(); // Event listener for input change to update window data and remaining chars inputElement.addEventListener('input', (event) => { if (windowName === 'text') { window.AwesomeText[variantIndex] = event.target.value; if (variantData) { updateContentButton(variantIndex, variantData.option1, variantData.option2, variantData.option3); } } // Update remaining characters updateRemainingChars(); }); inputElement.addEventListener('keydown', function (event) { if (event.key === 'Enter') { event.preventDefault(); // Prevent form submission return false; } }); } catch (e) { console.log(e); } }; const createSelectHTML = ( variantIndex, containerClass, selectClass, optionLabel, optionTitle, windowName, optionsArray, variantData ) => { const variantsContainer = document.querySelector( `.awesome-quantity-variant-button-container-${variantIndex}` ); // Switching from a bigger set to a smaller one removes the trailing pieces, // so this container can legitimately be gone by the time we run. if (!variantsContainer) { return; } const element = variantsContainer.querySelector(`.${containerClass}-${variantIndex}`); if (variantData) { updateContentButton(variantIndex, variantData.option1, variantData.option2, variantData.option3); } try { if (element) { element.remove(); } const containerSelect = document.createElement('div'); // Create the select dropdown containerSelect.setAttribute('class', `${containerClass}-${variantIndex}`); containerSelect.innerHTML = ` ${optionLabel}

`; const optionPanel = variantsContainer.querySelector(`[data-variant-name="${optionTitle}"]`); // Same as in createInputHTML: nothing to attach to while this piece's // dropdown is closed. if (!optionPanel) { return; } optionPanel.append(containerSelect); const selectElement = variantsContainer.querySelector(`.${selectClass}-${variantIndex}`); // Event listener for select change to update window data selectElement.addEventListener('change', (event) => { if (windowName === 'text') { window.AwesomeText[variantIndex] = event.target.value; if (variantData) { updateContentButton(variantIndex, variantData.option1, variantData.option2, variantData.option3); } } }); } catch (e) { console.log(e); } }; window.AWESOME_QUANTITY_BREAK_IS_VARIANTS_POPUP_DISPLAYED = (isOpened) => { try { [...document.querySelectorAll('[class*="awesome-quantity-variant-button-container-"]')].map( (_, index) => { const variantIndex = index; const variantData = window.AwesomeQuantityBreak.product.variants.find( (v) => v.id === window.AwesomeQuantityBreak.selectedVariants[variantIndex]?.id ); const variantsContainer = document.querySelector( `.awesome-quantity-variant-button-container-${variantIndex}` ); const inputTextVariant = variantsContainer.querySelector( `[data-variant-option-name="${optionCustomText}"]` ); const hasInputTextVariantSelected = inputTextVariant?.getAttribute('data-is-selected') === 'true'; if (hasInputTextVariantSelected) { createInputHTML( variantIndex, INPUT_CUSTOM_CONTAINER_TEXT_CLASS, INPUT_CUSTOM_TEXT_CLASS, optionCustomText, optionTextTitle, 'text', 100, variantData ); } else if (variantsContainer.querySelector(`.${INPUT_CUSTOM_CONTAINER_TEXT_CLASS}-${variantIndex}`)) { variantsContainer.querySelector(`.${INPUT_CUSTOM_CONTAINER_TEXT_CLASS}-${variantIndex}`).remove(); } const selectTextVariant = variantsContainer.querySelector( `[data-variant-option-name="${optionCustomTextSelect}"]` ); const hasSelectTextVariantSelected = selectTextVariant?.getAttribute('data-is-selected') === 'true'; if (hasSelectTextVariantSelected) { createSelectHTML( variantIndex, SELECT_CUSTOM_CONTAINER_TEXT_CLASS, SELECT_CUSTOM_TEXT_CLASS, optionCustomTextSelect, optionTextTitle, 'text', getSelectOptions(variantIndex), variantData ); } else if ( variantsContainer.querySelector(`.${SELECT_CUSTOM_CONTAINER_TEXT_CLASS}-${variantIndex}`) ) { variantsContainer.querySelector(`.${SELECT_CUSTOM_CONTAINER_TEXT_CLASS}-${variantIndex}`).remove(); } } ); } catch (e) { console.log(e); } }; window.AWESOME_QUANTITY_BREAK_SELECT_ROW = (quantity, row, variants) => { // NOTE: despite the name, this hook does not only fire when the customer // picks a set. The app also calls it on every variant change (piece 2, 3, // 5...), so calling expandFirstOption() unconditionally here re-opened the // first piece's dropdown whenever the customer edited another piece. // Only auto-expand when the set itself actually changed. const currentQuantity = Number(quantity); if (currentQuantity !== window.AwesomeExpandState.lastQuantity) { window.AwesomeExpandState.lastQuantity = currentQuantity; if (!isSettlingAfterReinit()) { expandFirstOption(); } } [...Array(Number(quantity))].map((_, index) => { const variantId = variants[index].id; const variantData = AwesomeQuantityBreak.product.variants.find((v) => Number(v.id) === Number(variantId)); updateContentButton(index, variantData.option1, variantData.option2, variantData.option3); }); }; window.AWESOME_QUANTITY_BREAK_ON_CLICK_VARIANT_OPTION = (variantId, index, variantData) => { // Change variant image when selecting variant const image = variantData.image; const themeImage = image ? document.querySelector(`button img[src*="${image}"]`) : null; // This runs before the try block below, so a missing image used to abort the // whole hook and leave the custom text field unbuilt. if (themeImage) { themeImage.click(); } const variantsContainer = document.querySelector(`.awesome-quantity-variant-button-container-${index}`); updateContentButton(index, variantData.option1, variantData.option2, variantData.option3); try { if (variantData.options.includes(optionCustomText)) { if ( [ ...AVOCADO_PHRASES, ...KARTOFFEL_PHRASES, ...ANANAS_PHRASES, ...HAI_PHRASES, ...ENTE_PHRASES, ...PINGUIN_PHRASES, ...COMMON_PHRASES ].includes(window.AwesomeText[index]) ) { window.AwesomeText[index] = ''; } createInputHTML( index, INPUT_CUSTOM_CONTAINER_TEXT_CLASS, INPUT_CUSTOM_TEXT_CLASS, optionCustomText, optionTextTitle, 'text', 100, variantData ); updateContentButton(index, variantData.option1, variantData.option2, variantData.option3); } else if (variantsContainer.querySelector(`.${INPUT_CUSTOM_CONTAINER_TEXT_CLASS}-${index}`)) { variantsContainer.querySelector(`.${INPUT_CUSTOM_CONTAINER_TEXT_CLASS}-${index}`).remove(); } if (variantData.options.includes(optionCustomTextSelect)) { setTimeout(() => { createSelectHTML( index, SELECT_CUSTOM_CONTAINER_TEXT_CLASS, SELECT_CUSTOM_TEXT_CLASS, optionCustomTextSelect, optionTextTitle, 'text', getSelectOptions(index), variantData ); }, 30); } else if (variantsContainer.querySelector(`.${SELECT_CUSTOM_CONTAINER_TEXT_CLASS}-${index}`)) { variantsContainer.querySelector(`.${SELECT_CUSTOM_CONTAINER_TEXT_CLASS}-${index}`).remove(); } } catch (e) { console.log(e); } }; window.AWESOME_QUANTITY_BREAK_CUSTOM_VARIANT_PROPERTIES = (variant, index) => { let properties = {}; if (window.AwesomeText[index]) { properties = { ...properties, ['Text']: window.AwesomeText[index] }; } return properties; }; window.AWESOME_QUANTITY_BREAK_ENABLE_HIDE_QUANTITY_INPUT_OUTSIDE_FORM = true; window.AWESOME_QUANTITY_BREAK_AFTER_COMPONENT_RENDERED = () => { // This hook fires on every re-init too, not only on page load, so expanding // unconditionally would pop the first piece open again in the middle of an // order (for example right after the cart drawer opens). Only do it once. if (window.AwesomeExpandState.hasExpandedOnLoad) { return; } window.AwesomeExpandState.hasExpandedOnLoad = true; expandFirstOption(); };

Galerie

Newsletter-Anmeldung