Chủ đề - bắt đầu từ đầu

Là gì ưa thích phương pháp bắt đầu một trang web đầy đủ xây dựng , từ đầu ? Các bản dựng của tôi thường bắt đầu từ các trang khung dây HTML5 được mô phỏng đầy đủ và chúng tôi cắm chức năng từ đó.

Nhưng, một phần trong tôi cảm thấy rằng hầu hết thời gian trong giai đoạn cuối của dự án, chúng tôi đều tìm thấy tất cả các lĩnh vực chức năng cần được cắm vào - điển hình là những thứ như Enterprise RMA, phần Tài khoản của khách hàng, v.v. điều này có thể tránh được bằng cách bắt đầu với chủ đề Magento từ ngày 1; quan điểm đối lập nói rằng sẽ có lượng thời gian bằng nhau khi viết CSS và sửa đổi cấu trúc từ mặc định.

Bạn có xây dựng trên chủ đề "trống" Core không? Có phiên bản Enterprise của chủ đề trống này không? Thực hành tốt nhất ở đây là gì?

Vì vậy, điều này sẽ gây ra sự náo động tột cùng và đi ngược lại hạt giống của mọi nhà phát triển Magento - nhưng chúng tôi đã có một quy trình vững chắc để theo chủ đề - đó không sử dụng local.xml (sẽ nói thêm về điều đó sau).

Chúng tôi luôn làm việc với mẫu base/default(và enterprise/defaultcho EE) - nhưng không có CSS. Mặc dù tất cả các thiết kế không đặc biệt cho vay theo bố cục cấu trúc của cửa hàng Magento vanilla - chúng tôi thấy rằng nên sử dụng defaultchủ đề này làm điểm khởi đầu; chúng ta có thể loại bỏ các phương thức / vòng lặp / html không sử dụng, vv khi cần thiết trong quá trình tạo khuôn.

Khi bắt đầu một chủ đề

Đối với EE

Chúng tôi cài đặt tiện ích mở rộng này trước để chúng tôi có được mức dự phòng chủ đề - khi chúng tôi xóa tệp chủ đề chúng tôi đã sao chép sau đó.

Gói

Trước tiên chúng tôi bắt đầu bằng cách tạo gói và sao chép trong toàn bộ base/defaultchủ đề; vì vậy, ví dụ (giả sử đó là trang web của chính chúng tôi, chúng tôi sẽ gọi gói sonassi)

cd ./app/design/frontend
mkdir sonassi
cp -par base/default sonassi/default
mkdir sonassi/default/layout/custom

Bản mẫu

Mục tiêu cuối cùng là chúng tôi không phải tiếp tục sao chép và dán từng tệp mà chúng tôi sửa đổi bất cứ khi nào chúng tôi cần, chúng tôi chỉ cần chỉnh sửa tệp trong chủ đề.

Nhưng mỗi lần chúng tôi chỉnh sửa tệp, chúng tôi sẽ loại bỏ các tiêu đề Magento Commerce - và thêm một tiêu đề / định danh thích hợp để đánh dấu tệp là một mẫu tùy chỉnh, thường là một cái gì đó như ...

/*
* @category    Template
* @package     sonassi_default
* @copyright   Copyright (c) 2013 Sonassi
*/

Tiêu đề này phục vụ mục đích sau này khi chúng tôi dọn sạch mẫu cuối cùng. Vì chúng tôi sẽ thực hiện đệ quy difftrên base/default/templatethư mục và sonassi/default/templatethư mục - sau đó xóa mọi thứ chưa được thay đổi.

Bằng cách này, chỉ các tệp được sửa đổi vẫn còn và gói tổng thể đã được giảm xuống các tệp thay đổi tối thiểu.

Các tập tin bố trí

Chúng tôi sử dụng một mô-đun lõi tiêu chuẩn của riêng chúng tôi sonassi.core. Có, chúng tôi luôn đặt tiền tố không gian tên mô-đun bằng một mã định danh duy nhất - nó ngăn chặn xung đột khi các công ty khác đã chọn cùng tên (ví dụ: fishpig / wordpress và sonassi / wordpress)

Phương pháp bố trí nolocal

<core>
  <rewrite>
    <layout>Sonassi_Core_Model_Core_Layout</layout>
    <layout_update>Sonassi_Core_Model_Core_Layout_Update</layout_update>
  </rewrite>
</core> 

