Theme trong Magento CMS

1, Theme là gì?

• Khái niệm

Theme là sự kết hợp của các tệp tin layout, template, locale và skins) dùng để tạo ra những trải nghiệm trực quan của các cửa hàng. Theme trong magento được xây dựng với việc có thể sử dụng nhiều theme cùng một lúc.

• Các loại theme Trong Magento Theme được phân chia theo hai loại chính:
  • Default theme: Mỗi một interface đều có một theme mặc định đi kèm được gọi là default theme. Khi chúng ta chỉ định một interface lên trên các store, ứng dùng sẽ tự động tìm theo theme mặc định và tài nó vào font-end. Để tuỳ chỉnh interface của các store, chúng ta có thể thay đổi theme bằng cách tạo ra một theme tuỳ chỉnh và chạy song song với theme mặc định.
  • Non-default theme: Một theme non-default có thể chứa nhiều hay ít theme tuỳ theo yêu cầu của chúng ta. Theme này được sử dụng khi chúng ta cần thay đổi interface của các cửa hàng theo các sự kiện tạm thời mà không cần tạo ra một theme default hoàn toàn mới. Với việc sử dụng theme non-default chúng ta có thể thay đổi giao diện các của hàng một cách dễ dàng khi chỉ cần một số hình ảnh và tuỳ chỉnh một chút CSS. Trong một theme có thể chứa các thành phần sau:

• Layout: nằm trong thư mục app/design/frontend/your_interface/your_theme/layout/ Đây là những file XML cơ bản để xác định cấu trúc khối cho các trang khác nhau cũng như kiểm soát thông tin META và encoding của trang.
• Templates: nằm trong thư mục app/design/frontend/your_interface/your_theme/template / Đây là những tập tin có chứa PHTML (X) HTML và đánh dấu thẻ PHP cần thiết để tạo ra logic trình bày trực quan.
• Locale: Nằm trong thư mục app/design/frontend/your_interface/your_theme/locale Đây là những file văn bản được tạo trên một chuẩn cho mỗi loại ngôn ngữ có chứa các bản dịch dễ dàng sao chép cho các store.
• Skins: skin/frontend/your_interface/your_theme/ Lưu các files Javascript, CSS và hình ảnh cho interface.

• Tác dụng của theme magento
  • Tùy chỉnh hiệu suất tối đa: Với magento theme, chúng ta có thể cập nhật khung nhìn của các store theo thể loại và cấp độ của các sản phẩm một cách dễ dàng bằng cách cung cấp một các tùy chỉnh trình bày sản phẩm trên cơ sở cho mỗi sản phẩm và mỗi thể loại.
  • Nhiều theme: Magento cho phép chúng ta sử dụng nhiều theme một lúc, giúp chúng ta có thể chuyển đổi qua lại giữa theme mặc định và các theme dành cho sự kiện, đặc biệt chỉ với vài dòng lệnh
  • Quy trình làm việc liên tục: Với việc magento được lập trình theo hướng đối tượng, các module có thể được truy cập trực tiếp thông qua các template từ bất kì template nào và magento hướng theo chức năng mở chúng ta sẽ không bao giờ phải phụ thuộc vào một lập trình để hoàn thành các nhiệm vụ đơn giản nhất.được
  • Giảm thời gian sửa lỗi: Với một designer khi thiết kế một theme đều cần rất nhiều thời gian để kiếm soát lỗi và đóng gói, magento theme được thiết kế theo từng module sẽ giúp chúng ta có thể hoàn thành các công việc đó một cách nhanh chóng nhất.

2, Các bước tạo theme trong magento

Trong magento, khi tạo theme cần phải căn cứ theo mục định tạo theme là gì để tạo theme cho phù hợp.

• Tạo theme default mới: Để tạo 1 theme default mới thì ta cần copy theme default sẵn có để tạo ra theme mới. Tạo thêm một đường dẫn app/design/frontend/default/default/name_interface/name_new_theme. Và làm tương tự với skin/frontend/default/default.

• Tạo theme non-default: Khi tạo theme non-default mới chúng ta chỉ cần thay đổi đường dẫn một số file cụ thể và do đó phải sao chép các file đó như là khởi điểm của theme mới. Khi chỉnh sửa các thông tin, chúng ta phải đảm bảo phù hợp với cấu trúc và quy tắc của Magento. như tất cả các theme default đều bao gồm file template ‘home.phtml’ từ module catalog bên trong thư mục app/design/frontend/name_your_interface/name_your_non_default_theme cần phải tạo thêm ‘template/catalog’ để lưu file template.Khi mở theo đường dẫn của một theme default bạn sẽ biết được cấu trúc của các đường dẫn như thế nào, và theo đó để bảo đảm là theme mới sẽ khởi động thành công. Cấu trúc thư mục khi tạo theme trong hệ thống:

• “App/design” : Lưu các file templates, layout, locale...

• “Skin” : Lưu các file định dạng theme—CSS, images... Đầu tiền chúng ta tạo thme theo cấu trúc thư mục sau.

    app
      design
        frontend
          tên package mới
          Tên của theme mới muốn tao
        layout
        template
        locale

skin

    frontend
      tên package mới (package)
      Tên của theme mới muốn tao
        css
        images
        js

Tạo các file mới:

/app/design/frontend/new_package_name/new_theme_name/layout/local.xml
/skin/frontend/new_package_name/new_theme_name/css/custom.css
/skin/frontend/new_package_name/new_theme_name/js/custom_js.js

Sửa các thông tin trong file local.xml, include các file css and js

    <?xml version="1.0" encoding="UTF-8"?>
    <layout>
      <default>
       
        <reference name="head">
          <action method="addCss"><stylesheet>css/custom.css</stylesheet></action>
          <action method="addItem"><type>skin_js</type><name>js/custom_js.js</name></action>
        </reference>
      </default>
    </layout>

Các tập tin Javascript cũng có thể được thêm vào theme bằng cách khai báo trong local.xml: Một theme được tạo cần phải có những đặc điểm sau đây:

• Có một file quản lý layout duy nhất, đặt tên local.xml, nơi mà tất cả các layout có thê cập nhât.
• Không có bất kì layout nào có tên giống với layout trong phần base.
• không có bất kì file css có tên giống file css trong skin default.
• Không có file template .phtml, ngoại trừ những file hỗ trợ sửa theme mới .

• Cập nhật theme mới trên website Sau khi tạo xong khung cho theme mới, tiếp theo chúng ta cần gán nó lên trên website để kiểm tra theme đã chạy tốt hay chưa. Vào trang quản trị admin cửa magento www.mydomain.com/admin truy cập theo thứ tự System -> Configuration -> Design trong phần quản lý package, nhập tên của package chứa theme vừa tạo. trong phần quản lý theme, nhập tên của theme chúng ta vừa tạo. Screenshot-from-2014-03-31-092203 Cuối cùng là ấn save config và khởi động lại trang.