thyros
asked on
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_review
<reviews_stars>5star.jpg</
<price_low>100</price_low>
<price_high>125</price_hig
<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-contai
<div class="product-name-link">
<a href="/products/photograph
Sony Cyber-shot DSC-W55 Digital Camera - Silver
</a>
</div>
<div class="product-image">
<center><a href="/products/photograph
<img border="0" alt="product image" src="/images/products/sony
</a></center>
</div>
<div class="review-rating">
<center><a href="/ReviewProduct.aspx?
</div>
<div class="pricerange">
<center>
<span class="lowprice">£114.69</
<span class="number-stores">5 Store(s)</span>
</center>
</div>
<div class="permalink">
<center>
<a class="permalink-style" href="/products/photograph
<img border="0" alt="more info" src="/images/more-info.gif
</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.
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_review
<reviews_stars>5star.jpg</
<price_low>100</price_low>
<price_high>125</price_hig
<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-contai
<div class="product-name-link">
<a href="/products/photograph
Sony Cyber-shot DSC-W55 Digital Camera - Silver
</a>
</div>
<div class="product-image">
<center><a href="/products/photograph
<img border="0" alt="product image" src="/images/products/sony
</a></center>
</div>
<div class="review-rating">
<center><a href="/ReviewProduct.aspx?
</div>
<div class="pricerange">
<center>
<span class="lowprice">£114.69</
<span class="number-stores">5 Store(s)</span>
</center>
</div>
<div class="permalink">
<center>
<a class="permalink-style" href="/products/photograph
<img border="0" alt="more info" src="/images/more-info.gif
</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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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(
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').
// var elem_title = $(this).find('title').text
$('<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-contai
// 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.
$(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(
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').
// var elem_title = $(this).find('title').text
$('<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-contai
// 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.
...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
http://www.captain.at/howto-ajax-process-xml.php
Matthew
Forced accept.
Computer101
Community Support Moderator
Computer101
Community Support Moderator
ASKER
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_review
<reviews_stars>stars-5.gif
<price_low>198.9700</price
<price_high>198.9700</pric
<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_revie
<reviews_stars>star-3.gif<
<price_low>42.9700</price_
<price_high>42.9700</price
<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.