商品列表、详情总结

今天是商品列表和商品详情功能的总结。

这个功能也就是淘宝的首页那种列表，然后点击相应的商品会跳转到相应的详情页面，我们只需要写一个详情页面就可以了。

我们需要这些：

1. 商品列表页（goods_list.html）：展示所有商品的缩略信息，用户可以通过点击商品卡片查看商品详情。
2. 商品详情页（goods_details.html）：展示单个商品的详细信息，包括商品图片、描述、价格和已售数量等。
3. 商品数据（goods.json）：存储所有商品的相关信息，如名称、价格、图片链接等。
4. JavaScript （goods_list.js 和 goods_details.js）：负责数据的加载、处理和页面的交互以及渲染。

整体流程

1. 数据准备：将商品信息存储在 goods.json 文件中。
2. 商品列表页加载：通过 XMLHttpRequest 从 goods.json 文件中获取商品数据，并将其动态插入到页面中。
3. 商品详情页跳转：用户点击商品卡片时，将商品数据存储到 localStorage 中，并跳转到商品详情页。
4. 商品详情页加载：从 localStorage 中获取商品数据，并将其动态插入到页面中。

商品列表页的实现

HTML 结构

goods_list.html 文件定义了商品列表页的基本结构，包括顶部标题、搜索框和商品展示区域。

<!-- 主页顶部 -->
		<div class="header_title">
			主页
		</div>

		<!-- 搜索+分类 -->
		<div class="search_box">
			<div class="search">
				<img src="./img/search.png" alt="" />
				<input type="text" name="" id="" placeholder="请输入搜索内容">
			</div>
			<p>分类</p>
		</div>

		<div class="goods_content">
		</div>
		
		

		<script src="js/goods_list.js"></script>

具体的 CSS 样式可以根据需求进行调整，主要用于设置页面的布局、字体、颜色等。

* {
				margin: 0%;
				padding: 0%;
			}

			body {
				padding-top: 10px;
			}

			/* 最顶部标题主页 */
			.header_title {
				width: 100%;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				/* background-color: aqua; */
				font-size: 19px;
				font-weight: 600;
				position: fixed;
				background-color: white;
				top: 0;
				z-index: 6;
			}

			
			/* 搜索+分类 */
			.search_box {
				width: 100%;
				height: 40px;
				/* background-color: blue; */
				display: flex;
				margin-top: 13%;
			}

			/* 搜索 */
			.search {
				width: 85%;
				height: 60%;
				display: flex;
				border-radius: 40px;
				margin: 2%;
				background-color: #EDEDED;
			}

			.search img {
				margin-top: 3px;
				margin-left: 6px;
				width: 6%;
				height: 22px;
			}

			.search input {
				width: 80%;
				border: none;
				outline-style: none;
				background-color: #EDEDED;
			}

			.search_box p {
				width: 10%;
				height: 100%;
				display: flex;
				align-items: center;
				font-size: 14px;
				/* background-color: chartreuse; */
				color: #969696;
			}

			.goods_content {
				padding-left: 6px;
				padding-right: 6px;
				column-count: 2;
				/* 定义列数，可以根据需要调整 */
				column-gap: 10px;
				/* 定义列与列之间的间隙 */
				/* background-color: aquamarine; */
			}

			.goods_card {
				break-inside: avoid-column;
				/* 防止内容断裂到新列 */
				margin-bottom: 10px;
				/* 定义项目之间的垂直间距 */
				background-color: #f0f0f0;
				/* 背景颜色，仅为了示例 */
				padding: 6px;
				/* 内边距 */
				border-radius: 5px;
			}

			.goods_card img {
				width: 100%;
			}

			.card_title {
				font-size: 14px;
				text-overflow: ellipsis;
				overflow: hidden;
				text-wrap: nowrap;
			}
			.card_content{
				width: 100%;
				height: 20px;
			}
			/* 下方小价格标签 */
			.home_price {
				color: #ED414A;
				float: left;
			}
			
			.Past_price {
				font-size: 9px;
				color: #969696;
				float: left;
				line-height: 20px;
				margin-left: 7%;
			}
			
			.sold {
				font-size: 10px;
				color: #969696;
				float: left;
				line-height: 20px;
				margin-left: 9%;
			}

js 文件负责从 goods.json 文件中加载商品数据，并将其动态插入到页面中。

let body = document.getElementsByClassName('goods_content')[0];
let xhr = new XMLHttpRequest();
xhr.open('get', 'js/goods.json', true);
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        let text = xhr.responseText;
        console.log(text);
        let data = JSON.parse(text);
        console.log(data);
        reader(data);
    }
};

function reader(data) {
    let str = '';
    for (let i = 0; i < data.length; i++) {
        str += `
            <div class="goods_card" onclick='clicks(${JSON.stringify(data[i])})'>
                <img src="${data[i].product_images[0]}" alt="" />
                <p class="card_title">${data[i].name}</p>
                <div class="card_content">
                    <span class="home_price">${data[i].price}</span>
                    <p style="text-decoration:line-through;" class="Past_price">￥6000</p>
                    <p class="sold">已售${data[i].sold}</p>
                </div>
            </div>`;
    }
    body.innerHTML = str;
}

function clicks(data){
    let datas = JSON.stringify(data);
    localStorage.setItem('goods', datas);
    window.location.href = 'goods_details.html';
}

当用户点击商品卡片时，clicks 函数会将商品数据存储到 localStorage 中，并跳转到商品详情页。

