javascriptphpjqueryjsonsnipcart

Define JSON File for Snipcart Product Validation

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.sstatic.net/ajyou.png

https://i.sstatic.net/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);
}

Solution

  • 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