if and statement possible in html files Jekyll - jekyll

I want to create and if/and statement in my code to offer 3 different options for a link.
I've tried the if/else code and it works. Having two if statements (one with the 'AND') will not work because the error states there should be a closing statement after the first 'if'. I've tried using 'elseif' and 'else if' in the second statement, as well, with no luck. Is there a way to do this that I'm not finding?
<li class="{% if page.body_class == 'language' %}active{% endif %} hidden-md hidden-lg">
                {% if page.alternate_mx == null %}
                  Español
                {% if page.alternate_mx == null and page.translate_mx %}
                  Español
                {% else %}
                  Español
                {% endif %}
   </li>
If there is no page.alternate_mx then the first link should appear.
BUT If there is no page.alternate_mx AND there is a page.translate_mx use the second link.
If there is a page.alternate_mx use the third link.
I am getting this error:
"Liquid Exception: Liquid syntax error (line 144): 'if' tag was never closed in /usr/src/app/_includes/header/header-en.html, included in /_layouts/default.html
web_1  |              Error: Liquid syntax error (line 144): 'if' tag was never closed
web_1  | ...error:
web_1  |              Error: Run jekyll build --trace for more information."

It's not working because you have if if else endif there, the first if block is not closed. If elsif is not working for you, you can try to rearrange statements like so:
<li class="{% if page.body_class == 'language' %}active{% endif %} hidden-md hidden-lg">
{% if page.alternate_mx == null %}
{% if page.translate_mx %}
Español
{% else %}
Español
{% endif %}
{% else %}
Español
{% endif %}
</li>
Also you probably should use && instead of and because they have different precedence.
<li class="{% if page.body_class == 'language' %}active{% endif %} hidden-md hidden-lg">
{% if page.alternate_mx == null %}
Español
{% elsif page.alternate_mx == null && page.translate_mx %}
Español
{% else %}
Español
{% endif %}
</li>

