Sanjoy Roy

[MCM, MCP, SCJP] – Senior PHP Programmer

Daily Archives: 03/02/2011

Google Map – Add Markers using ExtJS API


Ext.onReady(function(){

    var mapwin;
    var button = Ext.get('show-btn');

    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!mapwin){

            mapwin = new Ext.Window({
                layout: 'fit',
                title: 'GMap Window',
                closeAction: 'hide',
				maximizable:true,
				minimizable:true,
                width:1024,
                height:786,
                x: 40,
                y: 60,
                items: {
                    xtype: 'gmappanel',
                    zoomLevel: 14,
                    gmapType: 'map',
                    mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                    mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                    setCenter: {
                        geoCodeAddr: '1 Church St, Richmond, Victoria, 3121',
                        marker: {title: 'Branch Office'}
                    },
                    markers: [{
                        lat: -37.81748164010962,
                        lng: 144.99946296215057,
                        marker: {title: 'Richmond Police Station'},
                        listeners: {
                            click: function(e){
                                Ext.Msg.alert('Richmond', 'Richmond Police Station');
                            }
                        }
                    },{
                        lat: -37.82184477198719,
                        lng: 144.99804139137268,
                        marker: {title: 'Richmond Church'},
						 listeners: {
                            click: function(e){
                                Ext.Msg.alert('Richmond', 'Richmond Church');
                            }
                        }
                    }]
                }
            });
            
        }
        
        mapwin.show();
        
    });
    
 });

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>GMap Window Example</title>
<link rel=”stylesheet” type=”text/css” href=”../../resources/css/ext-all.css” />

<!– GC –>
<!– LIBS –>
<script type=”text/javascript” src=”../../adapter/ext/ext-base.js”></script>
<!– ENDLIBS –>

<script type=”text/javascript” src=”../../ext-all.js”></script>

<!– GMaps API Key that works for http://www.extjs.com –>
<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA2CKu_qQN-JHtlfQ5L7BLlRRadLUjZPtnrRT4mXZqcP4UUH-2OxREmPm3GpN_NHsHuvuHd-QKI4YoRg&#8221; type=”text/javascript”></script>
<!– GMaps API Key that works for localhost –>
<!–<script src=”http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAA2CKu_qQN-JHtlfQ5L7BLlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQl3I3p2yrGARYK4f4bkjp9NHpm5w&#8221; type=”text/javascript”></script>–>

<script src=”../ux/GMapPanel.js”></script>
<script src=”gmap.js”></script>

<!– Common Styles for the examples –>
<link rel=”stylesheet” type=”text/css” href=”../shared/examples.css” />

<style type=”text/css”>
.x-panel-body p {
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<script type=”text/javascript” src=”../shared/examples.js”></script><!– EXAMPLES –>

<h1>GMap Window</h1>
<p>This example shows how to create an extension and utilize an external library.</p>
<input type=”button” id=”show-btn” value=”Gimme a Map” /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href=”../ux/GMapPanel.js”>GMapPanel.js</a> and <a href=”gmap.js”>gmap.js</a> for the full source code.</p>

</body>
</html>

Magento – How to Change multiselect list box to select box?


In magento, by default if a select option has more than 2 values, it automatically make the select box to multiselect box.
if you need to change this to remain always select box, here is how to do:

Steps:
Edit the Form.php:
Location: /public_html/app/code/core/Mage/CatalogSearch/Block/Advanced/Form.php
Position: public function getAttributeSelectElement($attribute)
Line no.: 185
What to change: <pre>if (is_array($options) && count($options)>2)</pre>  to <pre>if (is_array($options) && count($options)>100)</pre>

Magento – How to display 3 select boxes in a single row in advance search page (li)?


Steps:
Modify the /public_html/skin/frontend/default/f001/css/custom.css file:
(f001 is your defind template)

At the end add the following: custom.css
————————————————————————–
#rim_diameter_inches_li .multiselect {width:70px;}

#tyre_width_li .multiselect {width:50px;}

#profile_li .input-box .multiselect {width:60px;}

#rim_diameter_inches_li {width: 60px; float: left; }
#tyre_width_li{float: left;background-image: url(../images/search-splitter.gif);
background-repeat: no-repeat;
background-position: right center;}
#tyre_width_li .input-box {width: 70px; }

