Grid - Cách chia cột nội dung trong một bài viết theo hệ thống grid

Grid hay lưới, là hệ thống chia cột trong website dùng class CSS. Giúp người quản trị dễ dàng tạo những nội dung được chia cột tương thích với nhiều trình duyệt website và thiết bị khác nhau.
Trong website ATStotal đã tích hợp sẵn tính năng này. Cách sử dụng như sau:

Grid chia theo tỷ lệ % làm 12 phần. Yêu cầu mỗi hàng có tối đa tổng cột =12 (số màu đỏ) là OK

Chia 3 cột đều nhau:

<div class="grid-container">
<div class="grid12-4">Nội dung trong cột 1...</div>
<div class="grid12-4">Nội dung trong cột 2...</div>
<div class="grid12-4">Nội dung trong cột 3...</div>
</div>

Chia 3 cột không đều nhau:

<div class="grid-container">
<div class="grid12-3">Nội dung trong cột 1...</div>
<div class="grid12-7">Nội dung trong cột 2...</div>
<div class="grid12-2">Nội dung trong cột 3...</div>
</div>

Chia 4 cột đều nhau:

<div class="grid-container">
<div class="grid12-3">Nội dung trong cột 1...</div>
<div class="grid12-3">Nội dung trong cột 2...</div>
<div class="grid12-3">Nội dung trong cột 3...</div>
<div class="grid12-3">Nội dung trong cột 4...</div>
</div>

Chia nhiều hàng và có khoản trắng giữa 2 hàng:

<div class="grid-container-spaced">
<div class="grid12-6">Nội dung trong cột 1..</div>
<div class="grid12-6">Nội dung trong cột 1..</div>
<div class="grid12-4">Nội dung trong cột 1..</div>
<div class="grid12-4">Nội dung trong cột 1..</div>
<div class="grid12-4">Nội dung trong cột 1..</div>
</div>

Tăng độ rông cột 2 lần nếu duyệt web bằng Mobile:

<div class="grid-container-spaced">
<div class="grid12-3 mobile-grid">Nội dung trong cột 1..</div>
<div class="grid12-3 mobile-grid">Nội dung trong cột 1..</div>
<div class="grid12-3 mobile-grid">Nội dung trong cột 1..</div>
<div class="grid12-3 mobile-grid">Nội dung trong cột 1..</div>
</div>

Products - Thêm logo nhãn hiệu Brand của nhà sản xuất cho sản phẩm

Cấu hình cho nhãn hiệu nhà sản xuất trong backend:
1. Đăng nhập vào phần quản trị Admin ( Backend Magento ).
2. Truy cập Catalog => Attributes => Manage Attributes theo như hình 1

Hình 1

3. Một cửa sổ mới Manage Attributes hiện ra như hình 2. Tìm đến cột Attribute Code, gõ chữ manufacturer => click Search, Click chọn dòng Attribute manufacturer vừa tìm được.

Hình 2

4. Bảng Edit Product Attribute "Manufacturer" hiển thị như hình 3. Click chọn Manage Label / Options trong menu trái. Trong bảng Manage Titles, đặt tên tương ứng cho Attribute trong từng StoreView khác nhau.

Hình 3

5. Sroll xuống bảng Manage Options ( values of your attribute ). Thêm vào Nhãn hiệu mới bằng cách click nút + Add Option

Điền tên xác định Nhãn hiệu ứng với từng Store View khác nhau. Bạn có thể theo bao nhiêu Nhãn hiệu cũng được. Nhớ click nút Save Attribute sau khi hoàn tất.

Các nhãn hiệu (Brand) cho các sản phẩm trong cửa hàng Atstotal có thể có:

 4UCON
AIC
Allegro
Altera
Ampron
AMS
Analog
Andorin
Aosong
APEM
APLUS
APPCON
Arduino
ARKLED
AST (A-Sung Tech)
ATMEL
Avago
AVX
Bohua
Bothhand USA
Bourns Inc.
Burans
CEM
Champion Micro
Cheng
Crownpro
CTS
Cypress
Dallas
Diodes Inc.
Eagle Power
ELNEC
EM Microelectronic
EON
Evercolor
Everlight
Exar
Fairchild
Freescale

FriendlyARM
FTDI
Fujitsu
HanRun
Hanwei Sensor
Harvatek
Hitachi
Holtek
Honeywell
Hope
HUIKE
Humirel
Intersil
InvenSense
IR
Japan
JRC
JWCO
KDS - Japan
KSS
Lattice
Linear Technology
Littelfuse
Lodestar
LRC
Macroblock
Maxim
Mean Well
MIC
MICREL
Micro One
Microchip
MITEL
MKA
Motorola
MPS
Murata
NEC
NEC/TOKIN
NORDIC
NS
NXP
Omron
ON
Panasonic
PCT
Philips
Polytronics Technology
Prolific
Pro'sKit
PTC
Pulse Electronics
Rainsun
Raspberry Pi
RDA
Realtek
Renesas
ROHM
Rubicon (Japan)
Ruifeng
Samsung
Sanyo
Semic
Semtech
Sensirion
SEP
Sharp
Silabs
Silan
SIMCOM
Sipex
SOFI-TECH
Songle
SST
ST
Sunlord
TA-I
Taiwan
TAIYO ELECTRIC
TAOS
TDK
TI
TKE
TOP
Top Power ASIC
Toshiba
TST
UniOhm
UTC
UTRON
VISHAY
VLSI
Winbond
WIZnet
Xeltek
Xeltek.cn
Yageo
Yamachi
ZETEX
ZYO

Products - Tạo một sản phẩm mới cho một Category trong Magento

Trước khi tạo một sản phẩm mới, cần xác định sản phẩm sẽ thuộc về phân mục ( Caterogy ) nào, nếu phân mục chưa tồn tại thì tham khảo:
Tạo mới và cấu hình cho một phân mục sản phẩm Category
Sau khi khi tạo Caterory cho sản phẩm, tiến hành tạo mới sản phẩm theo các bước sau đây.

Bước 1:
Đăng nhập vào phần quản trị Admin ( Backend Magento )

Bước 2:
Truy cập menu quản lý sản phẩm Catalog => Manage products
Trong cửa sổ mới hiện ra Click nút Add Product

Sau đó trang Create Product Settings hiện ra, ta cấu hình 2 thông số cơ bản của sản phẩm:

1. Attribute Set: là bộ thuộc tính của sản phẩm, tên của bộ thuôc tính thường được đặt tương ứng với tên của phân mục sản phẩm Category mà sản phẩm này thuộc về. Ta có các bộ thuộc tính sau đây trong Atstotal: Default, Cảm biến, Module ứng dụng...
2. Product Type: là loại sản phẩm trong Magento, magento hỗ trợ nhiều loại sản phẩm khác nhau. Chỉ cần chọn Simple Product. Tham khảo các loại sản phẩm ( Product Type ) trong Magento
3. 
   

Layout - Custom Layout Update trong Magneto

- Viết sau.........

Thuật ngữ - Những thuật ngữ thường gặp trong website Magento

Frontend
Là giao diện website mà người dùng hay khách hàng sẽ trãi nghiệm, thường truy cập thông qua Tên miền - Domain name của website http://www.atstotal.com

Backend
Là phần dành cho người quản trị trang website, việc đăng nhập vào backend phải thông qua một đường dẫn đặc biệt http://www.atstotal.com/duong_dan_bi_mat. Và tài khoản quản trị gồm Username và Password.

Website
Là thành phần phân cấp lớn nhất của website Magento, mỗi website gồm nhiều Store ( gian hàng ), mỗi Store lại gồm nhiều Store View, Store View như là một gian hàng con có ngôn ngữ khác nhau, nếu website cần hỗ trợ đa ngôn ngữ. Ví dụ Atstotal gồm 2 Store View chính là StoreView English và StoreView Viet Nam.

Store:
Xem như một gian hàng trong website Magento

Store View:
Là một gian hàng con của Store, hỗ trợ một ngôn ngữ nhất định trong website.

Block:

Là thành phần cơ bản cấu thành nên Website Magento, mỗi Block là một khối nội dung nhất định trong website, mỗi trang web là sự cấu thành của nhiều Block khác nhau, được sắp xếp theo một trật tự nhất định.

Static Block
Là một loại Block đặc biệt trong Magento, chỉ chứa nội dung là HTML như text, hình ảnh, CSS style, Javascript.

CMS Pages:
Hay còn gọi là Static Pages, là một trang nội dung trong Magneto có thể chứa mã HTML giống như Static Block, ngoài ra trong CMS page còn có thể gọi đến nhiều Block chức năng khác.

