PHP

Bilah Pencarian Langsung untuk Situs Web eCommerce seperti Amazon

Posted on by administrator
20
Jun
0
(0)

oleh Vincy. Terakhir diubah pada 20 Mei 2021.

Pencarian adalah fungsi penting dalam situs web eCommerce. Situs web eCommerce terbaik dunia seperti Amazon, Alibaba memiliki bilah pencarian langsung eCommerce yang fantastis.

Pencarian langsung membantu melihat-lihat entitas yang dapat dijual di situs web eCommerce dan kategorinya. Ini memungkinkan pelanggan mempersempit hasil dari informasi yang banyak.

Kami telah melihat begitu banyak contoh untuk mengaktifkan opsi pencarian di situs web PHP. Misalnya, pencarian lanjutan di PHP memberikan tampilan pencarian seperti Gmail.

Pada artikel ini, kita akan melihat contoh pencarian langsung eCommerce seperti Amazon yang akan berguna untuk situs web eCommerce.

Hasil Pencarian Langsung eCommerce

Apa yang ada di dalam?

  1. Jenis pencarian di situs web eCommerce
  2. Tentang contoh ini
  3. Struktur file
  4. Skrip basis data
  5. Tampilan HTML untuk pencarian langsung eCommerce
  6. Mempersiapkan permintaan pencarian di AJAX
  7. Kode PHP untuk mendapatkan hasil pencarian langsung dengan kata kunci

Jenis pencarian di situs web eCommerce

Memiliki fitur pencarian adalah salah satu dari 5 praktik terbaik situs web eCommerce.

Fungsi pencarian langsung situs web eCommerce bervariasi terutama berdasarkan kriteria pencarian. Jarang, ini akan berbeda berdasarkan entitas eCommerce tempat filter pencarian akan diterapkan.

Beberapa variasi tersebut tercantum di bawah ini.

  • Cari berdasarkan kata kunci, kelompok usia yang berlaku.
  • Cari berdasarkan gambar atau foto serupa.
  • Terapkan filter pencarian pada produk, pendatang baru, daftar keinginan atau produk yang baru saja dilihat.
  • kategori produk eCommerce pencarian langsung.

Dalam tutorial ini, kita akan melihat pencarian langsung pada produk dan kategori situs web eCommerce. Kita telah melihat bagaimana melakukan pencarian subkategori kategori produk eCommerce di PHP.

Tentang contoh ini

Contoh kode ini untuk menerapkan pencarian langsung di situs web eCommerce. Filter pencarian langsung diterapkan ke produk dan kategori.

UI memungkinkan pengguna memasukkan kata kunci pencarian langsung. Kemudian pengguna akan melihat hasil yang difilter pada daftar slide-down khusus. Ini menggunakan jQuery AJAX untuk mendapatkan hasil pencarian langsung.

Hasil pencarian langsung bersifat dinamis. Ini menunjukkan produk, kategori dan item unggulan. Dan, mereka berasal dari database. Produk eCommerce memiliki kolom untuk ditandai sebagai ‘1’ untuk ditetapkan sebagai unggulan.

Kode ini memiliki konfigurasi untuk mengatur jumlah maksimum hasil pencarian langsung yang ditampilkan di layar.

Titik akhir PHP AJAX dan kelas model akan terlibat dalam aliran proses pencarian langsung. Handler model PHP membuat database dan menyiapkan kueri pemilihan. Ini menetapkan parameter untuk mengambil data dinamis.

struktur file proyek pencarian langsung eCommerce

Gambar di bawah ini menunjukkan file yang dibuat untuk contoh pencarian langsung eCommerce ini.

Ini memiliki konfigurasi aplikasi dengan arahan dasar untuk mengonfigurasi jumlah hasil pencarian ke UI.

Itu tidak menggunakan perpustakaan untuk menerapkan pencarian langsung eCommerce. Ini menggunakan, hanya perpustakaan jQuery seperti yang ditunjukkan di direktori vendor pada gambar di bawah ini. Polos, sederhana dan ringan.

Model PHPnya Produk.php mendefinisikan fungsi untuk mendapatkan larik hasil pencarian langsung dari database.

