Access options in cart dropdowns to multiply a price modifier

Support
#1

I need to multiply a price modifier rather than simply add a fixed value, from what I see online it can’t be done Multiply price for custom pricing

So I wrote some code to calculate my price difference per option on my product page and then bind the amount the price needs to increase by in the cart modifiers inside the add to cart button.

I thought I had solved this but what I didn’t consider is that once inside the cart the modifiers in the dropdown menus don’t have access to my calculations, so it doesn’t recalculate correctly anymore, it only adds or removes the price diff without multiplying the first modifier.

I’m using alpineJS, and what I am wondering is, is there a way to access the information in those dropdown menus to also bind those modifiers to my alpine code?

Here is a code pen of what I have https://codepen.io/fredbouin/pen/YzJqMLv

#2

Could you maybe add a third custom field with the price changes? Your first two are shown and doesn’t have any impact on price. And a third hidden custom field has ALL possible price options (6p-regular, 6p-x-long[+125], 8p-regular[+100], 8p-x-long[+237.5]…).

When the user changes one of the shown option, a script changes the third one to modify the price. That way the crawler would be able to confirm the options and prices changes.

#3

I’m weighing options, leaning heavily towards simply setting the options to read only. I didn’t think of that possibility before posting.

I theoretically get your idea but not sure I’d manage to implement it. Plus it would mean all the price variations would be hardcoded so if prices need to change things get tricky for the site admin.

My original idea (with alpineJS) was to add an @click="lengthMod = 'xlong'" to the select menu with value of xlong in the cart. But I’m pretty sure it wouldn’t be that straightforward, sooo yeah I’m thinking readonly.

#4

Have you tried to checkout from the Test mode if it will pass the validation? Order validation – Snipcart Documentation

I tried this method before but my bigger problem was the order validation.

#5

oh interesting, I hadn’t thought of that… I’ll give it a whirl and see. Thanks for the heads up.

#6

omg my whole setup doesn’t work now, I’ve just spent days perfecting all kinds of custom multipliers. Is there anything that can be done, did you manage to get passed this issue?

#7

I am using Alternate price discounts. You have to rewrite the script of the computation to update the alternate pricing using SDK item update API because user may try to change the variants in the cart. However this method has also a serious bug. The support team gave me a workaround to solve the bug but they warned me that it may create issues in more complex scenarios. I can send it to you if you want.

But what I did was to remove the item-custom-fields tag in snipcart-templates.html for me to avoid the issue.

You could also explore to use readonly and hidden custom fields, and with this you might list all possible pricing combinations.

#8

Because price modifiers on computed using Javascript, and our Crawler does not execute JS scripts price modifiers are not correctly defined as you expect them to be. In these scenarios, we highly recommend using JSON Crawler instead, this way you can compute server side your price modifiers and send them as a JSON result for our crawler to validate the price.

#9

ok, that’s moving towards uncharted territory for me, I’ll need to do lot’s of research. I would like to explore this though and see if I can figure things out. @cyrilnicko seemed to have a lot of work arounds needed for his setup. For what you see on my codepen (let’s ignore the idea of being able to properly change the values once inside the cart, I’ll just set them to read only), do you think this would be fairly straightforward with the JSON crawler? Is it as simple as somehow changing some setting to use the JSON crawler rather then the HTML?

#10

Yes, JSON Crawler is straightforward. You should start from it.

I still prefer HTML crawler. I just disabled the variants’ dropdown so that users could not be able to change the values inside the cart. But that is my preference.

The reason why I dont use JSON crawler because I’m saving some server resources, but I guess this would be the best method in your case.

#11

Ok thanks I don’t want to drag this out too long, but if you could help shed a bit of light on this that would be awesome. First off is this as simple as just setting Content-Type header to application/json somewhere? What I think I’m gathering is that I’m not going to be defining my product properties inside the <button> with data attributes anymore, it’ll be in a JSON file somewhere, is that right? I don’t really know JSON but can I set up my alpineJS modifiers inside a JSON file? or am I off track here?

#12

JS alone cannot create and/or modify a JSON file. You might need a nodeJS server or PHP server or the like.

#13

Ok so i actually did some testing and it looks like I’m in the clear so long as my base price is not JS. I can do whatever I want with my modifiers before adding to cart, i will leave them as read only once in the cart to avoid further problems.

Thanks for pointing out the issue!