CODEWITHSUNDEEP
javascriptjquerywordpresswoocommerce
sarah james
sarah james

Reputation: 1

stop scroll to top after add to cart

I have found posts about stopping scroll to the top after a click, but I could not understand how to implement this in my particular code.

When the user clicks on the 'add to cart' button, the page scrolls to the top of the page. I am using code to allow customers to add variable quantities from the shop page in woocommerce.

I want to stop the on click behaviour from scrolling to the top of the page.

Here is the code for 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 );
    }
?>

And this is the code in the 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
}

Here is the AJAX add to cart script

/**
 * 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();
}

This file also references the ajax add to cart. It is the 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;
});

});

Thank you in advance if you can help!

Upvotes: 0

Views: 7429

Answers (3)

flo bee
flo bee

Reputation: 840

Override the scroll_to_notices jQuery function. After your woocommerce.js is called you can add :

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

This will prevent the scrolling. In my case the issue was the scroll was wrong due ton fixed header so I just replace return above by:

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

Upvotes: 2

arslion
arslion

Reputation: 440

This works. Add following code in your js file.

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);
            });
        });
});

Upvotes: 0

rhinosforhire
rhinosforhire

Reputation: 1345

Catch the button's click event and stop it's default behaviour, which includes scrolling to the top of the page.

Inside 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 );
// ...
}

If you're curious about the jQuery Event Object

The event object is guaranteed to be passed to the event handler.

Wait a minute

You should be able to achieve the same thing as the whole e.preventDefault() by changing the <button type="submit" ... > to <button type="button" ...>

Upvotes: 0

Related Questions