Phân tích và cách tạo Tab, Search Block

[Bryan Lee]

Chào mọi người,

Bấy lâu nay mình tham khảo lượm lặt trong diễn đàn của mình, cũng có trả lời cho một số bạn, nay muốn làm cho mình một trang nhưng không rành, chỉ biết chút chút, quơ quào nên mọi người giúp mình với. Mình có tổng cộng 9 câu hỏi (số đẹp :--) xoay quanh chủ đề này, nhưng hỏi nhiều sợ các bạn không đủ thời gian để giúp nên mấy bạn giúp mình bằng cách hướng dẫn chi tiết từng câu, mỗi bạn hướng dẫn cách làm một câu cũng được, mọi cách làm mình đều rất cảm ơn và trân trọng. Mình không rành/giỏi về lập trình web nhưng mình có niềm tin, say mê và giỏi "vọc" (mày mò đó) ;-)

Mình đang muốn làm trang của mình như thế này (mở file đính kèm), mong các bạn (đặc biệt là anh admin của toanquyenmobile, hoacuocsong, và anhduongmobile) đóng góp hướng dẫn mình cách làm nhé:

1/ Mình muốn tạo mấy cái tab như hình "How make Tab and search" mình khoanh tròn khi đang ở tab nào, thì cái đó màu xanh, không thì màu xám. Có phải cái này là một dạng Horizontal Navigation Bar không? Mình nghe nói vậy. Nhìn hình thì các bạn thấy có phải nó là 2 Categories độc lập đúng không? (Về phần sản phẩm thì Presta cho phép 1 sản phẩm nằm ở nhiều mục được.) Một cái sổ đứng như của presta khi click vào Men Fashion thì toàn bộ sản phẩm và danh mục con trong men fashion được show ra (hình Categories 1), một cái ngang (như hình Categories 2) khi click vào Go traveling thì show toàn bộ sản phẩm được xếp trong danh mục Go traveling ra, và khi mình click vào cái áo cuối cùng bên phải chẳng hạn thì sẽ show chi tiết như hình Product detail 1 và 2. Và không biết nó nằm ở phần Top hay phần Header nhỉ? (Vì thấy danh mục ngang nằm chồng lên hình banner.)

Vậy mình muốn tạo 2 Categories độc lập như vậy được không? Và mình tạo/làm bằng cách nào? Thêm / chỉnh sửa cái gì? Và không biết tạo cái Horizontal Navigation Bar nằm ở phần Top hay phần Header thì tốt hơn nhỉ?

2/ Ở hình "How make Tab and search" phần Header có tiêu đề Find a store cho phép mình click vào để link đến mục đó, mình làm bằng cách nào? Mình muốn đổi lại thành mục "Đường đi tới shop" ấy mà!

3/ Ở hình "How make Tab and search" phần Search người ta có thể search theo keyword, Brand và theo Category thì làm như thế nào vậy? Theo bạn thì nên cho nó nằm ở phần header hay là phần Top dễ làm hơn, mong các bạn hướng dẫn cụ thể nhé.

4/ Tương tự cho câu hỏi 3 nhưng đây là phần Filter như trong hình Categories 1: Filter by (Brand), Sort by (Default/Price descending/Price Ascending/All). Làm sao để có block làm được việc đó như hình?

5/ Như hình Categories 2, mỗi mục ( Go Camping, Go Climbing, Go Traveling, v.v....) có mỗi tấm hình nền đại diện khác nhau (dưới banner quảng cáo VIEW OUR FANTASTIC..... Click Here! là cố định, không thay đổi với mọi danh mục nằm ngang này) Làm sao để làm được như vậy?

Bốn câu hỏi còn lại theo mình nghĩ là rất dễ nhưng mình cũng mò không ra cách làm:
6/ Như hình Product Detail 1, Block Please Select Your Style tương tự như Block Pick a Color của Presta vậy nhưng mình muốn sửa chữ Pick a Color thành Select Your Style thì làm như thế nào?

7/ Ở hình Product Detail 2, Phần Attributes cũng như phần Data sheet trong Prestashop, nhưng bây giờ mình muốn nó hiện lên luôn chứ không cần phải click vào button Data sheet như trong Prestashop nữa.

8/ Ở hình Product Detail 2, phần Share và Zoom, muốn thêm chức năng Share cho các mạng Facebook, Twitter, My Space, v.v... và Zoom (hình Share and Zoom) hình bằng cỡ thật thì làm như thế nào?

9/ Ở hình Product Detail 2 muốn thêm phần "Customer who puschased this item also view" như thế nào?

