I have been following https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript to create a javascript plugin. But, I am struggling with adding options through twig template. I have something like the following:
Twig file : product.html.twig:
{% set contentModalOptions = {
cmsContentId: "some-hash",
navigationUrl: path('frontend.cms.page'),
failSafeRedirectUrl: '/some-failsafe-url/'
} %}
<div>
<a target="_self" href="#" data-content-modal="true" data-content-modal-options="{{ contentModalOptions|json_encode|escape('html_attr') }}">
help text
</a>
</div>
plugin file : custom-plugin.js:
import Plugin from 'src/plugin-system/plugin.class';
export default class ContentModalPlugin extends Plugin {
static options = {
cmsContentId: '',
navigationUrl: '',
failSafeRedirectUrl: ''
};
init() {
console.log(this);
console.log(this.options); // empty values
}
}
Notes:
In the browser, I see that values set using twig as the HTML attribute.
Plugin has been registered and works with the template.
console.log() in the plugin doesn't print any values that are set from twig. It just shows the options object that has been initialized in the plugin.
Any help is appreciated.
I assume you register the plugin like this:
PluginManager.register('ContentModal', ContentModalPlugin, '[data-content-modal]');
Within the constructor of the Plugin class this.options = this._mergeOptions(options); should then called, which in turn parses the data-${dashedPluginName}-options attribute. It should throw an error if it can't parse the json:
`The data attribute "data-${dashedPluginName}-options" could not be parsed to json: ${e.message}`
Are the any errors when you look at the console of your browsers dev tools?
For further debugging you could also try calling super._mergeOptions(this.options); from your init method.
Now, I see what the problem was. When I registered my plugin, I had the following:
PluginManager.register('ContentModalPlugin', ContentModalPlugin, '[data-content-modal]');
So, I tried passing the options with data-content-modal-options attribute through twig but it seems that the resolved plugin name in _mergeOptions() at src/plugin-system/plugin.class takes the plugin name (i.e the string that is the first argument of the register function) and not the attribute definition in the register method.
So, adding a html attribute as data-content-modal-plugin-options based on my class name resolved the problem.
Related
I succssefully get data in store-front from entity by the following code.
public function addCustomfield(FooterPageletLoadedEvent $event): void
{
$customfieldResponse = $this->customfieldRoute->load(new Criteria(), $event->getSalesChannelContext());
$event->getPagelet()->addExtension('custom_field', $customfieldResponse->getcustomfield());
}
according to above code my custom data add in footer pagelet by api call successfully.
I wnat to get data of my plugin-config data in footer pagelet.
If you have any suggestion then tell me!
You can access the plugin config directly over twig inside the template:
{% set myConfig = config('MyPluginName.config.myConfigValue') %}
I try to call a static helper method inside Twig (Timber).
{{ function('Theme\Helpers::get_template_name') }}
Warning: call_user_func_array() expects parameter 1 to be a valid
callback, class 'ThemeHelpers' not found in
/var/www/html/wp-content/plugins/timber-library/lib/Twig.php on line
268.
Does anyone know how to call a method of a different class inside Twig?
As far as I know you can't call PHP classes directly from your twig template.
What you can do is setting up a Twig filter which communicates with your class
and returns the needed value.
You would have this in your php controller file that is responsible to load your twig template:
<?php
function twg_get_template_name() {
# edit this according to the implementation of your class:
return Helpers::get_template_name();
}
function add_to_twig($twig) {
/* this is where you can add your own fuctions to twig */
$twig->addExtension(new Twig_Extension_StringLoader());
$twig->addFilter('twg_get_template_name', new Twig_Filter_Function('twg_get_template_name'));
return $twig;
}
add_filter('get_twig', 'add_to_twig');
In your Twig template you would call the filter like this:
{{ ''|twg_get_template_name }}
Because it's a filter function it expects a value "to filter", so pass at least an empty string.
If I were in that situation I probably would determine the name of the template in your
controller and send the value to your Twig template directly instead of calling the php class
via a filter-function.
You can call static functions from a Twig file in Timber using the array notation, where first item is the name of the class and the second item the name of the static method you want to call:
{{ function( [ 'Theme\Helpers', 'get_template_name' ] ) }}
Thanks for your answer.
I tried your approach - it works. But using a filter feels a little hacky, especially when no value is passed. Why not create a timber function the same way as a filter?
Bridging own functions from plain php into twig is not great, but I also don't see another solution to this.
After playing around a little, I came up with a different approach. I now fixed my need by customizing the Timber Object and adding a template property to the post variable.
Looks something like this:
class OnepagePost extends TimberPost {
var $_template;
// Add template property to Twig Object
public function template() {
return Helpers::get_template_name( $this->custom['_wp_page_template'] );
}
}
Then inside the .php file where the Twig View gets called, I called the custom object like this:
$context['posts'] = new Timber\PostQuery( $args, 'OnepagePost' );
Timber::render('onepager.twig', $context);
Inside the Twig Template I'm able to get my custom property very easy (in my way the template):
{% for post in posts %}
{% include ["section/section-#{post.template}.twig"] %}
{% endfor %}
I'm working on designing a site in WP, but I'm at a loss for the right words to google. What I'm looking for is a "text container that can be toggled". I have a syntax highlighting plugin for posting code, but I don't want the code to be visible in large blocks considering it may be a little distracting. I was wondering if anyone could link me to a plugin or give me the technical term for what I'm thinking of, where you can put the text in a group and then be able to toggle whether it is visible or not within the page.
It sounds like what you are looking for is simply applying a CSS class to the element and then using jQuery or some other JS library to toggle its visibility. Example below (code is not optimized in order to explain some of the concepts. This can, read "should", be cleaned up):
// This is HTML/CSS
<body>
...
<p>Here is some normal text.</p>
Show/hide source code for displayText method
<div class="source_code" id="source_code_for_displayText_method">
// Groovy code
...
public void displayText(String message) {
outputStream.write(message)
}
...
</div>
...
Show/hide source code for download method
<div class="source_code" id="source_code_for_download_method">
// Groovy code
...
GParsPool.withPool(threads) {
sessionDownloadedFiles = localUrlQueue.collectParallel { URL url ->
downloadFileFromURL(url)
}
}
...
</div>
...
Show/hide all source code sections
...
</body>
You can default all source code sections to hidden:
// This is CSS
.source_code {
display: hidden;
}
Then you would use JS to provide the toggle ability:
// This is JavaScript
// This toggles a specific section by using an id ("#") selector
$('#source_code_displayText_method_toggle_link').onClick(function() {
$('#source_code_for_displayText_method').toggle();
});
// This toggles all source code sections by using a class (".") selector
$('#source_code_all_toggle_link').onClick(function() {
$('.source_code').toggle();
});
Some thoughts:
If you toggle all sections, you need to determine what the current state is -- if some are currently shown and others hidden, this will invert each. If you want "hide all" and "show all", then use .hide() and .show() respectively.
If you are manually adding the source code sections and want semantic selectors, the above is fine. If you are building some kind of automation/tool to allow you to repeat this, you'll probably want to use generated ids and helper links, in which case it would look like:
.
// This is HTML/CSS
<body>
...
<p>Here is some normal text.</p>
Show/hide source code for displayText method
<div class="source_code" id="source_code_1">
// Groovy code
...
public void displayText(String message) {
outputStream.write(message)
}
...
</div>
...
Show/hide source code for download method
<div class="source_code" id="source_code_2">
// Groovy code
...
GParsPool.withPool(threads) {
sessionDownloadedFiles = localUrlQueue.collectParallel { URL url ->
downloadFileFromURL(url)
}
}
...
</div>
...
Show/hide all source code sections
...
</body>
With the JavaScript to handle id parsing:
// This is JavaScript
// This toggles a specific section by using a dynamic id ("#") selector
$('.source_code_toggle_link').onClick(function(elem) {
var id = $(elem).attr("id");
// Split on the _ and take the last element in the resulting array
var idNumber = id.split("_")[-1];
var codeBlock = $('#source_code_' + idNumber);
codeBlock.toggle();
});
There is some security reasons and I want to prevent access to class constants in twig. How can I do it?
Note: It is possible to access constants with code below.
{{ constant('Entity\\Demo::MY_CONSTANT') }}
sandbox is not the cure. Because in the system the user writes his own template, this brings security issues.
For that reason function overriding in extension may be a good solution.
$environment = new Twig_Environment($loader, array('autoescape' => self::$_autoEscapeOpened));
$myTwigExtension = new MyTwigExtension();
//note that MyTwigExtension extends Twig_Extension
$environment->addExtension($myTwigExtension);
//here is MyTwigExtension
class MyTwigExtension extends \Twig_Extension {
//in my twig extension, there is a method called getFunctions. If not, write one.
public function getFunctions() {
$functions = array(
new \Twig_SimpleFunction('constant', array($this, 'constant')),
);
return $functions;
}
//and add the customized constant function in your extension here!
public function constant($variable){
return '';
}
}
if you don't want to use extension, see http://twig.sensiolabs.org/doc/advanced.html#functions
Ant the result is nice, there is no output in the screen, without any sandbox use. (solution is on backend)
Hope this helps.
I believe you can do this with the Sandbox extension:
http://twig.sensiolabs.org/doc/api.html#sandbox-extension
This extension allows you to define a security policy which basically has a whitelist of functions, tags, filters...
You can enable sandbox mode globally, or just use sandbox mode for a specific include (default behavior):
{% sandbox %}
{% include 'user.html' %}
{% endsandbox %}
I'm using AlloyUI in my liferay portlet.
I want to use my <input>'s id in javascript. The problem is that the id of the elements are changed in client side.
For example:
If I set an <input>'s Id to "username" it is changed to _hospital_WAR_hospitalportlet_userName i.e. _hospital_WAR_hospitalportlet_ is appended to the Id, where Hospital is my portlet name.
How can I get client-side Id so that I can use it in jquery?
The string _hospital_WAR_hospitalportlet_ prepended to the Id of the <input> is nothing but the portlet-namespace.
This is only prepended to your <input>'s name & id attribute if you use <aui:input> tag and the name & id attributes are not changed if you just use plain-vanilla html <input> tag.
But as it is a good practice to use <aui:input> you can do the following to get the portlet-namespace in your javascript code:
If you are using javascripts inside a JSP i.e. using within <script> .. </script> or <aui:script> .. </aui:script> then you can use <portlet:namespace /> or <%= renderResponse.getNamespace() %> to get the string _hospital_WAR_hospitalportlet_ inside your javascript, something like.
jQuery("#<portlet:namespace />username").val();
// Or
jQuery("#<%= renderResponse.getNamespace() %>username").val();
But if you are using a *.js file then I suggest you pass the namespace as an argument to the javascript function in the js file:
function changeValues(portletNamespace) { // this function is in a js file
jQuery("#" + portletNamespace + "username").val("Lets change");
}
calling this function from the JSP:
<input type="button" onClick="changeValues('<portlet:namespace />')" />
Hope this helps. I don't know if there is a way to get the namespace or portletId directly through some javascript function defined by Liferay. If you get something like that you can post it here and that would be very helpful.
Try this:
Liferay.Portlet.ready(
/*
This function gets loaded after each and every portlet on the page.
portletId: the current portlet's id
node: the Alloy Node object of the current portlet
*/
function(portletId, node) {
}
);