Hướng dẫn ecommerce filter examples code javascript - mã ví dụ về bộ lọc thương mại điện tử javascript

Question

Nội dung chính Show

Mã nguồn
Tạo bảng MySQL
process.php

Cách thêm nhiều bộ lọc tìm kiếm trong PHP với phân trang cho các bộ lọc sản phẩm trang web thương mại điện tử bằng cách sử dụng JavaScript Pure Vanilla JavaScript. Nếu bạn cũng đang tìm kiếm làm thế nào chúng tôi có thể triển khai các bộ lọc tìm kiếm với trang web Pagination In thương mại điện tử thì bạn đã đến đúng vì ở đây chúng tôi có Chia sẻ Hướng dẫn dự án PHP về cách tạo bộ lọc trong thư viện PHP với thư viện MySQL, JavaScript và Bootstrap 5. Theo hướng dẫn này, chúng tôi có công nghệ web mới nhất như Vanilla JavaScript và thư viện Bootstrap 5 để xây dựng bộ lọc sản phẩm trang web thương mại điện tử với phân trang.

Bây giờ chúng tôi đã đi đúng chủ đề và ở đây chúng tôi sẽ chỉ cho bạn cách lọc sản phẩm đã nằm trong phạm vi giá, bộ lọc thương hiệu hoặc giới tính. Lợi ích chính của Bộ lọc sản phẩm trang web Thương mại điện tử là dành cho sản phẩm bộ lọc từ số lượng lớn sản phẩm theo bộ lọc phạm vi giá, bộ lọc thương hiệu hoặc bộ lọc giới tính. Vì vậy, hầu hết trang web Thương mại điện tử trực tuyến đã đưa bộ lọc sản phẩm lên trang web của họ và với sự trợ giúp của sản phẩm khách hàng lọc đó từ số lượng lớn sản phẩm và tìm thấy sản phẩm cụ thể trong phạm vi giá hoặc thương hiệu của họ. Nếu bạn đã thấy bất kỳ trang web mua sắm trực tuyến nào, vì vậy trên trang web đó, có một số lượng lớn sản phẩm đã được liệt kê trên trang web đó, vì vậy khi chúng tôi xuất hiện trên trang web thương mại điện tử để mua sản phẩm thì chúng tôi phải đối mặt với khó khăn để tìm sản phẩm, vì vậy Vào thời điểm đó, bộ lọc sản phẩm sẽ giúp người dùng tìm kiếm sản phẩm trên trang web và nó đã giảm thời gian người dùng cho sản phẩm tìm thấy với sự trợ giúp của bộ lọc giá cả hoặc bộ lọc thương hiệu.

Hướng dẫn ecommerce filter examples code javascript - mã ví dụ về bộ lọc thương mại điện tử javascript

Trong bài đăng này, chúng tôi sẽ tìm hiểu bạn cách lọc sản phẩm trên trang web Thương mại điện tử bằng PHP với JavaScript thuần túy, Bootstrap 5 và MySQL. Nếu bạn có bộ lọc sản phẩm xây dựng cho trang web mua sắm trực tuyến thì giao diện người dùng tốt (UI) là bắt buộc cho bộ lọc sản phẩm để khách hàng có thể dễ dàng tìm kiếm sản phẩm với nhiều bộ lọc. Theo hướng dẫn này, chúng tôi sẽ sử dụng bộ lọc nút radio, bộ lọc phạm vi giá và bộ lọc hộp kiểm bằng JavaScript. Khi người dùng nhấp vào nút radio hoặc bộ lọc giá hoặc bộ lọc hộp kiểm thì JavaScript sẽ kích hoạt tìm nạp API và nó sẽ tìm nạp dữ liệu từ cơ sở dữ liệu MySQL và hiển thị trên trang web mà không cần làm mới trang web. Vì vậy, ở đây để hoạt động AJAX, chúng tôi đã sử dụng API tìm nạp JavaScript. Theo hướng dẫn này, chúng tôi sẽ đặt nhiều bộ lọc tìm kiếm ở thanh bên trái và ở đây chúng tôi sẽ tạo bộ lọc thương hiệu bằng nút radio, bộ lọc giá giá và bộ lọc thương hiệu bằng hộp kiểm. Đây là bộ lọc sản phẩm trực tiếp đã được chạy dựa trên yêu cầu API API của JavaScript và hầu hết trang web thương mại điện tử sử dụng AJAX cho bộ lọc tìm kiếm. Dưới đây bạn có thể tìm thấy mã nguồn sẽ giúp bạn xây dựng bộ lọc sản phẩm với nhiều bộ lọc tìm kiếm và phân trang cho bạn dự án trang web thương mại điện tử bằng Php với cơ sở dữ liệu JavaScript, Bootstrap 5 và MySQL.

