Catzie.net Blog » Web Development http://blog.catzie.net Programming, Networking, and other Downloads by Catzie Tue, 07 Feb 2012 15:19:50 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 OpenCart: Override Invoice ID http://blog.catzie.net/opencart-override-invoice-id/ http://blog.catzie.net/opencart-override-invoice-id/#comments Sun, 13 Mar 2011 12:26:43 +0000 Catzie http://blog.catzie.net/?p=607 Edit: Seems like there’s something missing in the code I inserted. I only found out after further system testing. Will update this post when I feel like fixing it. :p

I’m taking an E-Commerce class (it’s my last school term!) and my group’s project in an online store that uses OpenCart, an open-source shopping cart software. Our professor wants us to have transaction numbers (invoice ID, in OpenCart) that are not simply the increment of the previous one (0001, 0002, 0003, …).

It took me long to figure out how to edit the invoice ID that OpenCart generates. In the settings page of the admin area we can only edit the prefix (default is INV) and the starting invoice ID (default is 001). When I change either of the two fields the invoice ID that is generated doesn’t change at all. After some research I found out that the function which generates the invoice ID is set to get the highest ID value in the database and increment it by 1. That’s how it generates new invoice ID’s.

Below is the function that generates the invoice ID (found at admin/model/sale/order.php):

public function generateInvoiceId($order_id) {
$query = $this->db->query("SELECT MAX(invoice_id) AS invoice_id FROM `" . DB_PREFIX . "order`");

if ($query->row['invoice_id']) {
$invoice_id = (int)$query->row['invoice_id'] + 1;
} elseif ($this->config->get('config_invoice_id')) {
$invoice_id = $this->config->get('config_invoice_id');
} else {
$invoice_id = 1;
}

$this->db->query("UPDATE `" . DB_PREFIX . "order` SET invoice_id = '" . (int)$invoice_id . "', invoice_prefix = '" . $this->db->escape($this->config->get('config_invoice_prefix')) . "', date_modified = NOW() WHERE order_id = '" . (int)$order_id . "'");

return $this->config->get('config_invoice_prefix') . $invoice_id;
}

What I did was comment out everything inside the function and insert the statement:


return date("Ymd-") . rand(0,9999);

This results to an invoice ID that contains current date, a hyphen, and a 4-digit number. For example: 20110313-1234.

]]> http://blog.catzie.net/opencart-override-invoice-id/feed/ 5 JavaScript: Setting the selected dropdown option by its index number http://blog.catzie.net/javascript-setting-the-selected-dropdown-option-by-its-index-number/ http://blog.catzie.net/javascript-setting-the-selected-dropdown-option-by-its-index-number/#comments Tue, 10 Aug 2010 05:30:10 +0000 Catzie http://blog.catzie.net/?p=327 Long time no new entry. :) Internship is keeping me very busy. In this blog entry I’ll show you how to select a drop down option by specifying its index number.

The JavaScript code:

document.getElementById("selectionDD").selectedIndex = 0;

The HTML code:

<select id="selectionDD" name="selectionDD">
&nbsp&nbsp&nbsp&nbsp&nbsp<option value="one">One</option>
&nbsp&nbsp&nbsp&nbsp&nbsp<option value="two">Two</option>
&nbsp&nbsp&nbsp&nbsp&nbsp<option value="three">Three</option>
</select>

Refer to the JavaScript code. The selectionDD is the id of the <select> tag. The value 0 represents the index number of the option that we want to be selected, and will select the first option in the selection. Note that the index numbers start with 0, not 1.

]]> http://blog.catzie.net/javascript-setting-the-selected-dropdown-option-by-its-index-number/feed/ 3 Fix PNG images with transparency in older Windows Internet Explorer versions http://blog.catzie.net/fix-png-images-with-transparency-in-older-windows-internet-explorer-versions/ http://blog.catzie.net/fix-png-images-with-transparency-in-older-windows-internet-explorer-versions/#comments Mon, 16 Nov 2009 06:49:31 +0000 Catzie http://blog.catzie.net/?p=251 I wonder if this post would still get hits from search engine result pages. So many other web pages feature this fix for IE 5.5 and IE 6 web browser, that the Catzie.net Blog’s entry might just show up on the… 10th page or so. lol.

Anyways, I’m still posting this, in case there are some visitors browsing around who need help with properly displaying the transparency of .PNG images in IE5.5 and IE6. This also helps me easily find the needed code to fix the display. I need it from time to time when I design website layouts. :)

Tip: Most of us are probably using the newer versions of Internet Explorer. I suggest that you download and use the IE Tester. It’s a web browser that lets you see how web pages render in different versions of IE – 5.5, 6, 7, and 8.

