tiểu luận đồ án môn công nghệ tmđt

LỜI MỞ ĐẦUVới sự phát triển mạnh mẽ của Internet, công nghệ thông tin cùng với sự lớn mạnh củangành thương mại điện tử như hiện nay, nên việc thiết kế một website bán hàng là điềumà hầu

TRƯỜNG ĐẠI HỌC KINH TẾ TP HCMKHOA CÔNG NGHỆ THÔNG TIN KINH DOANH

BÁO CÁO CUỐI KỲ

MÔN: CÔNG NGHỆ THƯƠNG MẠI ĐIỆN TỬ

Giảng viên: Ths TRẦN LÊ PHÚC THỊNHNhóm thực hiện: NHÓM 5

TP Hồ Chí Minh – Tháng 10 Năm 2023

1 GIỚI THIỆU VỀ WEBSITE: 6

1.7 Trang thanh toán – Check out: 19

1.8 Trang Thank You sau khi đặt hàng: 19

2CAN THIỆP BẰNG CODE VÀO CÁC HOOK CỦA WOOCOMMERCE 21

2.1 Tùy chỉnh nội dung nút thêm vào giỏ hàng “Add To Cart” 21

2.2 Tự động thêm mã giảm giá nếu đạt đến giá trị đơn hàng tối thiểu 22

2.3 Thêm nội dung dưới nút Tiến hành thanh toán trên trang giỏ hàng 24

2.4 Thay đổi tiêu đề ở trang tiếp nhận đơn hàng: 25

2.5 Thay đổi nội dung ở trang tiếp nhận đơn hàng: 27

2.6 Ước tính ngày nhận hàng trên trang Check-out: 28

2.7 Hiện thông báo khuyến khích khách mua thêm để Freeship hoặc thông báo khách được Freeship nếu đạt điều kiện: 31

2.8 Thay đổi huy hiệu “SALE” của WooCommerce: 33

2.9 Thay đổi văn bản nút "Chọn một tùy chọn” thả xuống sản phẩm WooCommerce 34

2.10 Thay đổi nội dung “Còn Hàng”/ “Hết Hàng” 35

2.11 Hiển thị số lượng đơn vị đã bán trên kho lưu trữ sản phẩm 36

2.12 Thêm biểu mẫu nhận thức về website qua đâu ở Trang Cảm Ơn 37

2.13 Xác nhận đúng số điện thoại Việt Nam 40

2.14 Thêm sản phẩm yêu thích vào trang “Sản phẩm yêu thích” 43

2.15 Chặn comment spam ngắn 49

2.16 Giới hạn ký tự comment 51

2.17 Chống link spam từ các nguồn khác 52

2.18 Thêm Header 54

2.19 Thêm Back – to – top 55

2.20 Thêm chữ ‘Hết hàng’ nếu sản phẩm trong kho đã hết 58

2.21 Thêm nút gọi điện Hotline cho trang web ở góc dưới trái trang web 58

2.22 Tạo trang đăng ký và đăng nhập cho thành viên 59

Too long to read onyour phone? Save to

read later on yourcomputer

Save to a Studylist

LỜI MỞ ĐẦU

Với sự phát triển mạnh mẽ của Internet, công nghệ thông tin cùng với sự lớn mạnh củangành thương mại điện tử như hiện nay, nên việc thiết kế một website bán hàng là điềumà hầu như doanh nghiệp nào cũng thực hiện kể cả là các người bán nhỏ lẻ họ cũng ýthức và chú trọng vào yếu tố này Vì việc thiết kế website này có thể thúc đẩy hoạt đô Ungkinh doanh, quảng bá, tuyên truyền sản phẩm và thu hút khách hàng tiềm năng, mang lạilợi ích khủng cho doanh nghiệp

