I am adapting a theme which uses colour swatches to use the variant image.
The problem I am having is that is is displaying the same variant image repeated rather than one for each of the colours available.
{%- liquid
assign color_file_name = value | handle | append: '.' | append: swatch_file_extension
assign color_image = color_file_name | file_img_url: '50x50' | prepend: 'https:' | split: '?' | first
assign color_swatch_fallback = value | split: ' ' | last | handle
-%}
<label
for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
class="color__swatch color__swatch--{{ block.settings.swatch_type }}"
style="--swatch-background-image: url({% for variant in product.variants %}{{ variant.image | img_url: 'small' }}{% endfor %}); height:50px; width:50px;"
title="{{ value | escape }}"
><span class="color__swatch-dot"></span>
</label>
preview screenshot of the issue
Related
I'd like to include a default template as a variable to pass it into a default case, like below:
<div class="row max-h-200 overflow-hidden">
{% include 'blog/userprofile_deleted.html' as deleted_profile %}
{{ user.profile.bio | safe | default:deleted_profile }}
</div>
Is this possible in django 3.2.9 ?
Currently I have to write out the default text as html in a single line:
<div class="row max-h-200 overflow-hidden">
{{ user.profile.bio | safe | default:'<h4> Very long html string! </h4> <span>Comment as <b>you</b> with your own profile!</span><span>Create your Account at the bottom of the page,or by visiting <code>/register</code> !</span>' }}
</div>
So I'm trying to search for Elements using query selector, the problem is, due to the way theses IDs are generated (with the name of regions, stores, and sale type, from the context) some of then includes spaces or dots on them which don't let them be searched.
I have identified the spaces were breaking my searches before and used cut to remove the spaces from IDs.
Is there a way to use cut to remove diferent characters as if I'm using cascaded replaces (in python) or replaceAlls (in JS) to make these ids don't have any spaces or dots? I tried using pipes but it didn't work. how can I do it?
Snippet of the formation of the elements:
{% if data.nivel == "N0" %}
<tr id="family_{{ data.familia_produto|cut:" " }}" class="bu_name_line {{ data.nivel }} title0"
data-level="{{ data.nivel }}" data-family="{{ data.familia_produto }}"
data-regional="{{ data.nome_regional }}" data-segment="{{ data.segmento }}"
data-bu-name="{{ data.nome_filial }}" onclick="show_lines('N1','{{ data.familia_produto }}')">
<td id='bu_name' onmouseenter='hight_light(this)' onmouseleave='hight_light(this)'>
{{ data.familia_produto }}
</td>
{% elif data.nivel == "N1" %}
<tr id="regional_{{ data.familia_produto|cut:" " }}_{{ data.nome_regional|cut:" " }}"
class="bu_name_line {{ data.nivel }} title1 hide" data-level="{{ data.nivel }}"
data-family="{{ data.familia_produto }}" data-regional="{{ data.nome_regional }}"
data-segment="{{ data.segmento }}" data-bu-name="{{ data.nome_filial }}"
onclick="show_lines('N2A','{{ data.familia_produto }}','{{ data.nome_regional }}')">
<td id='bu_name' onmouseenter='hight_light(this)' onmouseleave='hight_light(this)'>
{{ data.nome_regional }}
</td>
Snippet of the selection I'm trying to do to catch this elements:
if (level_name[0] == 'family'){
var forecast_lines = line.parentElement.querySelectorAll(`[id*=regional_${level_name[1]}]`)
}else if (level_name[0] == 'regional'){
var forecast_lines = line.parentElement.querySelectorAll(`[id*=filial_${level_name[1]}_${level_name[2]}]`)
}else if (level_name[0] == 'filial'){
//console.log("entrei aqui 222222222")
var forecast_lines = line.parentElement.querySelectorAll(`[id*=segmento_${level_name[1]}_${level_name[2]}_${level_name[3]}]`)
error:
Uncaught DOMException: Element.querySelectorAll: '[id*=segmento_CAFES_INTERNA_GER.INT.COMERCIAL]' is not a valid selector
Don't know exactly how is your code but it will give you an idea:
should_removed_list = [" ", ".", ",", "="]
for i in should_removed_list:
if str(i) in your_content:
your_content.replace(str(i), "")
I want to select option 1 and load a form with inputs
HTML:
<select id="orden" class="form-control" name="orden">
<option disabled selected>Selecciona una opción</option>
<option value="1">{{ results.1.op_ser_codigo }}{{ results.1.op_num_codigo }} / ({{ results.1.data_ini }} - {{ results.1.data_fim }})</option>
<option value="2">{{ results.2.op_ser_codigo }}{{ results.2.op_num_codigo }} / ({{ results.2.data_ini }} - {{ results.2.data_fim }})</option>
<option value="3">{{ results.3.op_ser_codigo }}{{ results.3.op_num_codigo }} / ({{ results.3.data_ini }} - {{ results.3.data_fim }})</option>
<option value="4">{{ results.4.op_ser_codigo }}{{ results.4.op_num_codigo }} / ({{ results.4.data_ini }} - {{ results.4.data_fim }})</option>
<option value="5">{{ results.5.op_ser_codigo }}{{ results.5.op_num_codigo }} / ({{ results.5.data_ini }} - {{ results.5.data_fim }})</option>
<option value="6">{{ results.6.op_ser_codigo }}{{ results.6.op_num_codigo }} / ({{ results.6.data_ini }} - {{ results.6.data_fim }})</option>
</select>
I want to fill this: (If on select option i select 1 on this inputs fill value 1)
<b><p class="black">OP: </b>{{ results.1.op_ser_codigo }}{{results.1.op_num_codigo}} </p>
<b><p class="black">Fecha Inicio: </b>{{ results.1.data_ini }} </p>
<b><p class="black">Fecha Final: </b> {{ results.1.data_fim }} </p>
You can handle it on client side (with jq, javascript) or on the server side. I definitely advice to handle it on the server side - as business logic should be there. Although in this case - as I understand - the trigger will come after the form is loaded and once the select options is selected.
I would go with an ajax solution.
place an onchange event to the select:
eg:
onchange="ChooseOption(this.value)"
add javascript to handle ajax request(I use jquery):
function ChooseOption(option_id){
$.ajax({
type: "POST",
url: "/applicatioin/option_selection/",
data: {
'option_id' : option_id,
'csrfmiddlewaretoken' :
$("input[name=csrfmiddlewaretoken]").val()
},
success: chooseoptionDetailSuccess,
dataType: 'html'
});
}
In the success you call chooseoptionDetailSuccess function. Which should pass the data to the relevant html field - with innerHtml.
Note: you may also use GET request type.
In you django view you have to render a html template which holds the html part (with the variables) which will be changed.
Sorry for the format. Seems like the code sample is not working.
I have the following template code:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ article.title }}</h3>
</div>
<div class="panel-body">
{{ article.content }} <!--will display the full text-->
</div>
I intend to show the first 200 characters of the content, like:
{{ article.content|length=200 }}
How to achieve such a constrain on the text.
There are two template filters here that are useful: slice and truncatechars.
slice limits an iterable (here a string) to a given number, for example:
{{ variable | slice:":200" }}
whereas truncatechars does approximately the same, except that in case the string is longer than the upper bound (here 200), it will slice to the upperbound minus three, and add an ellise:
{{ variable | truncatechars:"200" }}
For a smaller upperbound, to demonstrate the difference, for a string variable = "foobarqux" we would get:
{{ variable | slice:":6" }} # foobar
{{ variable | truncatechars:"6" }} # foo...
The two thus differ: the latter gives a textual hint that there is actually more content. Of course it depends on the specific situation which filter suits your needs.
A nice thing is that you can emulate truncatechars in terms of slice:
{{ variable | truncatechars:":6" }}
is equivalent to:
{% if variable|length > 6 %}{{ variable|slice:":3" }}...{% else %}{{ variable }}{% endif %}
But it is of course not the most elegant solution: in case you want truncatechars behavior, it is better to use the specific filter.
You can use truncatechars filter:
{{ article.content|truncatechars:200 }}
I'm using Liquid with Jekyll to post dates on my band's website (http://longislandsound.com.au)
What I want is to automatically hide old dates, so I don't have to go in and delete them again. I think the best way to do it would be to compare the post date to the current date and only display the post if the date is in the future, but I can't figure out how to do this.
Here is the current code:
<ul id="dates">
{% for post in site.posts reversed %}
<a href="{{post.link}}">
<li>
<div class="date">
<span class="day">{{post.date | date: "%d"}}</span><br />
<span class="month">{{post.date | date: "%b"}}</span>
<span class="week">{{post.date | date: "%a"}}</span>
</div>
<div class="details">
<span class="venue">{{post.venue}}</span><br />
<span class="town">{{post.town}}</span>
</div>
</li>
</a>
{% endfor %}
</ul>
I've tried some if statements, but I can't figure out how to compare the post date to the current date.
Can anyone help?
Based on date-math-manipulation-in-liquid-template-filter and get-todays-date-in-jekyll-with-liquid-markup, you should be able to use a combination of {{'now'}} or {{site.time}} and the hard to find unix timestamp date filter | date: '%s'
{% capture nowunix %}{{'now' | date: '%s'}}{% endcapture %}
{% capture posttime %}{{post.date | date: '%s'}}{% endcapture %}
{% if posttime < nowunix %}
...show posts...
Captured numbers may act as strings, not numbers, and can be type cast back to numbers using the following hack:
{% assign nowunix = nowunix | plus: 0 %}
Although this code works:
{% capture nowunix %}{{'now' | date: '%s'}}{% endcapture %}
{% capture posttime %}{{post.date | date: '%s'}}{% endcapture %}
{% if posttime < nowunix %} ...show posts...
It only is executed during build. If you want your website to truly update automatically, you should let javascript do the hiding.
Start with this Liquid:
{% for item in site.events %}
<div future-date="{{ item.date | date: '%Y%m%d' }}">...</div>
{% endfor %}
And add this javascript:
function getCompareDate() {
var d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('');
}
$('[future-date]').each(function() {
if($(this).attr('future-date') < getCompareDate()) $(this).hide();
});
The solution was found here: http://jekyllcodex.org/without-plugin/future-dates/
UPDATE (2018-02-19):
CloudCannon now has scheduled builds where you can simply specify to build your project once a day. If you use CloudCannon, I recommend the answer of the user [here].