Xây dựng chức năng slider cho sản phẩm thương mại điển tự shopify

LỜI CẢM ƠN
Trong thời gian thực hiện đồ án với sự giúp đỡ tạo điều kiện của Trường Đại
Học Công nghệ Thông Tin và Truyền Thông - ĐH Thái Nguyên, sự góp ý của các
bạn và đặc biệt là sự hướng dẫn trực tiếp, chỉ bảo tận tình của thầy TS. Bùi Ngọc
Tuấn và thầy TH.S Nguyễn Quốc Bảo em đã hoàn thành đề tài cùng với bản báo
cáo đúng thời gian quy định.
Em xin chân thành cảm ơn thầy ThS. Nguyễn Quốc Bảo và thầy ThS. Đào Trần
Chung cùng toàn thể anh chị em trong trung tâm nghiên cứu và phát triển phần
mềm (RDCMA) đã tạo mọi điều kiện thuận lợi, chỉ dẫn tận tình để em được nghiên
cứu, học hỏi ngôn ngữ lập trình mới và được tiếp cận với môi trường làm thực tế.
Và là kinh nghiệm quý báu để em học tập, trang bị kiến thức chuyên môn ngày một
hoàn thiện hơn.
Bài báo cáo đồ án tốt nghiệp của em được thực hiện trong 10 tuần, bước đầu em còn
gặp nhiều khó khăn, bỡ ngỡ và vốn kiến thức hạn chế nên nội dung đề tài không thể
tránh khỏi những sai sót, em mong nhận được sự đóng góp ý kiến, phê bình của
thầy cô.
Một lần nữa, em xin chân thành cảm ơn tất cả các thầy, cô giáo, các tổ chức liên kết
đã dạy dỗ, chỉ bảo em trong suốt thời gian học tại trường. Em xin kính chúc các
thầy cô giáo trong trường Đại học Công Nghệ Thông Tin và Truyền Thông Thái
Nguyên, cùng toàn thể anh chị em trong trung tâm RDCMA một sức khỏe dồi dào,
công tác tốt, đạt được nhiều thành công trong công việc.

Thái Nguyên, tháng 06 năm 2016
Sinh viên thực hiện
Nguyễn Hào Quang


LỜI CAM ĐOAN
Em xin cam đoan báo cáo này là công trình tổng hợp và được thực hiện trên
cơ sở nghiên cứu lý thuyết, kiến thức dưới sự hướng dẫn tận tình trực tiếp của thầy
giáo TS. Bùi Ngọc Tuấn và thầy giáo Th.s Nguyễn Quốc Bảo cùng các thầy và

các bạn trong trung tâm RDCMA trường Đại học Công nghệ thông tin và Truyền
thông. Trong báo cáo có sử dụng một số tài liệu tham khảo như đã nêu trong phần
tài liệu tham khảo.
Nếu có phát hiện bất kỳ sự gian trá nào trong đồ án, em xin chịu hoàn toàn
trách nhiệm trước Hội đồng bảo vệ.


DANH MỤC BẢNG VÀ HÌNH ẢNH
Hình 1. 1: Bảng các đối tượng tổng quát của Liquid ..............................................20
Hình 1. 2: Bảng các tham số kích thước ảnh ..........................................................27
Hình 2. 1: website ‘the retailer’……………………………………………………30
Hình 2. 2: website ‘Qaween’ .................................................................................30
Hình 2. 3: website ‘ChurcHope’. ...........................................................................31
Hình 2. 4: Trang web ‘jewelry’..............................................................................32
Hình 2. 5: Trang chủ website ‘PURO’ ...................................................................33
Hình 2. 6: Trang chủ website ‘ap michael’ ............................................................34
Hình 2. 7: Trang chủ website ‘hosoren’ .................................................................34
Hình 2. 8: Biểu đồ Use Case Admin ......................................................................38
Hình 2. 9 Biểu đồ Use Case Customize your slider................................................39
Hình 2. 10 Biểu đồ use case Add Slider Template .................................................40
Hình 2. 11 Biểu đồ use case Import slider..............................................................41
Hình 2. 12: Trình tự người dùng customize your slider..........................................42
Hình 2. 13: Trình tự người dùng add slider template..............................................42
Hình 2. 14: Biểu đồ người dùng import slider........................................................43
Hình 2. 15: Biểu đồ lớp của chức năng slider........................................................43
Hình 2. 16 Biểu đồ lớp chức năng add slider .........................................................44
Hình 2. 17 Biểu đồ lớp chức năng import slider.....................................................44
Hình 3. 1: Giao diện chính của chương trình………………………………………45
Hình 3. 2: Giao diện chính của customsize ............................................................46
Hình 3. 3: Giao diện chính của phần add slider......................................................46

Hình 3. 4: Khung dialog để import file ..................................................................47
Hình 3. 5: Trang bắt đầu để tạo kết nối từ server đến shopify ................................48
Hình 3. 6: Giao diện để cài đặt tạo liên kết giữa server với sản phẩm TMĐT shopify
qua API .................................................................................................................48
Hình 3. 7: Giao diện sau khi cài đặt được app........................................................49
Hình 3. 8: Giao diện chính của app.......................................................................49


