I'm trying to set up Snipcart for the first time. It seems pretty straightforward for the most part, but I'm running into some issues when I try to check out with the test payment card.
I'm working with just a vanilla front end, and Express on the back. I'm getting the same error every time:
A 'cart-confirmation' error occurred in Snipcart.
Reason: 'product-crawling-failed'
But the URL it's returning me in my console looks like it should be able to crawl for the product properly: https://myHerokuApp.herokuapp.com/shop/starry-night
<button class="snipcart-add-item"
data-item-id="starry-night"
data-item-price="79.99"
data-item-url="/shop/starry-night"
data-item-description="This is a sweet piece of art."
data-item-image="img/1.jpg"
data-item-name="The Starry Night">
Add to cart
</button>
I'm really confused at to what I'm doing wrong. Is there something I have to do with my express router? I've tried routing something like this just to see what would happen
router.get("/shop/:product", function (req, res, next) {
res.json({
"data-item-id": "starry-night",
"data-item-price": "79.99",
"data-item-url": "/shop/starry-night"
})
});
But that didn't make a difference.
I'm really hoping someone can spot what I'm doing wrong or point me in the right direction in the docs..
Thank you!
Attributes data-item-id and data-item-price are used with HTML crawler and are defined inside buy-button.
If you want to use JSON crawler, then you should return valid JSON with properties id and price. Also, price should be of type number. Change your backed like this:
router.get("/shop/:product", function (req, res, next) {
res.json({
"id": "starry-night",
"price": 79.99
})
});
Note: your server must be publicly available (not running in your localhost).
Related
I have been asked to perform following task
Take a code input from frontend, i.e user would give his code on frontend (design for a web/landing page)
On backend we have many fields inside an api route
route.get("/", (req, res) => {
const fullName: "Varun Bindal"
const contactNo = 9293939933
const message = "Message I want to display"
//Many more
}
Tell user a way where when we serve his code such that, he could dynamically access/assign the fields we have in the backend into his code
I did some googling and found the express officially recommends ejs for server side compilation of webpage
Can someone please help me figure out how we can achieve this?
Yes you can!
Firstly you must include ejs in your project, configure it in your server.js file for example, then you can call res.render() in your callback parameter on route.get().
In your html or javascript you can create a placeholder which gets populated.
Example (server):
route.engine('html', ejs.renderFile);
route.engine('js', ejs.renderFile);
route.get('/', (req, res) => res.render(path.resolve(__dirname, '
../ui/index.html'), {
'myVal': 42,
}));
Example (client html, js, etc...):
<%= myVal %>
Steps:
pull data from mongodb to populate a link on search page. Be able to click the link to take end user to the generic business page which is auto filled by mongodb. render the page with the JSON data from mongodb.
Issues:
res.render gets stuck in Infinite Loop (no error is thrown also)
I've tried adding an if statement so res.render would not render again, yet still stuck in a loop.
routes/business.js
router.get('/:business', (req, res) => {
console.log(req.params.business);
Business.getBusinessByUrl(req.params.business, (err, business) => {
if (err) throw err;
res.render('business', {
found: true,
business_name: business.business_name,
business_profile_image: business.business_profile_image,
business_url: business.business_url
});
});
});
module.exports = router;
models/business.js
module.exports.getBusinessByUrl = function (businessUrl, callback) {
const query = { business_url: businessUrl };
Business.find(query, callback);
};
Here is what it looks like in the browser :
Imgur
Let me know if you need any other code.
After a while of searching I couldn't find anything helpful. Eventually I figured it out. It happened to be that when I had commented out the line <div w3-include-html="file-included.html"> it stopped infinitely loading. A thank you too everyone who tried to help me.
I'm working on a simple mock server, and am using nothing but JavaScript and Yarn to build it.
In a simplistic manner, I have this that's working as intended:
function server() {
(...)
return {
users: generate(userGenerator, 150)
}
This is generating 150 random users, when the /users endpoint is reached, and it's working as intended. The issue I'm having is with catching id's passed on the query string. ie:
/users/{id}/attribute
How can I get this to work?
Many thanks in advance
try req.params.id
app.get('/users/:id/attribute', function(req, res) {
console.log('id : ' + req.params.id);
...
});
I'm gonna start by showing you my code
Angular Code: app.js
$scope.submit = function(){
$scope.jsonData={
"status":"OK",
"data":{
"nbOperatorPresent": $scope.nbOperatorPresent,
"objectif1stHour": $scope.objectif1stHour,
"objectif2ndHour": $scope.objectif2ndHour,
"objectif3rdHour": $scope.objectif3rdHour,
"objectif4thHour": $scope.objectif4thHour,
"objectif5thHour": $scope.objectif5thHour,
"objectif6thHour": $scope.objectif6thHour,
"objectif7thHour": $scope.objectif7thHour,
"objectif8thHour": $scope.objectif8thHour
}
}
$http.post("http://localhost:5000/settings",
JSON.stringify($scope.jsonData)).success(function(data,status){
console.log('success')
})
}
NodeJs Code: index.js
app.post('/settings',urlencodedParser,function(req,res){
console.log(req.body)
})
As you can see, I have a button to submit the data inserted by the user and send it to the server.
My problem is, when I hit submit, there is nnothing in my browser console, I mean console.log('Success !') didn't work, that is to say that all the code inner the .success(function(data,status)) won't be executed so I can't notify the user that he has submitted Successfully, I don't know where the problem came from !!
BUT In the other console console.log(req.body) I found all the data that has been passed from Angular.
Can anyone explain this to me ? I've tried other solutions but always the same problem :(
To expand on the answer...
Please note if you are unfamiliar with node and express you may want to get in the habit of returning
res.send(success: true, data: res).end()
Its very typical on the angular or UI side to be able to parse as response.data object. Just a suggestion.
and change to this:
.success(function(res,status){
console.log(res.success, res.data)
})
This is a very common architecture especially when dealing with web services that you have not control over.
You're not returning anything from the node.js code. You need to add in a returning data like:
app.post('/settings',urlencodedParser,function(req,res) {
console.log(req.body)
res.send("Success")
})
I'm trying to create a new user and use their _id for another collection right after it's created.
var newUserId = Accounts.createUser({username: "w/e", password:"w/e"});
doesn't work as I thought.
I know if you insert something into a collection it returns the _id, so I'd assume this would be same, but apparently it's not.
"newUserId" ends up being undefined.
I'm not sure if this matter, but I'm creating the user via server side.
Any helps is appreciated, thanks.
*Solved:
Got the code to do what it needed to do.
Accounts.validateNewUser(function (user){
//do something after user creation
});
slap that code into the account.js in the server side.
Once the user was created via
Accounts.createUser({})
the method:
Account.validateNewUser()
fire immediately afterward. Used the user argument to get whatever the new user properties I need (in this case the _id and username) and plugged that into another collection meteor method.
Thanks again!
PS: turns out
Accounts.createUser({})
Actually does return the _id, but you can only see it in the server console, but not the client console, so I apologize for any confusion. That was my mistake.
To debug this, specify a callback then look at the error that is being returned.
Accounts.createUser({username: "w/e", password: "w/e", function(err){
if ( err ) console.log(err);
}