Skip to main content

Developer Note: Virtuemart - Editing the Add to Cart MooTool Popup

To edit the “Add To Cart” popup that appears when you add an item to a cart in Virtuemart, there are few files that you need to know about.



These are the files to know

\components\com_virtuemart\themes\default\theme.js
\components\com_virtuemart\js\mootools\  - contains the files for editing the appearance of the popup.

To edit the appearance of the box, edit \components\com_virtuemart\js\mootools\mooPrompt.css to change the styles as well as editing the 2 images in the directory to edit how they appear as well (close box and header-background)


Handling how long the popup appears:

Open:

 \components\com_virtuemart\themes\default\theme.js

Search for the line:

  setTimeout( 'document.boxB.close()', 3000 );

found around the 50 line mark or so.  The default value has the cart disappearing after 3 seconds (3000/3).  You can increase this to a very large number, if you want the cart popup to hang around longer, or comment out the line completely to remove the timeout.

Comments

  1. Brilliant, thanks for this, helped me out loads

    ReplyDelete
  2. Assalam O Alaikum!
    This is really a great post. After long search I reached the appropriate post. Thanks a lot
    Arif Iqbal Khan Khattak
    Software Engineer
    Discretelogix (Pvt) Ltd.
    +92 333 996 2414

    ReplyDelete
  3. Hi! Thanks for the helpful post!

    I was wondering if it's possible for you to edit the "Cart" button to say "Checkout".

    If so, can you please tell me how?

    Thanks!

    ReplyDelete
    Replies
    1. Well, it really depends on the version of Virtuemart you are using, but it's quite an easy change either way.

      Virtuemart 2.0 and up, the language file is found in your base install directory /language/en-GB/en-GB.com_virtuemart.ini (change the language based on your language preference). Search for COM_VIRTUEMART_CART_SHOW_MODAL and change the value to "Checkout" or whatever you wish.

      For earlier versions of Virtuemart, the language file is kept in /administrator/components/com_virtuemart/languages/common/english.php. Search for PHPSHOP_CART_TITLE and change the value to what you want to appear as that button.

      Delete
    2. Thanks a lot friend!

      I wish I checked this blog earlier for your wonderful solution!

      Ahhh i could have fixed this a month ago!

      But thanks Brian!

      Delete
    3. No problem. Hopefully it helps someone else down the line.

      Delete
  4. Hi, thanks for a good post! Does this work for VM2 as well? I can't get the popup to auto close at all. You have to click on the button for it to close. I have it set to 3000. Thanks! Regards Linda

    ReplyDelete
    Replies
    1. Unfortunately, I haven't actually fiddled with the Add To Cart dialog on VM2. I've actually just bypassed it completely by taking the customer straight to the cart when 'add to cart' is clicked.

      Delete

Post a Comment

Popular posts from this blog

How To Run Chrome From Within Notepad++

If you have recently tried to Run  Chrome from within Notepad++ recently, you've probably encountered the same issue I did.  Chrome didn't run. The fix is actually really simple.  Open up the Run box in Notepad++ and browse to your installation of Chrome. ie.  C:\Program Files\Google\Chrome\Application\Chrome.exe Select the file when you find it.  Now, the trick is: Put quotation marks around the path you see in the Run  box.  Now, put 1 space after the closing quotation mark. Type this: $(FULL_CURRENT_PATH) It'll look something like this: Click Run .  If Chrome opens, click Save and set your hotkey.

Divi Theme - Remove pause 'on hover' of the full width slider

In the Divi theme, open up /js/custom.js Comment out the following code (around line 144) if ( settings.slideshow && et_slides_number > 1 ) { $et_slider.hover( function() { $et_slider.addClass( 'et_slider_hovered' ); if ( typeof et_slider_timer != 'undefined' ) { clearInterval( et_slider_timer ); } }, function() { $et_slider.removeClass( 'et_slider_hovered' ); et_slider_auto_rotate(); } ); }