Extracting Some Data From An XML File & Embedding Into a Static HTML Page Like a Widget! (Typo3 CMS Engine)

Posted on 2007-10-19
Last Modified: 2013-11-19

I need some help in embedding some content data from an external xml file into the body of an html page.

I am using the Typo3 based CMS to power my website (php/mysql), with a seo url extension that outputs all files as standard and static .html pages.  I add content to each page through an Admin interface which allows entry through GUI based text formatting, or I can enter raw html into the body of the page.  

The Goal:
Create a Top 5 Products Chart - Basically a box which lists the product name, image, price range, no. of reviews and link back to the product.  

I have this data available in the form of a static xml file, ie.

The file contents might look something remotely like this;
/* ###


  <node id=1>
                <title> Sony Cybershot DSC-W555</title>

 <node id=2>

    &.. (similar to node 1 content)



### */

I have created the html/css code (design aspect)  to format and display static information like;

/* ###

<div class="top-products-container">
<div class="product-name-link">
<a href="/products/photography/digital-cameras/sony-cyber-shot-dsc-w55-digital-camera.html" class="title-link">
Sony Cyber-shot DSC-W55 Digital Camera - Silver

<div class="product-image">
<center><a href="/products/photography/digital-cameras/sony-cyber-shot-dsc-w55-digital-camera.html">
<img border="0" alt="product image" src="/images/products/sonycamera.jpeg"/>

<div class="review-rating">
<center><a href="/ReviewProduct.aspx?pid=9546267" class="link-class"><img border="0" alt="rating stars" src="/products/images/stars_5.gif" class="some-class" /><br/>(3 Reviews)</a></center>

<div class="pricerange">
<span class="lowprice">£114.69</span> - <span class="highprice">£224.69</span>
<span class="number-stores">5  Store(s)</span>

<div class="permalink">
<a class="permalink-style" href="/products/photography/digital-cameras/sony-cyber-shot-dsc-w55-digital-camera.html">
<img border="0" alt="more info" src="/images/more-info.gif"/></a>
<!-- top-products-container closing tag --></div>

### */

The above is the html output example of displaying one product.  In real terms, there would be about 5 instances of the above code.  It looks fine when posted on a live html page, but my dilemma is that the product name, links, price, image etc.. is being updated daily, so I need to extract the information like url's, price amount etc and parse it in between the relevant places in the html code.

I have little knowledge of xml, so I would appreciate any ideas or tips on how to extract the price and url information (from and display it between the matching div element in the html of the main page.

Question by:thyros
    LVL 11

    Accepted Solution

    Here is almost an identical example of what you want to do using the jquery javascript library (

    Only different is they are putting it into an unordered list, so you would need to change a couple of the tags around, but other than that, it's pretty much what you asked for.
    LVL 4

    Assisted Solution

    TYPO3 has only one XML import tool and this is tx_dkdxmlimport or dkd_xmlimport but is no longer available in the repository. So I suggest you take the approach above and just insert the HTML into an HTML content element.

    To add the <head> content you need to use something like the following in your TYPO3 setup template.

    page.headerData.200 = TEXT
    page.headerData.200.value = <script src="fileadmin/jquery.js" type="text/javascript"></script>

    Remember, to save including this on every page try just adding to an extension template for the page that contains your XML.


    Author Comment

    Thank you both for your comments, some good ideas here.

    I have taken some time out to download the jquery library and get it hooked into the template.  Now I am just trying to figure out what I need to do exactly to parse the information from the xml file into the containers within the html page.

    The xml file format seems to have been finalized - I have a beta version of the structure, and it looks like this;

    <?xml version="1.0" encoding="utf-8"?>
      <node id="1">
        <title>Microsoft Windows Vista Premium</title>

      <node id="2">
        <title>Ideal Ideal Home 3D Home And Garden Design Suite</title>


    I'm going to study the oreilly article to see if I can figure it out, but if anyone can give me some tips on getting started, I'd appreciate it.

    The basic idea is to get the content from the above xml file into carefully placed containers within a set html code/document.  Small example;

    <a href="[<  permalink />]">[<  title />]</a>

    However, since there would be 5 instances of the 'top product', each one would be identified as 'node 1' 'node 2' etc, so I would need to be able to repeat the tags without causing any conflict.

    Thanks again.
    LVL 11

    Expert Comment

    Here is the function they use and I will comment on the modifications you would need to make:

         $(function() {
             $('#update-target a').click(function() {
                     type: "GET",
                     url: "labels.xml",   // Modify to your file so url: "photography.xml" or whatever it is now
                     dataType: "xml",
                     success: function(xml) {
                             var id_text = $(this).attr('id')    // Get the values you want to use
                             var name_text = $(this).find('name').text()
                             // Yours would be:
                             // var elem_link = $(this).find('permalink').text();  // get the permalink value from this node
                             // var elem_title = $(this).find('title').text(); // get the title value from this node

                                 .html(name_text + ' (' + id_text + ')')
                                 .appendTo('#update-target ol');   // This is where they add their list items to their ordered list
                             // Yours would be:
                             // $('div#top-products-container').append('<a href="' + elem_link + '">' + elem_title + '</a><br />');
                             // you will need to have the div container on the page for that to work, but I think this is easier to understand than the example oreilly gave
                         }); //close each(
                 }); //close $.ajax(
             }); //close click(
         }); //close $(

    Hope that helps get you started.
    LVL 4

    Expert Comment

    ...or you can just use plain ol HTML/Javascript to trigger an AJAX lookup of an external file. In this example it is a php file outputting the xml but I don't see why a straight replacement to the xml woul't work.

    LVL 1

    Expert Comment

    Forced accept.

    Community Support Moderator

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    Many times as a report developer I've been asked to display normalized data such as three rows with values Jack, Joe, and Bob as a single comma-separated string such as 'Jack, Joe, Bob', and vice versa.  Here's how to do it. 
    JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
    Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
    Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now