Alpine error
Closed this issue · 24 comments
On a plain WP installation on Aruba servers, even if installed the dependency plugins, I receive some errors and the interface doesn't show. This happen even if cacheing/minifying plugin is disabled.
Alerts:
Alpine Expression Error: Can't find variable: isConnected
Expression: "isConnected ? 'Reconnect' : 'Connect'"
Errors:
[Error] ReferenceError: Can't find variable: isConnected
(funzione anonima) (module.esm.js:2)
[Error] ReferenceError: Can't find variable: isConnected
(funzione anonima) (module.esm.js:2)
[Error] ReferenceError: Can't find variable: isConnected
(funzione anonima) (module.esm.js:2)
[Error] ReferenceError: Can't find variable: isConnected
(funzione anonima) (module.esm.js:2)
[Error] ReferenceError: Can't find variable: showModal
(funzione anonima) (module.esm.js:2)
@CardenPool At the moment I can't replicate your issue. Have you allowed for the WASM mime-type to be added to the server so it will load the serialization lib?
First off, CardanoPress works on its own. I am not sure which "dependency plugin" you are referring to.
You are using an incompatible theme that does not implement the new wp_open_body action hook. There is where I am injecting the data block which declares the whole page as a big Alpine component.
Try changing your theme or test in an actual plain and clean WordPress installation with default twenty-twenty theme and no other plugins installed.
@CardenPool As yes thats right, themes and theme builders such as OxyGen builder aren't compatible with what we're building as we need the wp_open_body hook.
Plain vanila themes will work out of the box. Chime back in with feedback and let us know what you're using.
As of version 0.35.0, component-level shortcodes have been added.
Themes without support for wp_open_body action hook can utilize the shortcode cardanopress_component_cardanopress.
You can try wrapping the whole template by adding the opening shortcode [cardanopress_component_cardanopress] to the very top and then the closing shortcode [/cardanopress_component_cardanopress] to the very bottom
Done without success. I've modified the pool-delegation.php template adding the shortcode as suggested:
<?php
/**
* The template for displaying the stake pool delegation.
*
* This can be overridden by copying it to yourtheme/cardanopress/pool-delegation.php.
*
* @package ThemePlate
* @since 0.1.0
*/
?>
<?php do_shortcode('[cardanopress_component_cardanopress]');?>
<div x-data="poolDelegation">
<div class="py-6">
<?php cardanoPress()->template('part/delegation-details'); ?>
</div>
<div class="py-6">
<?php cardanoPress()->template('part/delegation-connect'); ?>
</div>
<div class="py-6">
<?php cardanoPress()->template('part/delegation-process'); ?>
</div>
<div class="py-6">
<?php cardanoPress()->template('part/delegation-result'); ?>
</div>
</div>
<?php do_shortcode('[/cardanopress_component_cardanopress]');?>
There is something missing from my side? Thanks for your support, to u all! 🙏 P.S. I'm using BeTheme with BeBuilder
@CardenPool please provide the full context, what now is not working? Same JS errors last time? Are you able to provide a link to the page you set up? Screenshots?
Dear @kermage, I've activated the plugin and published the draft "delegation" page (excluding it from the index to make it reachable only with direct link). You can visit the page HERE. As you can see within the browser's console, there are the same error before the delegation-page template edit (edited as show in the latest post).
To complete the context, I'm using BeTheme with BeBuilder running on PHP 8.1.
As you asked, I'll share the error log here:
[Warning] Alpine Expression Error: Can't find variable: showModal (script-38cf51c5c9b87dcc454f.js, line 2)
Expression: "showModal"
–
<div class="fixed inset-0 z-30 items-center justify-center overflow-auto bg-black bg-opacity-50 flex" x-init="$el.classList.remove('hidden'); $el.classList.add('flex')" x-show="showModal" style="display: none;">…</div>
<div class="fixed inset-0 z-30 items-center justify-center overflow-auto bg-black bg-opacity-50 flex" x-init="$el.classList.remove('hidden'); $el.classList.add('flex')" x-show="showModal" style="display: none;">…</div>
[Warning] Alpine Expression Error: Can't find variable: showModal (script-38cf51c5c9b87dcc454f.js, line 2)
Expression: "showModal"
–
<div class="w-full max-w-sm mx-auto text-left bg-white rounded shadow-lg" x-show="showModal" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="transform opacity-0 scale-75" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-75" @click.away="showModal = false" style="display: none;">…</div>
<div class="w-full max-w-sm mx-auto text-left bg-white rounded shadow-lg" x-show="showModal" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="transform opacity-0 scale-75" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-75" @click.away="showModal = false" style="display: none;">…</div>
[Warning] Alpine Expression Error: Can't find variable: isConnected (script-38cf51c5c9b87dcc454f.js, line 2)
Expression: "isConnected ? 'Reconnect' : 'Connect'"
–
<span x-text="isConnected ? 'Reconnect' : 'Connect'"></span>
<span x-text="isConnected ? 'Reconnect' : 'Connect'"></span>
[Warning] Alpine Expression Error: Can't find variable: supportedWallets (script-38cf51c5c9b87dcc454f.js, line 2)
Expression: "supportedWallets"
–
<template x-for="(type, index) in supportedWallets" :key="index">…</template>
<template x-for="(type, index) in supportedWallets" :key="index">…</template>
Thanks @CardenPool, I can see the JS console error message but I can't trace out the shortcode actually fired as the inner content is empty. Also, did you actually set the page template to CardanoPress: Delegation? I can still see it is using the default.
@CardenPool there are interesting HTML comments in the rendered templates, these ones with mfn_hook_*. I did google it up and found something like an option on your theme that you can insert extra bits of code. Can you please confirm there is a setting called "Hooks"?
Thanks @CardenPool, I can see the JS console error message but I can't trace out the shortcode actually fired as the inner content is empty. Also, did you actually set the page template to CardanoPress: Delegation? I can still see it is using the default.
Yep, the template is right. You see an empty page due color issue. As you can see, the plugin is filling the page.
@CardenPool there are interesting HTML comments in the rendered templates, these ones with
mfn_hook_*. I did google it up and found something like an option on your theme that you can insert extra bits of code. Can you please confirm there is a setting called "Hooks"?
U right. Here is a screenshoot:
These themes are going to be the death of me...
These themes are going to be the death of me...
I hope I can help you to overcome the issue. 🙏 At your complete disposal. Do you need admin credentials or logs?
Yep, the template is right. You see an empty page due color issue. As you can see, the plugin is filling the page.
Naah, you did not last time, see that previous screenshot I did with body class saying it is at page-template-default.
But now I can see that you correctly set it to the right template(body class saying it) and the contents are showing up.
U right. Here is a screenshoot:
Please add the opening component shortcode there in the Top section [cardanopress_component_cardanopress].
That should do the trick for your rogue theme 😁; they should have just easily implemented the wp_body_open action
I hope I can help you to overcome the issue. 🙏 At your complete disposal. Do you need admin credentials or logs?
These kinds of issues are out of our hands; some themes just want to make it harder for plugins to do some implementations to your sites. 😒
We're happy to help. I don't see we need more access or logs right now.
U right. Here is a screenshoot:
Please add the opening component shortcode there in the Top section
[cardanopress_component_cardanopress].That should do the trick for your rogue theme 😁; they should have just easily implemented the
wp_body_openaction
I've just added the opening shortcode as suggested....without success. 😕 From a brief check, seems that theme template doesn't support the wp_body_open action yet. I shortcode placed in the top hook for your investigation.
I hope I can help you to overcome the issue. 🙏 At your complete disposal. Do you need admin credentials or logs?
These kinds of issues are out of our hands; some themes just want to make it harder for plugins to do some implementations to your sites. 😒
We're happy to help. I don't see we need more access or logs right now.
If this can help, I can open a ticket to the developer to acquire more information about its implementation. Thanks for your effort.
Yep, the template is right. You see an empty page due color issue. As you can see, the plugin is filling the page.
Naah, you did not last time, see that previous screenshot I did with body class saying it is at
page-template-default.But now I can see that you correctly set it to the right template(body class saying it) and the contents are showing up.
My fault while publishing the page. Sorry. I've disabled the minification and other caching strategy to serve the last version of the page in realtime.
@CardenPool I can see the correct tag getting added but it was immediately closed. Can you please confirm you only added the [cardanopress_component_cardanopress] and don't have the closing shortcode [/cardanopress_component_cardanopress]?
Wait wait wait... adding <?php wp_body_open(); ?> within the header template of my theme...everything shows. 😃 I'll test the features in the afternoon. How I can put the "connect" button within the menu?
Wait wait wait... adding
<?php wp_body_open(); ?>within the header template of my theme...everything shows. 😃 I'll test the features in the afternoon. How I can put the "connect" button within the menu?
daang right! 🤦♂️ that is the easiest step, add in your header our wanted hook. I never knew you'd be fine doing some edits to PHP.
BTW, be sure that is on your child theme. Happy testing! 😅
For sure, the customization are gathered within the child theme ;) I'll update you all about the testing progress. Thanks for your precious support 🙏
Lastly, can I implement a "connection" button inside the menu? There is a shortcode or I have to build it from sketch?
@CardenPool please check out our starter theme https://github.com/CardanoPress/theme-bootstrap
You can follow some customizations there, see header.php
Thanks @kermage @pbwebdev for your invaluable support. [Here is my implementation] (https://www.cardenpool.org).
I struggled to import some JS but everything seems to work now. As you can see, I have customized the WP installation to not show the admin bar while a user is logged in. As soon as the wallet is connected, a new section of the site appears, allowing direct delegation.
That said, the CRPL website is multilingual and I can't translate messages that come from the "delegation-result" template part. Are you going to translate the plugin? If so, I'm at your disposal to translate the plugin into Italian :)
P.S. This is a first implementation and other features will be activated in the future. Thanks for your great work!
@CardenPool did you mean this template? I'm pretty sure you can customize that on your theme and do whatever you want to the contents inside there. See line#6