商品详情页的实现

HTML 结构

<div class="header"><span onclick="isback()">
				<img src="./img/箭头.png" alt="" />
				</span>详情</div>
				
		<div class="commodity_details-box">
			<div class="commodity_details"></div>
		</div>
		
		<div class="goods_content">
			
		</div>
		
		<div class="content_title">
			<strong><p>商品详情图</p></strong>
		</div>
		<div class="detail_img">
		</div>
		
		
		<div class="footer_nav">
			<div class="nav_shop icon">
				<img src="./img/_店铺.png" alt="" />
				<p>店铺</p>
			</div>
			<div class="service icon">
				<img src="./img/客服.png" alt="" />
				<p>客服</p>
			</div>
			<div class="collect icon">
				<img src="./img/收藏.png" alt="" />
				<p>收藏</p>
			</div>
			<div class="goods_buy">
				<strong>点击购买</strong>
			</div>
		</div>
		
		<script src="js/goods_details.js">
			
		</script>

goods_details.html 文件定义了商品详情页的基本结构，包括顶部标题、商品图片轮播、商品详情内容和底部导航栏。

CSS 样式

*{
				margin: 0;
				padding: 0;
			}
			.header {
				width: 100%;
				height: 35px;
				font-size: 17px;
				font-weight: 700;
				text-align: center;
				position: fixed;
				padding-top: 10px;
				top: 1;
				background-color: white;
			}

			.header span {
				float: left;
				margin-left: 1%;
			}

			.commodity_details-box {
				width: 100%;
				height: 330px;
				overflow: hidden;
			}

			.commodity_details {
				width: 400%;
				font-size: 0px;
				animation: banner 10s infinite;
			}

			.commodity_details img {
				width: 25%;
				height: 330px;
			}

			/* 轮播图动画 */
			@keyframes banner {
				0% {
					margin-left: 0px;
				}

				33.33% {
					margin-left: -100%;
				}

				66.66% {
					margin-left: -200%;
				}

				100% {
					margin-left: -300%;
				}
			}
			/* 商品详情内容 */
			.detail_content{
				width: 100%;
				height: 50px;
				/* display: flex; */
				/* justify-content: space-around; */
				/* background-color: aquamarine; */
			}
			
			.detail_content p{
				width: 96%;
				margin-left: 6px;
				/* text-align: center; */
				/* background-color: aqua; */
				/* 溢出字变省略号 */
				/* overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap; */
			}
	
			/* 价格相关 */
			.detail_price{
				width: 100%;
				height: 40px;
				display: flex;
				align-items: end;
				/* background-color: aqua; */
			}
			.detail_price p{
				width: auto;
				padding: 1%;
				margin-left: 1%;
			}
			.now_price{
				font-size: 20px;
				color: red;
			}
			.sold_number{
				font-size: 13px;
				color: #969696;
			}
			.detail_img img{
				width: 100%;
			}
			.header img{
				width: 20px;
				height: 20px;
			}
			.footer_nav{
				width: 100%;
				height: 50px;
				padding-top: 10px;
				display: flex;
				position: fixed;
				bottom: 0%;
				background-color: white;
			}
			.icon{
				width: 10%;
				margin-left: 4%;
				font-size: 14px;
			}
			.footer_nav img{
				width: 70%;
			}
			.goods_buy{
				width: 50%;
				height: 40px;
				margin-left: 4%;
				border-radius: 25px;
				color: white;
				font-size: 20px;
				text-align: center;
				line-height: 40px;
				background-color: #FF7601;
			}
			
			.content_title{
				width: 100%;
				height: 40px;
				text-align: center;
				font-size:18px;
				line-height: 40px;
			}

CSS 样式用于实现商品图片的轮播效果和页面的布局。通过 animation 属性和 @keyframes 规则，实现了商品图片的自动轮播。具体的 CSS 样式可以根据需求进行调整，主要用于设置页面的布局、字体、颜色和动画效果

let data = JSON.parse(localStorage.getItem('goods'))
let body = document.getElementsByClassName('commodity_details')[0]
let content=document.getElementsByClassName('goods_content')[0];
let deta_img=document.getElementsByClassName('detail_img')[0];
console.log(data);
reader()

function reader() {
	let str = '';
	for (let i = 0; i < data.product_images.length; i++) {
		str += `
					
									<img src=${data.product_images[i]}>
			        `;
	}
	str += `
				
								<img src=${data.product_images[0]}>
				`;
	body.innerHTML = str;
	
	let strs='';
	strs=`
	<!-- 内容详情 -->
	<div class="detail_content">
		<p>${data.description}</p>
	</div>
	
	<!-- 价格之类的div -->
	<div class="detail_price">
		<p class="now_price">￥${data.price}</p>
		
		<p class="sold_number">
			已售：${data.sold}
		</p>
		
	</div>
	`;
	content.innerHTML=strs;
	
	let sti='';
	sti=`
	<img src=${data.thumbnail_images[0]} alt="" />
	<img src=${data.thumbnail_images[1]} alt="" />
	<img src=${data.thumbnail_images[2]} alt="" />
	`;
	deta_img.innerHTML=sti;
}

function isback() {
	window.history.back();
	localStorage.removeItem('goods');
}

js 文件负责从 localStorage 中获取商品数据，并将其动态插入到页面中。

当用户点击返回箭头时，isback 函数会返回上一页，并清除 localStorage 中的商品数据。

通过以上步骤我们就完成了一个会跳转的商品列表、详情功能。