Mereka - mulai dari awal

30

Apa metode yang disukai untuk memulai membangun situs lengkap , dari awal ? Bangunan saya biasanya dimulai dari halaman wireframe HTML5 yang sepenuhnya dipermainkan, dan kami menghubungkan fungsionalitas dari sana.

Tetapi, sebagian dari saya merasa bahwa sebagian besar waktu pada tahap akhir dari proyek kami akhirnya menemukan semua bidang fungsi yang perlu dicolokkan - biasanya hal-hal seperti Enterprise RMA, bagian Pelanggan Akun Saya, dll. Saya pikir ini bisa dihindari dengan memulai dengan tema Magento dari hari 1; pandangan yang berlawanan mengatakan bahwa akan ada jumlah waktu yang sama untuk menulis CSS dan memodifikasi struktur dari default.

Apakah Anda membangun tema Core "blank" ? Apakah ada versi Perusahaan dari tema kosong ini? Apa praktik terbaik di sini?

Philwinkle
sumber

Jawaban:

32

Jadi ini akan menyebabkan kegemparan besar dan bertentangan dengan keinginan setiap pengembang Magento - tetapi kami memiliki proses yang solid untuk bertema - yang tidak menggunakan local.xml (lebih lanjut tentang itu nanti).

Kami selalu bekerja di luar template base/default(dan enterprise/defaultuntuk EE) - tetapi nol CSS. Meskipun semua desain tidak terlalu cocok dengan tata letak struktural toko vanilla Magento - kami menemukan praktik yang baik untuk menggunakan defaulttema sebagai titik awal; kita dapat menghapus metode / loop / html dll yang tidak digunakan sebagaimana diperlukan selama templating.

Saat memulai tema

Untuk EE

Kami memasang ekstensi ini terlebih dahulu, sehingga kami mendapatkan tingkat fallback tema - ketika nanti kami menghapus file tema yang kami salin.

Paket

Kami pertama-tama mulai dengan membuat paket dan menyalin di seluruh base/defaulttema; jadi misalnya (katakan itu adalah situs web kami sendiri, kami akan memanggil paket sonassi)

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

Templat

Tujuan utamanya adalah kita tidak harus terus menyalin dan menempel setiap file yang kita modifikasi kapan pun kita perlu, kita cukup mengedit file dalam tema.

Tetapi setiap kali kami mengedit file, kami menghapus header Magento Commerce - dan menambahkan header / pengenal yang sesuai untuk menandai file sebagai templat khusus, biasanya sesuatu seperti ...

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

Header ini melayani tujuan nanti ketika kami melakukan pembersihan template akhir. Karena kita akan melakukan rekursif diffpada base/default/templatedirektori dan sonassi/default/templatedirektori - maka hapus semua yang belum diubah.

Dengan cara ini, hanya file yang diubah yang tersisa dan paket keseluruhan telah dikurangi menjadi file yang diubah minimum.

File tata letak

Kami menggunakan modul inti standar kami sendiri sonassi.core. Ya, kami selalu mengawali namespace modul dengan pengidentifikasi unik - menghentikan konflik di mana perusahaan lain telah memilih nama yang sama (mis. Fishpig / wordpress dan sonassi / wordpress)


Metodologi tata letak nolocal

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

Kemudian dua kelas ajaib yang menambahkan fungsi tidak perlu local.xmllagi,

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;
    }
}

dan

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;
    }

}

Dua kelas di atas menambahkan fungsionalitas ke Magento sehingga Anda dapat memperluas - tetapi tidak menimpa file XML tata letak. Perpanjangan tata letak XML penting bagi kami, karena memungkinkan kami untuk tetap mempertahankan pemisahan file yang sama catalog.xml, cms.xmldll. - tetapi hanya perlu menambahkan porsi pendek tata letak XML untuk memanipulasi blok (masukkan / klon / hapus).

The local.xmlmetodologi adalah bahwa Anda hanya memasukkan perubahan override Anda ke dalam satu file diatur rumit.

The nolocalmetodologi berarti bahwa daripada menempatkan semua perubahan dalam satu file, Anda menempatkan mereka dalam sebuah file dengan nama file yang sesuai bahwa itu memodifikasi (misalnya. catalog.xml) - dengan hanya membuat file baru sonassi/default/layout/custom/catalog.xml- dengan * hanya modifikasi .

