Category Archives: Open Source

WordPress Widget: Client-side RSS util, The Web Klip Released!

The original WordPress (2.7+) provides RSS clip widget from the other website. It looks good but it is server-side script that may occupy the server resource to interpret the RSS. I don’t like that approach. So I decide to create a client-side script that loads rss from other website or blog.

If you want to try, just download the widget on http://www.koumei.net/download/wp-webKlip.zip , then unzip to wp-content/plug-ins/ folder, and activate the plugin and add widget to you wordpress blog.

Before using this widget, there are some notes you should know:

  1. Defects:
    Currently only support ONE RSS excerpt.
    Only shows the first RSS item.
    jQuery should be included on your blog.
  2. Usability:
    Site that provide at least 1 item RSS feed could be refered by this widget.
  3. Extension:
    Multiple-RSS and rollover will be available  on next release.

The Demo:

webklip_1
Picture 1. The plugin will be shown after you copy the unzipped file to your plugin folder
webklip_2
Picture 2. Add the widget to the “Widgets” menu on your administration panel. You can add a RSS feed to this widget

You can  find the demo on the right side of my blog.

:-)

A Simple Rss2Json Service Released!

Now I simply add a Rss2Json service on my blog, it just return the very first post from the target website as JSON and, of course, the target should be RSS format. The reason why I create this interface is because I would like to utilize cool AJAX to obtain the content from my friend’s blog, yet the browser secure prevent me crossing the boundary to other domain. Could it be working using iFrame? Negative. The only approach to cross the border is using JSON.

The definition of my interface is:

Name: Rss2JSon
Interface: http://www.koumei.net/rss2json/
Method: GET
Parameter 1:  rss  – The URL of the rss content
Parameter 2: cb — The javascript callback function
Return: application/x-javascript
Example: http://www.koumei.net/rss2json/?rss=http://www.blogjava.net/max/rss&cb=<callback>  (A blog of my friend)

The callback function is very significant. Don’t forget to define a callback JS function on your script. The definition of the callback function should be similar as below ( parameter rss is an object, containing “title”, “link” and “description” and so forth<please go through RSS schema on item tag>.)

<script type=”text/javascript”> 

function myCallback(rss){
    var title = rss["title"];   // or rss.title
    var link = rss["link"];  // or rss.link
    var desc = rss["description"];  // or rss.description.
}

</script>

Now, you can embed the script to wherever you need.
<script type=”text/javascript” src=”http://www.koumei.net/rss2json/?rss=http://www.blogjava.net/max/rss&cb=myCallback”></script> 

Enjoy scripting.

An idea for “Add to Favorite” function for virtuemart

The original Virtuemart provides RSS feed to every product, so that users can “eat” the feed if they like the product. The idea is cool, but actually, I prefer an on-line favorite subscribe function for the user than RSS subscribe. The RSS subscription is good to track back to a single category or a whole website, not so good to track each product. How many chance you would like to change the product’s description or product’s price to let the users know the newest status of product? So your product categories and website will be renew every now and then, even everyday, but not a single product, right? So the single product is good to be traced on the website’s favorite function. Unfortunately, Virtuemart doesn’t come with such a function for people to trace their own favorite product. The favorite products mean the products are probationary, users don’t buy them, but could buy them later. So what I think the “Add to Favorite” function could be specified as:

  1. It’s managable. User could easily add product to favorite list just a single click, better not refresh the page after they click a button.
  2. User can review the favorite list. 
  3. The product in the favorite list will be shown when the product is published.

I think this little gadget could help user shopping with happiness.

Howto: Create “Cash on Delivery” payment Varied from Different Postcodes for Virtuemart

Actually Virtuemart has done a great job on cash on delivery support, but what if cash on delivery cost a fee not only the total amount of purchase but also the different postcode? Here comes a tutorial on how to calculate the different rates based on users’ postcode.

Of course, before doing that, you need to have a workable Virtuemart distribution on joomla. You can find more tutorials on joomla official website or virtuemart website.

There are only two steps of this simple tutorial:

  1. Create a new payment method on Cash on Delivery. Actually the orignal virtuemart comes with an option of “COD”, but at this time I don’t want to ruin its file structure. I prefer to create a new one. Actually creating new payment method helps you to know more about joomla.
  2. Revise “ps_checkout.php” to make it works.

