如何将点击添加到html中的产品列表中，并将项目点击到firestore
将点击添加到HTML中的产品列表，并将项目点击到Firestore，可以通过以下步骤实现：
- 在HTML中创建一个产品列表的容器，可以使用
<ul>或<div>等元素来表示列表。 - 使用JavaScript监听点击事件，当用户点击某个项目时触发相应的函数。
- 在点击事件的处理函数中，获取用户点击的项目信息，例如产品名称、价格等。
- 使用Firestore提供的JavaScript SDK连接到Firestore数据库。
- 在Firestore中创建一个集合（collection），用于存储产品列表。
- 将用户点击的项目信息作为一个文档（document）添加到该集合中。可以使用
add()方法来实现，该方法会自动生成一个唯一的文档ID。 - 在添加成功后，可以根据需要更新HTML中的产品列表，将新添加的项目显示出来。可以使用
get()方法获取集合中的所有文档，并遍历每个文档来构建列表。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>产品列表</title>
</head>
<body>
<h1>产品列表</h1>
<ul id="product-list"></ul>
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore.js"></script>
<script>
// 初始化Firebase
const firebaseConfig = {
// 在此处填写你的Firebase配置信息
};
firebase.initializeApp(firebaseConfig);
// 获取Firestore实例
const db = firebase.firestore();
// 监听点击事件
document.addEventListener('click', function(event) {
// 检查点击的元素是否为产品项
if (event.target.classList.contains('product-item')) {
// 获取产品信息
const productName = event.target.dataset.name;
const productPrice = event.target.dataset.price;
// 将产品信息添加到Firestore
db.collection('products').add({
name: productName,
price: productPrice
})
.then(function(docRef) {
console.log('产品添加成功，文档ID：', docRef.id);
// 更新产品列表
updateProductList();
})
.catch(function(error) {
console.error('产品添加失败：', error);
});
}
});
// 更新产品列表
function updateProductList() {
const productList = document.getElementById('product-list');
productList.innerHTML = ''; // 清空列表
// 从Firestore获取产品列表
db.collection('products').get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
const product = doc.data();
const listItem = document.createElement('li');
listItem.textContent = product.name + ' - ￥' + product.price;
productList.appendChild(listItem);
});
})
.catch(function(error) {
console.error('获取产品列表失败：', error);
});
}
// 初始化时更新产品列表
updateProductList();
</script>
</body>
</html>在上述示例中，我们使用了Firebase的JavaScript SDK来连接到Firestore数据库，并使用collection()方法获取集合，使用add()方法添加文档，使用get()方法获取文档列表。通过监听点击事件，将用户点击的产品信息添加到Firestore，并在添加成功后更新HTML中的产品列表。
请注意，上述示例中的Firebase配置信息需要替换为你自己的配置信息。另外，该示例仅为演示目的，实际应用中可能需要进行更多的错误处理和安全性考虑。
相关·内容
我正在尝试用Django和Firebase Admin SDK做一个简单的购物车，我已经在列表中查询了Firestore数据并将它们显示在HTML中，现在我想添加一个点击侦听器到项目列表中，并使用javascript将项目点击到Firestore集合中。现在，当我单击除第一个项目</e
浏览 7提问于2020-01-24得票数 0
回答已采纳
1回答
嵌套Firebase查询
、、、、
我正在尝试为我正在构建的队列系统执行嵌套的firebase查询。我们的目标是获得一个“站点”列表，然后查询“项目”。与给定的“站点”相匹配。然后显示数据，以便我的“站点”与与该站点匹配的“项目”列在该站点下。LYCB7awMyE7gxRKlojN -LYCCBjC4JT9rZlgJSiL
-LYCCD0J6VqafpRL8Mlf 在这种情况下，
浏览 15提问于2019-02-10得票数 0
回答已采纳
我的朋友带着一个小请求来找我，要求我创建一个视频组合应用程序。我认为这是一个很好的借口来尝试Swift，这就是我所做的。(该应用程序不打算在应用程序商店发布，只可通过Testflight发布)An error was encountered while running(Domain = NSPOSIXErrorDomain, Code = 22)
将带有.mp4视频文件的目录添加到我的<em
浏览 3提问于2014-09-14得票数 16
回答已采纳
2回答
我已经做了项目，拉威尔购物车时，点击产品详细信息页面将打开，并点击添加到购物车发送的id到CartController @索引。然后，我访问数据库，检索产品信息，并将其放入会话中。然后我购买了其他产品，但当我翻页时，我的旧产品在会话中丢失。谁能帮我谢谢
浏览 0提问于2015-11-17得票数 1
2回答
我有一个由产品列表填充的表，使用jquery我在表中添加了一个新行，我想要的是从这个新行创建一个新产品并将其添加到列表中。decimal Price { get; set; } }
Index Model View，我在其中显示产品列表<Product> ListProducts
浏览 0提问于2013-07-25得票数 0
我有一个名为item的自定义对象，它包含诸如名称、描述、价格等参数。我的应用程序的主页是项目对象的流生成器(存储在Firestore中)。当我点击一个项目，它带我到一个详细页面，从那里，我可以点击另一个按钮来编辑项目的参数。当从主页(项目列表)导航到项目详细信息页时，我使用fromMap轻松地从数据库创建本地项
浏览 0提问于2019-03-30得票数 0
回答已采纳
嗨，我想把一个列表存储到Firestore中。我正在做一个项目，在这个页面中，我需要选择一些选择(选择是DocumentID)并将其存储在一个List中，然后我需要从List中检索并再次调用Firestore来获得基于List ( List包含DocumentID如何将它们全部存储在只有一个文档中，很少有Map，类似于下面的图片。
此外，Map的名称可以根据<em
浏览 0提问于2021-08-18得票数 2
1回答
我正在寻找一种解决方案，从Facebook的公共页面上获取事件列表，以列表形式显示在我的网站上。我正在使用Magento 2的网站。我知道有Facebook的小工具，Facebook的登录功能，等等，我不想要这些。我不希望整合Facebook，我只是想要一个公开可见的事件列表，这样我就可以把它们放在我的网站上。我不想要用户的事件，我想要业务页面的事件。这似乎应该是一件直截了当的事情
浏览 2提问于2018-11-13得票数 0
我知道我们可以添加如下快捷方式：但我如何才能成为不止一个角色的捷径呢？我在找这样的东西：command key("ao") "AddOrder" "Add a neworder"
但
浏览 4提问于2017-02-02得票数 0
回答已采纳
1回答
当用户在列表页面中选择产品时，我会将产品数据从产品列表转到产品信息页面，这样我就不必从数据库重新查询相同的数据了。同时，我的产品信息页面允许深度链接。如果用户深入链接到产品信息页面，我应该在哪里passProps数据？在自定义URL中还是再次查询数据库中的数据？
注意:我正在使用firebase作为数据库
浏览 1提问于2016-10-03得票数 0
回答已采纳
1回答
当我浏览我的产品时，我意识到当我点击一个类别时，它不会显示完整的项目列表。当我转到后端时，我意识到没有为某些产品选择主要的父类别。有没有一种方法可以轻松地将父类别添加到项目中？我对magento和excel的知识有限，我曾尝试将父类别添加到excel中的项目中，但这不是最有效的</em
浏览 7提问于2012-04-12得票数 0
我有一个包含使用ListView的产品列表的活动。如果我点击任何产品A，就会打开一个对话框，并将该产品A添加到对话框中。要添加另一个产品B，请在打开对话框时滚动产品列表。但是我不能滚动列表。
浏览 0提问于2016-06-08得票数 0
1回答
我有下面的页面结构登录->Tabs(家庭)->产品列表->购物车
当我登录到登录页面时，我会显示默认的选项卡页，其中我有4选项卡(主页、搜索、购物车，更多)。当我在主页上点击商家项目时，我将导航到商家详细信息页面，在那里我将显示由他提供的菜单项列表。一旦我从菜单页面向购物车添加了几个项目，我就会将它们添加到购物车中。我正在显示一个按钮去推车。当他点击按钮，用户将进
浏览 0提问于2020-08-16得票数 0
我正在使用WooCommerce插件的Divi主题。在商店页面中，我想让数量调整直接放在添加到购物车按钮上。
如何将该功能添加到商店页面产品中？
浏览 1提问于2016-06-22得票数 0
回答已采纳
我正在寻找一个好主意来做一个列表视图的最喜欢的列表。从网站服务器解析ListView。我添加了新的明星图像，一旦它点击它改变为黄色的“收藏项目”，我想要的是一个想法，如何保存这个点击项目到收藏列表…我已经想到的是创建本地xml文件，并将我点击的每个项目添加到
浏览 0提问于2013-01-13得票数 0
回答已采纳
当我(客人客户)想要从类别页面或产品页面将产品添加到意愿列表中时，单击意愿列表按钮后重定向到登录页面。成功登录后，我的愿望列表中没有任何产品。登录后，如果我再次点击一个产品，添加到愿望列表，那么它可以正常工作。
请帮帮我。谢谢你
浏览 13提问于2017-03-02得票数 1
我试图使flipkart登录自动化并将产品添加到购物车中。每当我点击产品时，它就会导航到新页面，而无法在新页面中找到指定的元素(添加到购物车按钮)。我写的help...The代码如下..。webDriver.FindElement(By.XPath("//imgcontains(@alt，'APPLE iPhone SE (Black，64 GB)‘)).Click()；&#x
浏览 5提问于2021-12-08得票数 0
新的SwiftUI和Firebase。我正在尝试将文档添加到Firestore子集合中。如果我手动将文档ID添加到路径中，视图模型中有以下代码非常有用。基本的想法是得到一个公司的名单，点击一个，被带到一个员工名单上，可以选择在该公司的员工名单中添加一个雇员。任何帮助都将不胜感激。如果需要的话，很乐意添加代码的任何其他部分。为了给我想要做的事情增加更多的</
浏览 1提问于2022-03-07得票数 0
我看着推特上的iPhone应用程序，感到很困惑。现在我想实现同样的效果。我应该把我的实施建立在什么基础上？UITextView还是UIWebView？
如何在这样的文本/网页视图中实现这些平滑的</e
浏览 3提问于2010-12-31得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