Ini memiliki CSS untuk membuat tampilan hasil pencarian geser yang bagus saat mengetik kata kunci di kotak pencarian.

Ini termasuk produk eCommerce dan gambar kategori di gambar folder root aplikasi. Hasil pencarian menunjukkan produk dan kategori dengan gambar-gambar ini. Ini akan memberikan output UI yang diperkaya kepada pengguna.

File Pencarian Langsung eCommerce

Skrip basis data

Skrip database yang ditambahkan ke unduhan memiliki pernyataan yang mengatur database untuk menjalankan contoh ini.

Pencarian langsung adalah untuk kategori dan basis data produk untuk menyaring hasil berdasarkan kata kunci. Jadi, dump data yang ditambahkan ke skrip ini membantu untuk mulai memfilter dan melihat hasil pencarian langsung.

sql/database.sql

--
-- Database: `live-search`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_category`
--

CREATE TABLE `tbl_category` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `image` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `tbl_category`
--

INSERT INTO `tbl_category` (`id`, `name`, `slug`, `image`) VALUES
(1, 'Luxury Ultra thin Wrist Watch', 'Luxury Ultra thin Wrist Watch-1', 'image/watch.jpg'),
(2, 'Luxury XP 1155 Intel Core Laptop', 'XP 1155 Intel Core Laptop-2', 'image/laptop.jpg');

-- --------------------------------------------------------

--
-- Table structure for table `tbl_product`
--

CREATE TABLE `tbl_product` (
  `id` int(11) NOT NULL,
  `product_code` varchar(255) NOT NULL,
  `name` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `description` varchar(255) NOT NULL,
  `image` text NOT NULL,
  `category_id` int(11) NOT NULL,
  `featured` varchar(255) NOT NULL,
  `create_at` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `tbl_product`
--

INSERT INTO `tbl_product` (`id`, `product_code`, `name`, `slug`, `description`, `image`, `category_id`, `featured`, `create_at`) VALUES
(1, '3DcAM01', 'FinePix Pro2 3D Camera', 'FinePix Pro2 3D Camera-1', 'Unlimited 4K print quality photography', 'image/camera.jpg', 1, '1', '2021-05-06 05:24:27'),
(2, 'USB02', 'EXP Portable Hard Drive', 'EXP Portable Hard Drive-2', 'A hard drive is a storage device required to hold on to your files and data for the long term', 'image/external-hard-drive.jpg', 2, '1', '2021-05-06 05:27:29');

--
-- Indexes for table `tbl_category`
--
ALTER TABLE `tbl_category`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for table `tbl_category`
--
ALTER TABLE `tbl_category`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

Ada beberapa poin penting untuk merancang kontrol pencarian untuk sebuah situs web. Kode HTML ini untuk menampilkan pencarian langsung eCommerce untuk menelusuri produk dan kategori.

Awalnya, akan menampilkan input pencarian langsung kepada pengguna untuk memasukkan kata kunci. Saat mengetik kata kunci, ia mengirimkan param ke PHP dan mendapatkan hasil pencarian langsung.

Hasilnya dari database dan ditampilkan dalam bentuk daftar meluncur ke bawah dari kotak pencarian.

Saat ini, item hasil pencarian langsung eCommerce tidak memiliki tautan navigasi. Tapi, database memiliki kolom untuk menyimpan produk dan kategori slug. Mungkin membantu untuk membuat tautan permanen untuk navigasi.

Ini termasuk file JavaScript yang berisi metode AJAX untuk mengirim permintaan ke PHP untuk mencari.

index.php

<html>
<head>
<TITLE>eCommerce Live Search</TITLE>
<link href="https://phppot.com/php/live-search-bar-for-an-ecommerce-website-like-amazon/assets/css/style.css" type="text/css" rel="stylesheet" />
<script src="" type="text/javascript"></script>
</head>
<body>
	<div class="phppot-container">
		<div class="header-search">
			<input type="text" class="img-url" id="search-box"
				placeholder="Search for products, categories..." />
			<div id="suggesstion-box"></div>
		</div>
	</div>
	<script type="text/javascript" src="vendor/jquery/jquery-3.2.1.min.js"></script>
	<script src="assets/js/search.js"></script>
</body>
</html>

Dan CSSnya adalah,

.phppot-container {
	-webkit-font-smoothing: antialiased;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: .9em;
	color: #1e2a28;
	width: 740px;
	margin: 0 auto;
	padding: 0px 20px 20px 20px;
}

.header-search {
	padding: 40px;
	max-width: 500px;
	margin: 0 auto;
}

#search-list {
	max-width: 500px;
	border-bottom: #E0E0E0 1px solid;
	border-left: #E0E0E0 1px solid;
	border-right: #E0E0E0 1px solid;
}

#search-box {
	padding: 20px;
	border: #E0E0E0 1px solid;
	border-radius: 0px;
	width: 100%;
}

.search-section {
	padding: 10px;
	border-bottom: 1px solid #E0E0E0;
}

.product-row {
	padding: 10px 0px;
	clear: both;
}

.description {
	line-height: 20px;
	display: inline-block;
}

.image-search-result {
	height: 36px;
	width: 36px;
	padding: 0px 0px 0px 0px;
	cursor: pointer;
	border: #E0E0E0 1px solid;
	border-radius: 20px;
	margin-right: 10px;
}

.category .image-search-result {
	float: none;
	vertical-align: middle;
}

.img-url {
	background: url("./../../image/demo-search-icon.png") no-repeat center
		right 7px;
}

Mempersiapkan permintaan pencarian di AJAX

Skrip AJAX dipanggil pada acara key-up dari kotak pencarian langsung.

Ini meneruskan parameter kata kunci ke panggilan URL titik akhir PHP dari AJAX.

Saat menyelesaikan aliran permintaan-tanggapan, ia mendapatkan HTML respons dari sisi server.

Di bagian sebelumnya, kita telah melihat kode UI yang memiliki wadah target. Ini adalah target untuk memuat data respons HTML penelusuran langsung dinamis.

assests/js/search.js

$(document).ready(function() {
	$("#search-box").keyup(function() {
		$(".img-url").show();
		$.ajax({
			type : "POST",
			url : "ajax-endpoint/get-search-result.php",
			data : 'keyword=' + $(this).val(),
			success : function(data) {
				$("#suggesstion-box").show();
				$("#suggesstion-box").html(data);
				$("#search-box").css("background", "#FFF");

			}
		});
	});
});

Kode PHP untuk mendapatkan hasil pencarian langsung dengan kata kunci

Ada 4 file yang terlibat dalam proses pencarian langsung eCommerce sisi server.

Pertama, dapatkan-hasil-pencarian.php adalah file titik akhir yang menerima permintaan AJAX. Itu membaca hasil pencarian langsung dan menyiapkan HTML respons dengan data dinamis.

Ini mengimpor config.php dan Produk.php untuk menyiapkan kueri basis data dan permintaan pencarian langsung.

Ini memberi contoh DataSource untuk menghubungkan dan membaca entitas eCommerce yang difilter. DataSource adalah kelas rutin yang digunakan di banyak kode contoh kami.

Kode berikut menunjukkan file-file ini satu per satu seperti di bawah ini.

ajax-endpoint/get-search-result.php


<?php
use PhppotProduct;
use PhppotConfig;
require_once __DIR__ . '/../config/Config.php';
require_once __DIR__ . '/../lib/Product.php';
$productModel = new Product();

if (! empty($_POST["keyword"])) {

    $serach = "%" . $_POST['keyword'] . "%";

    $productResult = $productModel->getProductByKeyword($serach, Config::MIN_SEARCH_RESULT_COUNT);

    $featuredProductResult = $productModel->getFeaturedProductByKeyword($serach, $productResult[0]["featured"], Config::MIN_SEARCH_RESULT_COUNT);

    $categoryResult = $productModel->getProductCategoryByKeyword($serach, Config::MIN_SEARCH_RESULT_COUNT);

    if (! empty($productResult)) {
        ?>
<div id="search-list">
	<div class="search-section">
		<label>Featured</label>
	
	 <?php
        foreach ($featuredProductResult as $k => $v) {
            ?> 
	<div class="product-row">
			<img class="image-search-result"
				src="https://phppot.com/php/live-search-bar-for-an-ecommerce-website-like-amazon/<?php echo $featuredProductResult[$k]["image"];?>
		">

			<div class="description"><?php echo $featuredProductResult[$k]["name"];?><br /><?php echo $featuredProductResult[$k]["description"];?></div>
		</div>
	
	<?php
        }
        ?>
    </div>
<?php
    }
    ?>
	<?php
    if (! empty($productResult)) {
        ?>
	<div class="search-section">
		<label>Products</label>
	<?php
        foreach ($productResult as $k => $v) {
            ?>
	<div class="product-row">
			<img class="image-search-result"
				src="<?php echo $productResult[$k]["image"];?>">

			<div class="description"><?php echo $productResult[$k]["name"];?><br /><?php echo $productResult[$k]["description"];?></div>
		</div>
	<?php
        }
        ?>
    </div>
<?php
    }
    ?><?php if (! empty($categoryResult)) {?>
	<div class="category search-section">
		<label>Category</label>
    <?php foreach ($categoryResult as $i => $s) {?>
	<div class="product-row">
			<img class="image-search-result"
				src="<?php echo $categoryResult[$i]["image"];?>"> <?php echo $categoryResult[$i]["name"];?>
	</div>
	<?php
        }
        ?> 
    <?php
    }
    ?></div>
</div>
<?php }?>

config/Config.php


<?php
/**
 * Copyright (C) Vincy - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * Written by Vincy <vincy@phppot.com>
 */
namespace Phppot;

/**
 * This class contains the configuration options
 */
class Config
{

    const MIN_SEARCH_RESULT_COUNT = "3";
}

lib/Product.php

<?php
/**
 * Copyright (C) Vincy - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * Written by Vincy <vincy@phppot.com>
 */
namespace Phppot;

require_once __DIR__ . '/../config/Config.php';

class Product
{

    private $dbConn;

    public function __construct()
    {
        require_once __DIR__ . '/../config/DataSource.php';
        $this->dbConn = new DataSource();
    }

    function getProductByKeyword($serach, $limit)
    {
        $query = "SELECT * FROM tbl_product WHERE name like ? OR description like ? ORDER BY name LIMIT $limit";

        $paramType = "ss";
        $paramValue = array(
            $serach,
            $serach
        );
        $productResult = $this->dbConn->select($query, $paramType, $paramValue);
        return $productResult;
    }

    function getFeaturedProductByKeyword($serach, $featured, $limit)
    {
        $query = "SELECT * FROM tbl_product WHERE (name like ? OR description like ?) AND  (featured =?) ORDER BY name LIMIT $limit";
        $paramType = "ssi";
        $paramValue = array(
            $serach,
            $serach,
            $featured
        );
        $featuredProductResult = $this->dbConn->select($query, $paramType, $paramValue);
        return $featuredProductResult;
    }

    function getProductCategoryByKeyword($serach, $limit)
    {
        $query = "SELECT * FROM tbl_category WHERE name like ?  ORDER BY name LIMIT $limit";
        $paramType = "s";
        $paramValue = array(
            $serach
        );
        $categoryResult = $this->dbConn->select($query, $paramType, $paramValue);
        return $categoryResult;
    }
}
?>

Kesimpulan

Dengan demikian, kami telah menerapkan fitur pencarian langsung eCommerce untuk situs web eCommerce.

Kami telah melihat implementasi berbasis AJAX untuk pencarian langsung di PHP. Ini menyediakan komponen pencarian langsung yang dinamis untuk situs web eCommerce.

Kami telah melihat jenis pencarian langsung yang tersedia di situs web eCommerce yang ada seperti Amazon.

Saya harap, ini akan membantu untuk mendapatkan beberapa ide untuk menambahkan filter pencarian langsung ke situs web eCommerce Anda. Dengan demikian, pelanggan akan melihat produk dan kategori berdasarkan kata kunci pencarian dengan cepat.

Unduh

Kembali ke Atas


Source link

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

administrator