#profile_li {
width: 70px;
float: left;
}
#profile_li .input-box {width: 50px;  float: left; }
#rim_diameter_inches_li .input-box {float: left; width: 50px;}
———————————————————————–

The form fields are:
Defind in /public_html/app/design/frontend/base/default/template/catalogsearch/advanced/form.phtml file:
<pre>

<ul id=”advanced-search-list”>
<li id=”tyre_width_li”>
<label for=”tyre_width”>Tyre Size</label>
<div>
<select name=”tyre_width” id=”tyre_width” title=”Width (mm)”><option value=”” selected=”selected”>All</option><option value=”54″>175</option><option value=”53″>185</option><option value=”67″>195</option><option value=”80″>205</option><option value=”79″>215</option><option value=”78″>225</option><option value=”77″>235</option><option value=”76″>245</option><option value=”75″>265</option><option value=”74″>275</option><option value=”73″>287</option><option value=”72″>295</option><option value=”71″>314</option><option value=”70″>315</option></select>                        </div>

</li>
<li id=”profile_li”>
<label for=”profile”></label>
<div>
<select name=”profile” id=”profile” title=”Profile”><option value=”” selected=”selected”>All</option><option value=”26″>35</option><option value=”25″>40</option><option value=”24″>45</option><option value=”23″>55</option><option value=”22″>60</option><option value=”21″>65</option><option value=”20″>70</option><option value=”19″>75</option><option value=”18″>80</option><option value=”17″>NA</option></select>                        </div>

</li>
<li id=”rim_diameter_inches_li”>
<label for=”rim_diameter_inches”></label>
<div>
<select name=”rim_diameter_inches” id=”rim_diameter_inches” title=”RIM diameter inches”><option value=”” selected=”selected”>All</option><option value=”36″>14</option><option value=”35″>14C</option><option value=”88″>15</option><option value=”87″>16</option><option value=”86″>16C</option><option value=”85″>17</option><option value=”84″>18</option><option value=”83″>19</option><option value=”82″>20</option><option value=”81″>22.5</option></select>                        </div>

</li>
<div style=”clear: both; padding-left: 170px;”><b>WIDTH</b>&nbsp;(mm)&nbsp;/&nbsp;<b>PROFILE</b>&nbsp;<b>RIM</b> (diameter inches)
</div>                                    <li id=”size_li”>
<label for=”size”>Size</label>
<div>

<input name=”size” id=”size” value=”” title=”Size” type=”text”>
</div>

</li>
<li id=”speed_li”>
<label for=”speed”>Speed</label>
<div>
<input name=”speed” id=”speed” value=”” title=”Speed” type=”text”>
</div>

</li>
<li id=”brand_li”>
<label for=”brand”>Brand</label>
<div>
<input name=”brand” id=”brand” value=”” title=”Brand” type=”text”>
</div>

</li>
<li id=”pattern_li”>

<label for=”pattern”>Pattern</label>
<div>
<input name=”pattern” id=”pattern” value=”” title=”Pattern” type=”text”>
</div>

</li>
<li id=”price_li”>
<label for=”price”>Price</label>
<div>

<input name=”price[from]” value=”” id=”price” title=”Price” type=”text”>
<span>-</span>
<input name=”price[to]” value=”” id=”price_to” title=”Price” type=”text”>
<small>(AUD)</small>
</div>
</li>
</ul>

</pre>

BrowserLab – Preview web pages across multiple browsers and operating systems


Accurately pinpoint compatibility issues and compare web pages at a glance to easily identify differences and potential problems. Preview full screenshots with multiple view options and customizable test settings.

With the integration of Dreamweaver CS5 or Firebug, you can also give BrowserLab permission to preview web pages that are behind a firewall.