Mã nguồn

Tạo bảng MySQL

Đối với bộ lọc sản phẩm xây dựng, trước tiên chúng ta phải tạo bảng MySQL cho dữ liệu sản phẩm lưu trữ. Vì vậy, để tạo bảng trong cơ sở dữ liệu MySQL, bạn phải chạy theo tập lệnh SQL sẽ tạo bảng sample_data trong cơ sở dữ liệu MySQL của bạn.sample_data table in your MySQL Database.


--
-- Table structure for table `sample_data`
--

CREATE TABLE `sample_data` (
  `sample_id` int(11) NOT NULL,
  `name` text NOT NULL,
  `sku` int(11) NOT NULL,
  `mpn` int(11) NOT NULL,
  `price` int(11) NOT NULL,
  `in_stock` varchar(20) NOT NULL,
  `currency` varchar(10) NOT NULL,
  `brand` varchar(255) NOT NULL,
  `description` text NOT NULL,
  `images` text NOT NULL,
  `gender` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for table `sample_data`
--
ALTER TABLE `sample_data`
  ADD PRIMARY KEY (`sample_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `sample_data`
--
ALTER TABLE `sample_data`
  MODIFY `sample_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

INDEX.html

index.html

Theo hướng dẫn này, chúng tôi đã sử dụng JavaScript thuần túy để tạo bộ lọc sản phẩm với phân trang. Vì vậy, ở đây chúng tôi đã sử dụng tệp .html làm tệp chỉ mục của chúng tôi. Trong tệp này, chúng tôi chỉ bao gồm thư viện Bootstrap 5 SheetSheet để tạo bố cục cho bộ lọc sản phẩm và để phân trang. Trong tệp này, bạn cũng có thể tìm thấy mã JavaScript để hiển thị tất cả các sản phẩm với liên kết phân trang.

Để hiển thị tất cả các sản phẩm có phân trang, ở đây chúng tôi đã tạo một hàm load_product (trang). Hàm này sẽ được gọi khi trang đã được tải trong trình duyệt, sau đó nó sẽ gửi yêu cầu AJAX bằng cách sử dụng API tìm nạp JavaScript đến tệp Process.php để tìm nạp dữ liệu sản phẩm từ cơ sở dữ liệu. Vì vậy, chức năng này sẽ nhận được dữ liệu sản phẩm với dữ liệu liên kết phân trang từ máy chủ ở định dạng JSON và chuyển đổi dữ liệu đó thành định dạng HTML và hiển thị tất cả các sản phẩm với liên kết phân trang trên trang web.load_product(page) function. This function will be called when page has been load in browser, then it will send AJAX request using JavaScript Fetch API to process.php file for fetch product data from database. So this function will receive product data with pagination link data from server in JSON format and convert that data into HTML format and display all product with pagination link on web page.

Theo hướng dẫn bộ lọc sản phẩm này, chúng tôi cũng có thêm hiệu ứng tải bộ xương với kiểu bootstrap 5 và javascript. Vì vậy, khi trang sẽ tải, trước tiên, nó sẽ tải bộ xương sản phẩm và sau đó sau khi nó sẽ hiển thị sản phẩm trên trang web với liên kết phân trang. Ở đây, hiệu ứng bộ xương cũng sẽ hoạt động khi chúng tôi cũng có nhấp vào liên kết phân trang.

Trong bộ lọc sản phẩm này, chúng tôi có nắp sau loại bộ lọc cho sản phẩm tìm kiếm từ một lượng lớn sản phẩm.

Bộ lọc nút radio - Trong hướng dẫn này, chúng tôi đã sử dụng bộ lọc nút radio để tải hoặc hiển thị hoặc lọc sản phẩm theo sản phẩm giới tính cụ thể. ví dụ. Giả sử người dùng chỉ muốn xem sản phẩm giới tính "nam", sau đó người dùng có thể chọn nút radio giới tính "nam", sau đó người dùng chỉ có thể xem sản phẩm giới tính "nam" trên trang web mà không cần làm mới trang web. - In this tutorial, we have use Radio Button filter for load or display or filter product according to particular Gender product only. e.g. Suppose user want to see only "Male" gender product, then user can select "Male" Gender Radio button, then user can only view "Male" Gender product on web page without refresh of web page.
Bộ lọc phạm vi giá - Theo dự án PHP này trên Bộ lọc sản phẩm trước và ở đây chúng tôi cũng có thêm một tùy chọn bộ lọc như Bộ lọc Phạm vi Giá. Vì vậy, bằng bộ lọc Ranger giá này, người dùng trên trang web Thương mại điện tử có thể lọc sản phẩm dựa trên giá. Vì vậy, người dùng có thể danh sách sản phẩm có phạm vi giá cụ thể. Trong hướng dẫn này để thực hiện bộ lọc phạm vi giá, ở đây chúng tôi đã sử dụng JavaScript thuần túy với tập lệnh Php thư viện Bootstrap 5 và cơ sở dữ liệu MySQL. - Under this PHP Project on Advance product filter and here we have also include one more filter option like price range filter. So by this price ranger filter, user on ecommerce website can filter product based on price. So user can product list which comes under particular price range. In this tutorial for implement price range filter, here we have use pure JavaScript with Bootstrap 5 library PHP script and MySQL database.
Bộ lọc hộp kiểm - Bộ lọc hộp kiểm chủ yếu được sử dụng cho dữ liệu bộ lọc có nhiều điều kiện, do đó, trước đây, bộ lọc sản phẩm với hướng dẫn phân trang, chúng tôi cũng đã triển khai Bộ lọc hộp kiểm cho sản phẩm danh sách của nhiều thương hiệu trên trang web mà không cần làm mới trang web. Ở đây chúng tôi đã sử dụng JavaScript thuần túy với PHP để thêm bộ lọc hộp kiểm theo hướng dẫn bộ lọc sản phẩm này. - Checkbox filter is mainly used for filter data with multiple condition, so here in Advance Product Filter with Pagination tutorial, we have also implement Checkbox filter for list product of Multiple brand on web page without refresh of web page. Here we have use pure javascript with PHP for add Multiple Checkbox filter under this product filter tutorial.
Bộ lọc tìm kiếm - Bộ lọc tìm kiếm được sử dụng cho dữ liệu sản phẩm tìm kiếm từ cơ sở dữ liệu theo truy vấn tìm kiếm. Bằng cách sử dụng bộ lọc tìm kiếm này, khách hàng có thể tìm kiếm sản phẩm bằng cách nhập truy vấn của họ vào hộp văn bản tìm kiếm và họ có thể nhận dữ liệu bộ lọc trên trang web bằng cách sử dụng JavaScript. Ở đây để tìm kiếm dữ liệu trực tiếp, chúng tôi đã sử dụng tập lệnh PHP với JavaScript thuần túy. - Search Filter is used for search product data from database according to search query. By using this Search filter Customer can search product by type their query in search textbox and they can get filter data on web page by using JavaScript. Here for search live data we have use PHP script with pure JavaScript.

Sau khi áp dụng tất cả các bộ lọc, giả sử chúng tôi muốn xóa Fiter, vì vậy chúng tôi phải làm mới trang, nhưng trong hướng dẫn này, chúng tôi cũng có tính năng để rõ ràng tất cả bộ lọc hoặc bộ lọc đặt lại. Vì vậy, bằng cách nhấp vào nút, tất cả các bộ lọc được áp dụng sẽ bị xóa và nó sẽ tải tất cả dữ liệu sản phẩm trên trang web mà không cần làm mới trang web bằng cách sử dụng JavaScript thuần túy.




    
        
        
        
        
        
        Product Filter in PHP using Vanilla JavaScript

        

        
        


        
    
  
    
    
        

            
                Product Filter in PHP using Vanilla JavaScript - Live Data Search - 8

                

                    

                        

                        Gender

                        

                        Price

                        

                        Brand

Quá trình.php

process.php

Tệp này đã được sử dụng để thực hiện hoạt động phía máy chủ. Trong tệp này, chúng tôi đã sử dụng tập lệnh PHP cho dữ liệu phía máy chủ quá trình. Trong tệp này trước tiên, chúng tôi có kết nối cơ sở dữ liệu bằng lớp php pdo ().

Tệp này đã nhận được yêu cầu AJAX cho dữ liệu sản phẩm tìm nạp từ cơ sở dữ liệu và liên kết phân trang. Vì vậy, dựa trên giá trị biến số $ page đã được lấy từ URL và dựa trên giá trị đó, nó đã được tìm nạp dữ liệu sản phẩm từ cơ sở dữ liệu để hiển thị sản phẩm trang cụ thể trên trang web.

Tệp này cũng tìm nạp dữ liệu cho các loại bộ lọc khác nhau như bộ lọc giới tính, bộ lọc phạm vi giá, bộ lọc tìm kiếm và bộ lọc thương hiệu từ bảng MySQL.


 1)
	{
		$start = (($_GET["page"] - 1) * $limit);

		$page = $_GET["page"];
	}
	else
	{
		$start = 0;
	}

	$where = '';

	$search_query = '';

	if(isset($_GET["gender_filter"]))
	{
		$where .= ' gender = "'.trim($_GET["gender_filter"]).'" ';

		$search_query .= '&gender_filter='.trim($_GET["gender_filter"]);
	}

	if(isset($_GET["price_filter"]))
	{
		if($where != '')
		{
			$where .= ' AND '. $_GET["price_filter"];
		}
		else
		{
			$where .= $_GET["price_filter"];
		}

		$search_query .= '&price_filter='.$_GET["price_filter"];
	}

	if(isset($_GET["brand_filter"]))
	{
		$brand_array = explode(",", $_GET["brand_filter"]);

		$brand_condition = '';

		foreach($brand_array as $brand)
		{
			$brand_condition .= 'brand = "' .$brand . '" OR ';
		}

		$brand_condition = substr($brand_condition, 0, -4);

		if($where != '')
		{
			$where .= ' AND ('.$brand_condition.')';
		}
		else
		{
			$where .= $brand_condition;
		}

		$search_query .= '&brand_filter='.$_GET["brand_filter"];
	}

	if(isset($_GET["search_filter"]))
	{
		$search_string = str_replace(" ", "%", $_GET["search_filter"]);

		if($where != '')
		{
			$where .= ' AND ( name LIKE "%'.$search_string.'%" ) ';
		}
		else
		{
			$where .= 'name LIKE "%'.$search_string.'%" ';
		}
		$search_query .= '&search_filter='.$_GET["search_filter"].'';
	}

	if($where != '')
	{
		$where = 'WHERE ' . $where;
	}

	$query = "
	SELECT name, price, images, brand 
	FROM sample_data 
	".$where."
	ORDER BY sample_id ASC
	";

	$filter_query = $query . ' LIMIT ' . $start . ', ' . $limit . '';

	$statement = $connect->prepare($query);

	$statement->execute();

	$total_data = $statement->rowCount();

	$result = $connect->query($filter_query);

	foreach($result as $row)
	{
		$image_array = explode(" ~ ", $row["images"]);

		$data[] = array(
			'name'		=>	$row['name'],
			'price'		=>	$row['price'],
			'brand'		=>	$row['brand'],
			'image'		=>	$image_array[0]
		);
	}

	$pagination_html = '
	
  		
	';

	$total_links = ceil($total_data/$limit);

	$previous_link = '';

	$next_link = '';

	$page_link = '';

	$page_array = '';

	if($total_links > 4)
	{
		if($page < 5)
		{
			for($count = 1; $count <= 5; $count++)
			{
				$page_array[] = $count;
			}

			$page_array[] = '...';

			$page_array[] = $total_links;
		}
		else
		{
			$end_limit = $total_links - 5;

			if($page > $end_limit)
			{
				$page_array[] = 1;

				$page_array[] = '...';

				for($count = $end_limit; $count <= $total_links; $count++)
				{
					$page_array[] = $count;
				}
			}
			else
			{
				$page_array[] = 1;

				$page_array[] = '...';

				for($count = $page - 1; $count <= $page + 1; $count++)
				{
					$page_array[] = $count;
				}

				$page_array[] = '...';

				$page_array[] = $total_links;
			}
		}
	}
	else
	{
		for($count = 1; $count <= $total_links; $count++)
		{
			$page_array[] = $count;
		}
	}

	for($count = 0; $count < count($page_array); $count++)
	{
		if($page == $page_array[$count])
		{
			$page_link .= '
				
		      		'.$page_array[$count].'
		    	
			';

			$previous_id = $page_array[$count] - 1;

			if($previous_id > 0)
			{
				$previous_link = 'Previous';
			}
			else
			{
				$previous_link = '
					
				        Previous
				    
				';
			}

			$next_id = $page_array[$count] + 1;

			if($next_id > $total_links)
			{
				$next_link = '
					
		        		Next
		      		
				';
			}
			else
			{
				$next_link = '
				Next
				';
			}
		}
		else
		{
			if($page_array[$count] == '...')
			{
				$page_link .= '
					
		          		...
		      		
				';
			}
			else
			{
				$page_link .= '
					
						'.$page_array[$count].'
					
				';
			}
		}
	}

	$pagination_html .= $previous_link . $page_link . $next_link;


	$pagination_html .= '
		
	
	';

	$output = array(
		'data'		=>	$data,
		'pagination'=>	$pagination_html,
		'total_data'=>	$total_data
	);

	echo json_encode($output);
}