Sekali lagi, setelah kita selesai membuat templat, kita bisa menghapus konten sonassi/default/layoutdengan pengecualian customdirektori. Dengan cara ini lagi, seperti dengan templat, kami memiliki templat yang diperluas ringan - berdasarkan dari templat dasar.

Lembar gaya

Kami menghapusnya, semuanya. Kami tidak repot-repot menyalinnya ke direktori CSS paket kami. Kami akan menyalin di JS dan hanya itu - imagesdan CSSdirektori akan kosong dari awal.

Karena kami menggunakan SASS saat ini, kami akan memiliki direktori lain ( scss) untuk CSS yang sudah diproses - dan menghasilkan gaya utama / mencetak file CSS.

Membersihkan templat

Jadi seperti yang kami sebutkan, setelah tema templat selesai, Anda sekarang dapat membersihkannya - untuk menghapus file yang tidak dimodifikasi dan menguranginya ke minimum.

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/"

Jadi mengapa tidak local.xml?

Ini bukan untuk Anda - untuk pihak ke-3, dengan cara yang communitysama untuk Anda dan localuntuk pihak ke-3. Ini adalah kegagalan, pilihan terakhir, tujuan akhir untuk penggantian.

Penataan XML dengan cara ini membuatnya tetap sejalan dengan cara Magento awalnya mengkonfigurasi direktori dan struktur file. Plus, untuk kelangsungan pengembangan - itu hanya lebih masuk akal, jauh lebih mudah dicerna dan tidak menambah overhead yang terlihat.

Magento adalah produk aneh, masyarakat telah menemukan praktik terbaiknya sendiri berdasarkan akal sehat dan meniru apa yang dilakukan tim inti Magento. Jadi tidak pernah ada cara resmi (tidak sampai unicorn naik dengan dokumentasi Magento-1) ; tapi ini jalan kita .

Jadi aku bahkan peregangan untuk mengatakan ini bukan yang jawabannya, hanya salah satu dari banyak cara untuk mengatasi tantangan yang biasa dihadapi. Meskipun saya ingin berpikir metode kami adalah yang terbaik.

Konten dengan senang hati bersumber dari sonassi.com

Ben Lessani - Sonassi
sumber
1
Kalian bukan apa-apa jika tidak terlalu kreatif.
philwinkle
3
Tulisan bagus dan saran yang solid di mana-mana.
ColinM
Saya suka pendekatan Anda untuk memperluas layout xml daripada hanya menyalin di file yang ada atau menggunakan local.xml, itu luar biasa! Alih-alih menyalin di semua file template pada awalnya, saya suka perintah "Copy Template" Magicento, yang dapat digunakan untuk menyalin template ke tema lain dengan mudah, menempatkannya di struktur folder yang tepat. Atau, saat membersihkan tema 3 di akhir, Anda mungkin ingin memeriksa perintah "dev: theme: duplicates" n98-magerun.phar, yang akan menghasilkan daftar file yang belum diubah.
Jim OHalloran
Saya ingin tahu apakah ada plugin yang dapat digunakan default/defaultuntuk menginstal CE. Mungkin tidak sulit untuk diretas dengan sumber yang diberikan, hanya ingin tahu (mengunyah ini: Magento Theme Fall-back / Hierarchy dalam terang tema kustom dan ekstensi pihak ketiga )
hakre
"...the same way that community is for you and local is for 3rd parties..."Cara Magento adalah sebaliknya, seperti yang dinyatakan di sini: magentocommerce.com/wiki/2_-_magento_concepts_and_architecture/…
RichardBernards
7

Buat tema bootstrap kosong untuk Enterprise. Itu berarti mengambil enterprise/defaulttema, membersihkan CSS-nya, dan "mengklik semua hal" untuk memverifikasi bahwa Anda telah menangani penataan fitur. Jangan lupa tentang voodoo tampilan kisi produk.

Salah satu manfaat adalah bahwa ini memberi kesempatan untuk mengatur alur kerja KURANG (atau lainnya). Pikirkan tentang hal ini - sementara tema kosong adalah awal yang bagus untuk tema-tema berwarna, itu sedikit pekerjaan untuk mengubahnya untuk beradaptasi dengan tema gelap / hitam. Di atas semua itu, Anda HARUS memasukkan enterprise/defaulttema, jika tidak Anda memiliki instalasi EE yang rusak sejak awal.

tanda batas
sumber
Anda memang benar
philwinkle