Tìm kiếm Blog này

Pages

Thứ Năm, 4 tháng 9, 2014

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>


Thứ Tư, 27 tháng 8, 2014

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

Thứ Ba, 26 tháng 8, 2014

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

Thứ Hai, 25 tháng 8, 2014

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"}}