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!

Configuring city as dropdown option in checkout billing & shipping address

June 15, 2013  |  19 Comments  |  by Raj (MagePsycho)  |  Latest, Magento

Introduction

Magento provides country and region* as dropdown option in checkout addresses unlike city which is an input text field. This on one side provides flexibility but on other side increases chances of typo in city names.
If you want your store to have an extra operations like giving free shipping to certain cities, giving COD payment option to certain cities etc., it’s better to configure the input city field as dropdown.
Here we will be discussing on listing United Arab Emirates’ cities as dropdown option.

Steps

Assume MagePsycho_Citydropdown skeleton module has already been created.
1. Adding functions for populating cities.
File: app/code/local/MagePsycho/Citydropdown/Helper/Data.php
Code:

<?php
/**
 * @category   MagePsycho
 * @package    MagePsycho_Citydropdown
 * @author     magepsycho@gmail.com
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */
class MagePsycho_Citydropdown_Helper_Data extends Mage_Core_Helper_Abstract
{
	public function getUaeCities()
	{
		$helper = Mage::helper('directory');
		$cities = array(
			$helper->__('Abu Dhabi'),
			$helper->__('Ajman'),
			$helper->__('Al Ain'),
			$helper->__('Dubai'),
			$helper->__('Fujairah'),
			$helper->__('Ras al Khaimah'),
			$helper->__('Sharjah'),
			$helper->__('Umm al Quwain'),
		);
		return $cities;
	}

	public function getUaeCitiesAsDropdown($selectedCity = '')
	{
		$cities = $this->getUaeCities();
		$options = '';
		foreach($cities as $city){
			$isSelected = $selectedCity == $city ? ' selected="selected"' : null;
			$options .= '<option value="' . $city . '"' . $isSelected . '>' . $city . '</option>';
		}
		return $options;
	}
}

Notes: You can also populate the cities in db tables to make it more dynamic. For example, you can create following tables similar to regions:
+ directory_country_city (city_id, country_id, code, default_name)
+ directory_country_city_name (locale, city_id, name)

2. Replacing input text city field to dropdown using javascript
2.1
File: app/design/frontend/[package]/[theme]/template/checkout/onepage/billing.phtml
Code: Add the following code to the last of above template

<script type="text/javascript">
	<?php
	$helper			 = Mage::helper('citydropdown');
	$address		 = Mage::getSingleton('checkout/session')->getQuote()->getBillingAddress();
	$defaultCity	 = $address->getCity();
	$citiesOptions	 = addslashes($helper->getUaeCitiesAsDropdown($defaultCity));
	?>

	var billingCity = '<?php echo $defaultCity ; ?>';
	function billingSwitchCityField(){
		var selectVal = jQuery('#billing\\:country_id option:selected').val();
		if(selectVal == "AE"){
			jQuery("#billing\\:city")
			.replaceWith('<select id="billing:city" name="billing[city]" class="required-entry">' +
				  '<option value=""></option>' +
				  '<?php echo $citiesOptions; ?>' +
				'</select>');
		}else{
			jQuery("#billing\\:city")
			.replaceWith('<input type="text" class=" input-text required-entry absolute-advice " title="City" value="' + billingCity + '" id="billing:city" name="billing[city]" autocomplete="off">');
		}

	}
   jQuery(document).ready(function(){
		billingSwitchCityField();
		jQuery('#billing\\:country_id').change(function() {
			billingSwitchCityField();
		});
   })
</script>

2.2
File: app/design/frontend/[package]/[theme]/template/checkout/onepage/shipping.phtml
Code: Add the following code to the last of above template

<script type="text/javascript">
	<?php
	$helper			 = Mage::helper('citydropdown');
	$address		 = Mage::getSingleton('checkout/session')->getQuote()->getShippingAddress();
	$defaultCity	 = $address->getCity();
	$citiesOptions	 = addslashes($helper->getUaeCitiesAsDropdown($defaultCity));
	?>




	var shippingCity = '<?php echo $defaultCity ; ?>';
	function shippingSwitchCityField(){
		var selectVal = jQuery('#shipping\\:country_id option:selected').val();
		if(selectVal == "AE"){
			jQuery("#shipping\\:city")
			.replaceWith('<select id="shipping:city" name="shipping[city]" class="required-entry">' +
				  '<option value=""></option>' +
				  '<?php echo $citiesOptions; ?>' +
				'</select>');
		}else{
			jQuery("#shipping\\:city")
			.replaceWith('<input type="text" class=" input-text required-entry absolute-advice " title="City" value="' + shippingCity + '" id="shipping:city" name="shipping[city]" autocomplete="off">');
		}




	}
   jQuery(document).ready(function(){
		shippingSwitchCityField();
		jQuery('#shipping\\:country_id').change(function() {
			shippingSwitchCityField();
		});
   })
</script>

3. Reload the checkout page, you can see the city options for United Arab Emirates as:

City as dropdown field


In the similar manner you can configure the city options for other countries as well and for other sections like My Account > Address Book etc.

Thanks for reading & sharing.