Sau đó, hai lớp ma thuật thêm chức năng không bao giờ cần local.xmlnữa,

class Sonassi_Core_Model_Core_Layout 
    extends Mage_Core_Model_Layout
{
    /**
     * Loyout xml generation
     *
     * @return Mage_Core_Model_Layout
     */
    public function generateXml()
    {
        $xml = $this->getUpdate()->asSimplexml();
        $removeInstructions = $xml->xpath("//remove");
        if (is_array($removeInstructions)) {
            foreach ($removeInstructions as $infoNode) {
                $attributes = $infoNode->attributes();
                $blockName = (string)$attributes->name;
                if ($blockName) {
                    $unremoveNodes = $xml->xpath("//unremove[@name='".$blockName."']");
                    if (is_array($unremoveNodes) && count($unremoveNodes) > 0) {
                        continue;
                    }
                    $ignoreNodes = $xml->xpath("//block[@name='".$blockName."']");
                    if (!is_array($ignoreNodes)) {
                        continue;
                    }
                    $ignoreReferences = $xml->xpath("//reference[@name='".$blockName."']");
                    if (is_array($ignoreReferences)) {
                        $ignoreNodes = array_merge($ignoreNodes, $ignoreReferences);
                    }

                    foreach ($ignoreNodes as $block) {
                        if ($block->getAttribute('ignore') !== null) {
                            continue;
                        }
                        $acl = (string)$attributes->acl;
                        if ($acl && Mage::getSingleton('admin/session')->isAllowed($acl)) {
                            continue;
                        }
                        if (!isset($block->attributes()->ignore)) {
                            $block->addAttribute('ignore', true);
                        }
                    }
                }
            }
        }
        $this->setXml($xml);
        return $this;
    }
}

và

class Sonassi_Core_Model_Core_Layout_Update 
    extends Mage_Core_Model_Layout_Update
{

    public function getFileLayoutUpdatesXml($area, $package, $theme, $storeId = null)
    {
        if (null === $storeId) {
            $storeId = Mage::app()->getStore()->getId();
        }
        /* @var $design Mage_Core_Model_Design_Package */
        $design = Mage::getSingleton('core/design_package');
        $layoutXml = null;
        $elementClass = $this->getElementClass();
        $updatesRoot = Mage::app()->getConfig()->getNode($area.'/layout/updates');
        Mage::dispatchEvent('core_layout_update_updates_get_after', array('updates' => $updatesRoot));
        $updateFiles = array();
        foreach ($updatesRoot->children() as $updateNode) {
            if ($updateNode->file) {
                $module = $updateNode->getAttribute('module');
                if ($module && Mage::getStoreConfigFlag('advanced/modules_disable_output/' . $module, $storeId)) {
                    continue;
                }
                $updateFiles[] = (string)$updateNode->file;

                // custom theme XML contents
                $updateFiles[] = 'custom/'.(string)$updateNode->file;    

                // custom theme XML override
                $updateFiles[] = 'local/'.(string)$updateNode->file;            
            }
        }

        // custom local layout updates file - load always last
        $updateFiles[] = 'local.xml';
        $layoutStr = '';
        foreach ($updateFiles as $file) {
            $filename = $design->getLayoutFilename($file, array(
                '_area'    => $area,
                '_package' => $package,
                '_theme'   => $theme
            ));
            if (!is_readable($filename)) {
                continue;
            }
            $fileStr = file_get_contents($filename);
            $fileStr = str_replace($this->_subst['from'], $this->_subst['to'], $fileStr);
            $fileXml = simplexml_load_string($fileStr, $elementClass);
            if (!$fileXml instanceof SimpleXMLElement) {
                continue;
            }
            $layoutStr .= $fileXml->innerXml();
        }
        $layoutXml = simplexml_load_string('<layouts>'.$layoutStr.'</layouts>', $elementClass);
        return $layoutXml;
    }

}

Hai lớp trên thêm chức năng vào Magento để bạn có thể mở rộng - nhưng không ghi đè lên tệp XML bố cục. Khả năng mở rộng của bố cục XML rất quan trọng đối với chúng tôi, vì nó cho phép chúng tôi vẫn duy trì việc phân tách tệp giống nhau catalog.xml, cms.xmlv.v. - nhưng chỉ cần thêm các phần ngắn của bố cục XML để thao tác các khối (chèn / sao chép / xóa).

