Add product to basket with ajax

[AmzoooJibal]

Hello,
I want to override the add to cart button in detail page with ajax, when i click in add to cart button i have this data from my form:

Code: Select all

_token=teRyok7ZWWxMCvgfnJOT4zShG8nDZBaOJxKRsBag&b_action=add&b_prod[0][prodid]=14&b_prod[0][supplier]=3&b_prod[0][attrvarid][color]=124&b_prod[0][attrvarid][width]=125&b_prod[0][attrvarid][length]=126&b_prod[0][quantity]=1

Then in my javascript function i transform this url to like in documentation https://aimeos.org/docs/2021.x/frontend ... n-products:

Code: Select all

data: [
attributes:{
product.id: "14"
product.quantity: "1"
product.supplier: "3"
variant:  ["124", "125", "126"]
}]

when i do an ajax post to : '/jsonapi/basket' i get this error:

Code: Select all

"Checks for available addresses in basket failed"

[aimeos]

The correct format according to the docs is:

Code: Select all

{
  "data": [{
    "attributes": {
        "product.id": "14",
        "quantity": "1",
        "supplier": "3",
        "variant": ["124", "125", "126"]
    }
  }]
}

See:
- https://aimeos.org/docs/latest/frontend ... -products
- https://aimeos.org/docs/latest/frontend ... n-products

[AmzoooJibal]

The message now is changing, i have send a post to this URL:

Code: Select all

http://www.test.com/jsonapi/basket?_token=KxGAGidex9gvPlEwk4iiroiI94fsIQos1BqETKxt

with this data :

Code: Select all

{"data":[{"attributes":{"product.id":"14","quantity":"1","supplier":"3","variant":["124","125","126"]}}]}

and i get this error message :

Code: Select all

{
"meta": {
"total": 0,
"prefix": null,
"content-baseurl": "/aimeos"
, "csrf": {
"name": "_token",
"value": "KxGAGidex9gvPlEwk4iiroiI94fsIQos1BqETKxt"
}

},
"links": {
"self": {
"href": "http://www.test.com/jsonapi/basket",
"allow": ["DELETE","GET","PATCH","POST"]
}

}
,"errors": [{"title":"Basket empty"}]

}

I think the request try to create an order ? what is the jsonapi for managing basket add remove product ? is this one:

'jsonapi/basket'

[aimeos]

The concrete URL depends on your setup and how to retrieve it is described here:
https://aimeos.org/docs/latest/frontend/jsonapi/

Make sure you use a POST request, not a GET request!

[AmzoooJibal]

thank you, i have read the doc many time and its clear now, so to add a product to the basket you need first to retreive the product then the URL to add the product to the basket is in data['links']['basket/product']['href'].

I think this senario its not good we risk to overload the server with many request first send ajax to get the product link next do an add to the basket, it's better to do one request to basket with product id and there variant what do you think ?

[aimeos]

It depends on your type of application. If you want to build a mobile app or a PWA, you would fetch the OPTIONS response only once for the whole lifetime of the session. In an web environment that's only possible if you store the OPTIONS response locally, e.g. in the LocalStorage or SessionStorage of the browser. If your JS code only interacts with your own website, then you can use the URLs from the OPTIONS response directly in your code as long as you don't change the routes (i.e. don't change to a multi-site, language or currency setup).

[AmzoooJibal]

Thank you so much it more clear now