Define JSON File for Snipcart Product Validation

Question

I'm trying to create a page where administrator of the website can enter a new products through a form that will store it in a json file and appear as item in the main shop page. I succedeed to do it but snipcart doesn't seems to recognize the product. I get an error message when I try to pay a product coming from my json. https://i.stack.imgur.com/ajyou.png

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

I saw a solution with JSON Crawler in the Snipcart documentation but I don't really understand what I need to do : https://docs.snipcart.com/v2/configuration/json-crawler Creating the JSON isn't a problem but I don't get how I have to use it.

My code where I use the JSON file to display my products :

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

Finally I succedeed to make it work. I just replaced url on every button with the link to my JSON file as explained here : https://docs.snipcart.com/v2/configuration/json-crawler

Answer 2

SUMMARY:

You need to give to Snipcart a publicly available JSON validator file, and each item in that file needs to have id and price field. Snipcart will try to find id for the product that you have put in the cart and it will check if the price of the product in the cart is equal to the price in the JSON validator file.

ERROR:

The error says that Snipcart could not find the item were id is equal to 0 in the JSON validator file.

SOLUTION

When you are putting the item in the cart, that item needs to have an id that is present in the JSON validator file. Try to console.log the actual item that you are putting in the cart to check its id. Check the JSON validator file that you are sending to Snipcart and check if it contains the item with that id. If not, just add a new item to JSON validator file with that id and a corresponding price field.