Sending JSON data to remote server

August 25, 2013  |  2 Comments  |  by Raj (MagePsycho)  |  jQuery, Magento, PHP

JSON: JavaScript Object Notation.
JSON is syntax for storing and exchanging text information. Much like XML.
JSON is smaller than XML, and faster and easier to parse.

You may need to post JSON data to the server for different purposes. If you are wondering about ‘How to send JSON data to remote server?’ then this article is for you. Keep on reading.

In this article, we will share different techniques to send JSON data to the server.
For one of the payment module development in Magento we had to send the encrypted password(using plain password) to the gateway page. And we will use this scenario as an example.

Suppose we have the following data:

<?php
#web service to encrypt the password (which accepts the JSON data and returns the result in JSON format)
$url	= 'http://some-payment-gateway.com/WebService/EncryptPassword';
#password to be encrypted
$plainPass = 'some-plain-password';
$data = array(
	'password' => urlencode($plainPass)
);

1. Using Ajax

var data = <?php echo json_encode($data) ?>;
var url  = '<?php echo $url ?>';
jQuery.ajax({
    type: "POST",
    url: url,
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data){
		var jsonObj = jQuery.parseJSON(data);
		alert(jsonObj.encPassword);
	},
    failure: function(errorMsg) {
        alert(errorMsg);
    }
});

Note: This approach can’t be used in Payment Module as we have to pass the encrypted password in hidden form fields

2. Using Curl

<?php
$content = json_encode($data);

$curl = curl_init($url);
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER,
		array("Content-type: application/json"));
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, $content);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); //curl error SSL certificate problem, verify that the CA cert is OK

$result		= curl_exec($curl);
$response	= json_decode($result);
var_dump($response);
curl_close($curl);
?>

3. Using Streams

<?php
$options = array(
	'http' => array(
		'method'  => 'POST',
		'content' => json_encode( $data ),
		'header'=>  "Content-Type: application/json\r\n" .
					"Accept: application/json\r\n"
	  )
);

$context	 = stream_context_create($options);
$result		 = file_get_contents($url, false, $context);
$response	 = json_decode($result);
var_dump($response);

4. Raw HTTP Post

Using Zend Framework’s HTTP client: http://framework.zend.com/manual/en/zend.http.client.advanced.html#zend.http.client.raw_post_data

$json = json_encode($data);
$client = new Zend_Http_Client($url);
$client->setRawData($json, 'application/json')->request('POST');
var_dump($client->request()->getBody());

These were some basic examples. If you have any other idea regarding sending json data to the remote server, please share.

Fixing target=”_blank” for W3C compliance using Javascript / jQuery

June 18, 2013  |  No Comments  |  by Raj (MagePsycho)  |  Javascript, jQuery, Latest

HTML 4.0 Strict and XHTML 1.0 Strict recommendations of the W3C no longer include the target attribute of the <a> tag. The Transitional versions of the specifications still include it, but by definition, these specs are on the way out.

So this means you can’t use target=”_blank” for your <a> tags if you want to pass the W3C validation. But you can make use of Javascript or jQuery to bypass it.
Here’s the workaround:
1. Use rel=”external” instead of target=”_blank” in your anchor tags
For example:

<a href="http://facebook.com/CompanyProfile" rel="external">Facebook</a>

2. Use Javascript/jQuery code:
Javascript Code:

<script type="text/javascript">
//<![CDATA[
	function externalLinks() {
		if (!document.getElementsByTagName) return;
		var anchors = document.getElementsByTagName("a");
		for (var i=0; i<anchors.length; i++) {
			var anchor = anchors[i];
			if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external"){
				anchor.target = "_blank";
			}
		}
	}
	window.onload = externalLinks;
//]]>
</script>

jQuery Code:

<script type="text/javascript">
	jQuery(function(){
		jQuery('a[rel="external"]').attr("target", "_blank");
	})
</script>

— OR —

<script type="text/javascript">
	jQuery(function(){
		jQuery('a[rel="external"]').click(function(){
			window.open( jQuery(this).attr('href') );
			return false;
		});
	});
</script>

That’s all.
Cheers!

Usage of image preloading for color swatch operation

June 24, 2012  |  1 Comments  |  by Raj (MagePsycho)  |  jQuery, Latest, Magento

Color Swatch is an often requirement for Magento Stores. You can find lots of Color Swatch Extensions and tutorials in the internet. Most of them are slow in speed in terms of swatching the image . So i am sharing some tips on overcoming that.

You just have to place the following code in app/design/frontend/*/*/catalog/product/view/media.phtml:

<script type="text/javascript">
jQuery(function(){
	<?php
	$count = 1;
	foreach ($this->getGalleryImages() as $_image): ?>
		var image<?php echo $count; ?> = jQuery('<img />').attr('src', '<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>');
	<?php
		$count++;
	endforeach;
	?>
});
</script>

Notes: We have used the concept of image preloading using jQuery:

$('<img />').attr('src', $imageUrl)

By Preloading an image means loading an image in browsers cache so that when that image is requested it will be immediately displayed from the cache and hence making the mouseover, swatch operation etc extremely fast.

Release of newer version of jQuery Lightboxes 1.2.0

February 28, 2012  |  3 Comments  |  by Raj (MagePsycho)  |  jQuery, Latest, Magento

Introduction

Magento community is showing great love towards the Magento Extension: jQuery Lightboxes (probably the #1 lightbox extension for Magento e-Commerce), as a result we are on the way to make it much better with lots of new features.
Just we have released a newer version of jQuery Lightboxes i.e. 1.2.0.

Changelog

Version 1.1.0 – 1.2.0
– Tested Compatibility with Magento Version 1.6.2.0
– Upgraded jQuery Version (local + Google CDN) to 1.7.1
– Added Option to include Main Image to lightbox gallery of More Views
– Added Option to change the label for ‘More Views’
– Upgraded FancyBox to version 1.3.4
– Changed the default settings of FancyBox so that it looks even more sexier
– Added new Lightbox Type: PiroBox Extended (advanced form of Pirobox)
– Added new Lightbox Type: prettyPhoto
– Code Refinement

You can download the latest version of it either from
1> Official Site
Or
2> Magento-Connect

Try once and let me know your feedback/suggestions if there’s any.
Thanks a lot for loving this extension!

How to use jQuery Lightboxes Extension for Cms pages / static blocks?

November 4, 2011  |  42 Comments  |  by Raj (MagePsycho)  |  Javascript, jQuery, Magento

Introduction:

There is no doubt that jQuery Lightboxes is one of the best jQuery lightbox extension for Magento’s media gallery(base image & more views). This extension comes with collection of jQuery lightboxes in one pack: Fancybox, Pirobox & Lightbox clone & many more features.

Features:
– Upgrade proof Module.
– Checked for Magento Versions 1.3.x – 1.6.1.0
– Includes FancyBox, PiroBox & Lightbox Clone.
– Flexible Customization for FancyBox, PiroBox & LightBox Clone.
– Option to remove default Zoom Bar.
– Option to give the custom size for the main image.
– Option to give the custom size for the thumnbail image(ref: gallery images)
– Opton to give custom size for the lightbox Popup Images.
– Option to include jQuery file from google CDN
– Option to include jQuery file with noConflict().
– Option to switch over different types of lightbox.
– Option to include the lighbox files globally so that it can be used for custom modules, CMS pages, static blocks etc.

How to use with Cms pages / Static blocks?

After installation of this extension(For installation refer this link), go to:
System > Configuration > MagePsycho Extensions > jQuery Lightboxes

1> Choose the following options:

General Settings:
Enabled = Yes
Lightbox Type = Choose the lightbox type of your choice. We have chosen Fancybox for example.

Configuration - Step1

2> Choose the following options:

JS File Settings
Include jQuery file in = Head
Include Lightbox files in = Head
Include Lightbox files globally = Yes
Lightbox initialization code for global usage = Insert jQuery initialization code here. You can add any no of initialization code here. We have used the following code:

jQuery("a[rel=iframeLink]").fancybox({
    'type' : 'iframe',
    'width' : 800,
    'height' : 600
});

jQuery("a[rel=imageGallery]").fancybox({
	'titleShow' : 1,
	'transitionIn' : 'elastic',
	'transitionOut' : 'elastic'
});

Configuration - Step2

3> Demo CMS Page – About US

After backend configuration, we need to create a CMS page and implement the lightbox. We have created a CMS page (About US) as shown below.
For Our Team link we have used following code:

<a rel="iframeLink" href="{{store direct_url="our-team"}}">here</a>

Note: Since the ‘Our Team’ is linked to a CMS Page with identifier = our-team and will be opened in lightbox, we don’t want header/footer part of magento. So you need to choose Layout = empty from Design tab.

And for Image Gallery:

<a title="Custom title" rel="imageGallery" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg"> <img src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg" alt="" /> </a> 
<a rel="imageGallery" href="http://farm3.static.flickr.com/2591/4135665747_3091966c91.jpg"> <img src="http://farm3.static.flickr.com/2591/4135665747_3091966c91_m.jpg" alt="" /> </a> 
<a rel="imageGallery" href="http://farm3.static.flickr.com/2561/4048285842_90b7e9f8d1.jpg"> <img src="http://farm3.static.flickr.com/2561/4048285842_90b7e9f8d1_m.jpg" alt="" /> </a>

Note: The value of rel for our team and image gallery is based on initialization code pasted in configuration settings of JQuery Lightboxes.

CMS Page - About Us

4> jQuery Lightboxes in Action:

Our Team in Lightbox

Fancybox - Image Gallery

Isn’t it so cool to have a swiss knife like extension?

Keep rocking with Magento. Cheers!!