Cảm ơn tất cả các bạn đã đọc hết và giúp mình post bài hướng dẫn. Với 9 câu hỏi này mình nghĩ sau khi được mọi người cùng nhau giải quyết triệt để thì đây là topic hữu dụng cho người newbi như mình dễ dàng làm được website từ mã nguồn Prestashop.

[Bryan Lee]

Chào mọi người,

Bấy lâu nay mình tham khảo lượm lặt trong diễn đàn của mình, cũng có trả lời cho một số bạn, nay muốn làm cho mình một trang nhưng không rành, chỉ biết chút chút, quơ quào nên mọi người giúp mình với. Mình có tổng cộng 9 câu hỏi (số đẹp :--) xoay quanh chủ đề này, nhưng hỏi nhiều sợ các bạn không đủ thời gian để giúp nên mấy bạn giúp mình bằng cách hướng dẫn chi tiết từng câu, mỗi bạn hướng dẫn cách làm một câu cũng được, mọi cách làm mình đều rất cảm ơn và trân trọng. Mình không rành/giỏi về lập trình web nhưng mình có niềm tin, say mê và giỏi "vọc" (mày mò đó) ;-)

Mình đang muốn làm trang của mình như thế này (mở file đính kèm), mong các bạn (đặc biệt là anh admin của toanquyenmobile, hoacuocsong, và anhduongmobile) đóng góp hướng dẫn mình cách làm nhé:

1/ Mình muốn tạo mấy cái tab như hình "How make Tab and search" mình khoanh tròn khi đang ở tab nào, thì cái đó màu xanh, không thì màu xám. Có phải cái này là một dạng Horizontal Navigation Bar không? Mình nghe nói vậy. Nhìn hình thì các bạn thấy có phải nó là 2 Categories độc lập đúng không? (Về phần sản phẩm thì Presta cho phép 1 sản phẩm nằm ở nhiều mục được.) Một cái sổ đứng như của presta khi click vào Men Fashion thì toàn bộ sản phẩm và danh mục con trong men fashion được show ra (hình Categories 1), một cái ngang (như hình Categories 2) khi click vào Go traveling thì show toàn bộ sản phẩm được xếp trong danh mục Go traveling ra, và khi mình click vào cái áo cuối cùng bên phải chẳng hạn thì sẽ show chi tiết như hình Product detail 1 và 2. Và không biết nó nằm ở phần Top hay phần Header nhỉ? (Vì thấy danh mục ngang nằm chồng lên hình banner.)

Vậy mình muốn tạo 2 Categories độc lập như vậy được không? Và mình tạo/làm bằng cách nào? Thêm / chỉnh sửa cái gì? Và không biết tạo cái Horizontal Navigation Bar nằm ở phần Top hay phần Header thì tốt hơn nhỉ?

2/ Ở hình "How make Tab and search" phần Header có tiêu đề Find a store cho phép mình click vào để link đến mục đó, mình làm bằng cách nào? Mình muốn đổi lại thành mục "Đường đi tới shop" ấy mà!

3/ Ở hình "How make Tab and search" phần Search người ta có thể search theo keyword, Brand và theo Category thì làm như thế nào vậy? Theo bạn thì nên cho nó nằm ở phần header hay là phần Top dễ làm hơn, mong các bạn hướng dẫn cụ thể nhé.

4/ Tương tự cho câu hỏi 3 nhưng đây là phần Filter như trong hình Categories 1: Filter by (Brand), Sort by (Default/Price descending/Price Ascending/All). Làm sao để có block làm được việc đó như hình?

5/ Như hình Categories 2, mỗi mục ( Go Camping, Go Climbing, Go Traveling, v.v....) có mỗi tấm hình nền đại diện khác nhau (dưới banner quảng cáo VIEW OUR FANTASTIC..... Click Here! là cố định, không thay đổi với mọi danh mục nằm ngang này) Làm sao để làm được như vậy?

Bốn câu hỏi còn lại theo mình nghĩ là rất dễ nhưng mình cũng mò không ra cách làm:
6/ Như hình Product Detail 1, Block Please Select Your Style tương tự như Block Pick a Color của Presta vậy nhưng mình muốn sửa chữ Pick a Color thành Select Your Style thì làm như thế nào?

7/ Ở hình Product Detail 2, Phần Attributes cũng như phần Data sheet trong Prestashop, nhưng bây giờ mình muốn nó hiện lên luôn chứ không cần phải click vào button Data sheet như trong Prestashop nữa.

8/ Ở hình Product Detail 2, phần Share và Zoom, muốn thêm chức năng Share cho các mạng Facebook, Twitter, My Space, v.v... và Zoom (hình Share and Zoom) hình bằng cỡ thật thì làm như thế nào?

