Shopify prijscalculator ajax cart: de som in de drawer

De gordijncalculator rekent 184 × 92 cm uit. Op de productpagina staat €412,80. De klant klikt Add to cart. Rechts schuift de cart drawer open — en daar staat €89,00, de kale variantprijs. Geen centimeter, geen toeslag. Dat is het moment waarop je Shopify prijscalculator ajax cart googelt: niet omdat de formule stuk is, maar omdat de winkelwagen zonder paginareload wordt bijgewerkt.

Shopify-thema’s doen dat expres. Dawn, Sense en de meeste Online Store 2.0-thema’s gebruiken een Ajax-cart of slide-out drawer. De klant blijft op de productpagina. De winkelwagen is een paneel, geen `/cart`-pagina. Options Price Calculator noemt Checkout, Ajax cart, cart drawer en slide-out cart onder Works with. Dat werkt alleen als de app de knop, het formulier en de prijs in *jouw* HTML vindt.

Eerder schreven we hoe je theme bindings aan het thema koppelt. Dit stuk gaat over de volgende laag: wat er gebeurt ná Add to cart, in de drawer die zonder reload opent.

Waarom de Ajax-cart de oude prijs pakt

Shopify Help Adding variants blijft drie options en 2048 variants. Breedte per millimeter past daar niet in. Native line item properties (`properties[Breedte]` in het thema) bewaren de input, maar wijzigen de prijs niet. Een Ajax-cart toont wat Shopify als regelprijs kent: de variant. Zonder calculator-hook is dat €89.

Wat thema’s intern doen:

• Add to cart gaat via `fetch` naar `/cart/add.js`, niet via een klassieke form-submit met paginareload.

• De drawer luistert op die response en tekent de regels opnieuw.

• De header-badge (“2”) komt uit `/cart.js`.

• Checkout in de drawer gaat naar `/checkout` met wat er nú in de cart zit.

Als de calculator intern €412,80 heeft, maar de ATC-knop die de klant ziet de native submit is, gaat €89 de cart in. De drawer liegt niet. Hij toont de Shopify-regel.

De listing (6 nov 2026): Built for Shopify, 5.0 uit 29 reviews. Free — 20 uses. Starter $9.99/maand: onbeperkte opties, AI, formulebouwer, metafields, styling, meertalig. Premium $19.99/maand: conditionele logica, font picker, live preview, price breakdown, lookup-tabellen. $39.99/maand: conditionele velden, draft-order checkout, admin-calculator, free setup / onboarding. USD. Ajax-cart zelf is geen apart plan; het hangt aan selectors en de embed.

Wat shops dan proberen

De cart-pagina testen, de drawer vergeten

Op `/cart` klopt de som. In de slide-out niet. Theme settings staan op Drawer. De klant ziet nooit `/cart`. Eén test op de cart-pagina bewijst niets voor Ajax.

Extra Liquid in `cart-drawer.liquid`

Een snippet die `properties.Breedte` print. De maat staat er. De prijsregel blijft de variant. Line item properties zijn labels, geen prijsengine.

De drawer uitzetten “tot het werkt”

Cart type op Page. Dan verdwijnt het Ajax-probleem omdat alles herlaadt. Je levert de UX in die het thema juist verkocht. De listing belooft juist samenwerking met drawer en slide-out.

Inspect, class kopiëren, hopen

Eén class van de productpagina-knop. De drawer heeft een eigen Checkout-knop, soms een tweede Add in een upsell. De eerste match in App settings telt. Een te ruime selector grijpt Shop Pay in plaats van Add to cart.

Geen van die routes vertelt de app welk formulier de variant meestuurt, of welke knop de Ajax-call triggert.

Wat de app wél koppelt

Docs Storefront Theme Bindings: CSS-selectors zeggen waar de app leest en bijwerkt.

Product form selectors. Welk formulier het product in de winkelwagen zet. Nodig voor variant, berekende prijs en cart-gedrag. Eerste match telt.

Add to Cart (ATC) button selectors. Welke knop de actie start: standaard submit, thema-specifieke knop, payment buttons. Zonder de knop die de shopper ziet, rekent de calculator in het formulier terwijl de drawer de native knop volgt.

