Magento Go Design Guide: Change Log

Thảo luận trong 'Quản lý sản phẩm, nhóm sản phẩm trong magento' bắt đầu bởi Thái Hòa, 2 Tháng ba 2013.

  1. Thái Hòa

    Thái Hòa Well-Known Member

    ver 1.2.0 01-18-2012 Initial release

    Bài viết khác cùng chuyên mục:

    baokhanh482 thích bài này.
  2. Thái Hòa

    Thái Hòa Well-Known Member

  3. Thái Hòa

    Thái Hòa Well-Known Member

    Part I: Getting Started

    Designing Your Store

    "Thiết kế là những gì bạn làm
    khi bạn không [nhưng] biết những gì bạn đang làm ".


    George Stiny, Giáo sư Kiến trúc,
    Viện Công nghệ Massachusetts

    Hướng dẫn này được viết cho các nhà thiết kế giàu kinh nghiệm và các nhà phát triển frontend, cũng như cho các thương gia với một mắt cho thiết kế. Nhiệm vụ của chúng tôi là để giải thích các quy tắc đường, hiển thị cho bạn nơi mà mọi thứ được lưu giữ, và làm thế nào để có được những điều thực hiện. Một trong những thách thức lớn nhất đối với một số - thậm chí đối với những người đã thiết kế website cho nhiều năm-là một thực tế rằng không có trang HTML tương ứng với bất kỳ trang nào trong một cửa hàng Go Magento. Đó là bởi vì Magento Go là một môi trường hướng đối tượng, và mỗi trang được lắp ráp từ các thành phần riêng biệt. Đây cũng là lý do tại sao thiết kế rất nhiều tình yêu Magento, bởi vì một khi bạn hiểu những điều cơ bản, bạn có thể làm chỉ là về bất cứ điều gì có thể tưởng tượng.
    Cách tốt nhất để tìm hiểu là để nhảy vào và thử nghiệm với những ý tưởng của bạn. Như xảy ra thường xuyên khi bạn không hoàn toàn biết những gì bạn đang làm một số trong những ý tưởng tốt nhất tìm cách của họ lên hàng đầu. Theo như các thiết kế của cửa hàng của bạn là có liên quan, bạn là chuyên gia trong bộ phận đó, và chúng tôi sẽ để lại đó một phần tùy thuộc vào bạn. Vì vậy, nhảy vào, cảm thấy tự do để thử nghiệm, và xem những gì bạn có thể làm!
    Nửa đầu của hướng dẫn này có một sự nhấn mạnh vào cách bố trí trang, và làm việc với các khối nội dung và các ứng dụng lối vào . Các địa chỉ nửa cuối những gì có thể được coi là các khía cạnh của thiết kế web phổ biến hơn, bao gồm cả làm việc với các trang theo tầng (CSS) và thực hiện các tương tác JavaScript.Bởi thời gian bạn làm việc theo cách của bạn thông qua tài liệu hướng dẫn này, bạn sẽ được sẵn sàng để đưa "how to" sang một bên và tập trung năng lượng của bạn vào việc tạo ra sự chú ý thu giữ và thiết kế cho các cửa hàng trực tuyến cho mọi lứa.
    baokhanh482 thích bài này.
  4. Thái Hòa

    Thái Hòa Well-Known Member

    Design Tools
    Magento Go cửa hàng của bạn bao gồm một bộ công cụ cho các nhà phát triển và nhà thiết kế lối vào, có hoặc không có kinh nghiệm lập trình.

    Theme Editor
    Theme Editor cho phép bạn tùy chỉnh các phong cách được sử dụng để định dạng các mục chính của trang, mà không cần chỉnh sửa mã CSS.

    1.png

    Theme Text Editor
    Text Editor Theme cho phép bạn thay đổi các thuật ngữ được sử dụng trong suốt các giao diện của cửa hàng của bạn.

    2.png

    Layout Editor
    Layout Editor cho phép bạn thêm các cấu hình trước Magento Go khối các cột bên trái và bên phải của hầu hết các trang trong cửa hàng của bạn.
    Bạn cũng có thể sắp xếp lại, khóa tại chỗ, và loại bỏ các khối từ xem.

    3.png

    Design Settings Editor
    Cài đặt Thiết kế biên tập cung cấp một giao diện dễ sử dụng để bạn có thể thay đổi CSS phong cách phổ biến nhất mà không cần nhập bất kỳ mã.

    4.png

    CSS Editor
    Trình biên tập CSS cung cấp quyền truy cập vào các tấm phong cách CSS được sử dụng bởi các chủ đề hiện tại.
    Bạn có thể tải chúng trở nên quen thuộc với phong cách, và nhập các thông tin cập nhật của riêng bạn để ghi đè lên phong cách hiện.

    5.png

    Java Script Editor
    Java Script Editor cho phép bạn thực hiện mã tùy chỉnh, các kịch bản lưu trữ trên máy chủ, và các thư viện như TypeKit, JQuery, và MooTools.

    7.png

    Catalog Images
    Danh mục hình ảnh cho phép bạn kiểm soát các kích thước của hình ảnh được sử dụng trong suốt các cửa hàng và cửa hàng.

    6.png
    baokhanh482 thích bài này.
  5. Thái Hòa

    Thái Hòa Well-Known Member

    Page Structure and Layout

    Tổng quan

    Mỗi trang của các cửa hàng của bạn Magento Go được chia thành các phần riêng biệt, hoặc các khối cấu trúc , xác định phần đầu, chân, và các khu vực nội dung của trang. Tùy thuộc vào cách bố trí áp dụng, khu vực nội dung có thể bao gồm một, hai, ba cột, hoặc nhiều hơn. Bạn có thể nghĩ của bố trí như là "kế hoạch sàn" của mỗi trang.
    1.png
    Structural Blocks
    baokhanh482 thích bài này.
  6. Thái Hòa

    Thái Hòa Well-Known Member

    Understanding Page Column Layout
    Mỗi trang của cửa hàng của bạn có một tiêu đề và chân trang cố định, với một khu vực nội dung mà được chia thành một, hai, hoặc ba cột.
    Cách thức mà các bố cục trang được sử dụng trong cửa hàng của bạn được xác định bởi các theme.You có thể áp dụng các bố trí khác nhau cho bất kỳ trang nội dung mà bạn tạo ra, bao gồm cả trang chủ của bạn.

    1 Column
    "1 Column" bố trí có thể được sử dụng để tạo ra một ấn tượnghome page với một hình ảnh lớn hoặc đầu mối.Nó cũng là một lựa chọn tốt cho bất kỳ trang nội dung có một số lượng lớn các văn bản, hoặc sự kết hợp của văn bản, hình ảnh, và video. Một bố trí một cột có thể cung cấp cho sự xuất hiện của nhiều cột nếu văn bản được định dạng thành các cột bằng cách sử dụng HTML và CSS.

    1.png

    2 Columns with Left Bar
    "2 Column with Left Bar" bố trí thường được sử dụng cho các trang web với các menu bên trái. Bạn sẽ tìm thấy cách bố trí này được sử dụng cho các mục và các trang kết quả tìm kiếm có "layered navigation" Đó cũng là một sự lựa chọn tuyệt vời cho các trang cần chuyển hướng hoặc các khối bổ sung hỗ trợ nội dung trên bên trái.

    2.png

    2 Columns with Right Bar
    "2 Column with Left Bar" bố trí là một trong đó là được sử dụng cho các ví dụ trang chủ trong hướng dẫn này, khu vực nội dung chính là đủ lớn cho một hình ảnh hay banner bắt mắt. Cách bố trí này cũng thường được sử dụng cho các trang chi tiết sản phẩm có khối hỗ trợ nội dung trên bên phải.

    3.png

    3 Columns
    "3 Column" bố trí có một cột trung tâm là đủ rộng cho một cột văn bản, với phòng mỗi bên để điều hướng và các khối bổ sung hỗ trợ nội dung.
    Dịch vụ khách hàng trang trong dữ liệu mẫu được dựa vào cách bố trí Cột 3.
    (Bạn sẽ tìm thấy một liên kết đến trang đó trong chân của các cửa hàng của bạn.)

    4.png

    Empty
    "Empty" bố trí có thể được sử dụng để xác định bố trí trang của riêng bạn.
    Ví dụ, bạn có thể sử dụng cách bố trí rỗng để tạo ra một trang 4-column tùy chỉnh.

    5.png
    baokhanh482 thích bài này.
  7. Thái Hòa

    Thái Hòa Well-Known Member

    Page Column Dimensions

    Cột chính của cửa hàng Go Magento của bạn có một chiều rộng cố định 990 pixels, theo quy định của CSS của chủ đề của bạn. Mặc dù phụ thuộc vào độ phân giải màn hình của bạn, có thể là một số không gian trống trên mỗi bên của cột chính, tất cả các hoạt động cho cửa hàng của bạn diễn ra trong khu vực này kèm theo. Khi bạn thêm độ rộng của các cột nội dung, và ném vào thêm một chút, tổng số tới 990 pixel.
    Lưu ý: Mặc dù có thể thay đổi chiều rộng của tất cả các cột trong một bố cục trang, chiều rộng tối đa 990 pixel được coi là tiêu chuẩn bởi vì nó hoạt động tốt với tất cả các trình duyệt máy tính để bàn.

    1.png
    Main Column
    baokhanh482 thích bài này.
  8. Thái Hòa

    Thái Hòa Well-Known Member

    1 Column Layout

    Diện tích nội dung của một "1-Column" bố trí kéo dài toàn bộ chiều rộng của cột chính.
    Cách bố trí này thường được sử dụng cho các trang web mà không đòi hỏi điều hướng, chẳng hạn như một trang đăng nhập, trang splash, video, hoặc quảng cáo toàn trang.

    1.png
    1-Column

    Untitled.png
    baokhanh482 thích bài này.
  9. Thái Hòa

    Thái Hòa Well-Known Member

    2 Columns Left Bar

    Khu vực nội dung của cách bố trí này được chia thành hai cột, và là một hình ảnh phản chiếu của bố trí hai cột khác.
    Trong cách bố trí này, thanh bên trái nổi bên trái, tiếp theo là cột nội dung chính.

    2.png
    2-Columns Left Bar


    Untitled.png
    baokhanh482 thích bài này.
  10. Thái Hòa

    Thái Hòa Well-Known Member

    3 Columns

    Một bố trí 3-cột có hai cột bên trong 230 pixel, và một khu vực nội dung chính của 490 pixel.
    Thanh bên trái và cột nội dung chính được gói lại với nhau, và phao như một đơn vị bên trái.
    Thanh bên phải là 230 điểm ảnh, và trôi nổi bên phải.

    3.png
    3-Columns

    Untitled.png

    Các file đính kèm:

    • 3.png
      3.png
      Kích thước:
      58.6 KB
      Đọc:
      282
    baokhanh482 thích bài này.
  11. Thái Hòa

    Thái Hòa Well-Known Member

    Page Layout and Content Blocks

    Magento Go tổ chức nội dung thành các khối nổi cùng để điền vào các không gian có sẵn, theo bố trí của trang. Nếu bạn thay đổi trang từ một cột hai ba cột bố trí, các khối trong mỗi phần nổi và điều chỉnh để phù hợp với không gian. Cách tiếp cận này chất lỏng, hoặc bố trí chất lỏng , làm cho nó có thể thay đổi cách bố trí mà không cần can thiệp vào nội dung.
    Bởi vì các khối nội dung được phân công đến một phần cụ thể của cách bố trí trang, nếu bạn thay đổi trang từ một cột ba bố trí hai cột, các khối được liên kết với thanh bên không sử dụng biến mất khỏi trang. Và nếu bạn khôi phục lại cách bố trí ba cột, họ xuất hiện lại. Từ quan điểm này, nó không có vấn đề gì loại nội dung trong mỗi khối họ chỉ đơn giản là nổi cùng để lấp đầy không gian.
    Nếu bạn đang thiết kế một hình ảnh cho một khối, điều quan trọng là biết chiều rộng của không gian có sẵn.
    Đương nhiên, một khối được thiết kế cho khu vực nội dung chính của trang có thể là rộng hơn so với một khối được đặt trong một sidebar. Nó thường là bố trí và chiều rộng của cột chứ không phải là khối xác định số tiền của không gian có sẵn. Nếu bạn đang sử dụng để làm việc với các trang cá nhân HTML, bạn sẽ khám phá ra rằng, mô-đun này "xây dựng khối" phương pháp tiếp cận đòi hỏi một cách tư duy khác nhau.
    Magento Go thiết kế và các công cụ bố trí làm cho nó có thể thao tác khối, và thậm chí tạo ra những cái mới mà không cần viết bất kỳ mã. Khối tùy chỉnh có thể được tạo ra cho bất kỳ mục đích nào tưởng tượng được, và được giao cho bất kỳ một phần của bố cục trang.

    1.png
    3-Column Layout with Blocks
    baokhanh482 thích bài này.
  12. Thái Hòa

    Thái Hòa Well-Known Member

    Built-In Blocks
    Magento Go bao gồm một tập hợp các tiêu chuẩn, được xây dựng trong khối mà bạn có thể sử dụng để thêm một loạt các tính năng và chức năng để cửa hàng của bạn. Một số khối được yêu cầu các thành phần của cửa hàng của bạn, trong khi những người khác có thể được kích hoạt hay vô hiệu hóa theo sở thích của bạn. Để tìm hiểu thêm, xin xem: Sử dụng Layout Editor

    .
    PayPal
    Thông báo tới các khách hàng của bạn rằng cửa hàng của bạn chấp nhận thanh toán bằng PayPal.

    1.png

    Compare Products
    Cho phép khách hàng của bạn một cách nhanh chóng so sánh các mặt hàng side-by-side.

    2.png

    Layered Navigation
    Làm cho nó dễ dàng để tìm một sản phẩm dựa trên thể loại, mức giá này, hoặc bất kỳ thuộc tính khác có sẵn.
    Khối có thể được cấu hình để liệt kê các sản phẩm theo thể loại và thuộc tính.

    4.png

    Orders
    Cho phép khách hàng đăng nhập để xem tóm tắt của các đơn đặt hàng của họ.

    5.png

    Orders and Returns
    Khối đơn đặt hàng và trả lại cho phép khách, và khách hàng chưa đăng nhập, để lấy thông tin về một thứ tự cụ thể.

    a.png

    Poll
    Khối Poll hiển thị các cuộc thăm dò, khảo sát, mà bạn tạo ra.

    b.png

    Popular Tags
    Hiển thị một danh sách các thẻ phổ biến nhất, dựa trên số lượng bài nộp.
    "Từ khóa mây" định dạng sử dụng kích thước phông chữ để cho biết sự phổ biến của thẻ.

    c.png

    Recently Compared Products
    Danh sách các sản phẩm mà khách hàng gần đây đã được so sánh.

    d.png

    Recently Viewed Products
    Theo dõi các sản phẩm mà khách hàng gần đây đã xem, để họ có thể nhanh chóng và dễ dàng tìm thấy chúng một lần nữa.

    e.png

    Wishlist
    Hiển thị danh sách mong muốn cá nhân của khách hàng khi họ mua sắm trong khi đăng nhập vào tài khoản của họ.

    f.png
    baokhanh482 thích bài này.
  13. Thái Hòa

    Thái Hòa Well-Known Member

    Using the Layout Editor


    Tổng quan

    Layout Editor cho phép bạn điều khiển màn hình của bất kỳ tiêu chuẩn, khối built-in trong các cột bên trái và bên phải của cửa hàng của bạn. Bạn có thể thêm, sắp xếp lại, khóa tại chỗ, và loại bỏ các khối từ xem. BTV trình bày không có thể được sử dụng trên các trang cột đơn, và bị vô hiệu hóa cho Bảng điều khiển tài khoản khách hàng. Để áp dụng các thay đổi cách bố trí khối Bảng điều khiển khách hàng, xem: "Việc tạo ra một ứng dụng Frontend,"Hướng dẫn Thiết kế Magento Go .
    Lưu ý: Trước khi tung ra BTV trình bày, hãy chắc chắn rằng trình duyệt của bạn được thiết lập để cho phép quảng cáo.
    Để khởi động BTV trình bày:
    1. Từ bảng điều khiển quản trị, chọn Thiết kế> Layout Editor .
    2. Nhấp vào Launch nút.
    1.png
    Launching the Layout Editor

    BTV trình bày sẽ mở ra trong một cửa sổ mới, với mỗi khối có sẵn được nêu trong màu đỏ. Từ BTV trình bày, bạn có thể làm bất cứ điều nào sau đây:
    2.png
    Layout Editor
    baokhanh482 thích bài này.
  14. Thái Hòa

    Thái Hòa Well-Known Member

    Moving a Built-In Block

    Thứ tự của khối built-in trong một cột có thể được thay đổi bằng cách sử dụng Layout Editor để kéo nó từ một địa điểm khác. Tuy nhiên, bạn không thể kéo các khối từ một cột khác.
    To move a built-in block:

    1. Từ Layout Editor, tìm đến trang mà bạn muốn di chuyển các khối.
      Khi Highlight Draggable Blocks hộp kiểm được chọn, mỗi khối được trình bày trong màu đỏ.
    2. Để sắp xếp lại các khối trong cột, chỉ cần kéo một khối từ nơi này đến nơi khác.
    3. Để khóa một khối tại chỗ, nhấp vào biểu tượng padlock ở góc dưới bên phải của khối. Khối này sẽ chuyển thành màu xám để chỉ ra rằng nó đã bị khóa.
    4. Để lưu thay đổi, hãy nhấp vào nút Apply Changes .
    5. Khi được nhắc để làm mới chỉ mục tìm kiếm, chọn Catalog > Search Index, và nhấn vào nút Refresh Index .
    1.png
    Dragging a Block
    baokhanh482 thích bài này.
  15. Thái Hòa

    Thái Hòa Well-Known Member

    Adding a Built-In Block


    Bạn có thể sử dụng Layout Editor để thêm một khối xây dựng trong thanh bên của nhất hai hoặc ba cột trang. Một số khối trở nên có sẵn khi khách hàng đăng nhập vào tài khoản của họ. Bởi vì các lựa chọn có thể khác nhau trang này sang trang và tiện nghi, chủ đề, bạn nên truy cập vào mỗi trang trong cửa hàng của bạn để xem những khối có sẵn.

    1.png
    Layout Editor - Add Block

    To add a built-in block:
    1. From the Layout Editor, điều hướng đến trang web mà bạn muốn đặt khối, và nhấp nút Add Block.
    2. Trong Add Block list, chọn khối bạn muốn thêm vào, và nhấp vào Add nút. Sau đó, nhấn X ở góc trên bên phải để đóng Add Blocklist.
      Một phác thảo của khối xuất hiện trên trang.
    2.png
    Add Block


    3. Để lưu thay đổi, hãy nhấp vào nút Apply Changes .​
    4. Khi được nhắc để làm mới chỉ mục tìm kiếm, chọn Catalog > Search Index, và nhấn vào nút Refresh Index .​
    baokhanh482 thích bài này.
  16. Thái Hòa

    Thái Hòa Well-Known Member

    Removing a Built-In Block

    You can easily remove a built-in block from any page without permanently deleting it.
    To remove a block from the page:
    1. From the Layout Editor, click the orange “X” in the upper-right corner of the block.
    2. When prompted to confirm, click OK.
    3. Click the Apply Changes button to save the changes.
    1.png
    Layout Editor - Remove Block
    baokhanh482 thích bài này.
  17. Thái Hòa

    Thái Hòa Well-Known Member

    Restoring Default Built-In Blocks

    Bạn có thể dễ dàng khôi phục lại các lựa chọn mặc định được xây dựng trong các khối trong suốt cửa hàng Go Magento của bạn.
    To restore the default blocks:
    1. Từ BTV trình bày, hãy nhấp vào nútRestore Defaults
    2. Khi được nhắc nhở để xác nhận, nhấn OK.
    3. Sau khi được khôi phục lại các giá trị mặc ​​định, nhấn vào nút Apply Changes để lưu các thay đổi của bạn.
    1.png
    Layout Editor - Restore Default Blocks
    baokhanh482 thích bài này.
  18. Thái Hòa

    Thái Hòa Well-Known Member

    Positioning Blocks by Reference

    Magento Go được nạp với những nơi được xác định trước nơi bạn có thể đặt nội dung. Mỗi địa điểm đều có một cái tên, hoặc khối tham chiếu xác định vị trí trên trang trong bối cảnh của cách bố trí trang. Trong phần này, bạn sẽ tìm hiểu hai phương pháp khác nhau cho các khối định vị với bản cập nhật bố trí.
    Mã điều khiển bố trí trang và vị trí của các khối nội dung được viết bằng XML. Bạn có thể nhận thấy các tài liệu tham khảo để cập nhật XML Page Layout suốt Admin Panel của cửa hàng của bạn. Mỗi sản phẩm, thể loại, và phần nội dung cho dù đó là một trang, khối, biểu ngữ, hoặc ứng dụng có một phần nơi bạn có thể cập nhật các mã XML điều khiển vị trí của mặt hàng đó. Việc lựa chọn các tài liệu tham khảo khối có sẵn đó là có sẵn khác nhau theo từng loại trang, và cho dù khách hàng được đăng nhập, hoặc truy cập vào cửa hàng của bạn như là một khách.
    Lợi thế bằng cách sử dụng một ứng dụng lối vào là bạn có thể chọn các tùy chọn từ một danh sách, hơn là cố gắng để nhớ cú pháp cho tất cả các kết hợp có thể. Ứng dụng lối vào làm cho nó dễ dàng để xác định vị trí một khối tại một nơi cụ thể trên trang web, và thậm chí cả appply thay đổi bố trí để một sản phẩm cụ thể hoặc thể loại
    baokhanh482 thích bài này.
  19. Thái Hòa

    Thái Hòa Well-Known Member

    Product Detail Block References

    Minh hoạ này cho thấy vị trí của tài liệu tham khảo lối vào mỗi khối ứng dụng trên trang Chi tiết sản phẩm, theo chủ đề này. Để tìm hiểu thêm, hãy xem: Khối Giao diện chuẩn

    1.png
    Product Detail Block References
    1. Page Top
    2. Store Language
    3. Navigation Bar
    4. Page Header
    5. Breadcrumbs
    6. Alert URL
    7. Product Extra Info
    8. Product View Extra Hint
    9. Right Column
    10. Info Column Options Wrapper
    11. Bottom Block Options Wrapper
    12. Tags List Before
    13. Product Tags
    14. Main Content
    15. Page Footer Before
    16. Page Footer Bottom
    17. Page Bottom
    baokhanh482 thích bài này.
  20. Thái Hòa

    Thái Hòa Well-Known Member

    Placing a Block with a Frontend App

    Ứng dụng lối vào cho bạn vị trí CMS khối mà không cần viết bất kỳ mã, trên hầu hết các trang của các cửa hàng của bạn. Bạn có thể sử dụng quá trình này để đặt một khối vào một thể loại cụ thể hoặc trang sản phẩm, và trên các trang khác chung chung. Bạn cũng có thể sử dụng một ứng dụng lối vào để đặt một khối trên tất cả các trang CMS như một nhóm, hoặc cụ thể trên trang chủ hoặc CMS trang No-Route. Tuy nhiên, để đặt một khối trên bất kỳ trang CMS khác, bạn bởi phải vào cập nhật bố trí như các đoạn mã XML.
    Để đặt một khối:
    1. Từ phần Admin Panel, chọn CMS> Apps Frontend .​
    2. Nhấp Add New Frontend App Instance
    3. Trong phần Settings, thiết lập Type list to “CMS Static Block", nhấp vào nút Continue .​
    1.png
    Frontend App Type

    4. Trong phần Frontend Properties, làm như sau:​

    a. Nhập một mô tả Frontend App Instance Title. Tiêu đề là để tham khảo nội bộ và không hiển thị cho khách hàng trong cửa hàng của bạn.​

    b. (Tùy chọn) Nhập một số để xác định thứ tự của khối này liên quan đến các khối khác trong cùng một cột. Vị trí các khối ở phía trên cùng của cột, nhập "0".​

    c. Thiết lập Assign to Store Views để xem nơi bạn muốn khối để được nhìn thấy.​

    5. Trong phần Giao diện cập nhật, nhấp vào nút Add Layout Update. Sau đó, làm như sau:​

    a. Display On, chọn trang mà bạn muốn chặn xuất hiện.​

    b. Đặt khối tham chiếu đến vị trí trên trang mà bạn muốn khối xuất hiện.​

    2.png
    Layout Updates

    6. Trong bảng điều khiển bên trái, chọn Frontend App Options. Sau đó, làm như sau:
    a. Nhấp Select Block
    b. Trong danh sách, bấm vào để chọn khối bạn muốn đặt.​
    3.png
    Select Block


    7. Nhấp vào nút Save để lưu các thay đổi của bạn.
    baokhanh482 thích bài này.

Chia sẻ trang này