# Ẩn các element trên Webshop

Cách để ẩn những mục không cần thiết trên Web bán hàng

**Bước 1: Lấy tên đối tượng cần Ẩn thông qua trình duyệt Chorme**

* Chuột phải vào website và chọn inspect

<figure><img src="https://4274594821-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQa7fjZRtFKJkPsrqu5%2Fuploads%2FH85Za9nnccU399wZVszQ%2FScreenshot%202024-05-17%20155049.png?alt=media&#x26;token=e4de90cb-d3a8-47fd-9fb5-8985ff547285" alt=""><figcaption></figcaption></figure>

* Chọn vào mục sau:

<figure><img src="https://4274594821-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQa7fjZRtFKJkPsrqu5%2Fuploads%2FLbf7TgJw1gLIMvbyQcs4%2FScreenshot%202024-05-17%20155315.png?alt=media&#x26;token=4ec77a11-8c1a-49f9-bd69-0b793af42519" alt=""><figcaption></figcaption></figure>

* Sau đó đưa con trỏ vào phần tử mình muốn ẩn và Click chuột vào
* Phần inspect sẽ được đưa đến html của phần tử đó&#x20;
* Copy 1 class có tên thể hiện được chức năng của element đúng nhất của phần tử và cài đặt như sau:

**Trường hợp 1 chỉ một class muốn ẩn:**

```
.{tên class} {
	display: none;
}
```

Ví dụ: Trỏ vào phẩn tử logo cửa hàng -> Phần inspect sẽ được đưa đến html  tuy nhiên dòng đó không có trường **class** -> nên sẽ lấy phần tử html của dòng bên trên là : header-with-search\_\_logo-section

<figure><img src="https://4274594821-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQa7fjZRtFKJkPsrqu5%2Fuploads%2FlRuyCjPD8CLgUvP6fxL5%2FScreenshot%202024-05-17%20165823.png?alt=media&#x26;token=90d67ed1-a122-45d4-838e-e55668dc8b4e" alt=""><figcaption></figcaption></figure>

**Bước 2: Xử lý trên webadmin**

Thêm CSS để ẩn các phần liên quan

Quản trị viên vào trang quản trị, Chọn Module Cửa hàng -> menu Website -> Cài đặt mã nhúng

<figure><img src="https://4274594821-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQa7fjZRtFKJkPsrqu5%2Fuploads%2FDfzeq9pDtc9WK5CzyfxF%2Fimage.png?alt=media&#x26;token=54473dad-2d61-42f3-8fff-a27e60e56735" alt=""><figcaption></figcaption></figure>

Tại phần Mã CSS nhập class có tên thể hiện được chức năng của element đúng nhất của phần tử như hướng dẫn sau:&#x20;

```
.{tên class} {
	display: none;
}
```

**" .header-with-search\_\_logo-section {display: none;} "**  như ảnh sau đó chọn **Lưu** để cập nhật thông tin

<figure><img src="https://4274594821-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQa7fjZRtFKJkPsrqu5%2Fuploads%2FOyOQ7Aml7EeKucGsMq5G%2FScreenshot%202024-05-17%20173144.png?alt=media&#x26;token=40a0208a-29cc-4c25-b103-0f8d3a4402ef" alt=""><figcaption></figcaption></figure>

Quản trị viên kiểm tra trên trang Web shop của cửa hàng đã được ẩn Logo.

<figure><img src="https://4274594821-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQa7fjZRtFKJkPsrqu5%2Fuploads%2FMyMJ8EIx5p2tPfJetHa8%2Fimage.png?alt=media&#x26;token=d393944c-60e5-4dfb-a89a-d0011b30c1e7" alt=""><figcaption></figcaption></figure>

**Trường hợp 2 với nhiều class cùng muốn ẩn:**

```
.{tên class1}, .{tên class2} {
	display: none;
}
```

Ví dụ: Trỏ vào phẩn tử App Store và Google Play trên Web shop -> Phần inspect sẽ được đưa đến html "**QCp2hs**" của App Store và "**QCp2hs**" của Google Play

<figure><img src="https://4274594821-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQa7fjZRtFKJkPsrqu5%2Fuploads%2FAm3fUYyyEDBGuSOEBouj%2FScreenshot%202024-05-18%20094624.png?alt=media&#x26;token=8fb65f9e-1bf9-4f8f-b529-d4cbe2db74ac" alt=""><figcaption></figcaption></figure>

<figure><img src="https://4274594821-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQa7fjZRtFKJkPsrqu5%2Fuploads%2FaccQ8LvjFZkS9xctHeEU%2FScreenshot%202024-05-18%20094841.png?alt=media&#x26;token=c034f105-e099-49a0-8dd8-c6666d8b6d13" alt=""><figcaption></figcaption></figure>

**Bước 2: Xử lý trên webadmin**

Thêm CSS để ẩn các phần liên quan

Quản trị viên vào trang quản trị, Chọn Module Cửa hàng -> menu Website -> Cài đặt mã nhúng

Tại phần Mã CSS nhập class có tên thể hiện được chức năng của element đúng nhất của phần tử như hướng dẫn sau:  " .**QCp2hs,  .QCp2hs  {display:  none;} "**  như ảnh sau đó chọn **Lưu** để cập nhật thông tin

<figure><img src="https://4274594821-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQa7fjZRtFKJkPsrqu5%2Fuploads%2F5uOiFDTPCBa8as5hZrj8%2FScreenshot%202024-05-18%20094423.png?alt=media&#x26;token=50e8db7d-d6e8-469b-9fb5-ac8e810f1c0c" alt=""><figcaption></figcaption></figure>

Quản trị viên kiểm tra trên trang Web shop của cửa hàng đã được ẩn.

<figure><img src="https://4274594821-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MQa7fjZRtFKJkPsrqu5%2Fuploads%2F29sSLhjhZBjb2jCQyNzP%2Fimage.png?alt=media&#x26;token=bc823c8a-4fec-4c24-a6a6-554f8144d1cf" alt=""><figcaption></figcaption></figure>