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);
}

Does axios automatically parse the JSON, or will you need to do it? — evolutionxbox, May 05 '21 at 14:49
Yes everything appears with the datas I put in my JSON file but idk why snipcart can't achieve the purchase with a button created with this method. When I create a button with HTML everything works but when it comes to my buttons created as above it blocks me — KenTay7, May 06 '21 at 07:19

score 0 · Answer 1 · answered May 05 '21 at 20:52

0

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.

answered May 05 '21 at 20:52

NeNaD

18,172
8
47
89

I tried to come back to the HTML validator, I don't know if it's related but my buttons created through jquery are not recognized when I console.log(.buy-button) whereas I put it in class when I create the button in jquery. The only button which appear in console.log is the one I created in classic HTML. I don't understand why – KenTay7 May 06 '21 at 07:14
You can also use JavaScript to put items to cart. You don't need to use buttons for it. You can for example create a button and on click pass parameters to some JavaScript function, that will put an item to the cart. You can do it with `Snipcart.api.cart.items.add()` function. You can read more here: https://docs.snipcart.com/v3/sdk/api#items – NeNaD May 06 '21 at 07:21
I think I got the problem, buttons I create with jquery even if I put them the class buy-button and snipcart-add-item, are not considered as member of the class when the page load. That would explain why when snipcart request my buttons, it doesn't find the buy-button with the good ID. Do you know if there is a way to fix that ? – KenTay7 May 06 '21 at 07:51

score 0 · Accepted Answer · answered May 06 '21 at 12:12

0

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

answered May 06 '21 at 12:12

KenTay7

111
1
10

Define JSON File for Snipcart Product Validation

2 Answers2