Hình 3. 9: Giao diện chính của Customize your slider ...........................................50
Hình 3. 10: Phần bắt buộc phải có .........................................................................50
Hình 3. 11: Các tùy chọn của slider .......................................................................51
Hình 3. 12 Danh sách các slider có thể lựa chọn ....................................................52
Hình 3. 13 Cài đặt slider mình mong muốn qua sự lựa chọn ..................................52
Hình 3. 14: Giao diện của chức năng Add slider....................................................53
Hình 3. 15 Chức năng xem trước của Add Slider...................................................54
Hình 3. 16 Chức năng cài đặt thông qua nút lệnh...................................................54
Hình 3. 17: Dialog hiện thị chọn file import ..........................................................55
Hình 3. 18 Cửa sổ chọn file cần lựa chọn. .............................................................55
Hình 3. 19: trang web ‘Rubbez’.............................................................................56
Hình 3. 20 Trang web ‘Allen’................................................................................57
Hình 3. 21 Trang web ‘Vanesa’ .............................................................................57
Hình 3. 22 Trang web ‘Mandala’...........................................................................58


MỤC LỤC
LỜI CẢM ƠN.........................................................................................................i
LỜI CAM ĐOAN ..................................................................................................ii
DANH MỤC BẢNG VÀ HÌNH ẢNH..................................................................iii
MỤC LỤC..............................................................................................................v
CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI.............................................................1

1.1 Lý do chọn đề tài ...........................................................................................1
1.2. Mục tiêu nghiên cứu .....................................................................................2
1.3 Phương pháp nghiên cứu...............................................................................2
1.4. Phạm vi nghiên cứu ......................................................................................3
1.5. Tìm hiểu về thương mại điện tử và sản phẩm thương mại điện tử. ................3
1.5.1 Tìm hiểu về thương mại điện tử. .............................................................3
1.5.2 Sản phẩm thương mại điện tử..................................................................4
1.6 Giới thiệu sơ lược về Shopify. ......................................................................6
1.7 Tính năng của Shopify. ..................................................................................7
1.8 So sánh Shopify với một số mã nguồn ...........................................................9
1.9 Lập trình Liquid...........................................................................................10
1.9.1. Giới thiệu lập trình liquid.....................................................................11
1.9.2. Tags – Nhãn.........................................................................................11
1.9.3. Object – Đối tượng..............................................................................17
1.9.4. Giới thiệu Bộ lọc - Filter .....................................................................20
CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG........................................28
2.1 Mô tả đối tượng nghiên cứu .........................................................................28
2.1.1 Nếu bài toán..........................................................................................28
2.1.2. Khảo sát xu hướng sử dụng Slider hiện nay. ........................................29
2.1.3 Đặc trưng của một số loại slider ............................................................31
2.1.4. Đề xuất ý tưởng xây dựng chức năng slider cho Shopify......................32


2.1.5. Khảo sát một số sản phẩm thương mại điện tử trên nền Shopify...........32
2.1.6. Đề xuất giải pháp xây dựng chức năng slider .......................................34
2.2 Phân tích thiết kế hệ thống........................................................................35
2.3.1. Xác định tác nhân.................................................................................37
2.2.2. Biểu đồ Use Case .................................................................................38
2.2.3 Biểu đồ Trình tự của chức năng Slider. ................................................41
2.2.4 Biểu đồ lớp ...........................................................................................43

CHƯƠNG 3: CÀI ĐẶT HỆ THỐNG.................................................................45
3.1 Xây dựng chức năng ....................................................................................45
3.1.1 Phần customize layout slider.................................................................45
3.1.2 Phần add layout slider. ..........................................................................46
3.1.3 Phần import slider .................................................................................47
3.2 Cài đặt chương trình ....................................................................................47
3.2.1 Khi bắt đầu cài đặt ................................................................................47
3.2.2 Giao diện chính của chức năng slider ...................................................49
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ..........................................................59
TÀI LIỆU THAM KHẢO...................................................................................60
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN .................................................61


CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI
1.1 Lý do chọn đề tài
Trong thời đại công nghiệp hóa, hiện đại hóa và sự bùng nổ về sức mạnh của
công nghệ thông tin hiện nay. Việc mua bán sản phẩm, đặt hàng trực tuyến đang trở
thành một nếp văn minh mới trong thời đại tiên tiến, người tiêu dùng đã quen dần
với thói quen mua sắm trực tuyến.
Shopify là một trong 4 nhà cung cấp nền tảng thương mại điện tử trực tuyến
lớn nhất thế giới bên cạnh Bigcommerce, Weebly eCommerce và Squarespace
eCommerce. Tuy nhiên, trong những cái tên kể tên thì Shopify được đánh giá cao
nhất với hơn 245.000 cửa hàng trực tuyến và đang không ngừng tăng lên.
Khác với những đối thủ cạnh tranh khác, Shopify luôn tiên phong áp dụng
những công nghệ mới nhất và tiên tiến nhất của internet để tích hợp vào website sử
dụng Shopify. Cùng với đó, Shopify sở hữu đội ngũ chuyên gia nhiều năm kinh
nghiệm và có những am hiểu sâu sắc về thương mại điện tử nói riêng và công nghệ
internet nói chung.
Shopify nền tảng tạo website bán hàng cùng rất nhiều tính năng và tiện ích
quản lý khách hàng, sản phẩm, marketing, cũng như nhiều hỗ trợ tốt cho shop bán

hàng online
Khi phát triển sản phẩm TMĐT shopify thì hầu hết một sản phẩm nào cũng
có chức năng là slider để giới thiệu một số thông tin hay các chuyển mục của trang
web về quảng bá hay có chương trình khuyển mãi trên mỗi sản phẩm TMĐT
shopify. Tại trung tâm RDCMA nơi em đang học tập và làm việc hiện tại đang phát
triển sản phẩm shopify mà trong sản phẩm nào cũng cần có chức năng slider từ đó
em chọn đề tài này khi hoàn thành có thể áp dụng cho tất cả các sản phẩm mà trung
tâm đang phát triển với tính năng dễ dàng tùy biến trên mỗi sản phẩm TMĐT
shopify.
Từ vốn kiến thức có được trong quá trình học tập tại trường áp dụng các
kiến thức về html5/css3/js và thông qua tham khảo một số sản phẩm thương mại
1


điện tử trên thị trường của một vài mã nguồn CMS. Em đã hoàn thành cho mình
sản phẩm thương mại điện tử với đề tài : “Xây dựng chức năng slider cho sản
phẩm thương mại điển tự Shopify” mục tiêu có được chức năng slider linh hoạt,
áp dụng vào để cho ra sản phẩm thương mại điện tử hoàn thiện.
1.2. Mục tiêu nghiên cứu
Xây dựng chức năng Slider đáp ứng cho toàn bộ các theme thương mại điện
tử Shopify của trung tâm RDCMA. Slider có khả năng tùy biến cao, dễ dàng sử
dụng, tính năng, hiệu ứng đa dạng, phù hợp với nhu cầu sử dụng của từng slider
trong các theme khác nhau.
Nhằm tổng hợp những kiến thức đã học được trong suốt quá trình học tập tại
trường cũng như những kiến thức có được trong quá trình làm đồ án tại trung tâm
RDCMA để:
– Tìm hiểu rõ hơn, sâu hơn và làm rõ các khái niệm về TMĐT, sản phẩm
TMĐT và Framework.
– Khả năng phân tích cho một hệ thống
– Hiểu về Shopify và lập trình liquid

– Kĩ thuật lập trình trên môi trường internet
– Tìm hiểu và áp dụng các công nghệ mới như Bootstrap, HTML5, CSS3,
Javascript…
Việc xây dựng chức năng slider toàn diện cho người dùng là doanh nghiệp,
tổ chức, cá nhân cũng có thể là người tiêu dùng. Việc xây dựng hệ thống này cần
phải thỏa mãn những tiêu chí như:
– Chức năng slider builder linh hoạt, áp dụng được mọi hệ thống của Shopify.
– Giao diện đẹp mắt, dễ quản lý và đơn giản sử dụng, được thiết kế để hiện thị
tối ưu trên mọi thiết bị.
– Dễ dàng cái đặt cũng như thao tác với chức năng.
– Nhiều tùy biến, hiện thị đẹp.
1.3 Phương pháp nghiên cứu
2


Phương pháp nghiên cứu chủ yếu dựa vào phương pháp chuẩn tắc để đánh
giá giá trị lý luận và thực tiễn. Đồng thời số liệu nghiên cứu được lấy từ nguồn thứ
cấp và sơ cấp kết hợp các phương pháp tổng hợp, thống kê, phân tích, tham khảo
các ý kiến chuyên gia và các thầy cô hướng dẫn.
Đọc tài liệu, phân tích và tổng hợp tài liệu để nghiên cứu.
1.4. Phạm vi nghiên cứu
Sản phẩm thương mại điện tử là sản phẩm, lĩnh vực rộng cả về nghiệp vụ lẫn
lý thuyết ứng dụng. Doanh nghiệp, tổ chức hay cá nhân muốn hoạt động trong lĩnh
vực này cần đòi hỏi phải có thời gian tìm hiểu để tiếp cần và hiểu nó hơn. Đề tài
nghiên cứu trong phạm vi:
-

Tìm hiểu về Shopify.

-

Xây dựng chức năng “Slider”.

-

Tập trung vào việc thiết kế, xây dựng nhiều layout, đầy đủ các hiệu ứng
slider của sản phẩm thương mại điện tử, giao diện hoàn chỉnh.

1.5. Tìm hiểu về thương mại điện tử và sản phẩm thương mại điện tử.
1.5.1 Tìm hiểu về thương mại điện tử.
 Khái niệm thương mại điện tử
TMĐT là hình thức quan trọng của các hoạt động thương mại trong xã hội ở
thế kỉ XXI, bao gồm một loạt các hoạt động thương mại được thực hiện thông qua
mạng, từ tìm nguồn nguyên liệu, thu mua, trưng bày sản phẩm, đặt hàng đến giao
hàng, vận chuyển và thanh toán điện tử,…Ngoài các giao dịch điện tử đối với mua
bán hàng hóa, TMĐT sẽ bao gồm cả những hoạt động thương mại dịch vụ như việc
truyền tin trực tuyến, chuyển tiền điện tử, giao dịch cổ phiếu điện tử, vận đơn điện
tử, tiến hành đấu giá trên mạng…TMĐT vừa đề cập việc mua bán hàng hóa và cung
cấp các dịch vụ, vừa có những nội dung hoạt động xã hội mới(cửa hàng ảo, kinh
doanh qua mạng,…).

3


Tuy nhiên, TMĐT càng được biết tới như một phương thức kinh doanh hiệu
quả nhất từ khi internet hình thành và phát triển. Chính vì vậy, nhiều người hiểu
TMĐT theo nghĩa cụ thể hơn là giao dịch thương mại, mua sắm qua internet và
mạng.
 Lợi ích của thương mại điển tự
