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!

How to use WYSIWYG editor (TinyMCE) in custom Admin Magento Module

February 7, 2012  |  13 Comments  |  by Raj (MagePsycho)  |  Javascript, Latest, Magento

Rich text editor(TinyMCE) is an often requirement for Admin Module as it makes the content editing work much more easier.
In order to enable TinyMCE editor in textarea field, You need to do the following two things:

1> Including TincyMCE in Head

Add the following function in your Adminhtml Edit Class (MagePsycho_Demomodule_Block_Adminhtml_Demomodule_Edit):

protected function _prepareLayout() {
	parent::_prepareLayout();
	if (Mage::getSingleton('cms/wysiwyg_config')->isEnabled()) {
		$this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);
	}
}

2> Enabling in Form Field

Add the following content field in your Adminhtml Form class (MagePsycho_Demomodule_Block_Adminhtml_Demomodule_Edit_Tab_Form):

$fieldset->addField('content', 'editor', array(
	'name'      => 'content',
	'label'     => Mage::helper('demomodule')->__('Content'),
	'title'     => Mage::helper('demomodule')->__('Content'),
	'style'     => 'height:15em',
	'config'    => Mage::getSingleton('cms/wysiwyg_config')->getConfig(),
	'wysiwyg'   => true,
	'required'  => false,
));

Note: Field Type must be ‘editor’ and ‘wysiwyg’ must be true

3> That’s All.

Here is what it looks like when loaded:

TinyMCE Editor

Note that this code was tested in Magento Version 1.6.1.0
Happy Editing!

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!!

Integrating Zopim Live Chat in your Magento Store

October 22, 2011  |  12 Comments  |  by Raj (MagePsycho)  |  Javascript, Latest, Magento

Introduction

If you look at the right-bottom of this page, you will notice a nice looking chat widget. Yes that’s the Zopim Live Chat.

If you want to interact with your visitors, give support to them, know the statistics of the visits, get offline messages etc. then Zopim Live Chat seems to be very promising choice.

Integration of Zopim Live Chat

If you want to add Zopim Live Chat to your Magento Store, you don’t need to use any third party modules as it is so simple & straight forward to use.

Integration Steps:

  1. 1. Sign up with Zopim

    Visit Zopim site to sign up/create a account. Once you complete the sign up form then you will get a confirmation link in your mail for verification. Once confirmed your account is ready to use the Zopim Live Chat widget.
    Related Snaps:

    Sign Up: Step 1

    Sign Up: Step 1

    Sign Up: Step 2

    Sign Up: Step 2

  2. 2. Grap the Widget Code

    Login to the Zopim Dashboard page with the credentials used during sign up. After login, click on the Settings tab on the top right then you can see the following screen:

    Zopim Dashboard Settings

    Zopim Dashboard Settings

    When you are in Settings section,then you can see two tabs on the left: ‘Embed widget on my site‘ & ‘Customize widget‘.

    Embed widget on my site‘ -> When you click on this tab you will see the script ready for copy-paste in Magento.
    Customize widget‘ -> Click on this tab if you want to customize the look and feel, default text, position etc of your chat widget.

  3. 3. Insert the Widget Code in Magento

    After getting the Widget code(Zopim Dashboard > Settings > Embed widget on my site) from Zopim Site, login to the Magento and go to:
    System > Configuration > General > Design > Footer > Miscellaneous HTML > Paste the widget code here..

    Magento Configuration Settings for Zopim Live Chat

    Magento Configuration Settings for Zopim Live Chat

  4. 4. You’re done 🙂

    Refresh the cache and load the frontend page, you will see the sexy chat widget ready for interaction.

    Zopim Live Chat Demo

    Zopim Live Chat Demo


    Isn’t it’s so simple to integrate?

Note: A very simplistic Magento Extension has been developed for Zopim Live Chat which is very simple to use and upgrade proof. You can find the extension of Zopim Live Chat » here «.

Thanks for reading guys.

Happy Chatting!!

Reset form using jQuery

October 15, 2011  |  No Comments  |  by Raj (MagePsycho)  |  Javascript, jQuery

One thing to be noted that pre-filled form values do not get reset using html reset button.
In this case javascript becomes handy.It’s again even much more easier to reset using JQuery.

Here is the solution:

function resetForm(id) {
     $(':input','#'+id)
     .not(':button, :submit, :reset, :hidden')
     .val('')
     .removeAttr('checked')
     .removeAttr('selected');
}
<input type="button" onclick="resetForm('formId');" value="Reset" />

Where formId = id of the form element.

Happy client side scripting!!