添加到购物车

Question

我发现有关点击后停止滚动到顶部的帖子，但我无法理解如何在我的特定代码中实现这一点。

当用户点击“添加到购物车”按钮时，页面会滚动到页面顶部。我正在使用代码允许客户在woocommerce中从商店页面添加可变数量。

我想停止滚动到页面顶部的点击行为。

以下是add-to-cart.php的代码

<?php
/**
* Custom Loop Add to Cart.
* 
* Template with quantity.
*
* @author      WooThemes
* @package     WooCommerce/Templates
* @version     1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly.
global $product;
?>

<?php if ( ! $product->is_in_stock() ) : ?>

<a href="<?php echo apply_filters( 'out_of_stock_add_to_cart_url',      get_permalink( $product->id ) ); ?>" class="button"><?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?></a>

<?php else : ?>

<?php
    $link = array(
        'url'   => '',
        'label' => '',
        'class' => ''
    );
    switch ( $product->product_type ) {
        case "variable" :
            $link['url']    = apply_filters(   'variable_add_to_cart_url', get_permalink( $product->id ) );
            $link['label']  = apply_filters(  'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) );
        break;
        case "grouped" :
            $link['url']    = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
            $link['label']  = apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) );
        break;
        case "external" :
            $link['url']    = apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
            $link['label']  = apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) );
        break;
        default :
            if ( $product->is_purchasable() ) {
                $link['url']    = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
                $link['label']  = apply_filters( 'add_to_cart_text', __( 'Add to cart', 'woocommerce' ) );
                $link['class']  = apply_filters( 'add_to_cart_class', 'add_to_cart_button' );
            } else {
                $link['url']    = apply_filters( 'not_purchasable_url', get_permalink( $product->id ) );
                $link['label']  = apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) );
            }
        break;
    }
    // If there is a simple product.
    if ( $product->product_type == 'simple' ) {
        ?>
        <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype="multipart/form-data">
            <?php
                // Displays the quantity box.
                woocommerce_quantity_input();
            ?>
            <button type="submit" class="button alt"><?php echo $link['label']; ?></button>
        </form>
        <?php
    } else {
      echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="%s button product_type_%s">%s</a>', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
    }
?>

这是functions.php

中的代码

/* Add variable add to cart button */
function cs_wc_loop_add_to_cart_scripts() {
if ( is_shop() || is_product_category() || is_product_tag() ||  is_product() ) : ?>


<script>
jQuery( document ).ready( function( $ ) {
    $( document ).on( 'change', '.quantity .qty', function() {
        $( this ).parent( '.quantity' ).next( '.add_to_cart_button'  ).data( 'quantity', $( this ).val() );
    });
});
</script>


<?php endif;
}
add_action( 'wp_footer', 'cs_wc_loop_add_to_cart_scripts' );


/**
* start the customisation
*/
function custom_woo_before_shop_link() {
add_filter('woocommerce_loop_add_to_cart_link',  'custom_woo_loop_add_to_cart_link', 10, 2);
add_action('woocommerce_after_shop_loop',  'custom_woo_after_shop_loop');
}
add_action('woocommerce_before_shop_loop',   'custom_woo_before_shop_link');
/**
* customise Add to Cart link/button for product loop
* @param string $button
* @param object $product
* @return string
*/
function custom_woo_loop_add_to_cart_link($button, $product) {
// not for variable, grouped or external products
if (!in_array($product->product_type, array('variable', 'grouped',  'external'))) {
    // only if can be purchased
    if ($product->is_purchasable()) {
        // show qty +/- with button
        ob_start();
        woocommerce_simple_add_to_cart();
        $button = ob_get_clean();
        // modify button so that AJAX add-to-cart script finds it
        $replacement = sprintf('data-product_id="%d" data-quantity="1" $1 ajax_add_to_cart add_to_cart_button product_type_simple ', $product->id);
        $button = preg_replace('/(class="single_add_to_cart_button)/', $replacement, $button);
    }
}
return $button;
}
/**
* add the required JavaScript
*/
function custom_woo_after_shop_loop() {
?>


<script>
jQuery(function($) {
<?php /* when product quantity changes, update quantity attribute on  add-to-cart button */ ?>
$("form.cart").on("change", "input.qty", function() {
    $(this.form).find("button[data-quantity]").data("quantity", this.value);
});
<?php /* remove old "view cart" text, only need latest one thanks! */ ?>
$(document.body).on("adding_to_cart", function() {
    $("a.added_to_cart").remove();
});
});
</script>


<?php
}

这是AJAX添加到购物车脚本

/**
 * AJAX add to cart.
 */
public static function add_to_cart() {
    ob_start();

    $product_id        = apply_filters(  'woocommerce_add_to_cart_product_id', absint( $_POST['product_id'] ) );
    $quantity          = empty( $_POST['quantity'] ) ? 1 :  wc_stock_amount( $_POST['quantity'] );
    $passed_validation = apply_filters(  'woocommerce_add_to_cart_validation', true, $product_id, $quantity );
    $product_status    = get_post_status( $product_id );

    if ( $passed_validation && false !== WC()->cart->add_to_cart(  $product_id, $quantity ) && 'publish' === $product_status ) {

        do_action( 'woocommerce_ajax_added_to_cart', $product_id );

        if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' ) {
            wc_add_to_cart_message( array( $product_id => $quantity ), true );
        }

        // Return fragments
        self::get_refreshed_fragments();

    } else {

        // If there was an error adding to the cart, redirect to the  product page to show any errors
        $data = array(
            'error'       => true,
            'product_url' => apply_filters( 'woocommerce_cart_redirect_after_error', get_permalink( $product_id ), $product_id )
        );

        wp_send_json( $data );

    }

    die();
}

