Mini cart open trigger product page

  • Resolved mathijsvdbeek

    (@mathijsvdbeek)


    5 months ago

    Hi,
    I am building a woocommerce website and have a local setup. I added the mini-cart in the header and this opens from a category / index page if you press add to cart, but if you press add to cart on a single product page there is a notification added to cart and you can click and go to the cart, but I like the mini cart to open (slide in) like it does on the index / category page. Is there a way to trigger the mini cart or is this a bug and it should work?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support Reynier (a11n)

    (@reynierc)

    4 months, 4 weeks ago

    Hi @mathijsvdbeek

    I understand you’d like a consistent experience with the mini-cart sliding in on single product pages just like it does on the index/category pages. It’s possible this behavior varies due to different templates or settings in your theme.

    To learn more about what you’re experiencing could you share the link to your page where you’ve added the mini-cart that slides in? Also, did you use a plugin, or the mini-cart block from our guide here? This detail will help me provide you with more accurate advice on how to achieve the mini-cart slide-in on single product pages.

    Thread Starter mathijsvdbeek

    (@mathijsvdbeek)

    4 months, 4 weeks ago

    I like the block theme idea and my website is a selfmade block theme. I started making my own block theme for my other website which has woocommerce. My setup is locally so I can not show you the setup. Basically I started an empty block theme in which I only use the woocommerce plugin for a clean setup. In the template I used the mini-cart block from the guide. Let me know if this helps. Otherwise I will see if I can make a temp staging website.

    I noticed some small wc block glitches. Like the breadcrumbs font size which works in s / m etc, but not in em. Is there a place where I can report this?

    Thread Starter mathijsvdbeek

    (@mathijsvdbeek)

    4 months, 4 weeks ago

    I made a temp staging website so you can see. https://staging.mathijsvanderbeek.nl/index.php/shop/
    and for the product https://staging.mathijsvanderbeek.nl/index.php/product/test-product/

    Plugin Support Zubair Zahid (woo-hc)

    (@doublezed2)

    4 months, 4 weeks ago

    Hello mathijsvdbeek,

    Thank you for your reply.

    I checked your site and noticed that when adding a product to the cart on the product page, the page reloads. This indicates that AJAX is not used for this action.

    You can try enabling this option in the WooCommerce settings and check if that fixes the issue.

    Please note that the behavior of the mini-cart and animation is determined by the theme.
    Since you are using a custom-built theme, it falls outside our support policy scope.
    I recommend you consult a professional WooCommerce Developer who can assist you with website development.

    You can find good devs at Codeable.io and WooExperts.com.

    I hope this helps.

    Best regards.

    Thread Starter mathijsvdbeek

    (@mathijsvdbeek)

    4 months, 3 weeks ago

    Thank you for your suggestions. Ajax was already on. I checked and unchecked it, but it does not make any difference. I will have a look how to solve this otherwise.

    Plugin Support Zubair Zahid (woo-hc)

    (@doublezed2)

    4 months, 3 weeks ago

    Hello mathijsvdbeek,

    Thank you for your reply.

    Since Ajax is already on, that might mean that Ajax is not being called correctly on the product page.
    I suggest you ask this question at Woo Community Slack for answers from the community.

    Please don’t hesitate to contact us again if you have more questions or concerns.
    We are here to help 🙂

    Best regards.

    Thread Starter mathijsvdbeek

    (@mathijsvdbeek)

    4 months, 3 weeks ago

    I made a simple solution. For anybody who reads this post. Try:

    function custom_add_to_cart_message($message) {
        // Voeg een trigger toe om ons script te laten weten dat er een product is toegevoegd
        add_action('wp_footer', 'add_mini_cart_opener_script', 99);
        
        // Retourneer een lege melding
        return '';
    }
    add_filter('wc_add_to_cart_message_html', 'custom_add_to_cart_message', 10, 1);

    function add_mini_cart_opener_script() {
        ?>
        <script>
        jQuery(document).ready(function($) {
            $(window).on('load', function() {
                setTimeout(function() {
                    const miniCartButton = document.querySelector('.wc-block-mini-cart__button');
                    if (miniCartButton) {
                        miniCartButton.click();
                    }
                }, 1000);
            });
        });
        </script>
        <?php
    }
    Plugin Support Zubair Zahid (woo-hc)

    (@doublezed2)

    4 months, 3 weeks ago

    Hello mathijsvdbeek,

    Thank you for your reply.

    I am glad to know that you have resolved the issue.
    I appreciate you for sharing the solution here.

    Have a great day!

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.