定义用于 Snipcart 产品验证的 JSON 文件

Question

我正在尝试创建一个页面，网站管理员可以通过一个表单输入新产品，该表单将其存储在 json 文件中并作为项目显示在主商店页面中。我决定这样做，但snipcart似乎不认识该产品。当我尝试支付来自我的 json 的产品时，我收到一条错误消息。 https://i.stack.imgur.com/ajyou.png

https://i.stack.imgur.com/CKbbo.png

我在Snipcart文档中看到了使用JSON爬虫的解决方案，但我真的不明白我需要做什么：https://docs.snipcart.com/v2/configuration/json-crawler 创建 JSON 不是问题，但我不明白我必须如何使用它。

我使用JSON文件显示我的产品的代码：

axios.get('/Site/assets/Produits/produits.json').then(({ data }) => {
for (let Produit of Object.entries(data)) {
if (!Produit[1].hasOwnProperty('count')) {
$("#Product-List").append("<li class='product-item shown' id='produit" + Produit[1].id + "'></li>");
let thisProd = $("#produit" + Produit[1].id);
thisProd.append('<img src="/Site/assets/Produits/' + Produit[1].id + '/mainImage.png">')
thisProd.append("<div class='product-description'></div>");
thisProd.find(".product-description").append("<h1>" + Produit[1].nom + "</h1>");
thisProd.find(".product-description").append("<p>" + Produit[1].description + "</p>");
thisProd.find(".product-description").append('<a class="modal-toggle" data-toggle="modal" data-target="#modalDiapo'+Produit[1].id+'">Voir les images</a>');
thisProd.append("<div class='product-pay'></div>");
thisProd.find(".product-pay").append("<h2>" + Produit[1].prix + " €" + "</h2>");
thisProd.find(".product-pay").append(
"<button class='buy-button snipcart-add-item' data-item-id='" + Produit[1].id +
"' data-item-price='" + Produit[1].prix +
"' data-item-url='/Site/boutique' data-item-description='" + Produit[1].description +
"' data-item-image='/Site/assets/Produits/" + Produit[1].id + "/mainImage.png' data-item-name='" + Produit[1].nom + "'>Ajouter au panier</button>");
if(Produit[1].notion && Produit[1].autof) {
if(typeof thisProd.attr("data-item-custom1-name") === 'undefined' || typeof thisProd.attr("data-item-custom1-name") ==false){
thisProd.find('.buy-button').attr("data-item-custom1-name","Type de livre");
}
thisProd.find('.buy-button').attr("data-item-custom1-options","Livre d'autoformation|Livre de notion");
} else if(Produit[1].autof){
if(typeof thisProd.attr("data-item-custom1-name") === 'undefined' || typeof thisProd.attr("data-item-custom1-name") ==false){
thisProd.find('.buy-button').attr("data-item-custom1-name","Type de livre");
}
thisProd.find('.buy-button').attr("data-item-custom1-options","Livre d'autoformation");                
} else if(Produit[1].notion){
if(typeof thisProd.attr("data-item-custom1-name") === 'undefined' || typeof thisProd.attr("data-item-custom1-name") ==false){
thisProd.find('.buy-button').attr("data-item-custom1-name","Type de livre");
}
thisProd.find('.buy-button').attr("data-item-custom1-options","Livre de notion");
}
if(Produit[1].phy){
}
if(Produit[1].num){

}
createModal(Produit[1].id, Produit[1].imgnumber);
}
}
})
function diaporama(id, number) {
const images = [];
for (let i = 0; i < number; i++) {
images.push("/Site/assets/Produits/" + id + "/otherImages" + i + ".png");
}
$("#modalDiapo" + id).find(".modal-body").append(
'<div id="diaporama'+id+'" class="carousel slide" data-ride="carousel">'+
'<div class="carousel-inner">'+
'<div class="carousel-item active">'+
'<img class="d-block" src="/Site/assets/Produits/' + id + '/mainImage.png">'+
'</div>'
)
images.forEach(function(image,i) {
$("#modalDiapo" + id).find(".carousel-inner").append(
'<div class="carousel-item">'+
'<img class="d-block" src="'+image+'">'+
'</div>'
)
});
$("#modalDiapo" + id).find(".carousel-inner").append(
'</div>'+
'<a class="carousel-control-prev" href="#diaporama'+id+'" role="button" data-slide="prev">'+
'<span class="carousel-control-prev-icon" aria-hidden="true"></span>'+
'<span class="sr-only">Previous</span>'+
'</a>'+
'<a class="carousel-control-next" href="#diaporama'+id+'" role="button" data-slide="next">'+
'<span class="carousel-control-next-icon" aria-hidden="true"></span>'+
'<span class="sr-only">Next</span>'+
'</a>'+
'</div>'
)
}
function createModal(id,number){

$("#produit" + id).append(
'<div class="modal fade" id="modalDiapo'+id+'" tabindex="-1" role="dialog" aria-hidden="true">'+
'<div class="modal-dialog modal-dialog-centered" role="document">'+
'<div class="modal-content">'+
'<div class="modal-body">'+        
'</div>'+
'</div>'+
'</div>'+
'</div>'
)
diaporama(id,number);
}

Answer 1

总结：

您需要向 Snipcart 提供一个公开可用的 JSON 验证器文件，该文件中的每个项目都需要具有id和price字段。Snipcart将尝试为您放入购物车的产品查找id，并检查购物车中产品的价格是否等于JSON验证器文件中的价格。

错误：

该错误表示Snipcart找不到该项目id等于 JSON 验证器文件中的0。

溶液

将商品放入购物车时，该项目需要具有 JSON 验证程序文件中存在的id。尝试console.log您放入购物车的实际商品以检查其id。检查要发送到Snipcart的 JSON 验证程序文件，并检查它是否包含具有该id的项目。如果没有，只需向 JSON 验证器文件添加一个新项目，其中包含该id和相应的price字段。

Answer 2

最后，我成功让它工作。我只是用指向我的 JSON 文件的链接替换了每个按钮上的 url，如下所述： https://docs.snipcart.com/v2/configuration/json-crawler