Layout:

Custom Layout Update: 

Admin - Đăng nhập vào phần quản trị web site Backend Magento

Truy cập phần quản trị website của Atstotal thông qua đường dẫn sau:
http://atstotal.com/admin 
http://atstotal.com/duong_dan_bi_mat ( có thể thay đổi tùy ý )
Giao diện đăng nhập hiện ra như sau:

- Nhập Username:
- Nhập Password:
- Click nút Login

Static Block - Thế nào là Static Block trong magneto, cách tạo mới và sử dung.

1. Static Block là gì
Được xem như một khối nội dung chứa mã HTML trong Magento, được tạo ra và gọi vào các nơi khác nhau trong Magento, như CMS Page. Những Static Block thường được dùng ở nhiều nơi khác nhau trong website, việc thay đổi nội dung trong một static block sẽ ảnh hưởng đết tất cả các nơi sử dụng Static Block này.

2. Cách tạo một Static Block mới và sử dung Static Block trong website

Tạo Static Block: 
CMS => Static Blocks => Add New Block.
Ví dụ Block mới tạo có Identifier là: your_block_id

Chèn Static Block vào một trang CMS Pages:
{{block type="cms/block" block_id="your_block_id"}}

Contact - Cấu hình thông tin cho trang liên hệ

Các Static Block xuất hiện ngay bên trong nội dung của trang liên hệ.
Trang liên hệ có 2 Static Block đã tích hợp sẵn
1. Block đứng trước Contact Form
Identifier: block_contactform_top_contactpage

2. Block đứng ngay sau Contact Form
Identifier: block_contactform_bottom_contactpage

Frontend - Định dạng và trang trí nội dung cho Website

Atstotal website đã tích hợp sẵn các CSS Class, giúp người quản trị web dễ dàng định dạng các khối trong CMS => Static Block, CMS Pages nhanh chóng, thuận tiện chỉ cần copy/paste.

1. CSS Class dùng cho Box chứa nội dung là các thẻ <div></div>
Cách dùng: chèn vào một thẻ <div></div> bất kỳ bao lấy "Nội Dung Bên Trong" nó.
<div class="CLASS_CSS_CAN_SU_DUNG">

Nội Dung Bên Trong 

</div>
Tên các Class CSS có thể dùng:
box_grey => <div class="box_grey"> </div>

box_green => <div class="box_green"> </div>

CMS Pages - Cách tạo một trang CMS page

Giới thiệu:
CMS page là một trang có nội dung bất kỳ, chứa mã HTML, thường là một bài viết hướng dẫn, giới thiệu, quảng cáo.. v.v. Giống như việc viết một bài nội dung trên Blog cá nhân.
Hướng dẫn các bước tạo trang CMS Page trong website:
- Đăng nhập vào Backend.
Bước 1: 
Bước 2:
Bước 3:

Menu - Thêm một liên kết trỏ đến một trang CMS page bất kỳ trên menu Chính

Thêm một liên kết với tên GIỚI THIỆU vào menu chính trên trang web. Khi KH click vào liên kết này sẽ mở ra một trang CMS page có nội dung giới thiệu về Atstotal.
Liên kết GIỚI THIỆU sau khi thêm vào Menu:

Các bước thực hiện như sau:
- Đăng nhập vào Backend.
Bước 1: Tạo Trang CMS page có nội dung "Giới thiệu về Atstotal" có dường dẫn URL ví dụ là: gioi-thieu-chung-ve-atstotal  => Tham khảo cách tạo một trang CMS Page.
Bước 2: Truy cập CMS =>  Static Blocks => Lọc tìm Block có Identify: block_nav_links

 Bước 3: Mở Block trên, truy cập đến phần nội dung ( content ) của Block.

Bước 4: Thêm vào đoạn code sau đây bên trong tag <li></li>:
<li class="level0 level-top right">
<a class="level-top" href="{{store direct_url='gioi-thieu-chung-ve-atstotal'}}" title="Giới thiệu chung về cửa hàng Atstotal">
<span>Giới thiệu</span>
</a>
</li>
Chú thich: 
{{store direct_url='gioi-thieu-chung-ve-atstotal'}}: Màu đỏ là URL của trang CMS page đã tạo ở bước 1.
<span>Giới thiệu</span> : "Giới thiệu" là tên của liên kết sẽ hiện ra trên menu chính.
 title="Giới thiệu chung về cửa hàng Atstotal" : "Giới thiệu chung về cửa hàng Atstotal" là mô tả cho liên kết, sẽ hiện ra khi KH re chuột lên liên kết "Giới thiệu"