Đối với doanh nghiệp, lợi ích lớn nhất mà TMĐT mang lại chính là sự kết hợp

chi phí vào tạo lợi nhuận cho các bên giao dịch. Giao dịch bằng phương tiện điện tử
nhanh hơn so với giao dịch truyền thống. Các giao dịch qua internet có chi phí rất
rẻ, với TMĐT các bên có thể tiến hành giao dịch khi ở cách xa nhau, giữa thành phố
với nông thôn, từ nước này sang nước khác hay nói cách khác là không bị giới hạn
không gian địa lý. Điều này cho phép các doanh nghiệp tiết kiệm chi phí sản xuất,
giao dịch. Bên cạnh đó, doanh nghiệp có thể mở rộng thị trường, tìm kiếm, liên lạc
với đối tác và khách hàng ở bất kì nơi đâu với chi phí thấp hơn phương thức tiếp
cận thị trường truyền thống.
Đối với người tiêu dùng, TMĐT mở rộng khả năng lựa chọn hàng hóa, dịch vụ
và nhà cung cấp. Do có nhiều lựa chọn nên khách hàng dễ tìm được sản phẩm có
chất lượng cao hoặc giá thấp. Hàng hóa như phần mềm, phim, nhạc có thể được
giao ngay đến khách hàng qua internet.
Đối với xã hội, TMĐT tạo ra một phong cách kinh doanh, làm việc mới phù
hợp với cuộc sống công nghiệp, giúp các khu vực kém phát triển nhanh chóng mở
rộng trao đổi. TMĐT là một công cụ giúp doanh nghiệp vừa và nhỏ khắc phục
những điểm kém lợi thế để cạnh tranh bằng với doanh nghiệp lớn. TMĐT cũng tạo
ra động lực mạnh mẽ.
1.5.2 Sản phẩm thương mại điện tử.
Một sản phẩm thương mại điện tử là sản phẩm phải đạt được những yêu cầu
hoặc tiêu chuẩn nhất định để đem đến cho khách hàng một sản phẩm TMĐT hay
website không chỉ ấn tượng về giao diện mà còn hoàn hảo về chức năng và trải
nghiệm người dùng.
4


Phát triển thương mại điện tử là nhu cầu tất yếu của nền kinh tế hiện đại, nó mang
lại lợi ích cho cả các doanh nghiệp cũng như khách hàng.
Điều kiện để có sản phẩm thương mại mang có tính cạnh tranh lớn đòi hỏi những
yêu cầu, chức năng nổi bật cần thiết như:
 Đòi hỏi thiết kế (Design) đẹp mắt

Một thiết kế tốt đòi hỏi website trong các layout với khoảng trắng, canh
chỉnh, lựa chọn màu sắc và cách trình bày văn bản. Cấu trúc dễ dàng chỉnh sửa để
cho phù hợp với sidebar bên trái, bên phải.
Tùy chỉnh nhiều layout (home) khác nhau với các header phù hợp với các nội
dung khác nhau. Kích thước của logo có thể thay đổi mà không ảnh hưởng tới
layout, theme cho phép cấu trúc nhiều cột. Các layout có thể tùy biến theo ý người
dùng. Được xây dựng trên khung Bootstrap một trong những khung tốt nhất linh
hoạt sạch sẽ, tương thích với mobile và các thiết bị cầm tay. Và đi kèm với nhiều
tùy chọn để có thể quản lý từng chi tiết nhỏ bên trong nó để tạo ra phong cách riêng
của doanh nghiệp, công ty bạn.
Thiết kế cần phải nổi bật, có thể đơn giản giống như là một khung hình ảnh
độc nhất, một slide show trên trang chủ, menu với tính năng animation đa dạng, các
nút button, hover qua hình ảnh đòi hỏi độ mượt. Tạo nên sự riêng biệt website của
bạn so với các website khác.
 Chi tiết
Tất cả đều chi tiết, website thương mại điện tử với những đường kẻ sắc nét,
những hiệu ứng chuyển màu mượt mà, canh chỉnh phù hợp và sử dụng khoảng trắng
tốt. Các chức năng dễ dàng sử dụng, khả năng chỉnh sửa một cách dễ dàng.
 Tạo cho người dùng những thao tác tùy chọn dễ dàng nhất.
Để có được sản phẩm thương mại điện tử cung cấp các thiết lập có thể chỉnh
sửa mọi thứ. Sản phẩm phải tạo cho người dùng những điều khiển đơn giản nhất, dễ
thao tác .Ví dụ, nếu thiết kế có menu chính trong phần footer, hãy chắc rằng bạn có
5


thêm một tuỳ chọn để chuyển nó lên phần header. Giao diện hỗ trợ thay đổi màu sắc
của rất nhiều thành phần như: hình nền, liên kết, text, menu ….
1.6 Giới thiệu sơ lược về Shopify.
Có trụ sở chính tại Ottawa – Canada và Giám đốc điều hành của công ty
được đặt tên là Tobias Lütke được thành lập vào năm 2006, Shopify là một trong

những công ty đi tiên phong trong cuộc cách mạng thương mại điện tử trên phạm vi
toàn cầu. Sau gần 10 năm đi vào hoạt động, Shopify ngày nay đứng vào hàng ngũ
những ông lớn của thương mại điện tử thế giới bên cạnh Bigcommerce, Weebly
eCommerce và Squarespace.
Shopify là nền tảng thương mại điện tử tốt nhất thế giới hiện nay, tính đến
thời điểm đầu năm 2016, có tổng cộng hơn 200.000 website đang sử dụng nền tảng
Shopify trên phạm vi toàn cầu và đang không ngững tăng lên. Một thống kê chỉ ra
rằng Shopify đã mang lại doanh thu tổng cộng hơn 12 tỷ đô la trên toàn cầu. Khác
với những đối thủ cạnh tranh khác, Shopify luôn tiên phong áp dụng những công
nghệ mới nhất và tiên tiến nhất của internet để tích hợp vào website sử
dụng Shopify. Cùng với đó, Shopify sở hữu đội ngũ chuyên gia nhiều năm kinh
nghiệm và có những am hiểu sâu sắc về thương mại điện tử nói riêng và công nghệ
internet nói chung.
Được đánh giá có giao diện chuyên nghiệp cho thương mại điện tử. Shopify
sở hữu kho giao diện miễn phí được thiết kế dành riêng cho website thương mại
điện tử. Và người dùng hoàn toàn không cần bất cứ kỹ năng thiết kế hay lập trìn nào
để có thể sử dụng Shopify. Với kho ứng dụng đồ sộ và miễn phí, Shopify Apps sở
hữu hơn 900 ứng dụng miễn phí dành riêng cho website sử dụng Shopify. Việc tự
cài đặt những ứng dụng cần thiết cho website hoàn toàn miễn phí như Live chat,
pop-up, mạng xã hội, McAfee Secure…
Tất cả website sử dụng Shopify đều được thiết kế để hiển thị một cách tối ưu
trên mọi thiết bị. Shopify sở hữu giao diện riêng và tự động co lại kích cỡ phù hợp
khi khách hàng truy cập bằng smartphone hay máy tính bảng. Bên cạnh đó, Shopify
còn được thiết kế để tương thích với tất cả các bộ máy tìm kiếm như Google, Bing,
6


Yahoo,.. Với Shopify việc tích hợp các công cụ như Google Analytics hay Google
Webmaster Tools hoàn toàn dễ dàng.
Với giao diện quản lý chuyên nghiệp, dễ sử dụng. Shopify sở hữu giao diện

quản lý chuyên nghiệp và vô cùng đơn giản để sử dụng. Ngoài ra còn có thể cài đtặ
ứng dụng, thiết kế lại theo giao diện ý muốn như chỉnh sửa HTML/CSS.
Tất cả website sử dụng Shopify đều có thể dễ dàng tích hợp cổng thanh toán
Paypal qua đó khách hàng có thể thanh toán tài khoản Paypal hoặc thẻ Visa,
MasterCard, American Express,… Tất cả thanh toán tại Shopify đều được bảo mật
tuyệt đối bằng giao thức SSL.
Với Shopify bạn có thể hoàn toàn kết nối và bán hàng thông qua trang
Facebook của bạn vô cùng dễ dàng. Tất cả những sản phẩm có trên website của bạn
sẽ được hiển thị trên trang Facebook và khách hàng có thể đặt hàng trực tiếp tại
trangg Facebook của bạn.
Theo đánh giá của giới chuyên môn, Shopify hiện tại đang là nền tảng
thương mại điện tử tốt nhất trên thế giới. Shopify cũng được giới thiệu bởi những
trang công nghệ lớn nhất thế giới như TechCrunch, Mashable, The New York
Times, The Wall Street Journal,...
1.7 Tính năng của Shopify.
Shopify có đầy đủ những tính năng căn bản tối thiểu mà bất cứ cửa hàng nào cần
như:
–

Giao diện website chuẩn cho các cửa hàng Online (có tất cả hơn 100 giao

diện) và tất nhiên là phải có Domain + Hosting để website đó có thể hoạt động.
–

Mobile – Friendly.

–

Quản lý admin chuyên nghiệp

–

Shopify Facebook Store

–

Giỏ hàng kết nối hơn 70 cổng thanh toán với các tính năng về thuế, phí vận

chuyển
7


–

Tính năng quản lý khách hàng, chăm sóc khách hàng, các mẫu email tự động

trả lời cho khách hàng.
–

Quản lý đơn hàng, tồn kho, tùy biến các lựa chọn cho sản phẩm chuyên

nghiệp, tiện lợi
–

Hệ thống Marketing chuyên nghiệp với các tính năng cung cấp mã giảm giá,

thẻ quà tặng, tab cửa hàng trên Facebook, hệ thống email marketing, tính năng
review sản phẩm
–

Công cụ báo cáo, phân tích dữ liệu về traffic, đơn hàng, khách hàng, insights

người dùng … toàn diện và hữu ích.
–

Và đặc biệt là họ có các đối tác phát triển ứng dụng tới hơn 900 Apps hỗ trợ

như: live chat, email, popup, tích hợp vận chuyển, quyết toán, báo cáo và vô vàn
các ứng dụng hữu ích khác …
–

Tích hợp những tính năng tự động như: Đặt hàng, thanh toán, báo cáo, quản

lý quy trình (tuỳ theo yêu cầu của quý khách và tính chất ngành nghề), tài khoản
log-in cho khách hàng...
–

Tích hợp sẵn các tính năng quảng bá website trên Internet, cho phép tối ưu

hóa việc quảng bá hình ảnh sản phẩm và doanh nghiệp.
–

