Tworzę stronę produktu w większości niestandardową dla witryny WooComerce (Elementor ze skryptami niestandardowymi) i próbuję zmienić domyślną funkcję dodawania do koszyka, ale nie mogę znaleźć sposobu.

Celem jest: Po kliknięciu przycisku Dodaj do koszyka uruchamia się niestandardowy skrypt, który emituje zdarzenie po zakończeniu. Próbuję znaleźć sposób, aby zapobiec przesłaniu formularza po kliknięciu przycisku Dodaj do koszyka i przesłać formularz dopiero po wysłaniu zdarzenia skryptu.

Na początku próbowałem umieścić kod JS bezpośrednio w widżecie przycisku „Dodaj do koszyka” w Elementorze.

Następnie spróbowałem utworzyć krótki kod za pomocą PHP, który wyśle ​​formularz do front-endu wraz z przyciskiem „Dodaj do koszyka”, a także dołączy skrypt, który pozwoli mi osiągnąć mój cel.

To również nie wydaje się działać. Ponieważ użyłem tej samej klasy dla przycisku „single_add_to_cart_button”, formularz jest automatycznie wysyłany po kliknięciu przycisku, a dzięki mojemu skryptowi jest dodawany do koszyka po raz drugi.

Jeśli nie użyję tej samej klasy, formularz zostanie przesłany tylko raz, ale niepoprawnie i wystąpi problem ze zgodnością z innymi wtyczkami.

Czy myślę o tym wszystkim źle, czy jestem na dobrej drodze? Czy ktoś może zasugerować, jak to naprawić?

function custom_add_to_cart_shortcode() {
global $product;
if (!$product) {
    return;
}

$quantity = 1; // Default quantity
$button_text = "Add to Cart"; // Default button text

// Check if cart_item_key is present in the URL
if (isset($_GET['cart_item_key'])) {
    $cart_item_key = $_GET['cart_item_key'];
    $cart = WC()->cart->get_cart();
    if (isset($cart[$cart_item_key])) {
        $quantity = $cart[$cart_item_key]['quantity'];
        $button_text = "Update Cart"; // Change button text
    }
}

if ( ! $product->is_purchasable() ) {
    return;
}

ob_start();

if ( $product->is_in_stock() ) : ?>

    <?php do_action( 'woocommerce_before_add_to_cart_form' ); ?>

    <form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype="multipart/form-data" id="custom-add-to-cart-form">
        <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

        <?php
        do_action( 'woocommerce_before_add_to_cart_quantity' );

        woocommerce_quantity_input(
            array(
                'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
                'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
                'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $quantity, // Set the quantity from the cart
            )
        );

        do_action( 'woocommerce_after_add_to_cart_quantity' );
        ?>

        <button type="button" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" id="custom-add-to-cart-button" class="single_add_to_cart_button button alt<?php echo esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ); ?>"><?php echo esc_html( $button_text ); ?></button>

        <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
    </form>

    <?php do_action( 'woocommerce_after_add_to_cart_form' ); ?>

    <script>
    jQuery(document).ready(function($) {
        $('#custom-add-to-cart-button').on('click', function(e) {
            e.preventDefault(); // Prevent the default form submission

            // Remove the "hidden" class from the "adding-product-to-cart" div
            $('.adding-product-to-cart').removeClass('hidden');

            // Wait for 1 second
            setTimeout(function() {
                // Emit the custom event
                $(document).trigger('productAddedToCart');

                // Wait for 1 more second
                setTimeout(function() {
                    // Find the default WooCommerce add to cart form and submit it
                    $('#custom-add-to-cart-form').submit();
                }, 1000); // Additional 1 second delay

            }, 1000); // Initial 1 second delay
        });
    });
    </script>

<?php endif;

return ob_get_clean();

add_shortcode(’niestandardowy_dodatek_do_koszyka’, 'niestandardowy_kod_dodatku_do_koszyka’);

}