It's pretty useful to place a blog latest posts into your X-Cart store menu or home page. Here we can fulfil this task using AJAX request for a default blog RSS feed and some magic .

Firstl of all, we need a jQuery plugin, which that can be downloaded here. The latest release so far is 1.5.2, so you will receive a “jquery-1.5.2.min.js” file. If the file name is different - just use your own script name below.

The jQuery should be downloaded and placed into the X-Cart “skin1” directory. Then the “skin1/customer/home.tpl” should be changed and the following code should be inserted before the ”</head>” tag.

<script type="text/javascript" src="{$SkinDir}/jquery-1.5.2.min.js"></script>

Please check that the jQuery is not included into the code already. Just use “HTML page source” option when you are looking at the page in a browser. Try to find the “jquery” substring. If it's already there - you don't need to include it once again.

Once you have solved the jQuery inclusion, it's possible to use the following code to display the latest posts. You should insert it in the place where you are going to display the posts.

<div id="blog-rss"></div>
<script type="text/javascript">
{literal}
$(document).ready(function() {
    $.ajax({
        url: '/blog/feed/',
        success: function(xml) {
          var html = '';
          var limit = 10;
          $(xml).find('item').each(function(index){
            if (index == limit) return false;
            var title = $(this).find('title').text();
            var link = $(this).find('link').text();
            var description = $(this).find('description').text();
            var content = $(this).text();
            var img = content.match(/<img([^>]*)>/);
            if (img) img = img[0].match(/src="([^"]*)"/)

            html += '<div class="rss-item">' +
                    (img ? '<a href="+link+"><img src="' + img[1] + '" height="90" />' : '') +
                    '<a href="' + link + '">' + truncate(title, 25) + '</a><br/>' +
                    truncate(description, 100) +
                    '</div>';
          });
          $('#blog-rss').html(html);
        },
        dataType: 'xml' 
    });
});

var truncate = function (str, limit) {
	var bits, i;
	bits = str.split('');
	if (bits.length > limit) {
		for (i = bits.length - 1; i > -1; --i) {
			if (i > limit) {
				bits.length = i;
			}
			else if (' ' === bits[i]) {
				bits.length = i;
				break;
			}
		}
		bits.push('...');
	}
	return bits.join('');
};
{/literal}
</script>

This code contains a few important parts. Firstly, you'd better be sure that the “url” parameter is fine for your case.

Then you should check the “limit” variable. It's set to 10 for now, what means that 10 last posts will be shown. Please note that it's not possible to show more results than included into your RSS feed.

You should also notice the img variable. It will contain the url of the first image from the post. It's not possible to resize it with the javascript, so it will be downloaded as it is and resized to 90px height by the browser, according to the code.

The structure of the returned feed is the following:

<div id="blog-rss">
  <div>
     <a><img /></a>
     <a></a>
   </div>
   ...
</div>

So it's possible to style each item with the simple CSS.

#blog-rss {
/* main container style */
}
#blog-rss div {
/* item style - the margins should be placed here */
}
#blog-rss div img {
/* image style - it's placed at the left usually */
}
#blog-rss a {
/* the link style - be carefull this style is applied to the image and title */
}

The example of the simple styling is located below:

#blog-rss {
  border: 1px solid #000;
  background: #fff;
  width: 300px;
}
#blog-rss div {
  clear: both;
  height: 100px;
}
#blog-rss div img {
  float: left;
  width: 90px;
  margin-right: 5px;
}
#blog-rss a {
  font-weight: bold;
}

If you want to include the feed into the menu, you should insert it to the default menu capture, it depends on the X-Cart version and looks like this one:

{capture name=menu}
{* code of the integration here *}
{/capture}
{include file="customer/menu_dialog.tpl" title="Latest posts" content=$smarty.capture.menu}

This code allows to insert you the latest blog feed to the place you want. But please note that it is javascript solution. It means that the search engines won't be able to follow the links. So you have to insert the link to your blog to the site header, or it's possible to insert it nearby this code.