I ended up using this and it worked great.
<li class="{% if page.body_class == 'language' %}active{% endif %} hidden-md hidden-lg">
{% if page.translate_mx %}
Español
{% elsif page.alternate_mx == null %}
Español
{% else %}
Español
{% endif %}
</li>```

Related

How do I trigger autoplay in a video field in Hubspot?

Using Hubspot and under Marketing -> Files and Templates -> Design Tools:
I am using a video in a Template called promo_video. Also, using the copy_snippet produces the code below to be used in module.html.
{% if module.promo_video.player_id %}
{% set max_width = module.promo_video.size_type == 'auto_custom_max' ? module.promo_video.max_width : module.promo_video.width %}
{% set max_height = module.promo_video.size_type == 'auto_custom_max' ? module.promo_video.max_height : module.promo_video.height %}
{% video_player "embed_player"
player_id={{ module.promo_video.player_id }}
type={{ module.promo_video.player_type || 'scriptV4' }}
full_width={{ module.promo_video.size_type == 'auto_full_width' }},
conversion_asset={{ module.promo_video.conversion_asset|tojson|safe }}
autoplay={{ module.promo_video.autoplay }}
hidden_controls={{ module.promo_video.hide_controls }}
loop={{ module.promo_video.loop_video }}
muted={{ module.promo_video.mute_by_default }}
%}
{% endif %}
How do I automatically turn on autoplay for the video in it's page? (video stars when the page loads)
I tried to add "allow" to the line below but the video does not autoplay:
autoplay={{ module.promo_video.autoplay }}
below is a portion of the video in its webpage

How to use multiple if statements to color p tags

Im trying to color these four p tags based off of if they are either the correct answer or the one a user picked, there seems to be an error in the if statements however because it will only color it green or red, the loop doesnt go to color the red one for what the user picked and green for the correct answer
<p {% if quiz.correctness1 == 0 and quiz.userAnswer1 == 'a' %}
style="color:red"
{% elif quiz.answer1 == 'a' %}
style="color:green"
{% endif %}>
A. {{ quiz.q1Choice1 }}
</p>
<p {% if quiz.correctness1 == 0 and quiz.userAnswer1 == 'b' %}
style="color:red"
{% elif quiz.answer1 == 'b' %}
style="color:green"
{% endif %}>
B. {{ quiz.q1Choice2 }}
</p>
<p {% if quiz.correctness1 == 0 and quiz.userAnswer1 == 'c' %}
style="color:red"
{% elif quiz.answer1 == 'c' %}
style="color:green"
{% endif %}>
C. {{ quiz.q1Choice3 }}
</p>
<p {% if quiz.correctness1 == 0 and quiz.userAnswer1 == 'd' %}
style="color:red"
{% elif quiz.answer1 == 'd' %}
style="color:green"
{% endif %}>
D. {{ quiz.q1Choice4 }}
</p>
It will only color red if they are wrong and the if statements don't countinue to do
both red and green
Model
class QuizHistory(models.Model):
userAnswer1 = models.TextField()
answer1 = models.TextField()
correctness1 = models.IntegerField()
q1Choice1 = models.TextField()
q1Choice2 = models.TextField()
q1Choice3 = models.TextField()
q1Choice4 = models.TextField()
You can simplify this to:
<p {% if quiz.correctness1 == 0 and quiz.userAnswer1 == 'a' %}
style="color:red"
{% elif quiz.answer1 == 'a' %}
style="color:green"
{% endif %}>
A. {{ quiz.q1Choice1 }}
</p>
<p {% if quiz.correctness1 == 0 and quiz.userAnswer1 == 'b' %}
style="color:red"
{% elif quiz.answer1 == 'b' %}
style="color:green"
{% endif %}>
B. {{ quiz.q1Choice2 }}
</p>
you can covert strings to a lowercase variant with:
<p {% if quiz.correctness1 == 0 and quiz.userAnswer1.lower == 'a' %}
style="color:red"
{% elif quiz.answer1 == 'a' %}
style="color:green"
{% endif %}>
A. {{ quiz.q1Choice1 }}
</p>
But I would strongly advise to do this in the models/views.

Shopify Liquid: Consecutive for loops iterating out of order

I'm trying to modify a Shopify theme that displays products by looping through the collection. I wanted to display the out-of-stock products after the rest, so I created a for loop to iterate through in-stock items, and then another to iterate through out-of-stock items. However, there is always one in-stock listing that appears after all the out-of-stock listings.
In an attempt to debug this I added html tags inside the product listing and before and after the liquid loop.
How could the listing have the "avail" comment but be after the "END Available Products" comment?
Red: Available Products
Blue: Unavailable Products
<div id="product-loop" {% if settings.collection-sidebar %}class="desktop-10 tablet-5 mobile-3"{% endif %}>
{% assign products-per-row = settings.products-per-row %}
<!-- Available Products -->
{% for product in collection.products %}
{% assign outofstock = true %}
{% for variant in product.variants %}
{% if variant.inventory_quantity > 0 %}
{% assign outofstock = false %}
{% endif %}
{% endfor %}
{% if outofstock == false %}
{% if current_tags != null %}
<!-- Tag section removed for brevity -->
{% endif %}
<div class="product-index {% if template == 'index' and settings.homepage-product-display == 'carousel' %}{% else %}{% if products-per-row == "6" %}desktop-2{% cycle ' first', '', '', '', '', ' last' %}{% elsif products-per-row == "4" %}desktop-3{% cycle ' first', '', '', ' last' %}{% elsif products-per-row == "3" %}desktop-4{% cycle ' first', '', ' last' %}{% elsif products-per-row == "5" %}desktop-fifth{% cycle ' first', '', '', '', ' last' %}{% elsif products-per-row == "2" %}desktop-6{% cycle ' first', ' last' %}{% endif %} tablet-half mobile-half{% endif %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
<!-- avail -->
{% include 'product-listing' %}
{% include "panda-swatch" %}
</div>
{% endif %}
{% endfor %}
<!-- END Available Products -->
<!-- Unavailable Products -->
{% for product in collection.products %}
{% assign outofstock = true %}
{% for variant in product.variants %}
{% if variant.inventory_quantity > 0 %}
{% assign outofstock = false %}
{% endif %}
{% endfor %}
{% if outofstock == true %}
{% if current_tags != null %}
<!-- Tag section removed for brevity -->
{% endif %}
<div class="product-index {% if template == 'index' and settings.homepage-product-display == 'carousel' %}{% else %}{% if products-per-row == "6" %}desktop-2{% cycle ' first', '', '', '', '', ' last' %}{% elsif products-per-row == "4" %}desktop-3{% cycle ' first', '', '', ' last' %}{% elsif products-per-row == "3" %}desktop-4{% cycle ' first', '', ' last' %}{% elsif products-per-row == "5" %}desktop-fifth{% cycle ' first', '', '', '', ' last' %}{% elsif products-per-row == "2" %}desktop-6{% cycle ' first', ' last' %}{% endif %} tablet-half mobile-half{% endif %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
<!-- no avail -->
{% include 'product-listing' %}
{% include "panda-swatch" %}
</div>
{% endif %}
{% endfor %}
<!-- END Unavailable Products -->
</div>
The issue was due to pagination altering the order of the product listings after in-stock / out-of-stock loops generated html. Fixing the issue required altering the pagination method.

How can I get html class name using Twig?

I want to get the name of a class using tip and display a certain text based on what the class is. Is there a way to get a class name and use it in an IF condition?
<div class="zboruri_rute {{ route_type ? "departure_flight" :
"arrival_flight" }}">
{% if class == "zboruri_rute departure_flight" %}
<p>Departure</p>
{% elseif if class == "zboruri_rute arrival_flight" %}
<p>Arrival</p>
{% endif %}
I want to display Departure if the class is zboruri_intoarcere and display arrival if the class is zboruri_plecare
Try it
{% set route_type = "departure_flight" %}
<div class="zboruri_rute {{ route_type ? "departure_flight" :
"arrival_flight" }}">
{% if route_type == "departure_flight" %}
<p>Departure</p>
{% elseif route_type == "arrival_flight" %}
<p>Arrival</p>
{% endif %}
or with jquery
<p id="result"></p>
<script>
zboruri_rute = $(".zboruri_rute").attr('class');
if (zboruri_rute.indexOf("departure_flight") >= 0)
{$("#result").text("Departure")}
if (zboruri_rute.indexOf("arrival_flight") >= 0)
{$("#result").text("Arrival")}
</script>
As said in the comments, by namth, u'd only need to test route_type again, e.g.
<div class="zboruri_rute {{ route_type ? "departure_flight" : "arrival_flight" }}">
{% if route_type %}
<p>Departure</p>
{% else %}
<p>Arrival</p>
{% endif %}
</div>
demo
Shorter version
<div class="zboruri_rute {{ route_type ? "departure_flight" : "arrival_flight" }}">
<p>{{ route_type ? 'Departure': 'Arrival' }}</p>
</div>

jinja error with multi-line code

I'm trying to write a multiline if statement to set a variable in jinja2. But I keep getting an error
the code:
{% set subjectName = subject.name %}
{% if(subjectName == ''):
subjectName = 'empty'
%}
{% endif %}
error:
jinja2.exceptions.TemplateSyntaxError: expected token 'end of statement block', got 'subjectName'
is multiline code not allowed?
You just put the %} in the wrong spot. This should work (I also took out the colon, I don't think that goes in here either):
{% set subjectName = subject.name %}
{% if(subjectName == '') %}
subjectName = 'empty'
{% endif %}
after searching a bit, this worked for me:
{% set subjectName = subject.name %}
{% if(subjectName == '') %}
{% set subjectName = 'empty' %}
{% endif %}