Been having a number of issues with this code. What I want to do is for specific products I want the ability for a customer to add a $3 greeting card to their order. The card is not meant to be sold separately. Only as an optional add-on.

The select menu I created works fine, but it's not adding the product to the cart at all. So only the original product makes it. It's in the Dawn theme. Here's the code.

main-product.liquid

Javascript:

document.addEventListener('DOMContentLoaded', () => {
    // Select elements
    const greetingCardDropdown = document.querySelector('#greeting-card');
    const productForm = document.querySelector('#product-form-template--19569272783163__main');

    // Check if elements are found
    if (!greetingCardDropdown || !productForm) {
        console.log('Greeting card dropdown or form not found');
        return;
    }

    // Add event listener to the form submit
    productForm.addEventListener('submit', (event) => {
        const selectedGreeting = greetingCardDropdown.value;

        if (selectedGreeting) {
            console.log('Adding Holiday Card property to form:', selectedGreeting);
            // Append the Holiday Card property to the form data
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'properties[Holiday Card]';
            hiddenInput.value = selectedGreeting;
            productForm.appendChild(hiddenInput);
        } else {
            console.log('No Holiday Card selected');
        }
    });
});

Liquid

{%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
    {%- form 'product', product, id: product_form_id, class: 'product-form' -%}
        <!-- Greeting Card Dropdown -->
            {% if product.metafields.custom.holiday_card %}
                <div class="product-form__card">
                  <label for="greeting-card">Add a Holiday Greeting Card ($3):</label>
                  <select name="properties[Holiday Card]" id="greeting-card" class="holiday-card">
                    <option value="">Select a Greeting</option>
                    <option value="Happy Holidays">Happy Holidays</option>
                    <option value="Happy Chanukah">Happy Chanukah</option>
                    <option value="Merry Christmas">Merry Christmas</option>
                  </select>
                </div>
            {% endif %}
            
        <!-- Add to Cart Button -->
    {{ form | payment_terms }}
{%- endform -%}

cart.js

document.addEventListener('DOMContentLoaded', () => {
    const addToCartButton = document.querySelector('[data-add-to-cart]');
    const greetingCardDropdown = document.querySelector('#greeting-card');
    const productForm = addToCartButton.closest('form');

    if (!addToCartButton || !greetingCardDropdown || !productForm) {
        console.log('Add to Cart button, greeting card dropdown, or product form not found');
    return;
    }

    addToCartButton.addEventListener('click', (event) => {
        event.preventDefault();

        const selectedGreeting = greetingCardDropdown.value;
        if (!selectedGreeting) {
            console.log('No greeting card selected');
            productForm.submit(); // Submit the form as usual
            return;
        }

        const formData = new FormData(productForm);
        formData.append('properties[Holiday Card]', selectedGreeting);
        console.log('Selected greeting:', selectedGreeting);

        fetch('/cart/add.js', {
            method: 'POST',
            body: formData,
        })
            .then((response) => {
                if (!response.ok) throw new Error('Network response was not ok');
                return response.json();
            })
            .then((data) => {
                console.log('Cart updated:', data);
                location.reload(); // Reload the page to reflect changes
            })
            .catch((error) => {
                console.error('Failed to update the cart:', error);
            });
    });
});