[Guide] Cách tạo thêm view mode product list

Thảo luận trong 'Hướng dẫn làm template' bắt đầu bởi hungtk2707, 28 Tháng ba 2014.

  1. hungtk2707

    hungtk2707 Member

    Chào mọi người

    Đối với những ai làm template cũng biết product grid list
    Cách đây vài hôm có dự án cần template trang list với 3 loại grid:
    - show 2 products trong 1 row
    - show 3 products trong 1 row
    - show 4 products trong 1 row

    Thường thì sẽ sửa cái có sẵn của magento list.phtml. Nhưng thế thì không hay lắm với lại magento chỉ cung cấp sẵn 2 view mode. Vậy giờ hay nhất là tạo mới luôn 3 view mode như trên lại giữ được mặc định của magento.

    1. copy file app\code\core\Mage\Adminhtml\Model\System\Config\Source\Catalog\ListMode.php ra local (đây chính là file tạo config view mode trong admin config). Giữ nguyên các config, mình thêm vào grid2-grid3-grid4 như bên dưới
    PHP:
    class Mage_Adminhtml_Model_System_Config_Source_Catalog_ListMode
    {
        public function 
    toOptionArray()
        {
            return array(
                
    //array('value'=>'', 'label'=>''),
                
    array('value'=>'grid''label'=>Mage::helper('adminhtml')->__('Grid Only')),
                array(
    'value'=>'list''label'=>Mage::helper('adminhtml')->__('List Only')),
                array(
    'value'=>'grid-list''label'=>Mage::helper('adminhtml')->__('Grid (default) / List')),
                array(
    'value'=>'list-grid''label'=>Mage::helper('adminhtml')->__('List (default) / Grid')),
                array(
    'value'=>'grid2-grid3-grid4''label'=>Mage::helper('adminhtml')->__('Grid 2 / Grid 3 (default) / Grid 4')),
              
    // mình chọn grid 3 làm default
            
    );
        }
    }
    2. copy file app\code\core\Mage\Catalog\Block\Product\List\Toolbar.php ra local, tìm đến dòng 185, thêm vào như sau:
    PHP:
    case 'grid2-grid3-grid4':
        
    $this->_availableMode = array('grid3' => $this->__('Grid 3'), 'grid2' => $this->__('Grid 2'), 'grid4' => $this->__('Grid 4'));
      
    //grid nào đứng ở vị trí đầu tiên sẽ là default view mode, ở đây là grid 3
        
    break;
    Thế là xong, vào admin config -> CATALOG - Frontend, chọn "Grid 2 / Grid 3 (default) / Grid 4"
    [​IMG]

    3. Vậy là xong phần config. Kế đến là file template\catalog\product\list.phtml, copy nội dung của grid mặc định magento
    PHP:
    <?php if($this->getMode()=='grid'): ?>
    ...//nội dung grid
    <?php endif; ?>
    rồi chia làm 3 tương ứng với 3 view mode
    PHP:
    <?php if($this->getMode()=='grid2'): ?>
    ...//nội dung grid, chú ý là set $_columnCount = 2
    <?php endif; ?>
     
    <?php if($this->getMode()=='grid3'): ?>
    ...//nội dung grid, chú ý là set $_columnCount = 3
    <?php endif; ?>
     
    <?php if($this->getMode()=='grid4'): ?>
    ...//nội dung grid, chú ý là set $_columnCount = 4
    <?php endif; ?>
    4. Đến phần switch view mode template\catalog\product\list\toolbar.phtml (phần này mình không dùng mặc định)
    PHP:
    <div class="product_view_mode floatright">
          <?php $currentUrl $this->helper('core/url')->getCurrentUrl(); ?>
          <?php $exCurrentUrl explode('?'$currentUrl); ?>
          <a href="<?php echo $exCurrentUrl[0] . '?mode=grid4'?>">
                <img class="grid4" src="<?php echo $this->getSkinUrl('images/grid4.gif'?>" title="4 items in row" alt="img"/>
            </a>
            <a href="<?php echo $exCurrentUrl[0] . '?mode=grid3'?>">
                <img class="grid3" src="<?php echo $this->getSkinUrl('images/grid3.gif'?>" title="3 items in row" alt="img"/>
            </a>
            <a href="<?php echo $exCurrentUrl[0] . '?mode=grid2'?>">
                <img class="grid2" src="<?php echo $this->getSkinUrl('images/grid2.gif'?>" title="2 items in row" alt="img"/>
            </a>
     
          <script type="text/javascript">
                jQuery(window).ready(function () {
                      var url = window.location.href;
                      var urlSplit= url.split('?');
                      if (urlSplit[1] == 'mode=grid4') {
                          jQuery('img.grid4').addClass('active_mode');
                      }
                      if (urlSplit[1] == 'mode=grid3') {
                          jQuery('img.grid3').addClass('active_mode');
                      }
                      if (urlSplit[1] == 'mode=grid2') {
                          jQuery('img.grid2').addClass('active_mode');
                      }
                  });
            </script>
    </div>
    Phần js viết hơi chuối vì chưa làm js nhiều cho lắm :D

    Cuối cùng CSS lại cho đẹp nữa là ok. Và đây là thành quả

    Grid 2
    [​IMG]

    Grid 3
    [​IMG]

    Grid 4
    [​IMG]
    Có gì góp ý nhé :)
  2. vonnguyen

    vonnguyen New Member

    Anh cách gọi vẫn là trong cùng categores luôn đó hả. Ah sao em list.phtml mặc định của magento $_columnCount đâu có chô nào set biến đâu.

Chia sẻ trang này