search

OFFLINE-GmbH / oc-snipcartshop-plugin

Ecommerce solution for October CMS using snipcart.com as a backend
MIT License
11 stars 4 forks source link

You should use {% put scripts %} for inline JS #18

Closed ghost closed 7 years ago

ghost commented 7 years ago

Hello,

I'm customizing the html of the different partials added by these plugin.

On the offline/snipcartshop/components/product/custom-fields.htm, I think your should add your inline JS in a {% put scripts %} tag.

See the october documentation about this .

tobias-kuendig commented 7 years ago

That's true. I have moved the code into it's own partial in version 1.0.29. I'll leave it in a partial so users can customize it easily. The code is now beeing put to the scripts placeholder.

ghost commented 7 years ago

Hmm I have a problem with the {% put %} placeholder.

If I don't put the script in the put placeholder, I get a "$ is not defined" javascript error. Seems logical as I don't include jQuery with snipcart cause I already include it myself just before the end of body tag (as recommanded). So, if the script is somewhere in the body, jquery is not defined.

But if I put your script between the {% put scripts %} tag, I have another error on product page load :

Ajax manager "onRecalculatePrice" can't be found"

Do you have any ideas why the onRecalculatePrice can't be found ? What should I check ?

Thanks

tobias-kuendig commented 7 years ago

If your jQuery was included in your footer and not in your header the $ is not defined error was expected. This should be fixed by using the scripts placeholder.

I wonder why the onRecalculatePrice method cannot be found. I cannot reproduce this issue. How are you including the component? Did you put the {% compontent 'product' %} on a cms page? What partials are you overwriting?

Does it help if you prepend __SELF__ to the $.request line?

$.request('{{__SELF__}}::onRecalculatePrice', { //...
ghost commented 7 years ago

It's ok, I called the component in a partial (and I forgot partials can't handle ajax). By calling the component in a page instead, it works.