Loading..

Cấu trúc Theme 0 0

Last updated on Mar 31, 2019 15:17 in cho Người bán » Chủ đề
Posted BySupport Admin

Cấu trúc Theme (chủ đề)

Mỗi chủ đề Trendzy Storefront bao gồm layout, template, assets và cài đặt cụ thể của theme. Bạn có thể thêm, chỉnh sửa và xóa các tệp này bằng Trình chỉnh sửa chủ đề. Lưu ý: Để tùy chỉnh một theme, bạn phải thiết lập miền tùy chỉnh của riêng mình cho Trendzy Storefront. Nếu bạn đang sử dụng tên miền phụ Trendzy.vn, bạn vẫn có thể chọn từ lựa chọn các chủ đề đẹp của chúng tôi.


Lưu ý các từ chuyên môn sẽ được giữ nguyên ngôn ngữ gốc để giúp các lập trình viên dễ thao tác khi phát triển:

  • theme - chủ đề
  • layout - bố cục
  • asset - tài nguyên



Layout

Layout là một tệp HTML xác định cấu trúc của mỗi trang. Tất cả các mẫu được hiển thị trong Layout, do đó, nó phải bao gồm các yếu tố được lặp lại trong mỗi trang, chẳng hạn như tiêu đề, chân trang và điều hướng trang web.