此文件还引用了ajax add to cart。这是woocommerce add-to-cart.js

/*!
* WooCommerce Add to Cart JS
*/
jQuery( function( $ ) {

/* global wc_add_to_cart_params */
if ( typeof wc_add_to_cart_params === 'undefined' ) {
    return false;
}

// Ajax add to cart
$( document ).on( 'click', '.add_to_cart_button', function() {

    // AJAX add to cart request
    var $thisbutton = $( this );

    if ( $thisbutton.is( '.ajax_add_to_cart' ) ) {

        if ( ! $thisbutton.attr( 'data-product_id' ) ) {
            return true;
        }

        $thisbutton.removeClass( 'added' );
        $thisbutton.addClass( 'loading' );

        var data = {};

        $.each( $thisbutton.data(), function( key, value ) {
            data[key] = value;
        });

        // Trigger event
        $( document.body ).trigger( 'adding_to_cart', [ $thisbutton, data ] );

        // Ajax action
        $.post( wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' ), data, function( response ) {

            if ( ! response ) {
                return;
            }

            var this_page = window.location.toString();

            this_page = this_page.replace( 'add-to-cart', 'added-to-cart' );

            if ( response.error && response.product_url ) {
                window.location = response.product_url;
                return;
            }

            // Redirect to cart option
            if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {

                window.location = wc_add_to_cart_params.cart_url;
                return;

            } else {

                $thisbutton.removeClass( 'loading' );

                var fragments = response.fragments;
                var cart_hash = response.cart_hash;

                // Block fragments class
                if ( fragments ) {
                    $.each( fragments, function( key ) {
                        $( key ).addClass( 'updating' );
                    });
                }

                // Block widgets and fragments
                $( '.shop_table.cart, .updating, .cart_totals' ).fadeTo( '400', '0.6' ).block({
                    message: null,
                    overlayCSS: {
                        opacity: 0.6
                    }
                });

                // Changes button classes
                $thisbutton.addClass( 'added' );

                // View cart text
                if ( ! wc_add_to_cart_params.is_cart && $thisbutton.parent().find( '.added_to_cart' ).length === 0 ) {
                    $thisbutton.after( ' <a href="' + wc_add_to_cart_params.cart_url + '" class="added_to_cart wc-forward" title="' +
                        wc_add_to_cart_params.i18n_view_cart + '">' + wc_add_to_cart_params.i18n_view_cart + '</a>' );
                }

                // Replace fragments
                if ( fragments ) {
                    $.each( fragments, function( key, value ) {
                        $( key ).replaceWith( value );
                    });
                }

                // Unblock
                $( '.widget_shopping_cart, .updating' ).stop( true ).css( 'opacity', '1' ).unblock();

                // Cart page elements
                $( '.shop_table.cart' ).load( this_page + ' .shop_table.cart:eq(0) > *', function() {

                    $( '.shop_table.cart' ).stop( true ).css( 'opacity', '1' ).unblock();

                    $( document.body ).trigger( 'cart_page_refreshed' );
                });

                $( '.cart_totals' ).load( this_page + ' .cart_totals:eq(0) > *', function() {
                    $( '.cart_totals' ).stop( true ).css( 'opacity', '1' ).unblock();
                });

                // Trigger event so themes can refresh other areas
                $( document.body ).trigger( 'added_to_cart', [ fragments, cart_hash, $thisbutton ] );
            }
        });

        return false;

    }

    return true;
});

}）;

如果可以提供帮助，请提前感谢您！

Answer 1

抓住按钮的click事件并停止其默认行为，包括滚动到页面顶部。

内部add-to-cart.js：

$( document ).on( 'click', '.add_to_cart_button', function(e) { // <-- 'e' is a jQuery event object

    e.preventDefault(); // This should be all you need :)

    // AJAX add to cart request
    var $thisbutton = $( this );
// ...
}

如果您对jQuery Event Object

感到好奇

  

保证事件对象被传递给事件处理程序。

等一下

您应该能够通过将e.preventDefault()更改为<button type="submit" ... >

来实现与整个<button type="button" ...>相同的功能

Answer 2

这有效。在您的js文件中添加以下代码。

var timeout;
 
jQuery( function( $ ) {
        $('.woocommerce').on('change', 'input.qty', function(){

            if ( timeout !== undefined ) {
                clearTimeout( timeout );
            }

            timeout = setTimeout(function() {
                $("[name='update_cart']").trigger("click");
                document.location.reload(true);
            });
        });
});

Answer 3

重写jQuery scroll_to_notices函数。调用woocommerce.js之后，您可以添加：

jQuery( function( $ ) {
  $.scroll_to_notices = function( scrollElement ) {
    // Your changes ...
    return;
  };
});

这将防止滚动。 在我的情况下，问题是滚动错误，原因是固定标题，所以我只用上面的return替换：

$( 'html, body' ).animate( { scrollTop:0 }, 1000 );