MarketPress: Popup after adding an item to cart

I was wondering how I may go about having a popup show when adding an item to the cart from a certain category. So, if I have a category called software and when a user adds an item from that category to the cart, a popup will come up and prompt them to add support (another item) to the cart as well.

Any ideas?
Thanks!
Ed

  • PC

    Hey there Ed,

    Thanks for posting on the forums.

    While we have an option to show the related products in MarketPress but that does not work as a pop up.

    It could however be possible using some Javascript where as soon as a user is adding a product to the cart, a new script can fire a pop up (Using our Pop Up plugin ofcourse) and that will display the support product in the pop up.

    It will however need some custom coding as Add to cart button is standard for the products in all categories else we could have used an onclick pop up rule.

    Let me consult my colleague @Ashok as he is a champ in javascript if its possible using some simple code he can suggest or if we will need to post this as a custom job.

    He should be around soon :slight_smile:

    Cheers, PC

  • Ash

    Hi @Ed

    This is really a nice idea. But for this, you need to add some external script.

    1. Please download the attached file and extract.
    2. Put it in your /wp-content/themes/YOUR_ACTIVE_THEME_FOLDER/
    3. Open your theme's footer.php and add the following script after wp_footer()

    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri()  ?>/fancy/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri()  ?>/fancy/jquery.fancybox.css">
    <script type="text/javascript">
    	jQuery(function($){
    		$(document).on('click', '.mp_button_addcart:not(".mp_pops .mp_button_addcart")', function() {
    			$.fancybox('<div class="mp_pops"><?php echo json_encode(do_shortcode("[mp_product product_id=SERVICE_PRODUCT_ID]")) ?></div>', {
    					overlayShow: true,
    					hideOnContentClick: false
    				});
    		});
    
    		$(document).on('click', ".mp_pops .mp_button_addcart", function() {
    			$.fancybox.close();
    		});
    	});
    </script>

    Replace SERVICE_PRODUCT_ID with your support product id, that you want to show in popup.

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

    • RFDDEV

      I see this a pretty old thread but I hope someone can help me out I'm trying to implement this same code but to include the mp anywhere cart, what should I change in the code and where exactly should I place it ie... within the php tags containing wp_footer() or outside those php tags?

      Here is the code I used its pretty much the same as what you have here but I just replaced mp_product shortcode with mp_show_cart and Im no javascript expert so I could be going about this wrong.

      <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri()  ?>/fancy/jquery.fancybox.js"></script>
      <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri()  ?>/fancy/jquery.fancybox.css">
      <script type="text/javascript">
      	jQuery(function($){
      		$(document).on('click', '.mp_button_addcart:not(".mp_pops .mp_button_addcart")', function() {
      			$.fancybox('<div class="mp_pops"><?php echo trim(json_encode(do_shortcode('[mp_show_cart design='box' cartstyle='modal']')), '"') ?></div>', {
      					overlayShow: true,
      					hideOnContentClick: false
      				});
      		});
      
      		$(document).on('click', ".mp_pops .mp_button_addcart", function() {
      			$.fancybox.close();
      		});
      	});
      </script>
  • Ed

    Ash,

    First, a big THANK YOU for helping me out here. Perhaps an iteration of this can become part of MP.

    I put in the code as requested, but it doesn't seem to work too well. For SERVICE_PRODUCT_ID, I used the SKU of the item. Is that right? In any case, I see a different product and there is no text that indicates "Hey, would you like to add a year of support for this? I see spots to put something like that but am unsure how to do it.

    Thanks!

  • Ed

    Ash,

    Almost there. If you navigate to the site and add one in, you will see some quotes at the top and on the side of the screen.

    Here is a link to see it:

    http://i1187.photobucket.com/albums/z400/edmana/popup.png

    Also, is it possible on the popup (only) to remove the quantity from this form?

    Lastly, in my haste, I forgot to mention one other thing. The items sold range from 99.00 to 399.99. The support varies according to product, say 20%. I can create different support items for each price point. Is it possible to have it select on the popup depending on the price of the item they added?

    Thanks!
    Ed

  • Ash

    Updated code to remove double quote:

    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri()  ?>/fancy/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri()  ?>/fancy/jquery.fancybox.css">
    <script type="text/javascript">
    	jQuery(function($){
    		$(document).on('click', '.mp_button_addcart:not(".mp_pops .mp_button_addcart")', function() {
    			$.fancybox('<div class="mp_pops"><?php echo trim(json_encode(do_shortcode("[mp_product product_id=1862]")), '"') ?></div>', {
    					overlayShow: true,
    					hideOnContentClick: false
    				});
    		});
    
    		$(document).on('click', ".mp_pops .mp_button_addcart", function() {
    			$.fancybox.close();
    		});
    	});
    </script>

    To remove quantity from the form please use this css:

    .mp_pops .mp_quantity{
    display: none;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS

    The last issue is quite complex. It needs custom code/change the plugin core code. Also, if you need to customise this then you can post a job in our job board where you can hire a developer to assist further: https://premium.wpmudev.org/wpmu-jobs/

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

  • Ash

    Well, this is an updated code:

    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri()  ?>/fancy/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri()  ?>/fancy/jquery.fancybox.css">
    <script type="text/javascript">
    	jQuery(function($){
    		$(document).on('click', '.mp_button_addcart:not(".mp_pops .mp_button_addcart")', function() {
    			var id = $(this).siblings('input[name=product_id]').val();
    			if(id == MAIN_PRODUCT_ID)
    				$.fancybox('<div class="mp_pops"><?php echo trim(json_encode(do_shortcode("[mp_product product_id=SUPPORT_PRODUCT_ID]")), '"') ?></div>', {
    					overlayShow: true,
    					hideOnContentClick: false
    				});
    		});
    
    		$(document).on('click', ".mp_pops .mp_button_addcart", function() {
    			$.fancybox.close();
    		});
    	});
    </script>

    I have used product ID instead of price as price can be changed, but once you create a product the ID won't be changed.

    There are two changes that need to make, MAIN_PRODUCT_ID and SUPPORT_PRODUCT_ID.

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.