S[ h\u website bán hàng có thể xem là s[ h\u công c^ giúp người kinh doanh thu hútthêm nhiều khách hàng, đây được xem là lý do đầu tiên để thiết kế website Theo thốngkê hiện nay, nước ta có khoảng 41 triệu người dùng Internet, chiếm khoảng hơn 45% dânsố cả nước Trong đó, phần lớn là nh\ng đối tượng trẻ có nhu cầu trực tuyến và mua sắmcao Có khoảng hơn 1/3 dân số cả nước sử d^ng mạng Internet để tìm kiếm, tra cứu thôngtin về các dịch v^, mua sắm sản phẩm Có riêng một website bán hàng, doanh nghiệp củabạn đã thu hút được thêm một lượng không nhỏ khách hàng trên mạng internet Ngượclại, không có website nghca là bạn đã mất đi cơ hội bán hàng và nhường cơ hội đó cho đốithủ.

Mỹ phẩm là lcnh vực mang lại lợi nhuận lớn khi nhu cầu làm đẹp của chị em ngày mộttăng Cũng vì lý do đó mà ngày càng có nhiều hơn các thương hiệu ra đời Để có thể tiếpcận khách hàng thì thiết kế website mỹ phẩm là điều cần thiết Tại đây bạn có thể thu hútthêm người dùng tạo lên tệp khách hàng quan tâm đồng thời giới thiệu chi tiết các mặthàng của đơn vị Các sản phẩm mỹ phẩm trên thị trường hiện nay vô cùng đa dạng Đểkhách hàng có thể biết và tham khảo các sản phẩm tại cửa hàng của bạn là điều không dễdàng Do đó mà bạn cần xây dựng website, tổng hợp và phân loại mỹ phẩm theo côngd^ng, tính năng, thương hiệu Đồng thời website sẽ giúp khách hàng không bỏ lỡ các sảnphẩm tại website của bạn Từ đó giúp khách hàng có thể tìm được các sản phẩm mình cầncũng như tăng doanh thu cho cửa hàng Vì thay chỉ mua 1 sản phẩm khách hàng có thểtìm hiểu và mua thêm các sản phẩm khác n\a sau thời gian lướt web.

Mua hàng online là xu hướng mới và trong đó website là một trong nh\ng kênh muahàng lớn hiện nay Việc xây dựng website sẽ giúp bạn có thể tiếp cận được lượng kháchhàng lớn hơn Đặc biệt khi các sản phẩm, trang web được Google đánh giá tốt và lọt vàotop đầu Một điều quan trọng mà bạn cần có website mỹ phẩm chính là tạo sự tin tư[ngcho khách hàng Đặc biệt khi đây là lcnh vực có rất nhiều sản phẩm trôi nổi, không rõnguồn gốc Cũng như khách hàng có phần khắt khe hơn, cần chắc chắn rằng bạn cung cấplà sản phẩm chính hãng Tâm lý khách hàng sẽ tin tư[ng hơn nếu cửa hàng của bạn cówebsite, fanpage tốt, chuyên nghiệp Và trên đây là nh\ng ý tư[ng để nhóm lựa chọn đềtài này và thực hiện cho báo cáo cuối kỳ

1 GIỚI THIỆU VỀ WEBSITE:

1.1 Publish website:

- Upload source code lên hosting:

Hình Upload source code của WP lên hosting- Upload database và chỉnh sửa lại config php:

Hình Upload database lên hosting

- Publish website (https://group5.fun/) link hoạt động đến 31/10/2023.

Hình Pubish website

Hình Website hoạt động và URL website1.2 Giới thiệu header và hình ảnh header của website:

Hình Header của website và hình ảnh header - logo

- Đối với phần header, hình ảnh logo và ảnh nền đầu trang được nhóm tự thiết kế đểđảm bảo tính cá nhân hóa của cửa hàng

- Phần Menu [ header đang hiển thị hai loại menu bao gồm:

Menu chính: thể hiện các danh m^c sản phẩm, các tính năng chính của cửa hàng như giỏ hàng, thanh toán, form liên hệ, bản đồ địa chỉ của cửa hàng cũng như tính năng đăng nhập

Menu phụ: với m^c đích để kích cầu mua sắm, nhóm gắn thêm URL của một số loại sản phẩm tiêu biểu để có thể “up-sells” người dùng

- Hai thanh header trên cùng được can thiệp bằng mã nguồn để thể hiện thêm thông tin đến người dùng về thời gian hoạt động của cửa hàng cũng như hình ảnh về dịchv^ của cửa hàng

Mã nguồn thêm thông tin thời gian hoạt động và email liên hệ:

Plugin Name: Custom Header PHP

Description: Add custom PHP code to the header.*/

function custom_header_php() {

! ! echo'<div class="custom-header", style="background-color:#F5F5DC; text-color: #004225; text-align: center;"> Open time: 9:00AM - 8:00PM |

Email: group5@gmail.com </div>';}

add_action('wp_head', 'custom_header_php');

Mã nguồn hiển thị hình ảnh dịch vụ của cửa hàng: ///Thêm hình aAnh đầDu head

add_action('wp_body_open' 'tb_head',);function tb_head(){

url(https://media.hasaki.vn/hsk/1696490131trimunipl.jpg);">! ! </div>';

- Danh m^c được phân cấp và chia theo từng loại sản phẩm hoặc thương hiệu.

- Form liên hệ: về m^c form liên hệ, thay vì dùng plugin Contact Form 7 hay một sốplugin hỗ trợ khác, nhóm mong muốn được tự quản lý và điều khiển tính năng nàynên dùng mã nguồn hoàn toàn [ phần form này

Add_shortcode: dùng để đăng ký shortcode.

Ob_start: là một hàm của output buffering Bật bộ đệm đầu ra cho tất cả các tệp PHP theo mặc định.

Ob_get_clean: trả về tất cả nội dung của bộ đệm đầu ra trên cùng và xóa nội dung khỏi bộ đệm.

Tạo form gồm các dòng thông tin cần thu thập từ người dùng.

Dùng lệnh If để kiểm tra xem có nội dung được gửi đi không, nếu thông tin gửi đi nhập thiếu thì yêu cầu người dùng nhập đầy đủ thông tin, nếu đủ rồi thì dùng hàm gửi mail (wp_mail) để gửi mail thông tin cho admin add_shortcode("Form_Lien_He" "Vie_show_form_lien_he",);

function Vie_show_form_lien_he(){ ! ! ! ob_start();

! ! if(isset($_POST["gui_di"])){

$_POST["so_dien_thoai" ""]: ;

$_POST["noi_dung_lien_he" ""]: ;! !

Email: $email <br> Nội dung: $noi_dung_lien_he";! ! ! !

VieBeauty sẽ liên hệ bạn trong thời gian sớm nhầct! </p>"; ! ! !! ! }

! ! }! ! ?>

! ! <formmethod="POST"> ! ! ! !

! ! ! ! ! ! <label>Họ Tên (*) </lable> < >br! ! ! ! ! ! <input type="text"name="ho_ten"/>! ! ! ! </p! ! ! !

! ! ! ! <>

! ! ! ! ! ! <label>Sôc Điện Thoại(*) </lable> <br>! ! ! ! ! ! <input type="text"name="so_dien_thoai"/>! ! ! ! </p ! ! !

! ! ! ! <>

! ! ! ! ! ! <label>Email </lable> <br>! ! ! ! ! ! <input type="email" name="email"/>! ! ! ! </p ! ! !

! ! ! ! <>

! ! ! ! ! ! <label>Nội Dung Liên Hệ (*)</lable> < >br

! ! ! ! ! ! <textarearow="4"cols="80"name="noi_dung_lien_he"></textarea>

! ! ! ! </p! ! ! ! ! ! ! ! <>

! ! ! ! <input type="submit" value="GỬAI ĐẾcN VIEBEAUTY" name="gui_di"/>! ! ! ! </ >p

! ! </form>! ! <?php

! ! $time = current_time('mysql');! ! $data =array(

! ! 'comment_post_ID' ! ! !=> $post ID->,! ! 'comment_content' ! ! !=> $body,

! ! 'comment_author_IP' ! ! => $_SERVER['REMOTE_ADDR'],! ! 'comment_date' ! ! ! ! !=> $time,

! ! 'comment_approved' ! ! !=> ,1! ! );

! ! wp_insert_comment($data);! ! returnob_get_clean(); ! ! !}

Giao diện của Form liên hệ:

Hình Plugin Form liên hệ tự code

Hình Email gửi thông tin Form liên hệ

- Where to find us: địa chỉ cửa hàng trên Maps nhóm dùng Elementor để thể hiện

Hình Vị trí cửa hàng trên bản đồ1.3 Trang chủ:

Hình Các chương trình của cửa hàng trên trang chủ

- Bên dưới header các hộp hình ảnh trong Elementor được sử d^ng để giới thiệu về các loại hình sản phẩm và các deal khuyến mãi để đẹp mắt hơn và thu hút người dùng

- URL sản phẩm liên quan sẽ được chèn vào các hộp hình ảnh để khi người dùng nhấn nào sẽ chuyển hướng họ đến trang sản phẩm tương ứng

Hình Thiết lập hộp hình ảnh trong Elementor

- Tạo các chương trình khuyến mãi bằng Media Carousel trong Elementor, khi người dùng nhấp vào từng hình ảnh sẽ chuyển hướng họ đến từng chương trình khuyến mãi tương ứng:

Hình Các chương trình sale chạy tự động bởi Media Carousel – Elementor- Tương tự phía dưới nhóm chèn video về sản phẩm để tăng thêm trải nghiệm cho

người dùng, giúp trang web sinh động hơn Và nh\ng URL tương ứng với từng nhóm thương hiệu để người dùng dễ lựa chọn và bắt mắt hơn.

Hình Video giới thiệu sản phẩm và URL các thương hiệu tương ứng- List danh m^c của từng nhóm sản phẩm, khi người dùng nhấp vào sẽ điều hướng

đến trang sản phẩm tương ứng với danh m^c.

Hình Danh mục sản phẩm bằng hình ảnh

- List danh m^c của từng nhóm thương hiệu, điều hướng đến trang tương ứng khi nhấp vào từng hình ảnh Sử d^ng Elementor chia thành 3 khối như hình, tương tự sử d^ng Media Carousel để hiển thị danh sách thương hiệu tự động lướt:

Hình Danh sách các loại thương hiệu sản phẩm- Dùng shortcode hiển thị các sản phẩm đang khuyến mãi và sản phẩm nổi bật,

khống chế số lượng sản phẩm hiển thị tối đa là 2 sản phẩm.

Hình Danh mục bằng chữ được phân loại

- Cho phép hiển thị các bài post để người dùng dễ truy cập và nội dung trang chủ được phong phú hơn Ở phần này nhóm sử d^ng Elementor để hiển thị post

Hình Hiển thị các bài viết của website để tăng tính thu hút- Thêm một số thông tin khác về cửa hàng Ở phần này nhóm vẫn dùng Elementor

chia bố c^c thành 3 phần (2 khối [ dòng trên và 1 khối [ dòng dưới) và trong mỗi phần sẽ có nh\ng cột nhỏ để hiển thị thông tin như hình

Hình Một số thông tin liên quan của website1.4 Footer:

Hình Footer website thể hiện thông tin liên hệ của cửa hàng1.5 Trang sản phẩm:

Hình Sản phẩm của cửa hàng

Hình Hình ảnh từng sản phẩm

Hình Mô tả và thông tin của sản phẩm- Sản phẩm tương tự:

Hình Sản phẩm tương tự- Sản phẩm vừa xem:

Hình Hiển thị sản phẩm vừa xem1.6 Trang giỏ hàng:

Hình Trang giỏ hàng1.7 Trang thanh toán – Check out:

Hình Giao diện Check-out1.8 Trang Thank You sau khi đặt hàng:

Hình Giao diện sau khi đặt hàng

Hình Chi tiết đơn hàng

Hình Thêm chức năng upsales và Form dưới Chi tiết đơn hàng

2 CAN THIỆP BẰNG CODE VÀO CÁC HOOK CỦA WOOCOMMERCE

2.1 Tùy chỉnh nội dung nút thêm vào giỏ hàng “Add To Cart”- Nút thêm vào giỏ hàng mặc định của WooCommerce:

Hình Trước khi thay đổi nút “Thêm vào giỏ hàng”- Nút thêm vào giỏ hàng sau khi can thiệp:

Hình Sau khi thay đổi nội dung nút thành “Buy Now”- Mã nguồn thực hiện tùy chỉnh:

Woocommerce_product_single_add_to_cart_text: hook nội dung thêm vàogiỏ hàng cho từng sản phẩm riêng lẻ.

Woocommerce_product_add_to_cart_text: nội dung thêm vào giỏ hàng nhưng áp d^ng cho các trang lưu tr\ sản phẩm (Archive product pages).// Thay đôAi nội dung trên từng trang saAn phầAm riêng leA

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_add_to_cart_button_text_single' ); function woocommerce_add_to_cart_button_text_single() {! ! return ( 'Buy Now &hearts;' 'woocommerce', ); }

// Thay đôAi nội dung trên các trang có lưu trữ saAn phầAmadd_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_add_to_cart_button_text_archives' ); !function woocommerce_add_to_cart_button_text_archives() {! ! return ( 'Buy Now &hearts;' 'woocommerce', );}

2.2 Tự động thêm mã giảm giá nếu đạt đến giá trị đơn hàng tối thiểu

- Ví d^ minh họa: nếu đơn hàng hơn 500.000 thì mã “coupon” sẽ được thêm vào và giảm 50% giá trị sản phẩm

- Trước khi thực hiện thay đổi:

Hình Trước khi thêm chức năng tự add mã giảm giá- Sau khi thực hiện thay đổi:

- Mã nguồn thực hiện tùy chỉnh:

Woocommerce_before_cart: vị trí phía trên dòng sản phẩm trong form giỏ hàng Khi add_action này cũng có nghca là function chúng ta thêm vào sẽ được thực thi trước khi bắt đầu biểu mẫu giỏ hàng.

WC()->cart->get_subtotal(): lấy giá trị tổng đơn hàng trong giỏ, nếu từ 500.000 tr[ lên thì thêm mã giảm giá, nếu chưa đạt giá trị tối thiểu thì in ra dòng khuyến khích khách mua thêm bao nhiêu để được hư[ng ưu đãi /**

* Áp dụng mã giaAm giá cho giá trị đơn hàng tôci thiêAu*/

add_action( 'woocommerce_before_cart' 'add_coupon_notice' , );function add_coupon_notice() {

$minimum_amount $currency_code!" 'notice', );

'notice' );! ! ! ! }

Hình Sau khi thêm nội dung dưới nút “Tiến hành thanh toán”- Bạn có thể tùy chọn bất kỳ nội dung nào mà mình mong muốn thể hiện bên dưới

nút Tiến hành thanh toán - Mã nguồn thực hiện tùy chỉnh:

Woocommerce_after_cart_totals: thêm nội dung bên dưới khu vực Tổng giỏ hàng của trang Giỏ hàng WooCommerce.

Ở wp_head thực hiện tùy chỉnh CSS cho ký hiệu hình khóa bảo mật và màuch\

! ! <style>

Hình Tiêu đề “Đơn hàng đã nhận” mặc định của WooCommerce- Sau khi thực hiện thay đổi:

Hình Sau khi thực hiện thay đổi nội dung tiêu đề

- Mã nguồn thực hiện tùy chỉnh:

Woocommerce_endpoint_order-received_title: cho phép thay đổi tiêu đề “Đã nhận đơn hàng” sau khi đặt hàng

function vie_thank_you_title($old_title) {

! ! return'&#9829; VieBeauty đã nhận thông tin đơn cuAa Quý khách &#9829;<br /> Cám ơn đã lựa chọn VieBeauty!';

Hình Nội dung tiếp nhận đơn hàng sau khi thực hiện tùy chỉnh- Mã nguồn thực hiện tùy chỉnh:

Woocommerce_thankyou_order_received_text: cho phép thay đổi nội dungmặc định của WooCommerce “Cảm ơn Đơn đặt hàng của bạn đã được nhận”

$order->get_billing_last_name(): lấy tên khách từ thông tin đặt hàng./**

* Snippet Name: ! ! Thay đôAi văn baAn giới thiệu trên Trang caAm ơn WooCommerce.

* Snippet Author: ! Vy Huynh*/

add_filter( 'woocommerce_thankyou_order_received_text', 'vie_thank_you_intro_text', 20, );

function vie_thank_you_intro_text( $thank_you_title $order, ){return'Xin chào ' $order->get_billing_last_name().', VieBeauty đã nhậnđơn đặt hàng cuAa bạn rôDi nhé!';

Hình Sau khi thêm chức năng “Ngày giao hàng ước tính”- Mã nguồn thực hiện:

Init: Thực thi hành động khi WordPress tải xong một trang nhưng trước khicác thông số trong HEADER được gửi đi.

Shipping->get_shipping_methods: Trả về tất cả các phương thức vận chuyển đã đăng ký để sử d^ng.

Foreach ( $shipping_methods as $id => $shipping_method ): Vòng lặp foreach tự động lặp qua các phần tử trong mảng, nó lặp cho khi nào tới