Magento – Get Product View Price By JavaScript

December 15, 2011 Leave a Comment

1,use prototype overwriting Product.Options.prototype.reloadPrice

Product.Options.prototype.oldReloadPrice = Product.Options.prototype.reloadPrice;
Product.Options.prototype.reloadPrice = function(){
    this.oldReloadPrice();
    var currentPrice = howToGetThePrice();
    doSomethingWithTheCurrentPrice(currentPrice);
};

2,use jQuery get the current price by cleaning the html inside an span

function getCurrentPrice(){
    var ds = optionsPrice.priceFormat.decimalSymbol,
    gs =optionsPrice.priceFormat.groupSymbol,
    pf=optionsPrice.priceFormat.pattern;

    var price = 0;
    jQuery('#product-price-<?php echo $_product->getId() ?>_clone span')
        .html()
        .replace(new RegExp("\\"+gs,'g'),'')
        .replace(new RegExp("\\"+ds,'g'),'.')
        .sub(/([0-9\.\,]+)/,function(matches){
            price = parseFloat(matches[1]);
    });
    return price;
}

3,Update element value with this code，you can update total price with qty.

$('totalPrice').innerHTML = currentPrice * $('qty').value
Filed Under Magento Tagged With , , , ,

27+ Useful Javascript Tab Navigation Scripts

October 12, 2011 Leave a Comment

There are a lot of different ways to implement tabs in our website. I had seen pure CSS implementation, Javascript implementation such as jQuery and MooTools tabs. Recently, my client request me to add tab interface to the current theme. So, i googled the web and found a lot of free scripts to do so.  now, I am going to list down useful Javascript tabs that I found.

jQuery plugin

1) jQuery UI Tabs
jquery-ui-tabs
This tab script is built in to the jQuery UI and there are a lot of configurations. For example, you can have rotating tabs, nested tabs, and etc.

2) jQuery idTabs
jquery-idtabs
jQuery idTabs makes adding tabs into a website super simple, but it also open the door to endless possibilities.

3) Minitabs – jQuery minimalistic approach to tabs
Minitabs looks simple, but I can’t found any working demo from the website. [Read more...]

Filed Under Web Applications, Web Design Tagged With , , , , , ,

Magento Use jQuery with Prototype

October 10, 2011 Leave a Comment

General

The jQuery library, and virtually all of its plugins are constrained within the jQuery namespace. As a general rule, “global” objects are stored inside the jQuery namespace as well, so you shouldn’t get a clash between jQuery and any other library (like Prototype, MooTools, or YUI).

That said, there is one caveat: By default, jQuery uses “$” as a shortcut for “jQuery”

Overriding the $-function

However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded. For example:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();

     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

This will revert $ back to its original library. You’ll still be able to use “jQuery” in the rest of your application.

Additionally, there’s another option. If you want to make sure that jQuery won’t conflict with another library – but you want the benefit of a short name, you could do something like this: [Read more...]

Filed Under Magento Tagged With , ,