Lưu lại và xem kết quả ngoài Frontend.

Menu - Thêm một Block bất kỳ vào Menu chính của website

Block ID: block_header_nav_dropdown

Block - Bản quyền Website cuối trang web bên phải

Thông tin bản quyền Website.

Chỉnh sửa thông tin:

- Loggin Backend

- System => Configuration => Chuyển sang menu bên trái:

Current Configuration Scope => chọn Store View cần chỉnh => đợi trang reload

Tab Configuration => Design => đợi trang reload xong.

Nhìn sang nội dung bên phải của trang => tìm đến Footer Tab => chỉnh sửa thông tin trong nội dung copyright. Tùy theo Store View bạn chọn là tiếng Anh hay tiếng Việt mà thông tin copyright cũng khác nhau.

Block - Các Block chỉ hiển thị trên Trang Chủ ( Home )

Các Static Block trên trang chủ:
Identify: block_home_preface
Block này hiển thị ngay sau Slide Show, trước phần nội dung chính của trang chủ. Sử dụng để hiển thị thông báo, các banner khuyến mãi trên trang chủ Website đến KH.
Identify: block_home_left1; block_home_left2; block_home_left3
3 block này chỉ hiển thị trên trang chủ bên cột left ( left column ). Có thể gọi 1 Block khác từ các Block này

Các Block được gọi trong một Static Block khác:

Code gọi Block:
{{block type="brands/brands" show_items="5" is_responsive="1" block_name="Best Store and Best Brands" template="infortis/brands/brand_slider.phtml"}}

Code gọi Block:
{{block type="ultramegamenu/navigation" template="infortis/ultramegamenu/categories.phtml"}}

Menu - Ẩn / Hiện menu DANH MỤC SẢN PHẨM ở cột trái hay phải của Website

Menu DANH MỤC SẢN PHẨM có thể config để ẩn, hiện ở cột bên trái / hay cột bên phải của website trong 1 trang bất kỳ nào đó.

Các trang có thể là:
+ Trang Chủ
+ Trang Static Page ( được tạo ra trong Backend => CMS => Pages )
+ Trang xem các sản phẩm trong một danh mục sản phẩm (Category - Products)
+ Trang xem một sản phẩm chi tiết

Cách cấu hình như sau:

1. Vào Backend => System => Configuration
2. Chọn Store View cần cấu hình ( English / VietNam ) tại cột trái - trên cùng. Đợi trang reload xong.
3. Vào Tab Sidebar Menu ( bên phải ), bật (enable) hay ẩn ( disable) trong các mục tương ứng sau đây:

+ Trang xem các sản phẩm trong một danh mục sản phẩm

• Category View (Left Sidebar)
• Category View (Right Sidebar)

+ Trang Chủ

• Home Page (Left Sidebar)
• Home Page (Right Sidebar)

+ Trang Static Page bất kỳ

• CMS Pages (Left Sidebar)
• CMS Pages (Right Sidebar)

+ Trang xem một sản phẩm chi tiết

• Product Page (Left Sidebar)
• Product Page (Right Sidebar)

Chú ý: ta có thể gọi menu DANH MỤC SẢN PHẨM trong một Static Block bất kỳ theo cú pháp sau:

{{block type="ultramegamenu/navigation" template="infortis/ultramegamenu/categories.phtml"}}

Static Block ( được tạo ra trong Backend => CMS => Static Block ). Có những Static Block đã được tạo sẵn và cấu hình chỉ cho hiển thị trên Trang Chủ

Block - Payment hay phương thức thanh toán

Backend => CMS => Static Blocks

Block Title: Footer payment
Block ID:  block_footer_payment
Nội dung block:
<img src="{{media url="wysiwyg/infortis/fortis/custom/payment2.png}}" alt="payment methods" title="payment methods" />
Thay đổi nội dung thanh toán là một hình khác trên hosting:
public_html/media/wysiwyg/infortis/fortis/custom/
Image name: payment2.png

Homepage - Ẩn / Hiện các Block ở cột Left hay Right trong Trang Chủ (homepage)

