时间戳

首页 > 解决方案 > 为 Snipcart 产品验证定义 JSON 文件

javascript - 为 Snipcart 产品验证定义 JSON 文件

问题描述

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

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

我在 Snipcart 文档中看到了 JSON Crawler 的解决方案，但我不太明白我需要做什么：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);
}

标签： javascriptphpjqueryjsonsnipcart

解决方案

概括：

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

错误：

该错误表示在JSON验证器文件中Snipcart找不到该项目。id0

解决方案

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

推荐阅读