An AJAX (JavaScript+XML) that will help build your next computer

echPCBuilder Documentation


Last Updated: 2014 February 22

Requirements for using echPCBuilder

Web Browser Requirements

Known Issues & Limitations:

What's included in the package:

To view the included demos, make a new directory in your web server and copy all the files while maintaining their file structure to your webserver and access:

Getting Started

Copy the following files to the target directory: echPCBuilder.js, settings.xml, parte.xml, presyo-US.xml and the prod/ directory. The file list should look something like:

target directory/

Add the following to the external <script> section of your page:

Add the following external CSS to the <link> section of your page:

Add the following HTML code somewhere in the content of your page:

Optional HTML codes:

To start echPCBuilder(), add the following onload event in the <body> of your page:

or add var myShopPCBuilder = new echPCBuilder({}); in your window.onload function.

And that's it! Access YourOwnPage.html from your browser and see echPCBuilder in action.

Optional Settings

The following is for your reference to customize certain settings in the script before it is run:

echPCBuilder() Methods

Improving Performance

To improve performance: limit the number of items to list, resample and optimize the product images and re-use images whenever possible. As of this writing, the demo pages from the Demos Section currently displays >300 items. And the demo in the main page only lists >10 items. All of them use the same price list file.

Adding Items & Prices

To add an item, edit parte.xml with your XML editor and add the item information there. The presyo.xml will also need to be edited to add the price for the item.

Checking of item requirements depends on how well you define the related items but keep in mind the more complex the information the harder it would be to maintain the item list.

See the parte.xml and presyo.xml description below for more information.

Consult with your preferred web developer on how to automate the creation of the items and price list.

Editing the Price List with MS Excel 2010

Before editing the price list, make a backup of the file first.

Included in the package is the XML schema for the price list (presyo.xsd). To edit the price list using Excel first add the Developer Tab. To add the Developer Tab, refer to: or search for "Excel Adding Developer Tab to Ribbon".

Click on the Developer Tab and click on the Source button in the XML group.

On the XML Source pane that will appear, click on the XML Maps and click on the Add button and look for presyo.xsd.

In the Multiple Roots dialog that will appear, select the "price_list" as the root and click OK to close the dialog.

From the XML Source pane, drag the "item" node to cell A2.

Drag the "currency" attribute to A1 and the "symbol" and "lastUpdate" attribute in B1 and C1.

In the Developer Tab and under the XML group, click on Import option and look for presyo.xml

You can now edit the prices of the item.

To save your updated price list, click on the Export option and save it as presyo.xml or whatever file is set by the script to use.

Due to the free-form nature of the items list (parte.xml), no schema is available for it.

Other XML Editors

The following programs can be used to edit XML files: Notepad, Vim, or XML Copy Editor ( )

Other applications of echPCBuilder

Although echPCBuilder was designed to handle PC components, the script can also be applied to any objects with defined connectors. One limitation however are the images displayed in the viewer. Without access to the source, your creativity in displaying the items might be tested ;)

It can also be used as a simple shopping cart but there are already a lot of simple shopping cart out there (=

Generated HTML

The following is a sample HTML generated by the script and its potential values/classes

With regards to CSS: Except for one instance, echPCBuilder() doesn't directly access the style of individual elements. Styling is done by adding/removing classes. The only instance that echPCBuilder() directly accesses is when displaying multiple monitors where it specifies the in percentage.

Description Of XML Files


Contains the category list, default item and price list.


Contains the item and relevant information to be listed.

A word about req_[itemProperty], [itemProperty]_in, match_[itemProperty] & [itemProperty]_check

echPCBuilder first builds a list of [itemProperties] before performing a check against req_, _in, match_, & _check. What this means is that if you want the users to follow a particular sequence in building the PC, use the prefix|suffix [itemProperty] for later items. An example would be if you want to check if a graphics card would fit in a particular case but you want the user to select a case first. The case would have an [itemProperty] like: maxPCILength="290" and the graphics card would have an [itemProperty] like: maxPCILength_check="181".


Contains the prices for the item.

One of the most common error if the browser is not displaying the content of the XML and the XML validates, is the file encoding.

If this happens, try encloding the value in <[CDATA[Some value here]]> or save the file in Unicode format.

How to check if your XML is well-formed

To check if your XML is valid, refer to this site: