Wednesday, January 21, 2015

Magento - Change the text “Choose an option…” on product page



Open PHTML
app/design/frontend/your_package/your_theme/template/catalog/product/view/type/options/configurable.phtml

and put below java script code


<script type="text/javascript">
      
        function changeFristText(){
            <?php foreach($_attributes as $_attribute): ?>
                <?php
                    $_attributeId = $_attribute->getAttributeId();
                    $_attributeInfo = Mage::getModel('eav/entity_attribute')->load($_attributeId);
                    $_attributeLabel = str_replace(' ','-',strtolower($_attributeInfo->getFrontendLabel()));
                    $_attributeLabel = $_attributeInfo->getFrontendLabel();
                ?>
                var label = '<?php echo $_attributeLabel;?>';
                var attid = '<?php echo $_attributeId;?>';
                $$('#attribute'+attid).each(function(elem){
                    var options = elem.childElements();
                    options[0].update(label);
                });
            <?php endforeach;?>
        }
     window.onload = changeFristText;
    </script>

Monday, January 19, 2015

Magento- How can i make a slider of product thumbnail images on product page

 Goto app/design/frontend   you_theme  catalog/product/view/media.phtml


<?php echo $this->getChildHtml('after'); ?>

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
  
    <ul id="prod-thumb" class="product-image-thumbs owl-carousel owl-theme">
    <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
        <?php
        if (($filterClass = $this->getGalleryFilterHelper()) && ($filterMethod = $this->getGalleryFilterMethod()) && !Mage::helper($filterClass)->$filterMethod($_product, $_image)):
            continue;
        endif;
        ?>
        <li class="item">
            <a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
                     width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
            </a>
        </li>
    <?php $i++; endforeach; ?>
    </ul>
</div>
<?php endif; ?>

<?php echo $this->getChildHtml('after'); ?>





<script type="text/javascript" src="<?php echo  Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>js/owlcarousel/owl.carousel.js"></script>

<script>
jQuery(document).ready(function() {

  jQuery("#prod-thumb").owlCarousel({
    items : 3,
    itemsCustom : [
      
        [320, 3],
        [480, 4],
        [600, 5],
        [760, 4],
        [900, 4],
      ],   
    lazyLoad : true,
    navigation : true,
    pagination: false
  });

});
</script>

 <style>


/* clearfix */
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* display none until init */
.owl-carousel{
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 50%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}
   
