Powered by Blogger.
/ / / Cùng học Magento - Phần 2

Cùng học Magento - Phần 2

,
Quy ước
  • Trong loạt bài này, chúng ta sử dụng mgtraining.t làm địa chỉ trang web, bạn có thể thay bằng địa chỉ khác nếu thích.
  • “Training” được coi như solution hoặc packed.
  • “Foot” được coi như module hoặc project.
Cài đặt
1. Cài đặt apache, mysql, php:
sudo apt-get install lamp-server^
2. Download PHP MyAdmin tại http://goo.gl/5Du8H (không cần thiết lắm), copy và paste vào “/var/www”.
3. Download Magento tại http://goo.gl/io3yT hoặc checkout từ svn tại http://goo.gl/Rppd1 .
4. Giải nén (hoặc export từ svn) → đặt lại tên thư mục là mgresearch, copy vào “/var/www”
5. Mở tập tin “/etc/hosts”, thêm vào “127.0.0.1 mgresearch.t”
6. Tạo tập tin “/etc/apache2/sites-available/mgresearch.t” với nội dung
<VirtualHost *:80>
    ServerName mgresearch.t
    DocumentRoot /var/www/mgresearch
    ErrorLog /var/www/logs/mgresearch-error.log
    CustomLog /var/www/logs/mgresearch-access.log combined
    <Directory "/var/www/mgresearch">
        AllowOverride All
        Allow from All
    </Directory>
</VirtualHost>
7. Chạy các lệnh sau:
sudo a2ensite mgresearch.t
sudo /etc/init.d/apache2 reload
8. Download sample data tại http://goo.gl/io3yT Import database (nhớ thiết lập max allowed packed lớn tý nhé) và copy, paste tương ứng thư mục media.
mysql --max_allowed_packet=512M -u root -p
create database mgresearch;
use mgresearch;
source /path/to/sql_file.sql;
exit;
9. Mở trình duyệt với địa chỉ “http://mgtraining.t”, cài từng bước theo hướng dẫn của trang cài đặt.
10. Nếu có lỗi, kiểm tra lỗi tại “/var/www/mgresearch/var/report”, tìm hướng khắc phục, xóa “/var/www/mgresearch/var/*” và “/var/www/mgresearch/app/etc/local.xml” sau đó cài đặt lại.
1.1  Yêu cầu
  • Tích hợp các tập tin css, image và javascript.
  • Tạo static html block dùng php.
1.2  Các bước thực hiện
  1. Thiết lập theme của chúng ta làm theme mặc định
  2. Tích hợp css, image và javascript
  3. Đem nội dung từ tập tin html vào Magento
  4. Tạo static html block dùng php
1.2.1  Thiết lập theme của chúng ta làm theme mặc định
  • Tạo hai thư mục sau:
    • skin/frontend/training/foot
    • app/design/frontend/training/foot/layout
  • Vào back-end → System → Configuration → Design.
  • Click “Package” và “Themes”.
  • Thay đổi giá trị ở “Current Package Name” thành “training”, và “Default” thành “foot”.
  • Click “Save config”.
Ghi chú:
  • Khi lập trình, hãy disable tất cả cache tại System → Cache Management
1.2.2  Tích hợp css, image và javascript
  • Sao chép tất cả css, image, javascript, font, v.v... vào thư mục “skin/frontend/training/foot”.
  • Sao chép “page.xml” từ “app/design/frontend/base/default/layout” qua “app/design/frontend/training/foot/layout”.
  • Mở tập tin “app/design/frontend/training/foot/layout/page.xml”, tìm [element = “block”,  attribute “type” = “page/html_head”], thêm vào đường dẫn css và js path với cú pháp:
  • CSS <action method="addCss"><stylesheet>your_css_file</stylesheet></action>
Apply CSS cho IE (lt - less than, gt – greater than, lte – less than or equal, gte – greater than or equal)
 <action method="addItem">
    <type>skin_css</type>
    <name>css/styles-ie.css</name>
    <params/>
    <if>lt IE 8</if>
</action>
  • JS <action method="addItem"><type>skin_js</type><name>your_js_file</name></action>
Ghi chú:
  • Chúng ta sẽ dùng đường dẫn tương đối từ thư mục “skin/frontend/training/foot”. Ví dụ: “js/util.js”, “css/screen.css”, v.v...
1.2.3  Đem nội dung từ tập tin html vào Magento
Tạo thư mục sau:
  • app/design/frontend/training/foot/template/page
Các bước thực hiện:
  • Sao chép “2columns-left.phtml” từ “app/design/frontend/base/default/template/page” qua “app/design/frontend/training/foot/template/page”. (Bởi vì chúng ta dùng giao diện 2 cột với left bar).
  • Chỉnh sửa tập tin “2columns-left.phtml”, hãy làm cho nó giống tập tin html.
  • $this->getSkinUrl() sẽ trả về đường dẫn đến theme đang được dùng. Chúng ta sẽ sử dụng nó khi lấy các đường dẫn tĩnh về hình ảnh hay flash.
  • Refresh trang chủ, mọi thứ sẽ hiển thị giống giao diện html.
Ghi chú:
  • Nếu tập tin “2columns-left.phtml” chẳng được dùng tới, thì nhớ chọn “2 columns with left bar” ở CMS → Pages → Homepage → Design → Layout.
1.2.4  Tạo static html block dùng php
Tạo thư mục sau:
  • app/design/frontend/training/foot/template/page/html
Các bước thực hiện:
  • Chia nhỏ file “app/design/frontend/base/default/template/page/2columns-left.phtml” thành nhiều block và đặt trong thư mục html.
  • Với mỗi block, đặt 1 dòng vào “app/design/frontend/training/foot/layout/page.xml”, với cú pháp: <block type="page/html" name="your_block_name" as="your_block_name" template="page/html/your_block_name .phtml" />
  • Chỉnh sửa “app/design/frontend/training/foot/template/page/2columns-left.phtml”, ứng với mỗi block ta gọi <?php echo $this->getChildHtml('your_block_name') ?>
Ghi chú:
  • Chúng ta có thể thay đổi đường dẫn các file trên.
    Blogger Comment
    Facebook Comment