Product met custom fields toevoegen aan cart vanuit externe frontend app via API?

Hallo,
Ik zou een externe frontend app willen bouwen waarin uit een aantal producten kan worden gekozen. Dit product dient dan aan een cart te worden toegevoegd en het afrekenen dient op de site zelf te gebeuren. Hoe zou hiervan de flow zijn? Ik ben nieuwe in Lightspeed en begrijp nog niet goed de termen quote, order en checkout. En hoe verhouden deze zich tot "cart"?
Via Postman kan ik een quote maken, op basis daarvan een checkout, maar zodra ik een product aan de checkout wil toevoegen krijg ik de error "Could not add product to cart". Ik heb custom fields op het object (allen select), die als ik ze weglaat de error "Invalid data input" veroorzaken. Ik weet niet hoe ik de id van de customfieldvalue moet vinden (volgens handleiding moet dat de waarde zijn van het custom field in de checkout->add product), maar heb een ogenschijnlijke id gevonden op de delete knop link van de field value.
En, als dit al zou lukken, hoe ga ik dan vanuit de externe frontend app met het id van de checkout naar de site om daar de cart te betalen?
---------------------
josfaber.nl
55 comments
Update:
heb de vraag op Stackoverflow staan, hier wordt ie in z'n geheel (met code) uitgelegd: https://stackoverflow.com/questions/69516621/add-product-to-cart-from-lightspeed-ecom-api-and-then-follow-regular-checkout-fl
---------------------
josfaber.nl
Hi @josfabre,
Bedankt voor je bericht.
Bij het aanmaken van een checkout wordt er ook direct een nieuwe quote aangemaakt. Dus je hoeft niet eerst een quote aan te maken en deze later te koppelen aan de checkout. Het beste wat je kunt doen is deze calls doen van boven naar beneden om een order aan te maken https://developers.lightspeedhq.com/ecom/endpoints/checkout/
Custom fields zitten helaas niet in de API. Maar je zou inderdaad het ID kunnen proberen als je het probeert te deleten.
Heb je een productID van het product wat je probeert toe te voegen aan de checkout?
Zou je je payload kunnen sturen?
Bedankt voor je antwoord. Ik begrijp nu een stuk beter how deze flow werkt.
Ik kan inderdaad met deze flow een volledige checkout afronden, inclusief custom fields, en na 'finish checkout' krijg ik een betaal url.
Mijn vraag is eigenlijk of ik na toevoegen van product aan de checkout in de shop zelf verder kan, dus nog meer producten aan de cart/checkout toevoegen via de gebruikelijke url van de shop. Mijn applicatie is voor een kleine subselectie van producten en ik zou willen dat klant nog verder kan winkelen in de shop op de domein zelf. Is dat mogelijk?
---------------------
josfaber.nl
Nadat je de producten hebt toegevoegd, kun je de "quote.id" gebruiken om de quote op te halen. Mocht je de "quote.id" niet hebben, kun je een GET doen op de checkout die je hebt aangemaakt.
Als je de quote ophaalt, zie je een "recovery_hash". Deze kun je gebruiken om de gebruiker door te sturen naar de cart pagina.
Voorbeeld URL:
http://domain.com/cart/recover/{quote.recoveryHash}
Dankjewel! Die recovery url had ik gevonden, maar daar zitten wat issues bij:
---------------------
josfaber.nl
Mijn vraag blijft dus: of ik na toevoegen van product aan de checkout in de shop zelf verder kan, dus nog meer producten aan de cart/checkout toevoegen via de gebruikelijke url van de shop. Mijn applicatie is voor een kleine subselectie van producten en ik zou willen dat klant nog verder kan winkelen in de shop op de domein zelf. Is dat mogelijk?
---------------------
josfaber.nl
Hi @josfabre,
Mijn vraag blijft dus: of ik na toevoegen van product aan de checkout in de shop zelf verder kan, dus nog meer producten aan de cart/checkout toevoegen via de gebruikelijke url van de shop. Mijn applicatie is voor een kleine subselectie van producten en ik zou willen dat klant nog verder kan winkelen in de shop op de domein zelf. Is dat mogelijk? Wat je zou kunnen doen is het quoteID onthouden en deze later weer gebruiken om te recoveren. Als je in de zoek input "tb/show" invult zie je welke data er beschikbaar is.
Ik hoop dat je dit verder helpt.
Bedankt voor je antwoord Lucien,
Die debugbar is handig!
Ik begrijp je antwoorden, ik zie alleen nog steeds niet hoe ik wat ik wil nu via de API voor elkaar moet krijgen.
Je zegt "Wat je zou kunnen doen is het quoteID onthouden en deze later weer gebruiken om te recoveren. Als je in de zoek input "tb/show" invult zie je welke data er beschikbaar is."
Stel, ik kom vanuit mijn externe app met een recovery hash binnen op pakkend.nl, dan is de flow van mijn app toch ten einde? Ik heb daar geen controle meer.
Of, ik ben als klant op pakkend.nl, ga dan naar mijn externe app en wil het daar geconfigureerde shirt toevoegen aan de cart, (maar die is dan weg ivm de werking van recoverycash) hoe zou ik dan de cart uit de site via de API kunnen ophalen? Als dat al zou kunnen, bedoel je dan dat ik al de zich daar in bevindende producten aan een nieuwe checkout moet toevoegen met alle custom fields en dan een nieuwe recovery doen incl. het toegevoegde shirt?
---------------------
josfaber.nl
Of bedoel je misschien dat ik in de link naar mijn externe app (op pakkend.nl) al dat quoteID moet meegeven, zodat ik de zich daarin bevindende producten kan overhevelen naar een nieuwe checkout en zo incl. mijn shirt kan recoveren?
---------------------
josfaber.nl
Hi @josfabre,
Wat je zou kunnen doen is gebruik maken van Webhooks, wanneer en iets in de winkelwagen wordt gegooid wordt er een webhook(quote) afgevuurd met de quoteID en recoveryhash erin.
Als die webhook die cart events allemaal doorstuurt, hoe kan ik dan bij openen van mijn externe app de (anonieme) gebruiker koppelen aan één van die quoteID's?
Nog even ter verduidelijking: ik heb geen enkele code op pakkend.nl staan, ik heb puur mijn externe Laravel/Vue app en toegang tot de Lightspeed eCom API. Heb ik iets nodig / moet ik iets maken / aanzetten op pakkend.nl om dit soort data te kunnen doorgeven / herkennen / ... ?
Uiteindelijk zal die externe app wel liefst binnen een iframe in de pakkend site moeten gaan draaien, dus dan zou ik via mainmenu naar mijn app linken, daar is wellicht een mogelijkheid om iets door te geven?
---------------------
josfaber.nl
Hi @josfabre,
Als die webhook die cart events allemaal doorstuurt, hoe kan ik dan bij openen van mijn externe app de (anonieme) gebruiker koppelen aan één van die quoteID's? Ja daar zat ik ook aan te denken dit wordt dan wel een beetje lastig.
Nog even ter verduidelijking: ik heb geen enkele code op pakkend.nl staan, ik heb puur mijn externe Laravel/Vue app en toegang tot de Lightspeed eCom API. Heb ik iets nodig / moet ik iets maken / aanzetten op pakkend.nl om dit soort data te kunnen doorgeven / herkennen / ... ? Uiteindelijk zal die externe app wel liefst binnen een iframe in de pakkend site moeten gaan draaien, dus dan zou ik via mainmenu naar mijn app linken, daar is wellicht een mogelijkheid om iets door te geven?
Wat je zou kunnen doen is gebruik maken van de ShopScript endpoint, hiermee kan je een Javascript bestand in de shop laden. Hier wordt er meer over verteld https://developers.lightspeedhq.com/ecom/endpoints/shopscript/
Ok, daar zit dan ook nog een aantal mogelijkheden.
Ik zou hier graag mee willen experimenteren, maar wil dat niet op een live shop doen. Is er een mogelijkheid om in een test omgeving dit te doen? Ik had een eigen shop account, maar die proefperiode is voorbij én die had geen API toegang.. (https://mapmappa.webshopapp.com)
---------------------
josfaber.nl
Ik heb de shop op test gezet voor je, dus je kunt weer aan de slag.
Thanks Lucien voor je antwoorden,
Ik ga er z.s.m. mee aan de slag.
---------------------
josfaber.nl
Geen probleem.
Ik hoop dat het lukt wat je voor ogen hebt, mocht je nog vragen hebben hoor ik dat natuurlijk graag.
Ik heb nu een bidirectional communication opgezet tussen de shop en mijn app in een iframe. Zie https://www.d-apps.nl/service/custom-made/
Ik kan dus heen en weer communiceren. Volgende vragen:
---------------------
josfaber.nl
Het ziet er naar uit dat ik de variables alleen binnen een (rain) template kan opvragen? Ik wilde daartoe de templates voor navigatie editten, maar in mijn test shop is de template editor uitgeschakeld.
---------------------
josfaber.nl
Hi @josfabre,
Ik heb de template editor voor je open gezet zodat je dit kunt testen. Je kunt hier meer info vinden over de variabelen https://ecom-support.lightspeedhq.com/hc/en-us/articles/115000277594-3-b-Rain-variables-NB-
Weer een stapje verder, thanks weer!
Ik heb nu de header aangepast zodat ik de template vars die ik nodig heb in het javascript window object kan zetten. Met postMessage kan ik die dan weer doorgeven aan het iframe en dus mijn applicatie. Een werkend voorbeeld op deze url: https://www.d-apps.nl/service/custom-made/ (zie console)
Maar, de cart rain variable met de quote_id waar we nu al de hele tijd op jagen is alleen maar op de cart pagina beschikbaar! Is er een mogelijkheid om die op alle pagina's beschikbaar te maken?
---------------------
josfaber.nl
Top!
Eerlijk gezegd ben ik bang van niet. Ik zie wel dat wanneer je iets in de winkelwagen hebt gedaan en daarna naar https://www.d-apps.nl/service/custom-made/ je de quoteID from local storage print in de console.
Sorry ik was in de war door de root 'cart' variable. Ik zie dat in de 'page' ook een 'cart' zit, waarin de cart dus in elke pagina te bekijken is. Nice!
Ik denk dat ik zo langzamerhand wel bijna ben waar ik wil zijn. Ik moet alleen nu het laatste punt hieronder nog testen.
METHODE
---------------------
josfaber.nl
Hi @josfabre,
Ik ben bang van niet aangezien deze variabelen alleen beschikbaar zijn in de template editor.
Kan je me uitleggen waarom je een kopie van het hele thema hebt, de rain variabelen zijn voor iedere shop gelijk?
Ik bedoel, om de template editor te kunnen gebruiken is er automatisch een theme copy gemaakt toch? Die dus niet meer geüpdatet wordt als het originele theme een update ontvangt..
---------------------
josfaber.nl
Oh zo, ja klopt inderdaad.
Maar het is niet zo dat partners die zo'n thema hebben gemaakt maandelijks updates doen.
Het activeren van de thema editor zal inderdaad een kopie maken van de huidige thema. Deze kun je dan vervolgens aanpassen naar wens, echter zullen er inderdaad geen thema updates meer plaatsvinden omdat het anders de custom code zou overschrijven.
Ik ga een prototype bouwen van een volledige flow. Ik denk dat ik hiermee kan bouwen wat ik wil.
Dank voor jullie hulp!
---------------------
josfaber.nl
Helemaal goed,
succes!
Ik ben er nu echt bijna. Ik kan bi-directioneel communiceren met de shop. Maar nog één vraag: het product heeft custom fields die ik graag wil invullen bij toevoegen aan de quote. De API heeft daar voor QuoteProduct geen mogelijkheden? Ik zie alleen maar product_id en variant_id?
test flow:
---------------------
josfaber.nl
Hi @josfabre,
Helaas heeft onze API geen mogelijkheid om met customfields te werken :( Ook het toevoegen hiervan in de QuoteProduct endpoint kan helaas niet. Dit is bij onze developers bekend, ik ga een ticket voor je aanmaken zodat je op de hoogte wordt gehouden van de ontwikkelingen omtrent dit issue.