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

josfabre

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?

josfabre

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

LucienVersendaal

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?

josfabre

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?

Ali_Masoumie

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} 

josfabre

Dankjewel! Die recovery url had ik gevonden, maar daar zitten wat issues bij:

• een eventueel bestaande cart is daarmee meteen leeg. Oftewel als een klant al drie dingen in de cart heeft en via onze app nog een item wil toevoegen gaat die cart leeg
• Als je verder winkelt na recoveren van de cart en opnieuw producten toevoegt is de gerecoverde cart leeg, tenzij je na recoveren op 'verder winkelen' hebt geklikt. Oftewel: als je recover url hebt aangeroepen, je nieuwe cart ziet en dan meteen op een product link klikt of navigeert via menu, dus niet eerst op 'verder winkelen' klikt, onthoud de shop de cart niet.
• met een recovery hash kun je dus blijkbaar alleen die specifiek aangemaakte quote in een cart omzetten en niet samenvoegen met wat er al in een cart zit?

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?

LucienVersendaal

Hi @josfabre,

• Een eventueel bestaande cart is daarmee meteen leeg. Oftewel als een klant al drie dingen in de cart heeft en via onze app nog een item wil toevoegen gaat die cart leeg. Dit klopt inderdaad. De bestaand cart "lijkt" leeg. Maar onder water wordt er zodra er een product aan de checkout wordt toegevoegd een quote / checkoutid aangemaakt. Dus wanneer je een cart recover doet dan is de bestaande cart niet weg die kun je dan ook recoveren.
• Als je verder winkelt na recoveren van de cart en opnieuw producten toevoegt is de gerecoverde cart leeg, tenzij je na recoveren op 'verder winkelen' hebt geklikt. Oftewel: als je recover url hebt aangeroepen, je nieuwe cart ziet en dan meteen op een product link klikt of navigeert via menu, dus niet eerst op 'verder winkelen' klikt, onthoud de shop de cart niet. Dit heb ik getest, maar kan ik helaas niet reproduceren. Wanneer ik na de cart/recover heb aangeroepen en ik ga naar een product pagina zonder op verder gaan met winkelen te klikken kan ik het product in de winkelwagen gooien en wordt het toegevoegd aan de gerecoverde cart.
• Met een recovery hash kun je dus blijkbaar alleen die specifiek aangemaakte quote in een cart omzetten en niet samenvoegen met wat er al in een cart zit? Klopt, wanneer je de cart recovert dan ga je "verder" met de gerecoverde cart en niet met de huidige dus kunnen niet worden samengevoegd, die kun je later weer recoveren.

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.

josfabre

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?

josfabre

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?

LucienVersendaal

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.

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?

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?

LucienVersendaal

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/

josfabre

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)

LucienVersendaal

Ik heb de shop op test gezet voor je, dus je kunt weer aan de slag.

josfabre

Thanks Lucien voor je antwoorden,

Ik ga er z.s.m. mee aan de slag.

LucienVersendaal

Geen probleem.

Ik hoop dat het lukt wat je voor ogen hebt, mocht je nog vragen hebben hoor ik dat natuurlijk graag.

josfabre

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:

1. waar kan ik de variabelen ophalen die ik in de debugbar zie? Ik zie ze niet in het window object?
2. Op de cart pagina zie ik in de debugbar het 'cart' object met de 'quote_id' die ik moet hebben. Maar die var is op andere pagina's niet aanwezig? Ik zou 'm idealiter in de pagina willen ophalen die het iframe met zijn app embed, zodat ik die quote_id kan doorsturen naar mijn app

josfabre

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.

LucienVersendaal

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-

josfabre

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?

LucienVersendaal

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.

josfabre

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.

1. Denk je dat deze methode hieronder beschreven die ik nu hanteer houdbaar is? Met name ook omdat dit een kopie van het theme vergde?
2. Is er geen andere manier om via javascript bij de variables te komen? Ik heb nu dus een kopie van het theme, alleen maar om dit onderin de header.rain te kunnen zetten: '<script>window.psc_quote_id = '{{ page.cart.quote_id }}';</script>'

METHODE

• page.cart.quote_id wordt in window object gezet in theme header template
• middels extern script gebruik ik postMessage om deze page.cart.quote_id door te geven aan mijn externe app binnen het iframe.
• Indien er een quote_id bestaat, bouw ik een volledige nieuwe cart op in mijn externe app van de bestaande quote_id plus het aangemaakte shirt in mijn externe app en stuur klant naar cart_recover url op de website, die dan een nieuwe cart heeft met de items uit de oude cart plus het aangemaakte shirt

LucienVersendaal

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?

josfabre

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..

LucienVersendaal

Oh zo, ja klopt inderdaad.

Maar het is niet zo dat partners die zo'n thema hebben gemaakt maandelijks updates doen.

Ali_Masoumie

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.

josfabre

Ik ga een prototype bouwen van een volledige flow. Ik denk dat ik hiermee kan bouwen wat ik wil.

Dank voor jullie hulp!

Ali_Masoumie

Helemaal goed,

succes!

josfabre

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:

• deze in winkelmand doen: https://www.d-apps.nl/ander-product.html
• binnenkomst op externe app met quote_id: https://www.d-apps.nl/service/custom-made/
• test knop voegt product toe aan quote en linkt naar cart
• product is toegevoegd aan cart!

LucienVersendaal

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.