9/ Ở hình Product Detail 2 muốn thêm phần "Customer who puschased this item also view" như thế nào?

Cảm ơn tất cả các bạn đã đọc hết và giúp mình post bài hướng dẫn. Với 9 câu hỏi này mình nghĩ sau khi được mọi người cùng nhau giải quyết triệt để thì đây là topic hữu dụng cho người newbi như mình dễ dàng làm được website từ mã nguồn Prestashop.

Cả nhà đâu hết rồi nhỉ, xin giúp mình tí nào. Mỗi người giúp trả lời một câu thôi cũng được. Tks

[Bryan Lee]

Chào mọi người,

Bấy lâu nay mình tham khảo lượm lặt trong diễn đàn của mình, cũng có trả lời cho một số bạn, nay muốn làm cho mình một trang nhưng không rành, chỉ biết chút chút, quơ quào nên mọi người giúp mình với. Mình có tổng cộng 9 câu hỏi (số đẹp :--) xoay quanh chủ đề này, nhưng hỏi nhiều sợ các bạn không đủ thời gian để giúp nên mấy bạn giúp mình bằng cách hướng dẫn chi tiết từng câu, mỗi bạn hướng dẫn cách làm một câu cũng được, mọi cách làm mình đều rất cảm ơn và trân trọng. Mình không rành/giỏi về lập trình web nhưng mình có niềm tin, say mê và giỏi "vọc" (mày mò đó) ;-)

Mình đang muốn làm trang của mình như thế này (mở file đính kèm), mong các bạn (đặc biệt là anh admin của toanquyenmobile, hoacuocsong, và anhduongmobile) đóng góp hướng dẫn mình cách làm nhé:


3/ Ở hình "How make Tab and search" phần Search người ta có thể search theo keyword, Brand và theo Category thì làm như thế nào vậy? Theo bạn thì nên cho nó nằm ở phần header hay là phần Top dễ làm hơn, mong các bạn hướng dẫn cụ thể nhé.

Mình đã nghĩ ra giải pháp để làm cái này rồi, Mình code lại Manufacturers block v1.0 thành v2.0 với chức năng Hook vào Top of Page? tương tự cho chứ nămg “Shop by Categories” . Đúng không nào? Ý tưởng thì dễ vậy nhưng làm thì không dễ. Đúng không mọi người xin các bạn giỏi code giúp mình một tay với. Anh Toàn Quyền và Ánh Dương đâu rồi nhỉ giúp mình một tay với.
Cảm ơn cả nhà.

[Bryan Lee]

Chào mọi người,

3/ Ở hình "How make Tab and search" phần Search người ta có thể search theo keyword, Brand và theo Category thì làm như thế nào vậy? Theo bạn thì nên cho nó nằm ở phần header hay là phần Top dễ làm hơn, mong các bạn hướng dẫn cụ thể nhé.

Mình đã nghĩ ra giải pháp để làm cái này rồi, Mình code lại Manufacturers block v1.0 thành v2.0 với chức năng Hook vào Top of Page? tương tự cho chứ nămg “Shop by Categories” . Đúng không nào? Ý tưởng thì dễ vậy nhưng làm thì không dễ. Đúng không mọi người xin các bạn giỏi code giúp mình một tay với. Anh Toàn Quyền và Ánh Dương đâu rồi nhỉ giúp mình một tay với.
Cảm ơn cả nhà.

Mình đã code được một đoạn nhưng tới đây thì bó tay, không biết làm sao cho hiện ra (Hình đính kèm). Mọi người xem và giúp mình nhé. File blockmanufacturer.php và .tpl mình có đính kèm. Tks cả nhà

[haylam.vn]

1. Sử dụng ngôn ngữ HTML - CSS để thiết kế navigation theo ý bạn
HTML:
<div id="navigation">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>

CSS:
#navigtion ul li a:hover {
background: url('') top left blue;
}

#navigtion ul li a:active
...

2. Xem thêm Cách tạo thêm trang cho PrestaShop

3. Module tìm kiếm nâng cao hiện đang được phát triển.
Tham khảo module autocompletesearch.

4. Tham khảo Cách tạo hình ảnh trong dropdown list.
http://marghoobsuleman.com/jquery-image-dropdown

[Bryan Lee]

Dear Toàn Quyền Mobile

Thanks bạn nhé, nhờ vào những điều bạn nói và sau vài ngày suy nghĩ mình đã phát triển một module Advantage Search and Filter Module tại http://www.prestashop.com/forums/viewthread/17732/#80578 nhưng còn một số lỗi hiển thị, bạn giúp mình xem qua nhé.