System => Configuration => FORTIS 2.1.2 => Theme Setting => Disable Sidebar Blocks (On Home Page)

Chú ý:
Cấu hình này chỉ tác động đến trang chủ (CMS => Pages => trang-chu )

Category - Hiển thị các sản phẩm trong một Category bất kỳ trên trang CMS page

Mục đích:
Gọi 1 khối sản phẩm trong một Category thông qua ID và đặt trong 1 CMS page ( Homepage chẳng hạn )
Thực hiện:
- Tạo 1 category trong Backend, thêm các sản phẩm vào category này, sau đó hiển thị các sản phẩm trong category đó thông qua code sau:
{{block type="fortis/product_list_featured" category_id="6" product_count="16" is_responsive="1" breakpoints="[1280, 6], [960, 5], [768, 4], [480, 3], [320,
2], [240,1]" centered="1" move="0" block_name="Recommended Products" hide_button="1" template="catalog/product/list_featured_slider.phtml"}}
Chú thích:

• category_id="": là ID của category đó, mỗi category tạo ra trong backend sẽ có duy nhất 1 số ID
  
• product_count="": là tổng các sản phẩm sẽ được hiển thị ra ngoài frontend
• block_name="": là tên của block sẽ hiển thị bên ngoài frontend

Hiển thị các sản phẩm là New Product trong một Category, dùng đoạn code sau:
{{block type="catalog/product_new" products_count="8" is_responsive="1" breakpoints="[1280, 6], [960, 5], [768, 4], [480, 3], [320,
2], [240,1]" centered="1" block_name="New Products in Stock" hide_button="1" template="catalog/product/new.phtml"}}

Category - Tạo mới và cấu hình cho một phân mục sản phẩm Category

Category được xem như một Danh mục Sản Phẩm, giúp quản lý sản phẩm theo từng nhóm khác nhau trong website. Để truy cập phần quản trị Danh Mục Sản Phẩm (Category) trong Atstotal hay Magento.
- Đăng nhập vào phần quản trị Admin ( Backend Magento )
- Trên thanh menu chính của trang quản trị, truy cập Catalog => Manage Categories

Hình 1

Cách tạo một Category mới

Giới thiệu tổng quan- Sau khi đăng nhập phần quản trị Danh Mục Sản Phẩm thành công, sẽ thấy thanh Menu bên trái như hình bên dưới.
- Trong thanh Menu, phần Categories ( khung màu đỏ) có 2 nút

1. Add Root Category => Khi cần tạo Danh Mục Sản Phẩm gốc cho một Store View. Trong Atstotal có 2 Store View chính là StoreView VietNam và StoreView English.
2. Add Subcategory => Khi cần tạo một Danh mục con của Root Category hay một Danh mục con trong các Danh mục con của Root Category. Mỗi danh mục có thể gồm nhiều danh mục con.

Hình 2

Các bước tạo một Danh Mục sản phẩm mới.

1. Chọn một Store View trong menu Choose Store View ( khung màu xanh lá ) trong Hình 2 . Sau khi chọn Store View trang sẽ tự động reload lại và chỉ hiển thị các phân mục sản phẩm thuộc Store View đã chọn.
2. Click chọn một Danh mục mà bạn cần tạo Danh mục con mới bên trong nó ( danh mục được chọn sẽ được tô màu đậm ). Sau đó Click nút Add Subcategory. Sau khi trang reload, phần nội dung bên phải sẽ hiển thị giúp bạn cấu hình cho Category mới. Việc cấu hình trãi qua các bước sau đây.

General Information:

- Name*: Đặt tên cho Category cần tạo mới

- Is Active*: Cho Caterogy hiển thị hay không ngoài Frontend (Yes/No)

- URL Key: Tên đường dẫn liên kết với Category này. Vi du: ten-category-moi

- Description: Phần mô tả tổng thể cho Category, phần mô tả này sẽ hiển thị ngay bên trên các sản phẩm của Category này khi người dùng Click vào Category ngoài Frontend.

Description Trong Category

- Thumbnail Image: hình ảnh thu nhỏ dưới dạng Thumbnail cho Category

- Image: hình ảnh đại diện cho Category.

- Page Title: Tiêu đề trang website khi người dùng click xem category này.

- Meta Keywords: nhập các từ khóa liên quan đến category của bạn, có thể dùng nhiều từ khóa khác nhau, cách nhau bởi dấu "phẩy". Nên chọn các từ khóa mà bạn nghĩ người dùng sẽ tìm thấy sản phẩm của bạn dễ dàng khi sử dụng nó để tìm các sản phẩm trong các bộ máy tìm kiếm như google chẳng hạn.

- Meta Description: phần mô tả sản phẩm trong thẻ <head></head>, dùng thay thế cho mô tả của Store trong system => configuration => Design => tab HTML Head.

- Include in Navigation Menu: Có hiển thị hay không Tên category này trong thanh menu chính (Yes/No).

Khi Include In Navigation Menu được chọn

Display Settings:

- Display Mode:
Với các tùy chọn hiển thị sau đây

1. Products Only:
   Chỉ cho hiển thị các sản phẩm bên trong Category này bên ngoài Frontend.
2. Static Block Only
   Chỉ cho hiển thị nội dung của một Static Block ( tìm hiểu cách tạo mới và sử dụng Static Block )
3. Products and Static Block
   Vừa hiển thị nội dung Static Block, vừa hiển thị các sản phẩm bên trong Category này

- CMS Block: Tên Static Block chọn để xuất hiện nếu Display mode là Static Block Only hoặc Products and Static Block.

- Is Anchor: Cho phép hay không việc hiển thị một Menu lọc sản phẩm trong Category này theo các thuộc tính của sản phẩm, như giá, màu sắc, kích thước..v.v ( Yes/No )

- Available Product Listing Sort By*: để mặc định.

- Default Product Listing Sort By*: để mặc định.

- Layered Navigation Price Step: để mặc định.

Custom Design:

- Use Parent Category Settings: có hay không áp dụng những cấu hình của Category cha ( Yes/No )

- Apply To Products: có áp dụng cấu hình này cho các sản phẩm bên trong hay không.

- Custom Design: chọn một mẫu giao diện hiển thị cho Category này ( cứ để mặc định )

- Active From: thời gian bắt đầu hiệu lực của Custom Design

- Active To: thời gian hiệu lực kết thúc

- Page Layout: chọn trang layout hiển thị là 1column, 2 columns, 3columns.

- Custom Layout Update: cấu hình xml cập nhật giao diện cho trang hiển thị sản phẩm trong Category ( cứ để trống ) => Tham khảo thêm về Custom Layout Update trong Magneto

Menu:

Trong thanh menu chính ở hình bên dưới, ví dụ Category CẢM BIẾN là Category cha của các Category bên trong như Cảm biến Gas, Cảm biến chuyển động, Cảm biến nhiệt độ. Cấu hình cho Category cha gồm các thành phần sau đây.

Block Right: là Block nội dung hiển thị bên phải menu dropdown ( khi re chuột vào menu cha ) cùng với các Category con của CẢM BIẾN. Tỷ lệ độ rộng của các menu con / Block right sẽ được cấu hình ngay trong phần Proportions: Subcategories / Block Right tiếp sau.

Proportions: Subcategories / Block Right với các tỷ lệ 5/1; 4/2; 3/3; 2/4 ... ( chỉ áp dụng cho Top Level Category ), tỷ lệ này tính theo số cột, tổng số cột tối đa là 6.

Block Top: Block nội dung bên trên các Subcategogy ( khung xanh ). Dùng hiển thị menu con hay thông báo, chứa nội dung là HTML

Block Bottom: Block nội dung bên dưới cùng các Succategogy ( khung xanh ). Dùng hiển thị menu con hay thông báo, chứa nội dung là HTML

Category Label: Nhãn gắn trên Category menu ( New / Sale %)

Category Product: 

Hiển thị danh sách các sản phẩm thuộc trực tiếp trong Category này, không bao gồm các sản phẩm trong các Category con ( hay còn gọi là Sub-Category ).

Magento - Cấu trúc đường dẫn và ý nghĩa

Categories: 
http://www.atstotal.com/index.php/electronics.html
electronics: là category URL Key
http://www.atstotal.com/index.php/electronics/sub-cat/sub-cat.html
sub-cat: là các sub-category URL Key

Product:
http://www.atstotal.com/index.php/electronics/smartphones/sample/phone5.html
phone5: Product URL key
electronics/smartphones/sample: cat-URLkey/Sub-Cat-URLkey/Sub-Cat-URLkey

CMS pages:
http://www.atstotal.com/trang-chu
trang-chu: là URL Key của page