Hoạt động ổn định, tính bảo mật cao. Dễ dàng nâng cấp theo yêu cầu.

–

Chế độ chăm sóc và hỗ trợ khách hàng 24/7.

–

Thông thường các chức năng: đăng và quản lý sản phẩm, giỏ hàng, thanh

toán trực tuyến, đăng nhập và đăng ký, quản lý đơn hàng… sẽ được tích hợp vào
trong website thương mại điện tử. Và để bạn dễ hình dung hơn nữa thì bạn chỉ cần
hiểu về website thương mại điện tử đó là buôn bán, giao dịch thông qua website,
trang web này hoạt động bằng mạng internet.
–

Cung cấp đầy đủ những thông tin chi tiết về sản phẩm giúp khách hàng dễ

dàng lựa chọn được sản phẩm phù hợp.
–

Cung cấp phương thức thanh toán đa dạng, linh hoạt một cách gián tiếp hoặc

trực tiếp bằng chức năng thanh toán trực tuyến với những đối tác uy tín.
8


–

Tích hợp sẵn các tính năng Quảng bá website trên Internet, cho phép tối ưu

hóa quảng bá hình ảnh sản phẩm và doanh nghiệp.
–

Khách truy cập dễ dàng tìm thấy dịch vụ, sản phẩm cần thiết chỉ bằng vài cú

click chuột nhờ hệ thống link điều hướng đến những nội dung chính được bố trí
chuyên nghiệp.

–

Website được tải với tốc độ nhanh, có khả năng tương thích với hầu hết các

trình duyệt web phổ biến nhất hiện nay.
–

Hệ thống quản trị web thương mại điện tử hiện đại, đơn giản, giúp quý doanh

nghiệp quản lý web, cập nhật sản phẩm, dịch vụ một cách dễ dàng, nhanh chóng.
–

Website được cập nhật thông tin, tin tức chuyên ngành một cách hoàn toàn tự

động từ các báo điện tử nổi tiếng.
1.8 So sánh Shopify với một số mã nguồn
 Haravan
Tính năng cũng y như vậy do Haravan copy lại y nguyên hệ thống và cách thức
vận hành của Shopify, chỉ có 1 vài điểm khác biệt sau đây:
-

Về UX và UI tức là giao diện và trải nghiệm của người dùng củ Haravan ở
trong phần admin (quản trị) chưa được thông minh và mượt mà như
Shopify. Và quan trọng hơn là có 1 vài tính năng vẫn thiếu sót chưa hoàn
thiện, chưa có 1 hệ thống đồ sộ app hỗ trợ như Shopify.

-

Nhưng ngược lại về giao diện ngoài trang bán hàng thì đã được làm theo
phong cách quen thuộc và thân thiện hơn với người Việt.

-

Hệ thống POS (Point Of Sales) tức là các công cụ hỗ trợ tại điểm bán như
máy hóa đơn, máy thanh toán cà thẻ … chưa được hoàn thiện như Shopify.

-

Chưa có ứng dụng quản lý trên smartphone thuận lợi như Shopify.

-

Nhưng bù lại thì đây là một sản phẩm làm tại Việt Nam nên họ có thể kết
nối được với Giao Hàng Nhanh, 5 Giây, Webtretho, Kiot Việt nên sẽ thêm

9


1 số tính năng về vận chuyển và Marketing phù hợp hơn với người Việt
Nam.
-

Giá của Haravan rẻ hơn nhiều so với Shopify. Điều này cũng là dễ hiểu khi
so sánh giữa 1 bên là nguyên bản và 1 bên là copy lại.

 Woocommerce
Là một plugin miễn phí được sử dụng để tạo một trang thương mại điện tử cỡ nhỏ
tốt nhất hiện nay trong WordPress. Nó cũng như bao plugin khác là bổ sung chức
năng vào website nhưng nó sẽ bổ sung gần như toàn diện các chức năng mà một
trang bán hàng đơn giản cần có.

 Woocommerce sẽ có các chức năng chính như:
-

Tạo sản phẩm với định dạng thông thường, sản phẩm có thuộc tính, sản
phẩm affiliate và sản phẩm kỹ thuật số (có thể tải về).

-

Hỗ trợ một số hình thức thanh toán online như PayPal, Credit Card, CoD,
Cash và sẽ càng nhiều hơn khi cài thêm plugin hỗ trợ cho riêng nó.

-

Hỗ trợ tự tính thuế sản phẩm hoặc thuế theo đơn hàng.

-

Hỗ trợ tự tính giá chuyển phát, có rất nhiều loại tính giá chuyển phát và sẽ
đa dạng hơn khi cài thêm plugin như có thể tính giá chuyển phát dựa theo
cân nặng, kích thước, tỉnh thành,…

-

Trang quản lý đơn hàng chuyên nghiệp, lọc đơn hàng thông qua từng trạng
thái.

-

Hỗ trợ template hiển thị riêng để có thể tự cấu hình lại template hiển thị
phần shop và sản phẩm, cái này rất có lợi cho lập trình viên.

-

Có sẵn nhiều theme và extension (plugin mở rộng) để biến thành trang shop
chuyên nghiệp.

1.9 Lập trình Liquid

10


