Return JSON using Javascript, jQuery
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

An example of exactly what I need to do to return the information (JSON) below. I'm using js, jquery.

  1. I need to add this: Content-Type header is application/json
    Where, how do I add this?

  2. When the request comes I need to reply with the Json below
    How does it know that the request has come and how do I answer it using javascript?

Basically:
When Snipcart makes the request to the URL, if your response Content-Type header is application/json, we'll use our JSON validator instead of the HTML one.
You must return us a JSON having the following properties.

You can find more information here:
https://docs.snipcart.com/configuration/json-crawler#validating-the-request

{
  "id": "20",
  "price": 50.00,
  "url": "https://snipcart.com/products/1.json"
}

Thanks!

awarded to Codeword

Crowdsource coding tasks.

2 Solutions

Winning solution

Hi jacknumpty, considering if your are using php as server side

say you have a page contains this product HTML button

<button
    class="snipcart-add-item"
    data-item-id="2"
    data-item-name="Bacon"
    data-item-price="3.00"
    data-item-weight="20"
    data-item-url="http://myapp.com/products/bacon.php"
    data-item-description="Some fresh bacon">
        Buy bacon
</button>

on your server side (php)

<?php
header('Content-Type: application/json');

$data = [
  "id" => "20",
  "price" => 50.00,
  "url" => "http://myapp.com/products/bacon.json" 
];

echo json_encode( $data );

?>

NOTE when the user will click the HTML button, snipcart sends a request to http://myapp.com/products/bacon.json and in return, the bacon.json will return the JSON data to snipcart validating the integrity of the product information

Hope it helps.Thank you

Hi Codeword, thank you for your time. In your notes and url section did you mean http://myapp.com/products/bacon.php (not .json)? Do I just add the php code on my product page (http://myapp.com/products/bacon.php). I did want to do this all using JS. I'm not too familiar with PHP how do I give the php code the data that is in my JS. For example, if I have a js var 50 how do I add this var to the php code (price => 50)? One worry I have is that my JS has to run before I have the vars (50). So I will not have these values at the very start. Is there a way in the php to say wait until I have the vars before echo? Thank you.
Jacknumpty 9 months ago
yeah, you can pass the data from js code to php using jquery ajax like this ``` $.post("http://myapp.com/products/bacon.php", {price: 50}, function(data){ alert(data); // this will alert your json data or you can use it as you like }); ``` when your price variable is available send a post ajax request to the phpfile which will send the variable price to the php code. On php side we do one more thing ``` <?php header('Content-Type: application/json'); $data = [ "id" => "20", "price" => $_POST['price'], "url" => "http://myapp.com/products/bacon.php" ]; return json_encode( $data ); // this will return the json data to the js code ?> ``` Thanks
Codeword 9 months ago

Assuming You are asking for fast and easy implementing of data-item-url api endpoint... using js

    <button class="snipcart-add-item"
        attr.data-item-name="{{ product.name }}"
        attr.data-item-id="{{ product._id }}"
        attr.data-item-image="{{ product.imageUrl }}"
        attr.data-item-price="{{ product.price }}"
        attr.data-item-description="{{ product.description }}"
        data-item-url='https://wt-4b2a879e3bb5c630d65bc12c99321764-0.run.webtask.io/sanity-parser'>

        Buy it for {{ product.price }}$
    </button>

Getting started with Node.js Express

Hi valerysntx, thank you for this answer. While it looks amazing most of it goes over my head. I appreciate the time you took to send this.
Jacknumpty 9 months ago
View Timeline