would like to ask how can I add a variable or parameter on my InAppBrowser url? {{id}} doesn't seem to be readable in the URL when clicked opened although as a text typescript it works.
My code for the button is as follows,
<ion-button expand="full" fill="solid" color="primary" (click)="
openWithSystemBrowser('https://wa.me/123456789?text=Hi! My domain and keywords details for Order #{{id}} are as follows...')">
{{ 'Notify Us' | translate }}
</ion-button>
Thanks in advance.
Seems like you should be using:
<ion-button expand="full" fill="solid" color="primary" (click)="
openWithSystemBrowser(`https://wa.me/123456789?text=Hi! My domain and keywords details for Order #${id} are as follows...`)">
{{ 'Notify Us' | translate }}
</ion-button>
I've switch the ' ' around the url to backticks.
I've also swapped your {{ }} notation to string interprolation ${id}
Related
I've got a form in Symfony that uses the money field type with the currency set to GBP.
When I pass the form over to twig the form is rendered using:
{{ form_row(form.price) }}
This renders the following html:
£<input id="app_product_price" name="app_product[price]" required="required" class="form-control" value="9.95" type="text">
My aim is to try and get the currency symbol so I can use the bootstrap money field:
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
Obviously, there are some styling that I need to do. However, I've tried to get the currency symbol using the below but there doesn't seem to be any documentation that I can see to do this.
{{ form_label(form.price) }}
{{ form_widget(form.price) }}
Neither of these seem to work to get the currency and I have also had a look into using {{ form_widget(form.price.vars.currency) }} which just shows errors.
Are there any known methods of extracting the currency symbol from the form field? Or will I need to go down the route of Twig Form Theming?
IMHO there is no specific method to get the currency’s symbol (check the Form Variables Reference). The default value for the currency is : type: string default: EUR (which correspond to the ISO 4217 code).
So you can simply set the currency to empty, and no symbol will be rendering:
$builder
->add('price', MoneyType::class, array('currency'=>''));
You can show the currency symbol with this twig regular expresion:
{{ form.price.vars.money_pattern | replace({ '{{ widget }}':''}) | raw }}
I'm trying to add images of products that a customer has bought to the Order Confirmed email notification. I currently am using this as my attempt:
<img src="{{ line.line_item | img_url: 'small' }}">
I tried that based on this page. I also tried the following:
{{ item.product.featured_image | product_img_url | img_tag }}
Neither way worked. All I'm getting back is a placeholder image that says "no image" on it. This leads me to believe that my syntax is correct, but Shopify can't find the image I'm looking for. I set an image for the product in the admin page, and to make sure I have a big image and a smaller one, as well as set an image on the variant (although there is only the default, one variant for this product). None of it is working. Does anyone have any experience in this and can point me in the right direction?
Thanks!
Thanks to the help of a coworker, we got this figured out. When looping through the line_items, do the following to get the image: <img src="{{ line.product.featured_image | product_img_url: 'thumb' }}"> and the image will output. There are a lot of different image sizes you can use in place of 'thumb'. Check those out here.
Hope this helps someone else!
The default Order Confirmation email template uses the img_url filter:
{% for line in line_items %}
<li>
<img src="{{ line | img_url: 'small' }}" />
{{ line.quantity }}x {{ line.title }} for {{ line.price | money }} each
</li>
{% endfor %}
This is preferable to using line.product.featured_image because it will display the line item's variant image if one exists.
From the Shopify docs for img_url:
For line_item, the URL of the line item's variant image is returned. If the variant does not have an assigned image, the URL of the product's featured image is returned.
Alternatively, you could replace <img src="{{ line | img_url: 'small' }}" /> with any of these options that use the img_tag filter:
{{ line | img_url: 'small' | img_tag }} // my preferred option
{{ line | img_tag }} // default size is 'small'
{{ line | img_tag: 'alt text', 'class1', 'thumb' }} // thumbnail image with alt text and CSS class
I have problem with forms and page layouts. I render my page by:
{% block body -%}
{{ form(edit_form, {'style': 'horizontal'}) }}
<ul class="record_actions">
<li>
<a href="{{ path('organization') }}">
<button type="button" class="btn btn-default">Back to the list</button>
</a>
</li>
<li>
{{ form(delete_form) }}
</li>
</ul>
{% endblock %}
I have some style on ul record_actions. It looks like this: http://postimg.org/image/sby8jnojz/
My problem is with update button. I would like to put it into <ul> tags with 2 other buttons. Is there some possibility to put it outside of form? I like, how the form looks with {{ form(edit_form, {'style': 'horizontal'}) }}. So I wouldn't like to customize every part by {{form_widget}}. Or is there possibility to render all form and then render just this button?
Updated answer
Let's take a hypothetical controller method - where I have defined two forms edit_form and delete_form. Don't worry about these too much, they are just proof of concept. The important thing here is that I have two forms that I am sending to the template to be rendered:
// Foo\BarBundle\Controller\BazController
public function editAction()
{
// a placeholder 'edit' form
$editForm = $this->createFormBuilder()
->add('name', 'text')
->add('email', 'email')
->add('send', 'submit')
->getForm();
// a placeholder 'delete' form
$deleteForm = $this->createFormBuilder(['id' => 1])
->add('id', 'hidden')
->getForm();
// assign form views to template
return [
'edit_form' => $editForm->createView(),
'delete_form' => $deleteForm->createView(),
];
}
Next the template. We have two forms to render: edit_form and delete_form. There are a couple of issues we need to consider - rendering a form within a form is not allowed so we cannot render delete_form inside edit_form or vice versa.
However we can, as I explained below, with the HTML5 form attribute place form elements outside of a <form> context and still link them to that form (with the aforementioned IE* limitations). So let's do that, and suggest a workaround in due course.
The least invasive thing to do is to render the delete_form after the edit_form but place the edit_form delete button inside edit_form.
I don't know if you are using a CSS framewok to help you with layout - I am assuming Bootstrap 2.* here so you might have to update your markup - either way the idea should be clear enough:
<div class="row">
{{ form_start(edit_form, {'attr': {'id': 'edit-form'}}) }}
<div class="span4">
<ul class="record_actions">
<li>{{ form_widget(edit_form.send)}}</li>
<li><button id="delete-form-submit" form="delete-form">
Delete
</button>
</li>
</ul>
</div>
<div class="span4">
{{ form_rest(edit_form) }}
</div>
{{ form_end(edit_form) }}
</div>
{{ form(delete_form, {'attr': {'id': 'delete-form'}, 'method': 'GET'}) }}
The above HTML yields a layout similar to the following:
A few points of explanation:
I have created a two-column layout for the form. The .record_actions buttons are rendered on the left column - this is essential - but they are floated right using Bootstrap's .pull-right in this case.
Update button: the first thing I want to do is render the submit button in ul.record_actions where I want it: <li>{{ form_widget(edit_form.send)}}</li>
Delete button: I have not defined a submit button on the delete_form because I want to explicitly create it outside of the context of the delete_form, instead placing it where I have. Note that I defined a form attribute on this element called delete-form. This links this element to delete_form instead of edit_form: <li><button id="delete-form-submit" form="delete-form">Delete</button></li>
Remaining fields: in the second column I can dump all the remaining edit_form fields implicitly with {{ form_rest(edit_form) }}, as per #Kix's suggestion!
Delete form Finally, we render the delete_form outside the edit_form with {{ form(delete_form, {'attr': {'id': 'delete-form'}, 'method': 'GET'}) }}. A couple of things to note here - we are explicitly adding an id for the form with {'attr': {'id': 'delete-form'}. This is important as it is the attribute that the delete button refers to. In this case I also added 'method': 'GET' to test on my machine. You will probably want to leave this out (in which case it defaults to POST)
There you have it... This should help you define your preferred layout.
But, we still need to address IE. If you are using jQuery, you could add a click handler to the delete button, which we've assigned the id #delete-form-submit. Note that the following is a suggestion and is not tested:
$(function() {
if ($.browser.msie) { // #see: http://api.jquery.com/jquery.browser/
$('#delete-form-submit').on('click', function(e) {
e.preventDefault();
$('#delete-form').submit();
});
});
});
Now you need to worry about IE users with JS disabled... or not! ;) Hope this helps.
Original answer
I would argue that your issue is possible Symfony agnostic... Let me explain:
Do you create your form's submit button with the form builder? I assume so since you do not explicitly create one in the twig snippet you pasted above.
This is totally fine of course. I usually just define my Twig form templates like so, which I gather is the older way to do it (since the 2.4 docs don't appear to suggest the following):
<form class="form-horizontal" action="{{ path('foo_edit') }}" method="post" {{ form_enctype(edit_form) }}>
{{ form_widget(edit_form) }}
<input type="submit">
</form>
This way is totally acceptable in my view - you just don't define the submit button.
Of course this does not solve your problem, because you want to "break out" of the form. But you can actually do this with HTML5 with the form attribute, which allows you to link disparate tags to a specific tag. A generic example:
<form id="foo">
<label>Username</label>
<input type="text" name="username">
</form>
<ul>
<li><input type="submit" form="foo">
</ul>
Note that the submit button is outside form#foo but the form attribute still links to it.
Obviously its usefulness is restricted to the range of browsers you want to support, as it's a HTML5 feature.
EDIT
I checked - it has pretty wide browser support, except.... drumroll IE. Up to and including IE10 apparently. I would assume that this is a dealbreaker unfortunately.
kix's approach above could work well however, print out the individual form widgets you want explicitly and then use form_rest. I would add to this and say it might not exactly work with the HTML layout you have above - iirc you have to print out any fields explicitly before you call form_rest.
You can always render some widgets in places specific to your layout using
{{ form_widget(delete_form.yourWidgetName) }}
and then let Symfony complete the form with
{{ form_rest(delete_form) }}
where is this nested div construction defined, that the user-login form doesnt has:
<div class="form-item form-type-password form-item-pass-pass1 password-parent">
<div>
<input>Password Input</input>
<div>Password Strength</div>
</div>
<div>
<input>Password Confirm</input>
</div>
i have looked in form.inc, the user-module folder but no luck. as stated, the user-login form is printed plain without any nesting like this, so where is this determination done?
This is added with js. Look into ROOT/modules/user/user.js for the code.
I'm new to jekyll and am working on building my site.
I have a "posts" layout where I'd like to have all the tags associated with the post appear in the left column. The problem I'm running into is that using {{ page.tags }} returns a list of tags that are not comma-separated and looks messy. See here for an example.
The html code for the layout page is:
<div class="span3">
</br>
<img src="{{ page.root }}assets/img/glyphicons_045_calendar.png" /> {{ page.date | > date: "%d %B %Y" }}
</br>
<img src="{{ page.root }}assets/img/glyphicons_066_tags.png" /> {{ page.tags }}
</div>
<div class="span9">
<h1> {{ page.title }} </h1>
{{ content }}
</div>
Any advice on how to (a) get the tags list to be comma-separated and (b) wrap around so it stays within the left column? Thanks!
You might try to put them inside a <p> tag so they can wrap around.
To have them comma-separated, you can follow the jekyll docs and use:
{{ page.tags | array_to_sentence_string }} => foo, bar, and baz
As is said in the Jekyll wiki.
For more precise control over what you can do with tags use the for operator:
<ul>
{% for tag in page.tags %}
<li> {{tag}} </li>
{% endfor %}
</ul>
This example is taken verbatim from somewhere. There are also more control structures to choose from.