Quantity buttons not added to products loaded with Infinite Scroll #285
Comments
|
@eramits any update? |
|
Hello @marcofrasson , As we never had a default options for quantity buttons on archive pages, can you tell me how do you implement it so that we can replicate this on our end to be able to investigate? Thank you |
It just strikes me - problem might be somewhere on our side, since it's not build-in function 😵💫 First of all - we use plugin Product Quantity for WooCommerce Pro by WPWhale. But also there is this snippet (for rendering quantity buttons I presume): <?php
/**
* Override loop template and show quantities next to add to cart buttons
*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button type="submit" name="add-to-cart" class="button alt add_to_cart_button ajax_add_to_cart" data-product_id="'.$product->get_id().'" data-quantity="1">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form>';
}
return $html;
}And then we do this, to display and add some events to the buttons after some new products are added to the page: $('.infinite-scroll-wrap').on('append.infiniteScroll', function() {
oceanwpWooQuantityButtons();
});After reexamination of this issue I think it is save to close without actual fix - there are some strong chances, that it is fault in our implementation. Sadly, I'm no longer in touch with author of this approach, so some questions might be unanswered forever. I've created PR for this one assuming that more people might bump onto this. |
|
After Theme update to 3.x there were some new issues. Gladly I've been able to fix/workaround them all. First issue - php snippet given above? It was breaking InfiniteScrolling on WC archive pages. Pages were able to load only once giving "no more results" afterwards even, if there was plenty of undisplayed products. <?php
/**
* Override loop template and show quantities next to add to cart buttons
*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
$html = '<div class="cart">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<a href="' . esc_url( $product->add_to_cart_url() ) . '" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="'.$product->get_id().'" data-quantity="1" rel="nofollow">' . esc_html( $product->add_to_cart_text() ) . '</a>';
$html .= '</div>';
}
return $html;
}That fixed InfiniteScrolling, but there was still problem with displaying quantity buttons after appending new page. To solve this I've to change second snippet as well by replacing OceanWP is not using jQuery anymore, so I've tried to hook into InfiniteScroll with vanilla js, but it just didn't work, so alternatively I can use const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes' && mutation.target.style.display === 'none') {
oceanwpWooCustomFeatures.quantityButtons.start();
}
});
});
observer.observe(document.querySelector('.infinite-scroll-request'), {
attributes: true,
});This is too "hacky" for my taste, so I'll just stay this time with jQuery version since it is and it will be required by most of the plugins anyway. I've closed my PR as not applicable anymore. I think this issue can be closed too, although I think that introducing some js events to hook-up into OceanWP frontend logic is a nice idea. |
No description provided.
The text was updated successfully, but these errors were encountered: