Closing the PEP Mini Cart When Clicking Outside

Overview

The WISDM Product Enquiry Pro (PEP) plugin comes with a mini cart feature that provides users with a convenient way to view the products they have added to their cart.

By default, the mini cart remains open until the user manually closes it by clicking the close button. However, in some cases, you may want the mini cart to close automatically when the user clicks outside of the mini cart, offering a smoother and more intuitive user experience.

This guide will show you how to implement this functionality by adding a simple snippet of code to your theme’s functions.php file.

1. Why You Might Want to Close the Mini Cart on Click Outside

There are several reasons why you might prefer to close the PEP mini cart when a user clicks outside of it:

• Improved User Experience: Automatically closing the mini cart when users click outside it is a more intuitive behavior, especially on mobile devices or when users accidentally open the cart.
  
• Cleaner Interface: For sites with limited screen space (especially on mobile), auto-closing the mini cart helps maintain a clean, minimal interface.
  
• Consistency: Many modern e-commerce websites feature this behavior, and users have come to expect it. Implementing it can make your site feel more familiar and responsive.

---

2. How to Implement the Feature

To make the PEP mini cart close when the user clicks outside of it, you will need to add a small JavaScript/jQuery script.

This script listens for any clicks outside the mini cart area and closes the cart if the click is detected outside the cart.

This can be done easily by adding the code to your theme’s or child theme’s functions.php file.

---

3. Step-by-Step Guide to Add Code

Follow these steps to implement the functionality:

Step 1: Open Your Theme’s functions.php File

1. From your WordPress Dashboard, go to Appearance → Theme Editor.
   
2. On the right side, under Theme Files, find and click on the functions.php file.
   
   Note: If you are using a child theme (which is recommended to preserve your changes when updating the theme), make sure to edit the functions.php file in the child theme folder.

Step 2: Add the Code to functions.php

Copy and paste the following code snippet into the functions.php file:

add_action('quoteup_after_enquiry_cart_bubble_displayed', 'quoteup_close_mc_when_clicked_outside_76381');

function quoteup_close_mc_when_clicked_outside_76381() {
    $js = '
        jQuery("body :not(div.pep-mc-wrap, div.pep-mc-footer, div.pep-mc-wrap *, div.pep-mc-footer *)").click(function(){
            jQuery("body .pep-mc-collapse").trigger("click");
        });
    ';
    wp_add_inline_script('wdm-draggable', $js);
}

Step 3: Save Changes

After adding the code, click the Update File button to save the changes.