I assume that as you read this, you are using Internet Explorer version 5.5, or the version 5.5 tab on the IE Tester.

The following .png image has a grayish background color that replaces the parts that are supposed to be transparent.

This is the code for what’s show above.

<div style="background:pink;padding:20px;">
<img src="http://img.photobucket.com/albums/v209/catzie/transparent1.png"
alt="" />
</div>

Please click here to open on a new window the fixed version of what we are trying to display. You’d notice that there’s no longer the grayish background on the parts that are supposed to be transparent. Now you can see through the pink background.

The final code is:

<html>
<head>
	<style type="text/css">
		body{
			background-color:pink;
		}
	</style>
<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters))
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className
                               + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " :
                               "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height
            + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"<>/span>"
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
</head>
<body>
  <div style="background:pink;padding:20px;">
         <img src="http://img.photobucket.com/albums/v209/catzie/transparent1.png"
                alt="" />
  </div>
</body>
</html>

The code above uses conditional comment to check if your current browser is older than IE 7. If it is, the JavaScript code which corrects the display of the .png is executed.

This method has limitations though. It works only on IE5.5 and IE6. It needs JavaScript enabled on your browser, or else it won’t work. And it only works on images placed using the <img> tag. It won’t work on background images.

I learned about this fix from this website

]]> http://blog.catzie.net/fix-png-images-with-transparency-in-older-windows-internet-explorer-versions/feed/ 1 Inline Frame that automatically adjusts its height for the source page http://blog.catzie.net/inline-frame-that-automatically-adjusts-its-height-for-the-source-page/ http://blog.catzie.net/inline-frame-that-automatically-adjusts-its-height-for-the-source-page/#comments Sat, 31 Oct 2009 04:58:10 +0000 Catzie http://blog.catzie.net/?p=234 Last year, I was working on our MULPROJ layout, and the type of layout I was making needed an iframe whose height is auto resized according to the source page’s content. This means that there should be no vertical scrollbar in the iframe, it simply adjusts itself vertically.

I thought that it wasn’t possible to do this but I found a JavaScript code that can do the trick, and I just want to share it with you. ;)


<script language="JavaScript">

 function autoResize(id){
  var newheight;
  var newwidth;

 if(document.getElementById){
  newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
  newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
  }

 document.getElementById(id).height= parseInt(newheight) + 45 + "px";
  document.getElementById(id).width= (newwidth) + "px";
  }
  </script>


<iframe SRC="yourPage.html" width="100%" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>

Save the above code as iframe.html, or whatever you like.
Remember to create the file yourPage.html in the same folder as your previous html file.

I stumbled upon it on: this forum thread.

I also did a little editing.

]]> http://blog.catzie.net/inline-frame-that-automatically-adjusts-its-height-for-the-source-page/feed/ 0 IE Tester – see how your web pages look in different versions of IE (Windows Internet Explorer) http://blog.catzie.net/ie-tester-see-how-your-web-pages-look-in-different-versions-of-ie-windows-internet-explorer/ http://blog.catzie.net/ie-tester-see-how-your-web-pages-look-in-different-versions-of-ie-windows-internet-explorer/#comments Sat, 31 Oct 2009 04:39:21 +0000 Catzie http://blog.catzie.net/?p=232 (Post taken from my old blog, Poochycat.com)

Ahh, it seems that I posted this in our MULPROJ days. ^_^

Yesterday I woke up at 6AM. I wanted to go on with my sleep, but I couldn’t. I suddenly remembered that I haven’t tested in different versions of Internet Explorer the layout design of the website I had to submit for MULPROJ that day. It’s like God woke me up to remind me that I had to test the layout. xD

The version of IE that I am using is the 8th, which is the latest version. That won’t be very helpful if I’d like to test the website layout in previous IE versions, which I expected to support less of my codes. First thing that came into my mind was the IE Tester, which I first learned about because of my schoolmate Alwyn Gan.

IE Tester is a free web browser that allows us to view web pages using the rendering and javascript engines of IE versions 5.5, 6, 7, and 8. We would be able to see how web pages look like in those versions of IE.

Thanks to IE Tester, I realized that my website layout’s transparent PNG’s were not actually transparent in IE 6! Phew. IE 6 does not support transparent PNG images. I found a workaround for that though.

If you’d like to test the website you’re coding in different versions of IE, then you might want to download the browser.

Happy coding!~ :D

]]> http://blog.catzie.net/ie-tester-see-how-your-web-pages-look-in-different-versions-of-ie-windows-internet-explorer/feed/ 2