Các local.xmlphương pháp là bạn chỉ cần nhập thay đổi trọng của bạn vào một tập tin không thể quản lý cồng kềnh.

Các nolocalphương tiện phương pháp đó chứ không phải là đặt tất cả những thay đổi trong một tập tin duy nhất, bạn đặt chúng trong một file với tên tập tin thích hợp mà nó được sửa đổi (ví dụ. catalog.xml) - bằng cách đơn giản tạo ra một tập tin mới sonassi/default/layout/custom/catalog.xml- với * chỉ những sửa đổi .

Một lần nữa, một khi chúng ta đã hoàn thành việc tạo mẫu, chúng ta có thể xóa nội dung sonassi/default/layoutngoại trừ customthư mục. Bằng cách này một lần nữa, giống như với mẫu, chúng tôi có một mẫu mở rộng nhẹ - dựa trên các mẫu cơ sở.

Các tờ phong cách

Chúng tôi xóa chúng, tất cả chúng. Chúng tôi không bận tâm sao chép chúng vào thư mục CSS của gói. Chúng tôi sẽ sao chép trong JS và thế là xong - thư mục imagesvà CSSsẽ trống ngay từ đầu.

Hiện tại chúng tôi đang sử dụng SASS, chúng tôi sẽ có một thư mục khác ( scss) cho CSS được xử lý trước - và xuất ra các kiểu CSS / in tệp CSS chính.

Dọn dẹp mẫu

Vì vậy, như chúng tôi đã đề cập, một khi chủ đề mẫu được hoàn thành, bây giờ bạn có thể xóa nó - để xóa các tệp chưa được sửa đổi và giảm xuống mức tối thiểu.

cd ./app/design/frontend

PREFIX="cleantheme_"
THEME="sonassi/default"
diff -BPqr "base/default/template" "$THEME/template" | \
awk '{print $4}' | \
  while read FILE; do 
    DIR=$(dirname "$FILE")
    [ -d "$PREFIX$DIR" ] || mkdir -p "$PREFIX$DIR"
    [ -f "$PREFIX$FILE" ] || cp -pa "$FILE" "$PREFIX$FILE"
  done
cp -par "$THEME/layout" "$PREFIX$THEME/"

Vậy tại sao không local.xml?

Nó không dành cho bạn - nó dành cho bên thứ 3, giống như cách communitydành cho bạn và localdành cho bên thứ 3. Đó là một failback, giải pháp cuối cùng, điểm đến cuối cùng cho phần ghi đè.

Cấu trúc XML theo cách này giữ cho nó phù hợp với cách Magento ban đầu cấu hình thư mục và cấu trúc tệp. Thêm vào đó, để tiếp tục phát triển - nó có ý nghĩa hơn, dễ tiêu hóa hơn rất nhiều và không thêm chi phí đáng chú ý.

Magento là một sản phẩm kỳ quặc, cộng đồng đã phát minh ra cách thực hành tốt nhất của riêng mình dựa trên ý thức chung và bắt chước những gì nhóm cốt lõi Magento làm. Vì vậy, không bao giờ có một cách chính thức (cho đến khi một con kỳ lân cưỡi trong tài liệu Magento-1) ; nhưng đây là cách của chúng tôi

Vì vậy, tôi thậm chí còn nói rằng đây không phải là câu trả lời, đó chỉ là một trong nhiều cách để giải quyết một thách thức thường gặp phải. Mặc dù tôi muốn nghĩ rằng phương pháp của chúng tôi là tốt nhất.

^{Nội dung vui vẻ có nguồn gốc từ sonassi.com}

Xây dựng một chủ đề bootstrap trống cho Enterprise. Điều đó có nghĩa là lấy enterprise/defaultchủ đề, dọn sạch CSS của nó và "nhấp vào tất cả mọi thứ" để xác minh rằng bạn đã xử lý kiểu dáng các tính năng. Đừng quên voodoo xem lưới sản phẩm.

Một trong những lợi ích là điều này tạo cơ hội để thiết lập quy trình làm việc LESS (hoặc khác). Hãy suy nghĩ về nó - trong khi chủ đề trống là một khởi đầu tốt đẹp cho các chủ đề sáng màu, thì một chút công việc để chuyển nó sang thích ứng với chủ đề tối / đen. Trên hết, bạn PHẢI kết hợp enterprise/defaultchủ đề, nếu không bạn đã cài đặt EE bị hỏng ngay từ đầu.