twig autoescaping html tags - html

{% autoescape false %}
{% set label = '<i class="flaticon solid plus-1"></i>Add User'|raw %}
{{ form_row(form.submit, { 'label': label }) }}
{% endautoescape %}
This is the output
<i class="flaticon solid plus-1"></i>Add User
How do I get it to not escape? If I just print out label instead of supplying it as a parameter to the "form_row" function, it prints out properly.

You're using the |raw filter at the wrong place - it is only processed when outputting data, not when setting a variable. You should patch it into the form_row function, or append it to it's call - can't be sure without seeing how that function works.
Most probably this will fix it:
{{ form_row(form.submit, { 'label': label })|raw }}
Since I assume it returns the modified string and lets the {{ tags handle output.

in form_div_layout.html.twig
change
<button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ label|trans({}, translation_domain) }}</button>
to
<button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ label|trans({}, translation_domain)|raw }}</button>
This seems like a hacky solution, since I'm modifying the stuff in the vendor folder.

Related

Can't update Add to Cart button based on inventory levels on Shopify

I'm trying to make it so that when the inventory levels for certain products are less than 1, it changes the button to say "Made to Order" instead of "Add to Cart" so that it implies they won't ship immediately.
I made a new product template and product form and everything associated with that, but when I change the button code, it doesn't seem to do anything.
I'm using the most recent version of the Palo Alto theme.
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn" data-add-to-cart>
<span id="AddToCartText" data-add-to-cart-text>
{%- if variants_count < 1 -%}
{{- 'products.product.made_to_order' | t -}}
{%- else -%}
{{- 'products.product.add_to_cart' | t -}}
{%- endif -%}
</span>
{%- render 'icon-loading' -%}
</button>
You probably want to issue a little code to tell you the value of the liquid variable variants_count. It is not at all clear what that is set to. Is it the quantity of the current variant in inventory? If so, then your code should work. If not, why are you using it as a check? You can always access the quantity of a variant using the current variant in your variant rendering loop. variant.inventory_quantity is the value you probably should be using.
So the first thing you are probably not doing right is checking for the quantity of a variant outside the product.variants rendering loop. The Add to Cart button is most often outside the scope of this loop, as it usually pertains to adding a product to the cart using a form submit.
So now your challenge is instead to listen to the variant currently selected by the customer. When that variant is selected, the quantity will be used to decide what to print on the button. So you need some Javascript to alter the button text.
Does that make sense? Changing the text once is never going to work unless you only ever have one variant, in which case, checking quantity would work, but as I said, this is a rare thing for most shops, to only ever have one variant.
Try this, code is not tested;
Basically, added data-qty when inventory is less than 1. When that option is selected, use js to check the attr and change the text of the button.
<select name="id" id="productSelect" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}"
{% if variant.inventory_quantity < 1 %}
data-qty="qty"
{% endif %}
>{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
<div class="form__column{% if section.settings.enable_payment_button %} form__column--shopify-payment-btn{% endif %}">
<label> </label>
<button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn btn--fill btn--regular btn--color{% if section.settings.enable_payment_button %} btn--shopify-payment-btn btn--secondary-accent{% endif %}">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
<script>
$(document).ready(function(){
var qty = $("#productSelect option:selected").attr('data-qty');
if (qty){
$('#AddToCartText').text('Made to Order');
}
else {
$('#AddToCartText').text('Order Now');
}
$('#productSelect').on('change', function (){
qty = $("#productSelect option:selected").attr('data-qty');
if (qty){
$('#AddToCartText').text('Made to Order');
}
else {
$('#AddToCartText').text('Order Now');
}
});
});
</script>

How do I access a data value in a dictionary in the html template

I'm passing a dictionary in the context in my views.py to my html template. How do I know access a value in the template based on a particular key. For instance I'd wanna do something like {{ dictionary.keyname.value }} but I don't know the correct syntax and for some reason I can't seem to find the documentation.
I want to achieve the same effect as this without having to use a for loop:
<b>Calories</b>
{% for key, value in output.items %}
{% if key == "calories" %}
{{ value }}
{% endif %}
{% endfor %}
You just want {{ output.calories }}.

Twig escaping html in if shorthand?

I have a piece of template as follows:
<div class="reply_text"><div class="wall_reply_text">
{{ reply.comment_text is empty ? '<div class="has-text-grey-light">This comment is empty.</div>' : reply.comment_text }}
</div></div>
Instead of showing This comment is empty. using the class has-text-grey-light, it shows literally this unescaped text: <div class="has-text-grey-light">This comment is empty.</div>.
I believe that previously I already made similar things and it did output correctly. What's wrong here?
Try 'raw' filter.
{{ var|raw }} {# var won't be escaped #}
{{ (true ? '<b>Hello 1</b>' : '<p>Hello 2</p>')|raw }}
The raw filter marks the value as being "safe", which means that in an environment with automatic escaping enabled this variable will not be escaped if raw is the last filter applied to it:
<div class="reply_text">
<div class="wall_reply_text">
{{ (reply.comment_text is empty ? '<div class="has-text-grey-light">This comment is empty.</div>' : reply.comment_text) | raw }}
</div>
</div>
Another way is using if else statement where you don't need to use the raw filter.
{% if reply.comment_text is empty %}
<div class="has-text-grey-light">This comment is empty.</div>
{% else %}
{{ reply.comment_text }} {# if required {{ reply.comment_text | raw }} #}
{% endif %}

Is there a way to loop through the front matter of a jekyll collection?

I have a Jekyll collection which is not being output, but elements of which are being displayed on a single page, like this:
{% for element in site.collection %}
{{ element.content }}
{% endfor %}
I would like to be able to do something like this:
{% for element in site.collection %}
{{ element.content }}
{% for front_matter in element %}
<!-- do stuff -->
{% endfor %}
{% endfor %}
This is possible with YAML hashes in YAML _data files, but doesn't work here because, it seems {{ element }} on its own is identical to {{ element.content }}. There doesn't seem to be any variable designated for this either like, {{ element.front_matter }}. Is it possible to loop through the front matter of an element in a jekyll collection?
I know that the ideal way to do this would be to include all the front_matter I want to loop through in a variable, like:
---
front_matter:
foo: bar
bar: foo
---
But, as I'm trying to configure these pairings (foo and bar) to be easily updatable through prose.io, they can't be nested under other values. If there is a
way around this with prose though, I would accept that answer.
Much appreciated!
It is possible to loop through the variables of an element in a Jekyll collection:
{% for items in site.my_collection %}
{% for item in items %}
{{ item }}: {{ items[item] }}
{% endfor %}
{% endfor %}
But it is important to remember that there is other metadata that is also available and will be included in the iteration, like path, url, etc and your front matter, e.g. for _my_collection/something.md:
next:
path: _my_collection/something.md
output: <p></p>
url: /my_collection/something.html
id: /my_collection/something
content: <p></p>
collection: my_collection
relative_path: _my_collection/something.md
excerpt: <p></p>
previous:
draft: false
categories:
slug: something
ext: .md
tags:
date: 2017-05-23 14:43:57 -0300

How to render links in my CharField/TextField DB column as HTML in Django

A snippet of my template -
{% block content %}
{{ message.subject }}
{{ message.content }}
{% endblock %}
My message.content = " Check this out - / RigWave "
If you want to render as HTML (as a link) like this -
" Check this out - RigWave "
After looking at your unedited post, I'm wondering if you replaced the link tags with [ to prevent SO from rendering it as a link (though `` takes care of it).
If you actually have properly formatted links in the CharField, you need to mark the string as safe to prevent auto HTML escaping.
{{ message.content|safe }}
or
{% autoescape off %}
{{ body }}
{% endautoescape %}
http://docs.djangoproject.com/en/dev/howto/custom-template-tags/#writing-custom-template-filters first sample is perfect, you could use custom filter or use .replace