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

Hello,

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. www.somesite.com/photography.xml

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

<top_products>

  <node id=1>
                <title> Sony Cybershot DSC-W555</title>
                <thumbnail>http://www.somesite.com/product/123.jpg</thumbnail>
                <num_reviews>3</num_reviews>
                <reviews_stars>5star.jpg</reviews_stars>
                <price_low>100</price_low>
                <price_high>125</price_high>
                <permalink>http://www.somesite.com/product/123.html</permalink>
</node>

 <node id=2>

    &.. (similar to node 1 content)

  </node>

</top_products>

### */

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
</a>
</div>

<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"/>
</a></center>
</div>

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

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

<div class="permalink">
<center>
<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>
</center>
</div>
<!-- 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 www.somesite.com/photography.xml) and display it between the matching div element in the html of the main page.

Thanks.
thyrosAsked:
Who is Participating?
 
MacAnthonyConnect With a Mentor Commented:
Here is almost an identical example of what you want to do using the jquery javascript library (http://www.jquery.com)

http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html

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.
0
 
aolineConnect With a Mentor Commented:
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.

Matthew
0
 
thyrosAuthor Commented:
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"?>
<top_products>
  <node id="1">
    <title>Microsoft Windows Vista Premium</title>
    <thumbnail>http://www.homepage.com/images/productvista.jpeg</thumbnail>
    <num_reviews>3</num_reviews>
    <reviews_stars>stars-5.gif</reviews_stars>
    <price_low>198.9700</price_low>
    <price_high>198.9700</price_high>

<permalink>http://www.homepage.com/products/computers/software/microsoft-windows-vista-premium.html</permalink>
  </node>
  <node id="2">
    <title>Ideal Ideal Home 3D Home And Garden Design Suite</title>
    <thumbnail>http://www.homepage.com/images/productdesignsuite.jpeg</thumbnail>
    <num_reviews>12</num_reviews>
    <reviews_stars>star-3.gif</reviews_stars>
    <price_low>42.9700</price_low>
    <price_high>42.9700</price_high>

<permalink>http://www.homepage.com/products/computers/software/ideal-ideal-home-3d-home-and-garden-design-suite.html</permalink>
  </node>
</top_products>


I'm going to study the oreilly xml.com 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.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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

     $(function() {
         $('#update-target a').click(function() {
             $.ajax({
                 type: "GET",
                 url: "labels.xml",   // Modify to your file so url: "photography.xml" or whatever it is now
                 dataType: "xml",
                 success: function(xml) {
                     $(xml).find('label').each(function(){
                         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

                         $('<li></li>')
                             .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.
0
 
aolineCommented:
...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.

http://www.captain.at/howto-ajax-process-xml.php

Matthew
0
 
Computer101Commented:
Forced accept.

Computer101
Community Support Moderator
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.