Back To Home

Name: Ngày 17: Placeholder & Dynamic Placeholder

🎯 Ngày 17: Placeholder & Dynamic Placeholder

Hôm nay bạn sẽ hiểu:

  • Placeholder là gì

  • Dynamic Placeholder là gì

  • Sự khác nhau

  • Cách tạo

  • Cách sử dụng trong Layout hoặc Component

  • Tình huống thực tế

  • Best practices trong Helix

🧩 1. Placeholder là gì?

Placeholder trong Sitecore là vùng chứa trong layout hoặc component cho phép editor kéo-thả (drag & drop) các rendering vào trong Experience Editor.

Ví dụ layout:

 
<div> @Html.Sitecore().Placeholder("main") </div>

=> Bạn có 1 placeholder tên main, editor có thể thêm component vào vùng này.

🧩 2. Placeholder hoạt động như thế nào?

  • Một layout/component có thể chứa nhiều placeholder

  • Mỗi placeholder phải có tên duy nhất trong layout/component

  • Sitecore mapping placeholder theo tên

Ví dụ:

 
@Html.Sitecore().Placeholder("content") @Html.Sitecore().Placeholder("sidebar")

Editor sẽ thấy 2 vùng:

  • content

  • sidebar

🧩 3. Nhược điểm của Placeholder truyền thống

Nếu bạn tạo component lặp lại (ví dụ: Carousel → mỗi Slide có placeholder):

 
@Html.Sitecore().Placeholder("slide-content")

Nếu bạn render 5 slide → Bạn sẽ có 5 placeholder cùng tên!

➡ Sitecore không phân biệt được placeholder thứ 1,2,3,4,5
➡ Component có thể chèn nhầm chỗ
➡ Không thể lặp lại nhiều component chứa placeholder bên trong

→ Giải pháp: Dynamic Placeholder

🧩 4. Dynamic Placeholder là gì?

Dynamic Placeholder (Sitecore 8.2+) tạo placeholder với ID duy nhất mỗi khi component được render.

Ví dụ:

 
@Html.Sitecore().DynamicPlaceholder("slide-content")

Nếu component xuất hiện 5 lần → 5 placeholder ID khác nhau được generate tự động:

 
slide-content_1 slide-content_2 slide-content_3 slide-content_4 slide-content_5

➡ Tránh xung đột
➡ Cho phép lặp bất kỳ số lần
➡ Rất quan trọng trong Helix & dạng component lồng nhau

🧩 5. Sử dụng Placeholder

📌 Trong Layout

 
<body> @Html.Sitecore().Placeholder("header") @Html.Sitecore().Placeholder("main") @Html.Sitecore().Placeholder("footer") </body>

📌 Trong Component

Ví dụ component “Main Section” có placeholder phụ:

 
<section class="section"> @Html.Sitecore().Placeholder("section-content") </section>

🧩 6. Sử dụng Dynamic Placeholder

Từ Sitecore 9+, dùng helper chuẩn:

 
@Html.Sitecore().DynamicPlaceholder("section-content")

Nếu cần clone component trong carousel → phải dùng Dynamic Placeholder.

🧪 7. Ví dụ thực tế

❌ Carousel sai cách:

 
<div class="slide"> @Html.Sitecore().Placeholder("slide-content") </div> <div class="slide"> @Html.Sitecore().Placeholder("slide-content") </div>

➡ Editor không phân biệt slide nào.

✔ Carousel đúng cách:

 
@foreach(var slide in Model.Slides) { <div class="slide"> @Html.Sitecore().DynamicPlaceholder("slide-content") </div> }

🧠 8. Kết hợp Placeholder Key trong Sitecore

Trong Content Editor:

 
/sitecore/layout/Placeholder Settings

Bạn có thể:

  • Tạo placeholder key: main-content, sidebar, footer-links

  • Quy định component nào được phép chèn vào placeholder nào

  • Chống kéo nhầm component vào sai vùng

🛠 9. Best Practices (Quan trọng!)

✔ Luôn đặt tên placeholder theo chuẩn Helix:

feature-name.component-name.region

Ví dụ:

 
feature-navigation.menu.links feature-banner.hero.content project-website.layout.main

✔ Dùng Placeholder cho layout cố định

✔ Dùng Dynamic Placeholder cho component lặp

✔ Luôn tạo Placeholder Setting để quản lý component

✔ Tránh placeholder quá chung chung như content, data

📌 10. Tóm tắt

Loại Placeholder Mục đích
Placeholder Vùng chứa đơn giản, chỉ dùng 1 lần
Dynamic Placeholder Tạo placeholder có ID riêng biệt → dùng cho component lặp

Donald Trump

Để trở thành người chiến thắng, bạn cần biết khi nào là đủ. Đôi khi trong cuộc sống, bạn phải từ bỏ cuộc chiến và chuyển sang mục tiêu mới mang lại hiệu quả hơn

Related Post