I'm banging my head against the wall with this one since my syntax looks to be accurate but I'm not getting any results when trying to edit some legacy code on a Shopify storefront. For:
{% if product.metafields.custom_fields["custom_field_two"] != blank %}
<div role="button" tabindex="0" class="share-pdp__details--tab" id="customtwoTab"
onclick="displayDetails('customtwo')" aria-expanded="false" aria-controls="customtwo">
Section Main Title (This is displayed in all conditions)
{% if product.handle == 'product-one' %}- Product-specific added text {% else %}- Other product-specific added text {% endif %}
<span class="tab-mobile__arrow"
id="customtwo_arrow"><i class="fas fa-chevron-circle-right"></i></span>
</div>
I'm hoping to see the - Other product-specific added text but it's just not showing up once in my production dev environment. The - Product-specific added text is showing up, but nothing else.
Any ideas? Could something else be interfering?
Related
Maybe I'm doing it wrong (tried several ways to achieve my goal) or overlooking something here.
What I'd like to achieve is this:
When I use the Live-search function, I get categories containing the search keyword (like: Paint -> Paint buckets, Paint brushes, Paint colors etc.) which works like a charm. The one thing I need is to style the searched keyword in the presented categories like:
Paint bucket,
Paint brushes,
Color paint
This is the code I have at the moment:
{% if (products.length + categories.length + pages.length) == 0 %}
<div id="Pi56dYpB" class="undefined"> No results for:
<b>{{ query }}</b>...
</div>
{% endif %}
{% if categories.length > 0 %}
<div class="categories">
{% for category in categories %}
{% if loop.index < 7 %}
<a class="p-0" href="{{ category.url }}" style="all:inherit;">
<h3 id="bvwiyjEN" class="undefined">{{ category.name|replace({{ query }}: "<strong>"{{ query }}"<strong>"})|raw }}</h3>
</a>
{% endif %}
{% endfor %}
{% endif %}
Unfortunately this isn't working. I did check if the {{ query }} value is accessible with this simple line of code:
<h3 id="bvwiyjEN" class="undefined">{{ category.name }} - {{ query }}</h3>
No problems found here.
Did I use the wrong syntax in my code maybe? Any help would be appreciated!
replace({{ query }}) is the wrong syntax - replace(query) should work, as you don't want to echo the variable query here
As Nico Haase pointed out already, {{ ... }} is used to output variables, this translate to something like <?php echo $foo; ?> and can't/shouldn't be used inside statements
Furthermore, the filter replace expects an array of keys to replace with the values.
You would need to change your code to the following:
{% for category in categories %}
{{ category|replace({ (query): '<strong>'~query~'</strong>',})|raw }}
{% endfor %}
demo
Some notes:
The filter replace uses the PHP function strtr in the background. This mean the output will be case-sensitive. If you don't want this, I'd advice you to follow through here
Wrapping the key with parantheses is mandatory. This will force twig to evaluate/interpolate the value of the key - demo
In a Django v3.x app I would like to display a list of uploaded file names (e.g. images) in the left hand side of the screen. When a user clicks on one of those, I'd like to display the actual file/image on the right hand side of the screen. I am still new to Django and have used both ListView and DetailView separately, but not in such a combination. I'm not sure how this can be achieved.
Using a little Bootstrap magic, I can create a split screen easily. Hence, my template would look somehow like this:
<div class="row">
<div class="col-md-5 left">
{% for image in images %}
<div class="card">
<h4>{{ image.url }}</h4>
View
</div>
{% endfor %}
</div>
<div class="col-md-5 right">
{# TODO: When the user clicks on the View url above, then I'd
like to load the actual image here on the right hand side of the
screen inside this div-tag. #}
</div>
</div>
Question 1: How can I achieve loading a selected image from a list? Can I still use ListView and DetailView, or do I need to write my own View logic?
Question 2: Ideally, I'd like to NOT re-send the whole page from the server to the client, because the list of images in the lefthand-side could potentially be long and require pagination. So, when the user clicks View, then, ideally, I'd like to load only the document from the server. Is this somehow feasible?
Well I have made a sample code and you can refer to it and get some idea.
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails"
data-ride="carousel">
<!--Slides-->
<div class="row">
<div class="col-lg-8">
<div class="carousel-inner" role="listbox">
{% for latest in latest_course %}
<div class="carousel-item {% if forloop.counter0 == 0 %}active{% endif %}">
<img class="d-block w-100" src="{{latest.poster.url}}" alt="First slide">
</div>
{% endfor %}
</div>
</div>
<!--/.Slides-->
<div class="col-lg-4">
<ol class="slider_list">
{% for latest in latest_course %}
<li data-target="#carousel-thumb" data-slide-to="{{forloop.counter0}}"
class="active"> <img class="img-thumbnail" width="100px" height=100px src="
{{latest.poster.url}}"
class="img-fluid"></li>
{% endfor %}
</ol>
</div>
and the output looks like this
Here, you can see the list on the right side and when you select an item the selected item loads in the left side. This way you can style your template the way you want.
basically you want to show the selected item from the list on the other side like a slideshow
I have an issue, I do not know why it is happening and how to solve it;
My app ask a user to create a project and is redirect directly to the project detail page. On that detail page if a team_id is empty I ask the user to create a team and when the team is created the user is redirected again to the project detail page to now be able to populate his team.
I used the code {% if Project.team_id == None %} when the user is redirected after creating his team but it is not working .. could you please help ? It is like before the redirection the new team is not saved in the Db ..
my html:
{% extends 'base.html' %}
{% block body %}
<div class="container">
<div class="jumbotron">
<h2>Welcome to your Project {{ project.name }} Detail page</h2>
</div>
{% if Project.team_id == None %}
<div class="invite-team">
<div class="jumbotron">
<div class="jumbo-text">
<h3>It is time to link a team to your project now create a new team and add team members</h3>
</div>
<div class="jumbo-button">
<span class="glyphicon glyphicon-plus"></span> Create a new team
</div>
</div>
{% else %}
<div class="invite-teammembers">
<div class="jumbotron">
<div class="jumbo-text">
<h3>The team {{ project.team_id }} has beed created, we now need to add TeamMembers</h3>
</div>
<div class="jumbo-button">
<span class="glyphicon glyphicon-plus"></span> Create a new team
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% endblock%}
Looking at your surrounding code, you are using project as the container of your project. However, in your statement you are using Project (first character uppercase). Changing Project to project might help.
Your comment question:
what do you mean "Looking at your surrounding code, you are using project as the container of your project". my model Project is with a capital letter why now it is without ?
With looking at the surrounding code I mean that I literally looked at your code how you are using the variables in the other parts of your code. I am not sure if you are using CBV (class based views) or FBV (function based views).
With CBV the object is added to the context with the name defined in:
DetailView:81
or ListView:104
You can override the context object name by using the context_object_name in the View class
If you are using FBV, you have added it to the context manually as something like:
return render(request, 'myapp/template.html', {
'project': <project_query_or_variable>,
})
Recently, I added adminplus which automatically creates a link on the admin page to my custom view. E.g. admin.site.register_view('somepath', 'My Fancy Admin View!', view=my_view) should produce a 'Custom View' menu with a link named 'My Fancy Admin View!'. If I disable Grappelli, the menu & link appears, however when Grappelli is enabled, the menu & link disappears. My guess is Grappelli skips this menu because it is defined differently from the rest. Any advice would be greatly appreciated.
Thank to the hint provided by dan-klasson, I found a hack for my problem
Add the following code to Grappelli's admin/index.html
{% empty %}
<p>{% trans "You don´t have permission to edit anything." %}</p>
{% endfor %}
<!-- Code above is included as point of reference -->
<!-- Add the code below -->
<div class="grp-module" id="custom_views">
<h2>Custom Views</h2>
<div class="grp-row">
{% for path, name in custom_list %}
<strong>{{ name }}</strong>
{% endfor %}
</div>
</div>
I have two bits of code, nearly the same
<div class="favButtonHolder" alt="{% url inturl int.id %}">
{% if int in user.get_profile.favorites.all %}
<div class="favorite favButton" style="display:none;">Favorite</div>
<div class="favorited favButton">Favorite</div>
{% else %}
<div class="favorite favButton">Favorite</div>
<div class="favorited favButton" style="display:none;">Favorite</div>
{% endif %}
</div>
and
<div class="favButtonHolder" alt="{% url inturl result.object.id %}">
{% if result.object in user.get_profile.favorites.all %}
<div class="favorite favButton" style="display:none;">Favorite</div>
<div class="favorited favButton">Favorite</div>
{% else %}
<div class="favorite favButton">Favorite</div>
<div class="favorited favButton" style="display:none;">Favorite</div>
{% endif %}
</div>
And some matching jQuery:
$(document).ready(function() {
// Selecting Favorites
$('.favButtonHolder').click(function() {
var container = $(this);
$.get( container.attr('alt'), {'fav': 1}, function() {
container.find('.favButton').toggle();
});
});
});
For some reason, when I toggle on the first bit of code, it works just fine. It hides the proper div and displays the proper div.
For some unknown reason, when I toggle on the second bit of code, it flips for just a few milliseconds and then flips back (hidden becomes block, and then hidden almost immediately, and vice versa). It is executing the GET, but not toggling properly.
Why would this happen?
Making an answer out of my comment
Check your JavaScript files to see if you've duplicated the code you posted. If it's present in two places, when the .click() event fires, two GET requests and two .toggle()s will be triggered, cancelling each other out in respect to the latter. Check your JS files for duplicate code (as you have) and remove it to fix your problem.