为 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。

解决方案

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

Answer 2

终于成功了。我只是将每个按钮上的 url 替换为 link 到我的 JSON 文件，如下所述：https://docs.snipcart.com/v2/configuration/json-crawler

为 Snipcart 产品验证定义 JSON 文件

Define JSON File for Snipcart Product Validation

javascript

php

jquery

json

snipcart