1.9.1. Giới thiệu lập trình liquid
Liquid là một mã nguồn mở, ngôn ngữ mẫu được sáng tạo bởi Shopify dựa
trên nền tảng ngôn ngữ Ruby. Nó là thành phần chính của các theme trong Shopify
và được sử dụng để tải các nội dung động lên giao diện các cửa hàng.
Liquid sử dụng sự kết hợp các tag (nhãn), object (đối tượng) và filter (bộ lọc) để tải
những nội dung động. Chúng được sử dụng bên trong các tài liệu mẫu của Liquid,
nhóm các tệp tin này tạo thành một theme.
1.9.2. Tags – Nhãn
Thẻ (tags) liquid là các logic lập trình dùng để thông báo cho hệ thống cần làm gì để
đưa ra ngoài giao diện. Các thẻ được bao bởi: {%%}.
Ví dụ:
{% if user.name == 'elvis' %}
Hey Elvis
{% endif %}
Một số thẻ như for và cycle có thể đi kèm theo một số tham số. Các thẻ có thể được
chia làm 4 loại chính sau:
– Thẻ điều khiển luồng – Control Flow Tag
– Thẻ lặp – Iteration Tag
– Thẻ biến số - Variable Tag

– Thẻ giao diện – Theme Tag
 Thẻ điều khiển luồng
Các thẻ luồng điều khiển sẽ quyết định đoạn mã nào sẽ được thực hiện dựa trên các
điều kiện khác nhau. Bao gồm các thẻ: if, elsif/else, case/when, unless.
 If: Thực hiện một đoạn mã khi điều kiện chính xác được đáp ứng.
Ví dụ
{% if product.name == 'Product A' %}
Sản phẩm giảm giá hôm nay "Product A"
11


{% endif %}


elsif / else: Bổ sung các điều kiện khác khi dùng thẻ if hoặc unless.

Ví dụ:
{% if customer.name == 'Ha' %}
Chào bạn Ha!
{% elsif customer.name == 'guest' %}
Xin chào quý khách!
{% else %}
Chào bạn!
{% endif %}


case/when: Tạo nên một hướng chuyển đổi để so sánh một biến số với các
giá trị khác nhau. Case sẽ tạo hướng chuyển đổi và when sẽ so sánh các giá
trị..

Ví dụ
{% assign vendor = 'Adidas' %}
{% case vendor %}
{% when 'Adidas' %}
Một sản phẩm của Adidas
{% when 'Nike' %}
Một sản phẩm của Nike
{% else %}
Sản phẩm này không phải của Adidas hay Nike
{% endcase %}


Unless: Thẻ này tương tự với if, nhưng nó sẽ thực hiện đoạn mã nếu các
điều kiện cụ thể không được đáp ứng.

Ví dụ
{% unless product.name == 'Adidas Neo' %}
Đây không phải là giày Adidas Neo
12


{% endunless %}


Thẻ lặp

Các thẻ lặp dùng để chạy một đoạn mã nhiều lần liên tiếp: for, cycle.


For: thực hiện một đoạn mã lặp lại nhiều lần. Để xem đầy đủ các thuộc

tính có trong vòng lặp for.

Vòng lặp chỉ có thể đưa ra tối đa 50 kết quả mỗi trang, trong trường hợp có nhiều
hơn 50 kết quả, hãy sử dụng thẻ paginate để phân thành nhiều trang.
Ví dụ:
{% for product in collection.products %}
{{ product.name }}
{% endfor %}


Break: Sử dụng để tạm dừng vòng lặp.



Continue: Bỏ qua 1 vòng lặp.



Tham số của for

-

Limit: Thoát khỏi vòng lặp tại giá trị xác định.
Ví dụ:
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
{{ item }}
{% endfor %}

-

Offset: Bắt đầu vòng lặp tại giá trị xác định.
Range: Quy định khoảng bắt đầu và kết thúc của vòng lặp
Ví dụ:
{% assign num = 4 %}
{% for i in (1..num) %}
{{ i }}
13


{% endfor %}
{% for i in (3..5) %}
{{ i }}
{% endfor %}
-

Reversed: Đảo ngược thứ tự của vòng lặp

-

Cycle: Chạy qua một nhóm các chuỗi và xuất chúng theo thứ tự mà chúng
được thông qua như là tham số. Mỗi lần cycle được gọi, chuỗi tiếp theo đã
được thông như là một tham số là đầu ra. Cycle phải được sử dụng trong
vòng lặp for.

Ví dụ:
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
Cycle có thể sử dụng khi:
–

Thêm vào class odd/even cho các hàng/cột trong bảng

–

Thêm một class vào ảnh nhỏ cuối cùng trong một hàng



Các thẻ liên quan đến biến

Các thẻ này dùng để tạo các biến Liquid mới sẽ được sử dụng trong giao diện:
assign, capture, increment, decrement.


Assign: Tạo một biến mới.

Ví dụ
{% assign new_variable = false %}
{% if new_variable != true %}
Hiện thị nội dung cần thiết.
{% endif %}
Sử dụng ("") để tạo biến là một chuỗi.
Ví dụ

14


{% assign foo = "bar" %}
{{ foo }}

Capture: Bắt một chuỗi và gán nó vào một biết mới.


Ví dụ

{% capture new_variable %}Nội dung chuỗi.{% endcapture %}
{{ new_variable }}
Increment: Tạo một biến số mới và sau mỗi lần gọi sẽ tăng biến số thêm



một đơn vị, biến số mới bắt đầu bằng 0.
Decrement: Tạo một biến số mới và sau mỗi lần gọi sẽ giảm biến số thêm



một đơn vị, biến số mới bắt đầu bằng -1.