.owl-carousel .owl-item{
    float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
    cursor: pointer;
}
.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing {
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

  </style>

Saturday, January 17, 2015

Add Class to fixed header

    <script>
    /*############fix menu##############*/
    jQuery("document").ready(function($){
    var nav = $('#menu');
    $(window).scroll(function () {
    if ($(this).scrollTop() > 136) {
    nav.addClass("f-nav");
    } else {
    nav.removeClass("f-nav");
    }
    });
   
    });
    </script>
<style>
.f-nav { .position :fixed;}
</style>

Friday, January 16, 2015

Magento -Magento how to get configurable product attributes option

<?php $cProduct = Mage::getModel('catalog/product')->load($_product->getId());
            //check if product is a configurable type or not
            if ($cProduct->getData('type_id') == "configurable")
            {
                //get the configurable data from the product
                $config = $cProduct->getTypeInstance(true);
                //loop through the attributes
                foreach($config->getConfigurableAttributesAsArray($cProduct) as $attributes)
                {
                    ?>
                    <dl>
                        <dt><label class="required"><em>*</em><?php echo $attributes["label"]; ?></label></dt>
                        <dd>
                            <div class="input-box">
                                <select name="super_attribute[<?php echo $attributes['attribute_id'] ?>]" id="attribute<?php echo $attributes['attribute_id'] ?>">
                                    <?php
                                    foreach($attributes["values"] as $values)
                                    {
                                        echo "<option>".$values["label"]."</option>";
                                    }
                                    ?>
                                </select>
                            </div>
                        </dd>
                    </dl>
                    <?php
                }
            }?>

Thursday, January 8, 2015

Magento - Custom layout in magneto like 1column

Follow the following steps :

Step 1.  add
app/etc/modules/Easylife_Layout.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Easylife_Layout>
            <active>true</active>
            <codePool>local</codePool>
            <depends>
                <Mage_Page />
            </depends>
        </Easylife_Layout>
    </modules>
</config>

Step 2.  add
app/code/local/Easylife/Layout/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Easylife_Layout>
            <version>0.0.1</version>
        </Easylife_Layout>
    </modules>
    <global>
        <page>
            <layouts>
                <lookbook module="page" translate="label">
                    <label>Lookbook</label>
                    <template>page/1column-lookbook.phtml</template>
                    <layout_handle>lookbook</layout_handle>
                </lookbook>
            </layouts>
        </page>
    </global>
    <frontend>
        <layout>
            <updates>
                <easylife_layout>
                    <file>easylife_layout.xml</file>
                </easylife_layout>
            </updates>
        </layout>
    </frontend>
</config>
Step 3.  add
app/design/frontend/{interface}/{theme}/layout/easylife_layout.xml

<?xml version="1.0"?>
<layout>
    <lookbook translate="label">
        <label>Lookbook</label>
        <reference name="root">
            <action method="setTemplate"><template>page/1column-lookbook.phtml</template></action>
            <action method="setIsHandle"><applied>1</applied></action>
        </reference>
    </lookbook>
</layout>

Wednesday, January 7, 2015

Wordpress - Update WordPress URLS in Database When Site is Moved to new Host

UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldurl', 'http://www.new_url') WHERE option_name = 'home' OR option_name = 'siteurl';

UPDATE wp_posts SET guid = replace(guid, 'http://www.oldurl','http://www.new_url');

UPDATE wp_posts SET post_content = replace(post_content, 'http://www.oldurl', 'http://www.new_url');

UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://www.oldurl','http://www.new_url');

Monday, January 5, 2015

Magento -Magento RWD default slider

<div class="slider-background">
<div class="slideshow-container">
<ul class="slideshow">
<li><img alt="" src="imageurl" /></li>
<li><img alt="" src="imageurl" /></li>
<li><img alt="" src="imageurl" /></li>
</ul>
<div class="slideshow-pager">&nbsp;</div>
<span class="slideshow-prev">&nbsp;</span> <span class="slideshow-next">&nbsp;</span></div>
</div>

Friday, January 2, 2015

Disable Right Click


<script language="javascript">
document.onmousedown=disableclick;
status="Right Click Disabled";
Function disableclick(event)
{
  if(event.button==2)
   {
     alert(status);
     return false;    
   }
}
</script>



<body oncontextmenu="return false">
...
</body>

Thursday, January 1, 2015

jQuery -Tabs with fade in /fade out effect using jQuery

Tabs with fade in /fade out effect using jQuery


<ul class="tab-cat-name">
<li>
    <a  onclick="ShowHideTab('1')" href="javascript:void(0)" class="active">Tab1</a>
    <a  onclick="ShowHideTab('2')" href="javascript:void(0)">Tab2</a>
    <a  onclick="ShowHideTab('3')" href="javascript:void(0)">Tab3</a>
</li>
</ul>

           
 <div class="tab-listing" id="show_hide_1">
 Tab1 content
 </div>
 <div class="tab-listing" id="show_hide_2" style="display:none;">
 Tab1 content
 </div>
 <div class="tab-listing" id="show_hide_3" style="display:none;">
 Tab1 content
 </div>

   
   
<script type="text/javascript">
function ShowHideTab(current){
    jQuery( ".tab-listing" ).each(function( index ) {
        var toshow= index+1;
            if(current==toshow){
            jQuery('#show_hide_'+toshow).fadeIn(1000);
            }else{
            jQuery('#show_hide_'+toshow).fadeOut(1000);
            }
        });
}   
</script>   

<script type="text/javascript">
   jQuery(document).on('click', '.tab-cat-name li a', function() {
       jQuery(".tab-cat-name li a").removeClass("active");
       jQuery(this).addClass("active");
   });
</script>

Note: Please be sure, jQuery libary has included for the page.

Njoy the day :) :)