How to edit main page content Magento Enterprise

Question

Magento ver. 1.13

I'm trying to edit the code and layout of an existing Magento website.

From asking a question yesterday i had learned that when first landing on the website you are directed to the page tagged with the "home" URL key and you can find the pages by looking in the "CMS->Pages->Manage Content"

I then looked at what the page with the URL key "home" contains..

<div>{{block type="dip/dip" name="dip" template="dip/banner-home.phtml" }}</div>
<div class="content-home">
<div class="tab-text">{{block type="core/template" name="tabs_home" as="tabs_home" template="page/tabs.phtml"}}</div>
</div>

so i looked at the first line and decided that it was loading the banner that is at the top of the website.

I then looked at the third line that is loading a block from the template aswell and it appears to be loading the file tabs.phtml..

I then located the tabs.phtml hoping that the entire layout of the page would be located there, but i didn't find anything that seems of any use in there.

this is what the page contained..

<SCRIPT type="text/javascript" src="<?php echo $this->getSkinUrl('js/carousel.js') ;?>"></SCRIPT>

<div class="tabs">
    <ul class="veiw-all-tab" id="navigation-links">
    <li><a href="javascript:void(0);" class="slide-arrow-lft" ><img src="<?php echo $this->getSkinUrl()?>images/slide-left.gif" alt="" /></a></li>
    <li>
    <span id="newallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/view-all-products.gif" alt="" /></span>
    <span id="featuredallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/View-All-Featured-Products.gif" alt="" /></span>
    </li>
    <li><a href="javascript:void(0);" class="slide-arrow-rgt" ><img src="<?php echo $this->getSkinUrl()?>images/slide-right.gif" alt="" /></a></li>
    </ul>
    <div class="product-details-new-tab-content">
        <ul class="product-details-new-tabs-horiz">
            <li id="product_new_products" class="selected"><a href="javascript:void(0)" class="tab-item-link notloaded active"><span><?php echo $this->__('New Products'); ?></span></a></li>
            <li id="product_feature_products"><a href="javascript:void(0)" ><span><?php echo $this->__('Featured Products'); ?></span></a></li>
        </ul>
    </div>
</div>
<?php echo Mage::getBlockSingleton('catalog/product_new')->setTemplate('catalog/product/new.phtml')->toHtml(); ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('featured_block')->toHtml(); ?>

<script type="text/javascript">
var show_selector = new Array();
show_selector[0] = true
show_selector[1] = true;
//show_selector[2] = true;
function showNewProductGallery(counter){

    selector = ".infiniteCarousel"+counter;

    if(show_selector[counter])
    {
        jQuery(selector+" .jCarouselLite").jCarouselLite({
            btnNext: "#navigation-links .slide-arrow-rgt",
            btnPrev: "#navigation-links .slide-arrow-lft",
            speed: 500,
            easing: "easeinout"
        });
        show_selector[counter] = false;
    }   
};
</script>


<script type="text/javascript">
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
  initialize: function(selector) {
    var self=this;
    $$(selector+' a').each(this.initTab.bind(this));
  },

  initTab: function(el) {
      el.href = 'javascript:void(0)';
      if ($(el.parentNode).hasClassName('selected')) {
        this.showContent(el);
      }
      el.observe('click', this.showContent.bind(this, el));
  },

  showContent: function(a) {

    var li = $(a.parentNode), ul = $(li.parentNode);
    var counter = 0;
    ul.getElementsBySelector('li', 'ol').each(function(el){

      var contents = $(el.id+'_contents');
      if (el==li) {
        el.addClassName('selected');
        // Added by Zeon
        if (el.id == 'product_new_products') {
            $('newallproductspan').show();
            $('featuredallproductspan').hide();
        } 
        if (el.id == 'product_feature_products') {
            $('featuredallproductspan').show();
            $('newallproductspan').hide();
        }
        // End      
        contents.show();
            showNewProductGallery(counter);
      } else {
        el.removeClassName('selected');
        contents.hide();
      }
      counter++
    });
  }
}
new Varien.Tabs('.product-details-new-tabs-horiz');
</script>

I'm starting to run out of leads to follow to find out how to actually change anything about this page at all.. i can't seem to find anything.. I'm starting to wonde if its even possible.

Any and all help is appreciated.. even if you don't know the answer.. even if you just have a few tips for me, that would be great!

Answer 1

Your question is extremely broad, but I'll try to get you started.

A page in Magento is made up of blocks pulled together using Magento's Layout XML and then rendered by a combination of block objects and php templates (phtml). Describing all of how that feature works is a bit beyond the scope of a simple Q&A, but there are some good guides out there.

I'm not going to talk much about Enterprise because it's not FOSS, but I will say that the default theme is "enterprise", which means that you want to look in app/design/frontend/enterprise/default/layout/page.xml for a fairly global example of layout xml. You can see here that layout xml consists of handles which contain blocks, references and removes, which can contain actions or recur to blocks.

• A block in layout xml corresponds to a block class in php, which can be identified by its type. Block type names are fully resolved to their block classpaths in Mage_Core_Model_Layout*.
• An action in layout xml calls a method on the containing block. Its children are arguments (the xml node names are ignored for immediate children, but are array keys for grandchildren of the action node.)
• A remove lets you ignore an existing block.
• A reference allows you to update an existing block by firing off one of its actions or by attaching or removing child blocks.

If you just want to tweak layout, you can do that by dropping a local.xml file in the current theme package. That's a good way to get some practice with layout xml without a lot of the headaches of massive theming. If you want to create your own theme with extensive changes, read the Designer's Guide.