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 , , , , , ,

How To Debug With JavaScript

September 26, 2011 Leave a Comment

When used effectively, JavaScript debuggers help find and squash errors in your JavaScript code. To become an advanced JavaScript debugger, you’ll need to know about the debuggers available to you, the typical JavaScript debugging workflow, and code requirements for effective debugging. In this article, we’ll discuss advanced debugging techniques for diagnosing and treating bugs using a sample web application.

On accessibility

This article highlights strengths and differences between debugging tools, and shows how we perform advanced JavaScript debugging tasks. Our methods often rely on the mouse; if you prefer to use keyboard shortcuts, or if you rely on assistive technologies such as screen readers to interact with these tools, you should consult the relevant documentation to determine how (or if) these tools will work for you.

The debuggers

With an increasing selection of good debuggers available, JavaScript programmers can gain a lot from learning how to use them. JavaScript debugger user interfaces (UIs) are becoming more polished, more standardized across products, and easier to use, thus making it easier for both experts and novices to learn JavaScript debugging.

Currently, there are debugging tools available for all major web browsers. [Read more...]

Filed Under HowWhatWhy, Web Design Tagged With , , , ,

How to Insert Elements With DIV in JavaScript

July 9, 2011 Leave a Comment

Programmers can use JavaScript as the tools to modify the invisible framework of a Web page known as the Document Object Model (DOM).

The DOM is the application programming interface of HyperText Markup Language (HTML). The JavaScript method getElementById() can access the page division tag “div” to add or modify HTML styling information like backgrounds, fonts, borders, widths and positioning. In addition, the innerHTML property can change the content between the

tags.

HTML tags must be labeled with an ID before the getElementById() method can find and access them.

Create new file, enter the following code into the text editor:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>

        <style type="text/css"><!--

            #inner {

                width:200px;

                height:20px;

                background-color:red;

                color:white;

                font-size:15px;

                text-align:right;

            }

            --></style>

        <script language="javascript">

            function changeDiv(){

                document.getElementById("inner").style.width = "500px";

                document.getElementById("inner").style.height = "220px";

                document.getElementById("inner").style.fontSize = "62px";

                document.getElementById("inner").style.textAlign = "center";

                document.getElementById("inner").style.backgroundColor = "#FFB3B3";

                document.getElementById("inner").style.border = "4px dashed red";

                document.getElementById("inner").style.color = "black";

                document.getElementById("inner").innerHTML="JavaScript can insert styling and content elements into a Div";

                document.getElementById("mybutton").value = "And it works!";

            }

        </script>

    </head>

    <body>

        <div id="inner">here is the red div </div>

        <input id="mybutton" type="button" onClick="changeDiv()" value="Click this button to insert new info into the red div above" />

    </body>

</html>

 

 

Save the code as the name dom.html,and open it with Chrome or others.

Filed Under HowWhatWhy, Web Design Tagged With , , , ,

OPEN SOURCES(15): JAVASCRIPT BROWSERS INTERFACES (HTML5)

June 25, 2011 Leave a Comment

[Read more...]

Filed Under Web Applications, Web Design Tagged With , ,

OPEN SOURCES(14): JAVASCRIPT GRAPHICS AND 3D

June 24, 2011 Leave a Comment

[Read more...]

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

OPEN SOURCES(12): JAVASCRIPT AUDIO PROCESSING AND VISUALISATION

June 23, 2011 Leave a Comment

[Read more...]

Filed Under Web Applications Tagged With , ,

Magento Feature: Merge JavaScript Files

May 13, 2011 1 Comment

Magneto, all the Javascript files came with Magento and are placed in “page.xml”, were merged in one link automatically and it was only capable of merging up to 10 JS files. Since version 1.4, a new feature, “Merge JavaScript Files” has added and is not set to Yes by default. We noticed quite a number of people who upgraded their sites are not aware of this change including our existing and new customers, and we have had to answered the same question over and over as some customers thought our Magento themes don’t have the feature.

however I have noticed that there are many shops that are not using Magento’s default feature to merge JavaScript files. At the time prior to Magento 1.4, JavaScript merging was included, however it was limited to 10 files. Now that’s not a case anymore.

All you need to do is: [Read more...]

Filed Under Magento Tagged With , ,