You must include two variables in your layout file.

  • {{ header_content }} must be placed inside your tag. This is where Fancy places all the scripts and tags necessary for Fancy Storefront to function properly.
  • {{ main_content }} must be placed inside your tag. This is where your individual template is rendered.
  • Every theme should include two layout files:

  • theme.html is the default layout file
  • mobile/theme.html is the layout file used for mobile devices
  • Templates

    Template là các tệp HTML, mỗi tệp phục vụ một trang cụ thể trong Cửa hàng Trendzy của bạn. Chúng sẽ được hiển thị trong tập tin Layout của bạn.

    index.html

    Đây là trang chủ của Cửa hàng của bạn. Bạn có thể thêm hình ảnh bìa và khẩu hiệu, và hiển thị các sản phẩm và bộ sưu tập nổi bật của bạn.

    shop.html

    Mẫu này được sử dụng để hiển thị danh sách các sản phẩm của bạn. http://yourstore.com/shop sẽ được hiển thị trong mẫu này.

    By default, this page lists your 20 most recently added items, but you can filter them by adding query strings to the URL:

    Theo mặc định, danh sách các trang này hiển thị 20 sản phẩm bạn vừa thêm vào gần đây, nhưng bạn có thể lọc chúng bằng cách thêm các "query strings' đến URL như bên dưới

  • page=N page number if you have more than 20 items.
  • p=MIN-MAX filters by price range. i.e. p=10-100
  • c=COLOR filters by color
  • categories=CATEGORY filters by category
  • sort_by_price=[asc,desc] sorts by price
  • q=KEYWORD searches by a keyword
  • Bạn có thể truy cập các mục của bạn với biến things và truy cập các tham số với biến params 

    Search Results for "{{params.q}}"class="hljs-title" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; list-style: none; quotes: none; outline: none;"h2/span>
    {% for t in things %}
    
    
    {{t.name}} - {{t.sale.price}}
    {% endfor %}.

    product.html

    Mẫu này hiển thị trang chi tiết sản phẩm của bạn trên http://yourstore.com/shop/[thing_id]
    thing variable chứa đựng thông tin id của sản phẩm.

    collections.html

    Mẫy này hiển thị các bộ sưu tập sản phẩm của bạn. http://yourstore.com/collections sử dụng mẫu template này.

    Bạn có thể tạo và chỉnh sửa bộ sưu tập của mình bằng Bảng điều khiển Merchant. Bạn có thể đặt tên cho bộ sưu tập của mình, tải lên hình ảnh hiển thị và thêm sản phẩm.

    collection.html

    Mẫu này hiển thị chi tiết các sản phẩm trong bộ sưu tập. http://yourstore.com/collection/[collection_id] sử dụng mẫu này.

    cart.html

    Mẫu này hiển thị trang Giỏ hàng của khách hàng của bạn tại http://yourstore.com/cart

    about.html

    Mẫu này hiển thị trang thông tin về cửa hàng của bạn tại http://yourstore.com/about.

    policies.html

    Mẫu này hiển thị trang chính sách về cửa hàng của bạn tại http://yourstore.com/policies.

    contact.html

    Mẫu này hiển thị trang liên hệ về cửa hàng của bạn tại http://yourstore.com/contactTrendzy xử lý Javascript cần thiết để xử lý tin nhắn của người dùng và gửi email cho bạn, vì vậy tất cả những gì bạn cần làm là thiết lập biểu mẫu HTML. Xem contact.html trên một mẫu mặc định bất kỳ của Trendzy và js/contact.js để biết chi tiết.

    Custom Page

    Ngoài các mẫu được mô tả ở trên, bạn có thể thêm bất kỳ trang bổ sung nào bạn yêu cầu. Ví dụ: bạn có thể tạo các trang khác để giới thiệu thương hiệu của mình hoặc bạn có thể tạo một trang cho cửa sổ bật lên. (Pop up)

    Simply create a new template and prefix it with page/. For example, if you add page/mypage.html, it will appear at http://yourstore.com/page/mypage.

    Chỉ cần tạo một mẫu mới và đặt trước nó tiền tố page/. Cho ví dụ, nếu bạn thêm page/mypage.html, nó sẽ xuất hiện tại đường dẫn http://yourstore.com/page/mypage.

    Theo mặc định, mẫu trang tùy chỉnh của bạn sẽ được hiển thị bên trong trang layout của bạn. Nhưng nếu bạn thích trang tùy chỉnh của mình là trang HTML độc lập, chỉ cần thêm  vào đầu tệp mẫu của bạn.

    Mobile Pages

    Bạn có thể tạo phiên bản di động của tất cả các mẫu bằng cách thêm tiền tố vào tên mẫu của bạn với mobile/.

    Assets

    Assets bao gồm hình ảnh, CSS, Javascript, và bất cứ tệp nào bạn dùng để cung cấp cho Storefront của bạn. bạn có thể tải chúng lên bằng cách sử dụng Theme Editor.

    Để sử dụng tài nguyên của bạn trong template của bạn, bạn phải sử dụng các bộ lọc sau: asset_urlasset_css, và asset_script. Xem mục Filters để biết chi tiết.

    Đây là một số tài nguyên thông dụng mà chúng tôi cung cấp cho bạn. Để truy cập chúng, sử dụng các bộ lọc sau đây: common_asset_urlcommon_asset_css, va common_asset_script.

    img/blank.gif
    js/contact.js
    js/infiniteshow.js
    js/jquery.js
    js/jquery.touchSwipe.js
    js/jquery-ui.js
    js/overlay.js
    js/popup.js
    js/tabpage.js
    js/underscore.js
    js/uploader.js

    Thiết lập

    Thiết lập cho phép người dùng không có kiến thức về HTML/CSS có thể dễ dàng điều chỉnh gian hàng Storefront của bạn. Mỗi theme có các thiết lập riêng mà bạn có thể truy cập và điều khiển bằng cách sử dụng trang Theme Settings.

    Như nhà phát triển theme, bạn có thể thêm hoặc điều chỉnh các mục xuất hiện trong trang Theme Settings . Trong Theme Editor, click Configure Settings, góc dưới bên trái của màn hình. Mỗi cài đặt có một loại và điều này xác định cách mỗi mục xuất hiện trong trang Theme Settings.

    Trong template của bạn, bạn có thể dùng bất cứ giá trị thiết lập nào bằng cách sự dụng biếnusing settings . Xem ví dụ chi tiết bên dưới:

    {{settings.page_title}}class="hljs-title" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; list-style: none; quotes: none; outline: none;"title/span>
    
    {% for c in settings.categories%}
    {{c.name}}class="hljs-title" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; list-style: none; quotes: none; outline: none;"a/span>
    {% endfor %}

    Nếu bạn hoặc nhóm của bạn cảm thấy thoải mái với HTML, có thể không cần thiết để định cấu hình Theme Settings

    Tuy nhiên, có một cài đặt đặc biệt bạn có thể cần. Cài đặt items_per_page xác định số lượng sản phẩm được hiển thị trên mỗi trang trong các trang danh sách sản phẩm của bạn.

    ** The time is base on America/New_York timezone