Let’s dive to details.

Create a new payment method on Cash on Delivery.

Sooner or later will you find that creating payment method couldn’t be easier. What you need to do is to create a class, and of course, you write some methods which is recoginzed by joomla framework. You can find bunch of original payment classes on /administrator/components/com_virtuemart/classes/payment/ folder. If you see carefully, you can see each payment class comes with a config file. For instance, you can see a payment class called ps_paypal.php, should come with a config named ps_paypal.cfg.php. I won’t use config file, so I don’t need the cfg.php file. Now here’s my turn on creating such a class:  create a file name “ps_codonpc.php” (which means “Cash On Delivery On PostCodes”), never mind its name, but I think you better follow the naming convention of Virtuemart. Open this file with any kind of text-editor, I recommend to use notepad++. Create a skeleton below.

if( !defined( '_VALID_MOS' ) &amp;&amp; !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
 
class ps_codonpc{
 
var $classname = "ps_codonpc";
var $payment_code = "PU";
 
function show_configuration() {
return false;
}  
 
function has_configuration() {
return false;
}
 
function get_payment_rate($sum, $ship_to_info_id=null) {
}  
 
function configfile_writeable() {
return true;
}
 
function configfile_readable() {
return true;
}
 
function write_configuration( &amp;$d ) {
return true;
}
 
function process_payment($order_number, $order_total, &amp;$d) {
return true;
}
 
}

I know what you must be thinking.  You must be wondering if there is any necessity to create those functions within the class. Yes, you have to. That’s the weakness as well as fexibility of the characteristic  object-oriented of PHP. Well, it makes senses, because PHP is runtime dynamic language, not compile-time language. The payment classes on /payment folder are dynamically recognized by the framework, they use the same functions naming convention to make the polymorphism works.  I mean the ps_paypal.php and ps_paymate.php are of the same functions’ name, and created by the framework, however the framework doesn’t need to know the existance of payment classes and doesn’t know what they are doing. The framework only knows their functions’ name. Confused? Never mind.  Forget this paragraph. You can do the same thing on java using “reflection”.

You can see a function called “get_payment_rate” in this class. Well, not all the classes in /payment folder have this function. Why? That’s because virtuemart framework will only calculate the payment rate if the “get_payment_rate” function is defined. Actually, there is only one parameter is need: $sum, but since we need to calculate the fee by post code, I add an additional paramter(ship_to_info_id)  and give it a default value(null).

Now you need to fill the “get_payment_rate” logic to make it works. I add a simple logic to calculate the payment rate.

function get_payment_rate($sum, $ship_to_info_id=null) {
		//Get the ship_to_info_id if the parameter is null
		//Normally the item is passed from checkout module
		//We need to change ps_payment_method.php to pass the parameter to this object.
		if( empty( $ship_to_info_id )) {
 
		    $sdb = new ps_DB();
 
		    $sdb->setQuery( "SELECT user_info_id FROM #__{vm}_user_info WHERE user_id=".$auth['user_id']." AND address_type='BT'" );
 
		    $ship_to_info_id = $sdb->loadResult();
 
		}
 
		//Get the zip(post code) from user info table
 
if(!empty( $ship_to_info_id )){
 
			$sdb = new ps_DB();
 
			$qry = "SELECT `zip` FROM `#__{vm}_user_info` WHERE user_info_id='".$ship_to_info_id."'";
 
			$sdb->query($qry);
 
			$sdb->next_record();
 
			$postcode = $sdb->f('zip');
		}  
 
		if(!empty($postcode)){
			if($postcode >= '3000' && $postcode < '3050'){
				return 0;  //these areas are free
			}else if($postcode >= '3050' && $postcode < '3150'){
				return floatval( $GLOBALS['CURRENCY']->convert(-5));  //these areas cost $5
			}else{
				return floatval( $GLOBALS['CURRENCY']->convert(-10)); //the othes cost $10
			}
		}else{ //unknow post code, use default
			return floatval( $GLOBALS['CURRENCY']->convert(-10)); //the othes cost $10
		}
}

Can you see the return value? it’s negative, that’s because the get_payment_rate function return the payment discount (according to the definition of this function), the name should be changed to get_payment_discount. Otherwise would be a little bit confused. If you return a positive, the users will get a discount from this payment; a negative, the users will pay an extra fee.

OK. That’s fine.

Revise “ps_checkout.php” to make it works.

And now go to ps_checkout.php, and find a line 1673, change “return $_PAYMENT->get_payment_rate($subtotal);” to

$ship_to_info_id = $_REQUEST['ship_to_info_id'];
return $_PAYMENT->get_payment_rate($subtotal, $ship_to_info_id);
“.

Okey dokey, Now add the Cash On Delivery paymethod on your administration page, and then go through the check out process and find out more excitement. Of course, the logic provided here is very simple, you can judge the rate from a post code data table and apply new features.

Howto: Show your images using fla-img-sw

“fla-img-sw” is a flash movie clip that enables several images loading by passing the images’ URL to the flash parameter. “fla-img-sw” is annouced by myself, you can get the source code or get the package on http://code.google.com/p/fla-img-switch/ .

Using AJAX to improve the loading phrase of the website is considered to be a good pratice on presentation tier. Actually, Flash movie cilp can do the same thing as AJAX. Imagine there are several images are to be loaded in one page, it takes user’s time on loading the page. If you show a thumbnail in that page, then if users would like to see the detail of the image, they have to click on that image link, your website then pop-up a window to show the original size of the picture. It waste users’ time, according to Even Faster Web Sites (Steve Souders), Life is too short, we should write code faster then even (means saving your users’ life and time :-) 

But I am not here to talk about how to utilize AJAX to improve the website, but gonna show a tutorial on how to use my open source gadget to show images on your website. Before that, just take a look at the example of how the gadget work: (click to enlarge, please note that the demo below is a snapshot of the commercial usage, the open source version is somehow a little bit different from the commercial one, like I depict on the previous post.)
fla-img-switch 
You can see a thumbnail on the right side, and the main picture which is selected will display on the big left side.

It’s easy to use. Once you get the package, you will see a file call “ImgSwitch.html”, that is the demo file, double click this file and you can see a demo locally. If you feel enough for the demo and being inclined to use it, just open the “ImgSwitch.html” and you will see how it works.

Easy to proceed:

  1. Copy “ImgSwitch.swf” to a appropriate position which you can refer from your HTML
  2. Copy the code below to where you would like to show the images:
    <object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″ width=”690″ height=”492″ id=”ImgSwitch” align=”middle”>
    <param name=”movie” value=”ImgSwitch.swf” />
    <param name=”quality” value=”high” />
    <param name=”bgcolor” value=”#c2b29a” />
    <param name=”FlashVars” value=”picurl=1.jpg;2.jpg;3.jpg;4.jpg;5.jpg&maxpic=5&modelNo=TestTing” />
    <embed src=”ImgSwitch.swf” quality=”high” bgcolor=”#352B68″ width=”690″ height=”492″ name=”ImgSwitch” align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” FlashVars=”picurl=1.jpg;2.jpg;3.jpg;4.jpg;5.jpg&maxpic=5&modelNo=TestTing”/>
    </object>
  3. Change the parameters:
    A. Replace “picurl” paramter with your image url, note that if your images are from www, don’t forget to quote the images’ URL starting with “http://”. And the URL is separated by semi-colon(;).
    B. Replace “maxpic” parameter with the actual images quantity you would like to show. 
    C. Replace “modelNo” paramter with the title(name) of this group of images.

Done.

fla-img-sw: yet another open source stuff

I am happy to annouce the release of the following open source stuff which is images rollover flash movie clip (or you can call it HTML flash component). It looks like a gadget other than a whole project. Once you get the source code, you may open the fla source file with Adobe Flash 8.0 or higher version.

This gadget I developed can be dated back to 2 years ago, and the primary progamming language is ActionScript 2.0. My client requires a image rollover component that can easily embed to the existing website, that give me the chance to develop such a flash toy. It is small in size and quite efficient in runtime. The open source version is the original verion. You can find a demo in Product Demo, which is the  commercial version. The commercial one has been changed a little bit to fit my client’s need. The open source one contains smooth transition effects when switching images and browsing the thumbnail. My client don’t like those special effects. 

You can download the full version of the flash image rollover component on: http://code.google.com/p/fla-img-switch/

Or just simply get the source code via: 

svn checkout http://fla-img-switch.googlecode.com/svn/trunk/ fla-img-switch-read-only

Enjoy. :-)