web hosting
build a website
Browsing articles from "March, 2013"

Positioning a Static block in the Left bar in Magento

Mar 31, 2013   //   by Anthony Devine   //   Website Development tips  //  Comments Off on Positioning a Static block in the Left bar in Magento

If you do not have access to the Core PHP files in Magento you may struggle to change the layout of the left hand navigation. However you can add addition static blocks to the left hand or right hand sides by doing the following: Create a static block and add in the content you want displaying in the sidebar. Then in Catalog > Manage Categories select the subcategory you wish to assign the static block to and then click the Custom Design tab. In the Custom Design tab you should have the Page Layout set to how you want the page laying out so 2 columns with Left bar or right bar or 3 columns, then in the Custom Layout Update box add in the following code:

<reference name="left">
     <block type="cms/block" before="block-compare" name="menspagedescription">
        <action method="setBlockId"><block_id>menspagedescription</block_id></action>
     </block>
</reference>
This basically gets the ID of the static block you created menspagedescription and assigns it to the left hand column. It also adds it above the item in the left hand column called block-compare this block will obviously be different on your site as this is a plugin I have installed on the left hand side. You can find out what the block are called for your left hand side either by looking at the IDs in the backend of Magento or by using Firebug and it will show you the block class when hovered over the item.

This is the most simple method I have come across for positioning static content in the sidebars.

Adding JQuery in Magento

Mar 28, 2013   //   by Anthony Devine   //   Website Development tips  //  Comments Off on Adding JQuery in Magento
Magento does not use Jquery by default it uses prototype.js.

Prototype is not something that I enjoy coding with really and quite a few other people I have spoken to say the same, it is much easier in my oppinion to create image sliders and other functionality using JQuery and there seems to be much more open source code available for JQuery than Prototype.

If you add a JQuery gallery for example into a magento page you will see certain features like the top menu drop down list not work and other little things like that. This is because there are certain variable that Prototype use as well as JQuery. The way to get them to work together is to use no conflict at the start when you are calling your JQuery function.

So usually your JQuery function would look something like this:
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});


Now this needs altering to the following:
$.noConflict();
  jQuery(document).ready(function($) {
  $("p").click(function(){
    $(this).hide();
  });
});


You should now find that your code all works together.

Ammending HTML in Javascript

Mar 27, 2013   //   by Anthony Devine   //   Website Development tips  //  Comments Off on Ammending HTML in Javascript
There are some occasions developing a Website you need the HTML to be dynamically altered and you may not have any access to the core PHP files to create an if statement to do this. One solution to this is to use Javascript as shown below.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$.noConflict();
  jQuery(document).ready(function($) {
  if ($('.currently').length > 0) {      $(".bigcategoryimages").append('<style>.bigcategoryimages{display:none;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:block;}</style>');
    }    
else
 {
 $(".bigcategoryimages").append('<style>.bigcategoryimages{display:block;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:none;}</style>');
    }    
  });
</script>
<div class="refinedheader"> Header to show</div>

<div class=" bigcategoryimages ">Header to hide </div>
The script example above was used on an ecommerce Website I developed and the idea of it was when a search was performed in the left hand side navigation it would hide one div on the page and display another.

I found that when something was clicked in the left hand side of the page the div class currently was being used (I found this out using Firebug) So the above code says when the class currently is being used then append the style display:block to the div class=” refinedheader” which will show that div and append the style display:none to the div class=” bigcategoryimages” which will hide that div. Then there is an else statement that says if the class currently is not being used then refinedheader is hidden and bigcategoryimages is shown.

There are other ways you can use this script, one way is to say if a certain page title is displayed then run the same script. The below example runs the script if the page name is called Homepage:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$.noConflict();
  jQuery(document).ready(function($) {
  if (document.title = "Homepage";) {      $(".bigcategoryimages").append('<style>.bigcategoryimages{display:none;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:block;}</style>');
    }    
else
 {
 $(".bigcategoryimages").append('<style>.bigcategoryimages{display:block;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:none;}</style>');
    }    
  });
</script>
<div class="refinedheader"> Header to show</div>

<div class=" bigcategoryimages ">Header to hide </div>
This can be a much easier option for people to use if they are not familiar to PHP or if they do not have access to the core files of a Website and it is possible to do many things to the page. A good example maybe with an ecommerce Website, if something is added to the shopping basket then change the styling or hide something on a page or show a checkout button.