Magento – How to order the fields in catalog advance search page.


Steps:
1. Alter the table:`eav_attribute`, use the following command:
ALTER TABLE `eav_attribute` ADD `sort_by` INT( 4 ) NOT NULL DEFAULT ‘500’
2. Edit the /public_html/app/code/core/Mage/CatalogSearch/Model/Advanced.php file:
Function Name: public function getAttributes()
Line no. #98
Change: ->setOrder(‘main_table.attribute_id’, ‘asc’) by ->setOrder(‘main_table.sort_by’, ‘asc’)
3. Done. Reload the ..index.php/catalogsearch/advanced/ page.

Magento Quick Links


Change Logo:
skin/frontend/default/default/images/
01. logo.gif
02. logo_email.gif

Main Templates:
/public_html/app/design/frontend/base/default/template/page

Side boxes:
/public_html/app/design/frontend/base/default/template/callouts

Majento Product Details Page:
/public_html/app/design/frontend/base/default/template/catalog/product/view.phtml

header:
/public_html/app/design/frontend/base/default/template/page/html/header.phtml
/public_html/app/design/frontend/default/f001/template/page/html

Search box:
/public_html/app/design/frontend/base/default/template/catalogsearch

Footer:
/public_html/app/design/frontend/base/default/template/page/html/header.phtml
in static blocks

remove footer links
/public_html/app/design/frontend/base/default/layout/catalog.xml
/public_html/app/design/frontend/base/default/layout/contacts.xml
/public_html/app/design/frontend/base/default/layout/catalogsearch.xml

Featured:
/public_html/app/design/frontend/default/default/template/inchoo

Compare Products:
/public_html/app/design/frontend/base/default/template/catalog/product/compare

Newsletter Box:
/public_html/app/design/frontend/base/default/template/newsletter

Installed Modules:
/public_html/app/design/frontend/default/default/template

Free themes:

21 Free Magento Themes for Your E-commerce Store

MODULES: /public_html/app/design/frontend/default/default/template

Slider : Simple Banners
magento-community/Banners
http://www.magentocommerce.com/magento-connect/Free+Magento+Extensions/extension/3382/banners

{{block type=”banners/banners” name=”banners” template=”banners/banners.phtml”}}

app\design\frontend\default\default\template\banners
app\design\frontend\default\default\layout\banners.xml

Side Blocks:
magento-community/AsiaConnect_FreeCMS

sidebar-right-top
sidebar-right-bottom
sidebar-left-top
sidebar-left-bottom
content-top
menu-top
menu-bottom
page-bottom

Featured:
magento-community/Inchoo_FeaturedProducts

index.php/featured-products/ (store link)

{{block type=”featuredproducts/listing” template=”inchoo/block_featured_products.phtml”}}

NEW Products:
{{block type=”catalog/product_new” name=”home.catalog.product.new” alias=”product_homepage” template=”catalog/product/new.phtml”}}

/public_html/app/design/frontend/default/f001/template/catalog/product
/public_html/app/design/frontend/base/default/template/catalog/product
/public_html/app/code/core/Mage/Catalog/Block/Product/new.php

Best Seller:
magento-community/Luxe_Bestsellers

{{block type=”bestsellers/list” name=”home.bestsellers.list” alias=”product_homepage” template=”catalog/product/list.phtml”}}

Default: {{block type=”bestsellers/list” name=”home.bestsellers.list” alias=”product_homepage” template=”catalog/product/list.phtml””}}
Path: /public_html/app/design/frontend/base/default/template/catalog/product/list.phtml

Popular:
magento-community/Luxe_MostViewed”}}

{{block type=”mostviewed/list” name=”home.mostviewed.list” alias=”product_homepage” template=”catalog/product/list.phtml”}}

Include static block:

{{block type=”cms/block” block_id=”home-page-promo”}}
<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘footer_links’)->toHtml() ?>

IETester – Browser Compatibility Check for Internet Explorer


Browser Compatibility Check for Internet Explorer Versions from 5.5 to 9

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

Download Links: here