if(isset($_GET["action"]))
{
	$data = array();

	$query = "
	SELECT gender, COUNT(sample_id) AS Total 
	FROM sample_data 
	GROUP BY gender
	";

	foreach($connect->query($query) as $row)
	{
		$sub_data = array();
		$sub_data['name'] = $row['gender'];
		$sub_data['total'] = $row['Total'];
		$data['gender'][] = $sub_data;
	}

	$price_range = array(
		'price < 1000'					=>	'Under 1000',
		'price > 1000 && price < 5000'	=>	'1000 - 5000',
		'price > 5000 && price < 10000'	=>	'5000 - 10000',
		'price > 10000 && price < 20000'=>	'10000 - 20000',
		'price > 20000'					=>	'Over 20000'
	);

	foreach($price_range as $key => $value)
	{
		$query = "
		SELECT COUNT(sample_id) AS Total 
		FROM sample_data 
		WHERE ".$key." 
		";

		$sub_data = array();

		foreach($connect->query($query) as $row)
		{
			$sub_data['name'] = $value;
			$sub_data['total'] = $row['Total'];
			$sub_data['condition'] = $key;
		}
		$data['price'][] = $sub_data;
	}

	$query = "
	SELECT brand, COUNT(sample_id) AS Total 
	FROM sample_data 
	GROUP BY brand
	";

	foreach($connect->query($query) as $row)
	{
		$sub_data = array();
		$sub_data['name'] = $row['brand'];
		$sub_data['total'] = $row['Total'];
		$data['brand'][] = $sub_data;
	}

	echo json_encode($data);
}

?>

programming javascript JavaScript product filter Javascript filter codepen

Hướng dẫn ecommerce filter examples code javascript - mã ví dụ về bộ lọc thương mại điện tử javascript

Mã nguồn

Tạo bảng MySQL

index.html

Product Filter in PHP using Vanilla JavaScript - Live Data Search - 8

process.php

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội