# RULES & DOCS

## BACK UP
Khi làm thì nhớ thường xuyên backup trang live hoặc staging lại nha để khi có sự cố thì còn có cái để revert lại dc. Duplicate cái theme muốn backup ra rồi edit tên lại

VD: Staging 03/10/22 - BK


## CONTENT Ở SHOPIFY
Mọi người làm ở shopify tất cả các page: Nếu không add content thì sẽ không show . Chứ không được bắt buộc phải add, không add thì layout sẽ bị nát nha.
Ví dụ content bao gồm 1 đoạn text + icon. Thì nếu user không nhập content thì icon cũng sẽ không show, chứ không được không nhập content thì icon vẫn show nha

## HƯỚNG DẪN ĐẶT TÊN SECTION
**Section** thì mình sẽ chia lại theo page. Mỗi người sẽ làm 1 page.

Ví dụ James làm section 5 ở page home thì khi qua page about của Andree đang làm cũng có section 5 thì Andree sẽ k dùng lại section 5 của James làm mà sẽ tạo 1 section mới có thể copy code hoặc tham khảo section 5 của James đã làm.
Tóm lại khi được assign 1 page thì mình sẽ tạo đủ section có trong page đó rồi bắt đầu làm từ section đầu tiên đến section cuối cùng của page đó. trừ header và footer.

***Qui chuẩn đặt tên section sẽ dựa vào tên page**
*Example:*
**Tên File:** homepage-section-one.liquid, aboutpage-section-one.liquid....

**ID section:**
`<section id="sectionOneHome"></section>` ,
`<section id="sectionOneAbout"></section>`...

**CSS:** #sectionOneHome {}

**Name section schema:** Homepage Section One, Aboutpage Section One...

***Note:*** Tên page lấy theo tên page ở design. Ai chưa rõ tên page có thể hỏi Emma nha.

*Qui tắc này được đề ra để dùng chung cho tất cả member team M3, ai làm sai hoặc không tuân thủ qui tắc này thì `momo` 10k để góp quỹ ăn trái cây*

## PAGE TEMPLATE:
Khi mình add 1 page template mới nhớ check kỹ xem page template đó đã được tạo chưa, vì nhiều khi site đang chạy live, page đó cũng đã có rồi client cũng đã nhập content của page đó, thì khi mình làm new feature(update design new) phải check kỹ, ko dc edit content hoặc chọn template mới của page đã tạo của client.
Nó sẽ mất content và ko bao giờ revert lại dc, client cũng ko có content để gửi cho mình nhập.
Mình sẽ tạo 1 page template hoàn toàn mới, VD: Đã có on-demand thì sẽ tạo là on-demand-1.

## FIELD TEXT:
**Lưu ý** Field text chỉ dùng cho **title** hoặc **subtitle** có đoạn content ngắn. Không dùng field text cho đoạn content dài. Content của page như bên dưới thì mình sẽ dùng ***`richtext`***, html để khi client nhập nó muốn ngắn dòng chỉ cần enter là xong.
Mọi người chú ý, content trong design không phải lúc nào cũng ngắn, khi làm nhớ test rồi nhập content dài hơn thử xem có xuống dòng được không, hay bị bể layout hay không.



## FONT
1. Khi được assign start một project thì bắt buộc phải xin font từ Emma để import vào project đầu tiên rồi mới bắt đầu start dự án nha.
Nếu như client trả lời chưa có font thì mỗi ngày phải nhắc Emma để nhắn client đưa font. Chứ không có để tới gần cuối khi dự án vào giai đoạn fix bugs & release mới lòi ra là font bị sai lúc đó spacing toàn bộ project bị sai hết là lỗi do mình chứ hong phải do client không đưa font đâu nha.
2. Lưu ý font weight hong có số lẻ trong đó nha. Bắt đầu từ 100 -> 900 chứ hog có 450 550 đâu nhe. Design nó để vậy là nó bị sai. Xem link này để biết thêm chi tiết
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#:~:text=Meaning%20of%20relative%20weights,-When%20lighter%20or&text=Note%20that%20when%20using%20relative,purposes%20of%20relative%20weight%20calculation.

## HƯỚNG DẪN IMPORT FONT
https://drive.google.com/drive/u/0/folders/1JzMNmiETI1QmOPMKWP-s5xjrRjd6Dpp1

## RENDER HÌNH CHO DESKTOP VÀ MOBILE
Bỏ file này vào snippet và sử dụng để render hình cho desktop và mobile:

{% liquid 
    if image_mobile == blank 
        assign image_mobile = image_desktop
    endif
%}
<picture>
    <!-- Image Mobile -->
    <source
        media="(max-width: 576px)"
        srcset="{{ image_mobile | img_url: '576x768' }}"
    />
    <!-- Image Desktop -->
    <source
        media="(min-width: 577px)"
        srcset="{{ image_desktop | img_url: '2000x768' }}"
    />
    <!-- Image default -->
    <img src="{{ image_desktop | img_url: '2000x768' }}" class="img-fluid {{ image_class }}" alt="{{ image_alt }}" {{image_attr }} loading="lazy"/> 
</picture>

**Cách sử dụng:**

{% render 'image', image_desktop: block.settings.image, image_mobile: block.settings.image_mobile, image_alt: "Avatar Model Review"%}

## IMAGE
1. Trong image, mình phải thêm thuộc tính là loading="lazy" cho image đó nha, để khi mình scroll đến load thì nó sẽ load cái ảnh đó ra

https://bizfly.vn/techblog/lazy-loading-la-gi.html


2. Tất cả các thẻ link hoặc hình ảnh có link thì khi mình hover bắt buộc phải có title nha cái này trong NAMTECH Annoucement có. Mọi người xem lại cái này nha https://docs.google.com/document/d/171cZKy3KKeCl1RsgoerXS1ijbUD0gP609FHyPPLGgfY/edit?pli=1#heading=h.w6g4du8atmk2




## VALIDATE DỮ LIỆU
Khi tạo field từ site settings, metafield, hoặc product thì mình phải validate dữ liệu nha. Nếu có biến data đó thì mình mới show content bên trong còn k có thì sẽ k show ra.
Mục đích mình check là để khi client nhập content ở admin thì nó sẽ show content còn hog nhập thì nó sẽ hog show ra.

Example:

## MENU
Đối với các Menu dropdown mà có product thì image, title, button phải có thẻ a để user có thể click được nha. Menu này hiện tại chỉ click dc button thôi còn image với title không click dc.
Mọi người khi làm phải nghĩ tới UX, trải nghiệm người dùng như thế nào


## PADDING
Lưu ý khi set padding thì mình phải set thằng button của accordion chứ không set padding cho div parent chứa cái button accordion đó.

Ví dụ: Cái này đang set padding cho div parent nên sai rồi nha hiện tại khi click thì chỉ click được text, icon plus và item button accordion thôi, còn click trái phải trên dưới k dc.

Lưu ý để set padding cho đúng sau này mấy project khác cũng vậy.

## HOVER / CLICK BUTTON
User có thể hover dô hết cái button rồi bấm được nha. Chứ không được bắt người ta phải bấm cái chữ cái text mới link được.

## Upload Image in admin
Bắt buộc phải có 2 fields là [image desktop] và [image mobile] để upload được 2 hình khác nhau. Nếu field image mobile không upload, thì sẽ dùng hình của image desktop để show.

## Upload video in admin
Bắt buộc có 2 options để paste URL là Youtube và Vimeo.
Phải có field upload Fature Image để làm thumbnail cho video. Khi click Play icon thì video được embeded bên dưới auto play.

## Function Upsell:
Upsell/Offer Function sau này sẽ sài rất nhiều, mọi người chú ý, hiện tại có vài site đang làm rất sai.
Dev khi làm nhớ test nhiều case, để không gặp bug:
* Product có thể có nhiều giá giảm, nên cái vòng tròn show sale off phải tính ra % theo giá giảm
* Nếu product upsell không nhập giá giảm thì vòng tròn không show
* Nếu add to cart product upsell thì nó được add vào cart, đồng thời cũng được remove bên dưới section của cart. (Dưới text "Offer" hay "Upsell" gì đó
* Nếu remove product chính thì product upsell cũng được remove theo
* Nếu remove product upsell, thì product upsell sẽ được show lại bên dưới section upsell/offer của cart

Tham khảo:
https://livewelly.co/products/smoothie-variety-pack