Develop Reference

How to use operator in Shopify Liquid to hide button with unique product ID

I'm trying to hide the remove button from a product with certain id but kinda confuse, I have tried using {% if %} until it hits {% endif %} but still it doesn't want to hide it. For example I have tried to hide a button with class= "ajaxcart__qty-adjust ajaxcart__qty--delete icon-fallback-text" in product id 2423924.
{{#items}}
<div class="ajaxcart__product">
<div class="ajaxcart__row" data-line="{{line}}">
<div class="row">
<div class="col-xs-4 col-md-3 col-img-left">
<img src="{{img}}" alt="">
</div>
<div class="col-xs-8 col-md-9">
<p>
{{name}}
{{#if variation}}
<span class="ajaxcart__product-meta">{{variation}}</span>
{{/if}}
{{#properties}}
{{#each this}}
{{#if this}}
<span class="ajaxcart__product-meta">{{#key}}: {{this}}</span>
{{/if}}
{{/each}}
{{/properties}}
{% endraw %}{% if settings.cart_vendor_enable %}{% raw %}
<span class="ajaxcart__product-meta">{{ vendor }}</span>
{% endraw %}{% endif %}{% raw %}
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--detete icon-fallback-text" data-id="{{key}}" data-line="{{line}}" data-qty="0">
<span class="fallback-text" aria-hidden="true">x</span>
<span class="visually-hidden">{% endraw %}{{ 'cart.general.remove' | t }}{% raw %}</span>
</button>
</p>
<div class="row display-table">
<div class="col-xs-5 display-table-cell ">
<div class="ajaxcart__qty">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" data-line="{{line}}">
<span class="fallback-text" aria-hidden="true">−</span>
<span class="visually-hidden">{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}</span>
</button>
<input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemAdd}}">
<span class="fallback-text" aria-hidden="true">+</span>
<span class="visually-hidden">{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}</span>
</button>
</div>
</div>
<div class="ajax_cart_money col-xs-7 display-table-cell text-left">
{{#if discountsApplied}}
<small class="ajaxcart-item__price-strikethrough"><s>{{{originalLinePrice}}}</s></small>
<br><span>{{{linePrice}}}</span>
{{else}}
<div>x <span class="money">{{{price}}}</span> = <span class="money money-total">{{{linePrice}}}</span></div>
{{/if}}
</div>
</div>
{{#if discountsApplied}}
<div class="row display-table">
<div class="col-xs-12 text-right">
{{#each discounts}}
<small class="ajaxcart-item__discount">{{ this.title }}</small><br>
{{/each}}
</div>
</div>
{{/if}}
</div>
</div>
</div>
</div>
{{/items}}

Rearrange content in a row based on if conditions

I have a html like this:
<div class="row">
{% if show_name %}
<div class="columns large-4">
<label>Name</label>
<p>{{ object.name }}</p>
</div>
{% endif %}
{%if show_email %}
<div class="columns large-4 large-text-right">
<label>Email</label>
<p>{{ object.email }}</p>
</div>
{% endif %}
</div>
This works correctly when both the columns are to be shown. But if I should only the second column then this is right aligned in the first column because of large-text-right class. If there was only one row then I can use if else condition inside the div itself.
But there are a lot of such rows with different conditions. Is there any way where I can implement the logic once and use it on all rows?
I am using jquery in other parts of the project. So if there is any jquery solution then that is also fine.
EDIT 1
If show_name is false, then I want the code to be:
<div class="row">
{%if show_email %}
<div class="columns large-4">
<label>Email</label>
<p>{{ object.email }}</p>
</div>
{% endif %}
So that email is left aligned in the first column of the same row if the previous field in the first column is not present.
These fields might be put into some other row for example:
<div class="row">
{% if show_name %}
<div class="columns large-4">
<label>Name</label>
<p>{{ object.name }}</p>
</div>
{% endif %}
</div>
<div class="row">
{% if show_fullname %}
<div class="columns large-4">
<label>Full Name</label>
<p>{{ object.full_name }}</p>
</div>
{% endif %}
{%if show_email %}
<div class="columns large-4 large-text-right">
<label>Email</label>
<p>{{ object.email }}</p>
</div>
{% endif %}
</div>
Now here in the second part the email field should be left aligned in the first column of the second row only when show_fullname is false.
Basically for every div that has a class large-text-right, I should check if it has an element present before it in the same row and if not then that class should be removed.

I am not sure that i fully understand you problem, but have you tried something like this?
ex: <div class="columns large-4 {% if show_name %}large-text-right {% endif %}">

If I understand your issue correctly you don't want the email to be right aligned if the name is not present. In which case you need to wrap the large-text-right css class in a conditional statement that checks for show_name.
<div class="row">
{% if show_name %}
<div class="columns large-4">
<label>Name</label>
<p>{{ object.name }}</p>
</div>
{% endif %}
{%if show_email %}
<div class="columns large-4 {% if show_name %}large-text-right{% endif %}">
<label>Email</label>
<p>{{ object.email }}</p>
</div>
{% endif %}
</div>

Using Jquery select radio otpions from dictionary

I have a HTML template which has Multichoice Question with options and Essay type questions.
The user's answers are saved in model called Sitting in user_answers field as
sitting.user_answers =
{"424": "1527", "319": "adadadf", "203": "786", "437": "1572", "383": "1429"}
The first number is the question_id and and second is the answer_id(selected option) or answer itself (incase essay type question).
I am able to display the questions in one template using the following code:
views.py
if self.sitting.get_first_question() is False:
questions= MCQuestion.objects.filter(question_ptr_id__in=self.sitting._question_ids()).prefetch_related('answer_set__question')
essayquestions= Essay_Question.objects.filter(question_ptr_id__in=self.sitting._question_ids())
answerdetails = Sitting.objects.filter(id=self.sitting.id)
print(answerdetails)
return render(self.request, 'dashboard/exam-review.html', {'questions': questions,'essayquestions': essayquestions,'form': True})
Template
{% for question in questions %}
<div class="row mt-2 mb-4 shadow-1" style="background: #ececec">
<div class="col-md-10">
<input type=hidden name="question_id" value="{{ question.id }}" class="question_id">
<div class="panel-heading">
<p class="panel-title mb-2 mt-2" >
<li style="list-style-type: none;" class="mb-1 mt-1"><strong> {% autoescape off %}{{ question.content }}{% endautoescape %} </strong></li>
{% if question.figure %}
<div class="row mb-1">
<img src="{{ question.figure.url }}" alt="{{ question.content }}" />
</div>
{% endif %}
{% if question.questionmarks %}
<div class="row ml-1" >
<p style="font-size:0.8rem"><b>Marks :</b> {{ question.questionmarks }}</p>
</div>
{% endif %}
</div>
<div class="panel-body ">
<ul class="mb-2" style="list-style-type: none;">
{% regroup question.answer_set.all by get_content_display as answer_list %}
{% for answers in answer_list %}
<span>{{ section.grouper }}</span>
{% for answer in answers.list %}
//What to write here ???
<li class="list-group-item quiz-answers" >
<span><label for="id_answers_0"><input type="radio" name="answers_{{question.id}}" value="{{answer.id}}" style="margin-right:10px;" id="{{answer.id}}" required>
{{answer.content}} </label> </span></li>
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</div>
{% endfor %}
{% if essayquestions %}
{% for question in essayquestions %}
<div class="row mt-2 mb-4 shadow-1" style="background: #ececec">
<div class="col-md-10">
<input type=hidden name="question_id" value="{{ question.id }}" class="question_id">
<div class="panel-heading">
<p class="panel-title mb-1" >
<li style="list-style-type: none;"><strong> {% autoescape off %}{{ question.content }}{% endautoescape %} </strong></li>
<div class="row mb-1">
{% if question.figure %}
<img src="{{ question.figure.url }}" alt="{{ question.content }}" />
{% endif %}
</div>
{% if question.questionmarks %}
<div class="row mb-1" >
<p style="font-size:0.8rem"><b>Marks :</b> {{ question.questionmarks }}</p>
</div>
{% endif %}
</p>
<div class="panel-body mb-2">
<ul class="list-group mb-2" style="list-style-type: none;">
<li class="list-group-item quiz-answers mb-1">
<span><textarea name="answers" cols="40" rows="5" style="width:100%" id="answer_{{question.id}}" required>
</textarea> </span>
</li>
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
Could I use Jquery to fill the radio option using dictionary object ?

I want to show stars based on an array element that is passed as a parameter to my template

So I was trying to loop over an array element which id {{doctor.16}} but I couldn't so I thought I could make it as if conditions but I failed to do this too so can anyone please help me?
this is what I have done so far
<div class="row">
<div class="col-lg-12">
<div class="single_jobs white-bg d-flex justify-content-between" style="width: 50px">
<div class="single_candidates text-center">
{% for doctor in recdoc %}
<div class="thumb">
<img class="img-circle " src="{% static 'static_file/img/candiateds/2.png' %}" alt="" >
</div>
<a href="" ><h4 >{{doctor.6}} {{doctor.7}}</h4></a>
<p> {{doctor.9}}</p>
<div class="best-rating">
<div class="text-warning">
{% if{{doctor.16}} == 1 %}
<i class="fa fa-star"></i>
{% endif %}
</div>
<div class="best-rating" >
<h5>تقييم الدكتور</h5>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
what I can't do correctly is this part
{% if{{doctor.16}} == 1 %}
<i class="fa fa-star"></i>
{% endif %}

Since you are not rendering the variable within {% if %} tag.
The part you did wrong should be:
{% if doctor.16 == 1 %}
<i class="fa fa-star"></i>
{% endif %}
See the following official documentation for more details of django templates:
https://docs.djangoproject.com/en/3.0/topics/templates/#syntax

How can I use "for loops" in Jquery without this mistake?

Here's the problem:
I have a simple unordered list of posts. Each post is truncated (250 chars), but should expand when clicked (Using .replaceWith). What I'm trying to do is replace the truncated Post.content with the "untruncated" Post.content. When I try this, the click returns the content of all the Posts in my list. I only want the content of the Post that I am clicking. Here's the relevant code:
<ul>
{% for post in object_list %}<tr class="{% cycle 'row1' 'row2' %}"></tr>
<div class="panel panel-default col-sm-offset-1 col-sm-8">
<p><h4><B><a class="title" href="/posts/{{ post.id }}/">{{post.title }}</a></B></h4></p>
<p style="color:gray">Author:
<a style="color:darkgray" href="{% url 'accounts:profile' %}"> <span class="link">{{ user.first_name }} {{ user.last_name }}</span></a></p>
<hr style="">
<div class="post" >
<h5 style="color: rgba(101, 106, 106, 1)">{{post.content|truncatechars:250 }}</h5>
</div>
<div class="expandContent">
<button class="btn btn-primary btn-sm">Read</button>
</div>
<br>
<br>
<br>
<div class="content">
<p>{{ post.content }}</p>
</div>
</div>
<br>
{% endfor %}
</ul>
Above is my basic list. Here is the JS that should expand the Post.content:
<script src="{% static 'posts/jquery-3.1.1.js' %}"></script>
<script type="text/javascript">
$(".expandContent").click(function(){$(".post").replaceWith($('.content'));
});
</script>
If any more information or code would be helpful, please let me know. If it's at all relevant, this project is on Django 1.10. Thank you!

You can do something like this
<ul>
{% for post in object_list %}<tr class="{% cycle 'row1' 'row2' %}"></tr>
<div class="panel panel-default col-sm-offset-1 col-sm-8">
<p><h4><B><a class="title" href="/posts/{{ post.id }}/">{{post.title }}</a></B></h4></p>
<p style="color:gray">Author:
<a style="color:darkgray" href="{% url 'accounts:profile' %}"> <span class="link">{{ user.first_name }} {{ user.last_name }}</span></a></p>
<hr style="">
<div class="post" >
<h5 style="color: rgba(101, 106, 106, 1)">{{post.content|truncatechars:250 }}</h5>
</div>
<div class="expandContent">
<button class="btn btn-primary btn-sm" onclick="replace("content-1">Read</button>
</div>
<br>
<br>
<br>
<div class="content" id="content-1">
<p>{{ post.content }}</p>
</div>
</div>
<br>
{% endfor %}
</ul>
and in the replace function you can getelementbyid and display it.