[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2007-10-19
7
Medium Priority
?
253 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:thyros
6 Comments
 
LVL 11

Accepted Solution

by:
MacAnthony earned 1000 total points
ID: 20112245
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
 
LVL 4

Assisted Solution

by:aoline
aoline earned 1000 total points
ID: 20114163
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
 

Author Comment

by:thyros
ID: 20264717
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 11

Expert Comment

by:MacAnthony
ID: 20265193
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
 
LVL 4

Expert Comment

by:aoline
ID: 20266105
...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
 
LVL 1

Expert Comment

by:Computer101
ID: 20943310
Forced accept.

Computer101
Community Support Moderator
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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.
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

830 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