Thẻ giao diện

Các thẻ giao diện có tác dụng để:
–

Xuất ra các đoạn mã HTML đặc biệt

–

Thông báo cho hệ thống biết cần phải gọi snippet nào khi hiển thị giao diện

–

Phân trang cho giao diện.

Bao gồm các thẻ: comment, include, form, layout, paginate, raw.


Comment: Cho phép bạn để lại chú thích trong đoạn mã Liquid. Nội dung
trong thẻ comment sẽ không được xuất ra ngoài, các đoạn mã Liquid trong
đó cũng sẽ không được thực thi.

Ví dụ
Xin chào {% comment %} bạn, {% endcomment %} Nguyễn Văn A!


Include: Thêm một đoạn mã snippet lấy từ thư mục snippets của giao diện.

{% include 'snippet-name' %}
Chú ý: tên của snippet sẽ không bao gồm đuôi .bwt. Khi một snippet được gọi ra để
sử dụng, các đoạn mã trong snippet đó sẽ được quyền truy cập đến các biến số trong
template gốc.
15


Form: Tạo đoạn mã HTML với <form> bao gồm các thuộc tính tương ứng



(action, id, etc.) và <input> để có thể gửi được thông tin thành công.





Các tham số của form:

–

article_comments

–

contact

–

customer_register

–

customer_address

–

customer_login

–

recover_customer_password
Layout: Hiển thị một layout khác từ thư mục layout của giao diện. Nếu không

có layout nào được chỉ định, theme.bwt sẽ được hiển thị mặc định.
Ví dụ:
<!-- Hiển thị layoput alternate.bwt -->
{% layout 'alternate' %}


Paginate: Chia sản phẩm, bài viết blog hoặc kết quả tìm kiếm thành các trang
nhỏ, tối đa 50 đối tượng mỗi trang, xem thêm tại thẻ for.

Paginate phải được sử dụng với for để chia nội dung thành các trang khác nhau. Nó
phải bao ngoài vòng lặp for chạy qua một mảng.
Trong thẻ paginate, bạn có thể truy cập đến các thuộc tính của đối tượng paginate.
Nó bao gồm các thuộc tính để xuất ra các liên kết đến các trang khác.


Raw: Cho phép hiện thị một đoạn mã Liquid trên một trang. Đoạn code này sẽ
không được thực thi.

Ví dụ:
{% raw %}{{ 5 | plus: 6 }}{% endraw %} bằng 11

16


1.9.3. Object – Đối tượng
Các Đối tượng chứa những thuộc tính được sử dụng để hiển thị nội dung
động trên một trang.
{{ product.title }} <!-- Output: Awesome T-Shirt-->
Các đối tượng trong Liquid bao gồm các thuộc tính để xuất ra các trang nội dung

động. Ví dụ: đối tượng product có thuộc tính là name có thể sử dụng để xuất ra tên
của sản phẩm.
Để gọi ra các thuộc tính của đối tượng trên một trang, ta sử dụng {{ và }}, như sau:
{{ product.name }} <!-- Output: “Awesome Shoes” -->


Đối tượng tổng quát:

Đây là những đối tượng có thể được sử dụng và truy cập từ bất cứ tập tin nào trong
giao diện, chúng được gọi là đối tượng tổng quát hoặc biến tổng quát:
blogs

<ul>
{% for article in blogs.myblog.articles %}
<li>{{ article.title | link_to: article.url }}</li>
{% endfor %}
</ul>
Đối tượng blogs bao gồm các thuộc tính liên quan đến blog.

cart

Đối tượng cart bao gồm các thuộc tính liên quan đến giỏ hàng.

collections

{% for product in collections.frontpage.products %}
{{ product.name }}
{% endfor %}
Đối tượng collections bao gồm các thuộc tính liên quan đến
danh mục sản phẩm.

17


current_page

{% if current_page != 1 %} Trang {{ current_page }}{% endif
%}
Đối tượng current_page trả về số trang hiện tại khi bạn sử dụng
phân trang.

current_tags

<!-- in blog.bwt -->
{% if current_tags %}

{{ blog.name | link_to: blog.url }} › {{
current_tags.first }}

{% else %}

{{ blog.name }}

{% endif %}
Đối tượng current_tags trả về các tag đang được sử dụng để lọc.

customer

{% if store.customer_accounts_enabled %}
{% if customer %}
<a href="/account">My Tài khoản</a>
{{ 'Đăng xuất' | customer_logout_link }}
{% else %}

{{ 'Đăng nhập' | customer_login_link }}
{% if store.customer_accounts_optional %}
{{ 'Tạo tài khoản' | customer_register_link }}
{% endif %}
18


{% endif %}
{% endif %}
Đối tượng customer chỉ có thể sử dụng khi khách hàng đăng
nhập tài khoản trên website.
linklists

<ul>
{% for link in linklists.categories.links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>
Đối tượng linklists bao gồm các liên kết trong một menu, bạn
có thể
truy cập đối tượng này qua định danh (alias) của nó.

{{ pages.about.title }}

pages

<div>{{ pages.about.content }}</div>
Đối tượng pages gồm các trang nội dung có trong website.
page_description

{% if page_description %}

{% endif %}
Chủ website có thể chỉnh sửa page_description. Đây là một
trường
có thể thay đổi tùy theo đối tượng tương ứng
(danh mục sản phẩm, sản phẩm, bài viết,...).

19