Price selectors. Waar de productprijs in het thema staat. Elke selector op een nieuwe regel. De app gebruikt de eerste die matcht. Sticky bar + sale-span vragen twee regels, niet één gok.

Cart line item image selectors. Thumbnails in cart en cart drawer. Alleen relevant als de Customizer een gepersonaliseerde afbeelding op `__ooCustomImageUrl` zet. Live preview zelf is Premium. Verkeerde drawer-selector = preview op de PDP, stockshot in het paneel.

De selector picker is de aanbevolen route: Pick price, Pick add to cart, Pick product image. Nieuw venster, klik het element, CSS komt in het veld. Na een themawissel alle drie opnieuw. Handmatig mag: extra fallbacks, reset naar default.

Enable server-side price validation. Aan: cart bundle (en draft-order checkout) controleren de calculatorprijs server-side. Uit: `__ooCustomPrice` wordt vertrouwd. Voor een Ajax-cart is dit de check ná de `fetch`, niet alleen de tekst op de PDP.

De calculator zelf is een theme app extension op de productpagina: Apps → Options Price Calculator, bij voorkeur onder de prijs en boven Add to cart. Zonder block geen velden. Zonder embed op het template waar de drawer leeft, is de knop in dat paneel weer native — ook als de PDP klopt.

Claim niet “werkt op elk thema zonder setup.” Dawn-achtige thema’s pakken vaak de defaults. Custom themes vragen de picker. App settings overview: eerste installatie, themawissel, zwaar custom theme, of prijs/ATC die niet meegaat.

Praktijk: jaloezieën, Dawn-drawer, daarna een custom paneel

Shop “Lijnzicht”. Native variant: binnenkort / vrijhangend — echte SKU’s. Calculator: breedte, hoogte, lamel. Formule in de trant van `product_price + (width * height)`. Limiet blijft drie options / 2048 variants.

Op Dawn met cart type Drawer: Pick add to cart op de zichtbare knop. Test: 120 × 180, Add to cart, drawer opent, regel toont het calculatorbedrag, checkout vanuit het paneel hetzelfde. Header-badge volgt.

Bureau levert een custom slide-out. Eigen `add-to-bag`, checkout-knop in de drawer die geen form-submit is. Oude ATC-selector matcht de productpagina, niet het paneel. Formule klopt. Drawer toont €89.

Stappen:

1. Theme editor: cart type laten staan op Drawer. Niet “even Page” als workaround.

2. App block op het producttemplate dat live is, plus embed aan.

3. App settings → Storefront Theme Bindings. Product-URL van een echte jaloezie, dezelfde template.

4. Pick add to cart op Add to bag, niet op Shop Pay.

5. Pick price op de prijs die na Ajax zichtbaar blijft (sticky telt mee als de klant die ziet).

6. Server-side validation aan, Save.

7. Test in een privévenster: maat wijzigen, Add to cart, drawer, daarna checkout-knop in het paneel. Daarna één keer `/cart` als fallback. Gast én ingelogd.

Zit checkout alleen in de drawer, dan moet de embed op dat product- of cart-template laden. Anders is de knop in het paneel native Shopify. Draft-order checkout (onderschepping naar een factuurlink) zit op het $39.99-plan; dat is een andere laag dan “de drawer toont de som.” Conditional logic en live preview blijven Premium.

Aan de slag

1. Open de listing. Ajax cart / cart drawer / slide-out staan onder Works with. Free is 20 uses. Starter bouwt velden. Premium is preview en conditionals.

2. Zet het app block op het producttemplate. Embed aan.

3. Draai de selector picker op prijs en Add to cart. Extra regel voor de drawer-checkout als die knop anders is.

4. Server-side validation aan.

5. Test de drawer, niet alleen `/cart`. Maat, variantwissel, gast.

Na een themawissel: picker opnieuw. De CSS van gisteren matcht de markup van morgen niet.

Tot slot

Shopify prijscalculator ajax cart is geen extra veld in de builder. Het is de keten: block op de productpagina, juiste ATC- en form-selectors, embed waar de drawer leeft, servercheck op de regelprijs. De listing belooft samenwerking met Ajax-cart en slide-out. Jouw thema bepaalt of die haak raak is.

Zet de picker aan in Options Price Calculator. Vul 184 × 92. Klik Add to cart. De drawer moet €412,80 tonen — niet de kale €89.