Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Thiết kế web giá rẻ
    • Thiết kế website WordPress
    • Hosting Miễn Phí 100GB
    • Tích hợp thanh toán MoMo, ViettelPay, Vietcombank, MB..
    • Tối ưu Google PageSpeed
    • Sửa lỗi nâng cấp website
    • Viết plugin WordPress
    • Code Tool theo yêu cầu
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Prestashop » Prestashop 1.6 – Hiển thị features cho trang sản phẩm

Prestashop 1.6 – Hiển thị features cho trang sản phẩm

Thứ Hai, 02/02/2015 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bạn đã biết cách thêm features cho danh sách sản phẩm, và đây là thời gian để bạn thực hiện việc hiển thị features cho Prestashop product trên từng trang sản phẩm chi tiết. Trong hướng dẫn lần trước, chúng ta đã học được cách thêm features cho danh sách product trong Prestashop 1.6.
Tuy nhiên, nếu bạn muốn thiết kế tận dụng và tiết kiệm khoảng trống, tận dụng hết các tính năng mà Prestashop 1.6 mang lại, bạn sẽ muốn thêm chúng vào quickview box. Thao tác khá đơn giản chỉ cần sửa duy nhất một file code.

Hiểu về Quick view box trong Prestashop 1.6

Chính xác Quick View box là gì? nó chứa dữ liệu gì và sử dụng như thế nào? như bao dữ liệu khác, nó truy xuất file product.tpl bằng cách gửi ajax tới ProductController và trả về một phần thông tin của trang thay vì toàn bộ.
Nó làm như thế nào? Prestashop sử dụng biến {$content_only} trong Smarty, điều này cho Prestashop biết nếu chúng ta muốn hiển thị nội dung bên trong lightbox hoặc có được nó với phương thức ajax. Bởi vậy, để thêm nội dung vào Quick View, bạn chỉ cần sử dụng lệnh điều kiện trong file product.tpl là đủ.

Sửa product.tpl

Hãy lưu ý chúng ta luôn không nên sửa trực tiếp vào file chính, không phải là cách luyện tập tốt nhưng nhân bản template và sửa trên nó là cách hay đấy. Nếu gặp lỗi bạn sẽ khôi phục dễ dàng. Sau khi copy bạn sửa file product.tpl.
Trên trang sản phẩm, dữ liệu này thuộc về product bạn có thể tùy ý chèn ở bất kỳ đâu trên template và tôi chọn một vị trí xen giữa số lượng và các nút chia sẻ mạng xã hội , dữ liệu features sẽ được thêm giống như dưới đây:
quickview_features_spot

Để chèn vị trí đó, bạn tìm dòng sau ở trong file product.tpl

{if isset($HOOK_EXTRA_RIGHT) && $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}

Và Chèn đoạn code sau trước dòng trên:

{if $content_only}
    {if isset($features) && $features}
        <!-- Data sheet -->
        <section class="page-product-box">
            <p><strong>{l s='Features'}</strong></p>
     
                {foreach from=$features item=feature}
                <div class="{cycle values="odd,even"}">
                    {if isset($feature.value)}              
                        {$feature.name|escape:'html':'UTF-8'} :
                        {$feature.value|escape:'html':'UTF-8'}
                    {/if}
                </div>
                {/foreach}
 
        </section>
        <!--end Data sheet -->
    {/if}
{/if}

Giải thích:
Như mình có trước đó, chúng ta chỉ hiển thị nội dung nếu prestashop sư lý template ở chế độ content_only. Và khi đó danh sách những features sẽ thêm và hiển thị thông thường vào trang sản phẩm. Chúng ta sẽ xác nhận sự tồn tại của features thông qua biến $features, thêm code tạo box trong prestashop bao quanh dữ liệu features. Bạn có thể tìm thấy nhiều cách dùng này trong product.tpl (nên bắt chiếc)

{cycle values=”odd,even”} cho phép phân biệt các dòng chẵn lẻ với mỗi lần gọi dòng lệnh sẽ trả về tên class tương ứng. Mặc định Prestashop style các dòng cho bạn theo dõi hoặc sử dụng thêm CSS để hiển thị khác nếu muốn.
Kết quả bạn nhận được như sau:
features_quickview

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Chuyên mục: Prestashop Tìm kiếm: product features

Tôi giúp gì cho bạn?

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 – 0868 292 303 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • GitHub
  • YouTube

SẢN PHẨM

  • Plugin Thanh Toán Quét Mã QR Code Tự Động
  • WP2Speed – Tối ưu Google Speed
  • 23WebHost – Hosting Miễn Phí 100GB

LIÊN KẾT

  • Có nên thuê thiết kế website giá rẻ?
  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2023 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.