Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

Pembangunan Tema Magento: Laman Utama, Bahagian 2

by
Length:LongLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page, Part 1
Magento Theme Development: Home Page, Part 3

Malay (Melayu) translation by Seurion (you can also view the original English article)

Dalam tutorial sebelumnya dalam siri ini, kami mula mengubah suai bahagian kepala halaman utama. Dalam tutorial ini, kami akan memulakan di mana kami berhenti dengan pembaikan bahagian kepala, dan kemudian kami akan membuat blok CMS gelangsar baru dan memanggilnya dari fail templat kami. Seperti yang kita ada banyak untuk dimuatkan dalam artikel ini, mari bermula tanpa penangguhan lanjut.

Seperti yang telah kita tetapkan sebahagian besar tajuk utama, satu-satunya perkara yang perlu dibetulkan adalah bahagian keranjang teratas. Untuk menyesuaikan keranjang pengepala, pertama kami akan cuba mengetahui fail templat mana yang bertanggung jawab untuk menjadikan bahagian itu. Untuk menganalisa itu, mari kita tambahkan beberapa produk ke keranjang, supaya kita dapat menyiasat sepenuhnya.

Enabling Template Tags

Memandangkan kami membolehkan petua templat, kami dapat melihat bahawa bekas luar kotak keranjang datang dari fail templat ini: frontend/rwd/default/template/checkout/cart/minicart.phtml. Kemudian pada klik, bahagian diperluaskan diberikan melalui fail ini: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Akhir sekali, setiap item kereta api diberikan melalui fail ini: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Kami akan mengimport semua fail ini ke dalam tema yang baru kami buat, dan kemudian mula mengubahnya.

Mari mulakan proses pengubahsuaian dengan fail minicart.phtml terluar. Ini ialah kod semasa fail ini:

Sekarang sebelum kita memulakan sebarang pengubahsuaian di dalamnya, mari kita periksa kod bahagian keretapi header kami dalam fail HTML asal kami. Kod di sana kelihatan seperti ini:

Oleh itu, kami akan mula mengubah kod fail PHP untuk menjadikannya serupa dengan kod HTML kami. Kami hanya akan menggunakan tag anchor di sini untuk membungkus ikon cart, dan selepas itu kami akan menunjukkan kandungan minicart. Oleh itu kod kami akan kelihatan seperti ini:

Di sini kita telah menggantikan pembungkusan paling luar dari troli teratas, tetapi sekarang kita perlu mengedit pembungkus seksyen drop-down. Seperti yang telah kita lihat, pembalut itu datang dari frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Mari semak kod semasa fail ini:

Apabila kita membandingkannya dengan template HTML kita, terdapat beberapa perkara yang perlu kita lakukan. Pertama sekali, di dalam div minicart-wrapper, kami akan mula melaksanakan ul kami, dan untuk setiap item kami akan melaraskan di bawah tag li. Pada akhirnya, kami akan menunjukkan jumlah troli, atau menunjukkan bahawa tiada item dalam troli. Kod akhir kami untuk fail ini akan kelihatan seperti ini:

Sekarang bahagian terakhir yang ditinggalkan adalah menggayakan item senarai troli itu sendiri. Seperti yang kita sudah tahu, fail yang bertanggungjawab untuk bahagian itu ialah: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Kod semasa fail ini kelihatan agak panjang dan sukar difahami, tetapi jangan terintimidasi. Kami tidak perlu mengedit semua ini, kerana bahagian utama kod fail hanya menghitung harga yang tepat, dan pilihan produk lain. Sekali lagi, kami akan menyemak kod HTML kami, meletakkannya dalam fail ini, dan mula menggantikan teks statik dengan nilai dinamik. Ini adalah kod untuk setiap item kereta api dalam HTML kami:

Kami akan menggantikan tag img dengan yang berikut:

Seterusnya, kami akan menggantikan nama dengan kod dinamik:

Untuk memaparkan pilihan produk, kami akan menggunakan kod dinamik ini:

Kemudian kami akan menentukan dan menunjukkan kuantiti menggunakan kod ini:

Untuk pengiraan harga, kami akan memasukkan kod ini di tempat harga statik:

Dan sebagai langkah terakhir, kami akan menggantikan href untuk menghapus URL dengan yang berikut:

Saya telah menemui semua kod ini dari default.phtml sebenar. Anda tidak perlu memikirkan semua logik dan kod anda sendiri, tetapi jika anda melihat dengan teliti anda dapat menemukannya dalam fail yang anda cuba ubah.

Oleh itu, kod akhir file default.phtml kami kelihatan seperti ini:

Sekarang jika anda menyimpan semua fail ini, dan muat semula laman utama, anda harus melihat sesuatu seperti ini:

Top Cart Fixed

Kami mempunyai beberapa masalah dengan gaya, tetapi rendering HTML cukup dekat dengan reka bentuk HTML yang diperlukan. Sekarang bahawa kami telah melengkapkan bahagian header atas, seterusnya adalah bahagian logo. Untungnya tiada apa yang perlu dilakukan di sana kecuali bahagian gaya (untuk menjadikan pusat logo sejajar) yang akan kami lakukan dalam artikel gaya. Item menu kami juga kelihatan hampir dengan apa yang kami harapkan, jadi kami hanya perlu mengubah suai bar carian, dan kemudian slider utama.

Untuk mengubah suai bar carian kami, mari kita menghidupkan petunjuk templat, dan lihat bagian mana yang bertanggungjawab untuk membuat kod ini: frontend/rwd/default/template/catalogsearch/form.mini.phtml.

Pada masa ini fail ini kelihatan seperti ini:

Oleh itu, kami akan menggunakan div luar HTML, dan menggantikan kandungan dalaman dengan kandungan dinamik. Fail form.mini.phtml kami akan kelihatan seperti ini:

Di bahagian terakhir artikel ini, kami akan mengedit slider utama. Untuk itu, kami akan mencipta blok statik yang baru, dengan pergi ke CMS> Blok Statik> Tambah Blok Baru. Kami akan namakan 'Slider Homepage' Blok ini, dan kami akan memasukkan Pengenal sebagai 'slider rumah'—itulah kod yang akan dapat mencari blok ini.

Creating Homepage Slider Static Block

Kini kami akan memasukkan kod slider dari HTML kami.

Perhatikan bahawa kami telah menggantikan sumber imej berbanding dengan direktori kulit menggunakan tag skin_url seperti ini:

Kini kami akan menambah baris ini dalam fail header.phtml yang kami buat dalam artikel terakhir, tepat di atas baris terakhir <?php echo $this>getChildHtml ('topContainer'); ?>.

Langkah terakhir adalah untuk membuang gelangsar semasa. Untuk melakukan itu, pergi ke CMS-Pages> Pulau Madison, dan dari bahagian Kandungan, alih keluar semua kod ke permulaan bahagian gaya.

Removing previous Home Slider

Simpan segala-galanya dan muat semula halaman rumah, dan sekarang anda harus melihatnya semua datang dengan sangat baik. Sesetengah gaya tidak aktif, tetapi kami akan berurusan dengan tutorial gaya yang berasingan. Buat masa ini kita hanya perlu menjaga bahagian kandungan halaman rumah, di mana kita akan menunjukkan karusel produk terkini, dan kemudian kita akan menyesuaikan footer. Kami akan melakukan semua ini dalam tutorial seterusnya, jadi tunggu saja!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.