Develop Reference

SHOPIFY IF statement - Change imagery within div based on product tag for main product

We're having some difficulties writing an IF statement in which selects an img based on the product tags of the main product from the product page.
We need the product colours of the 4 items in the div below to match that of the main product - We thought an IF statement would be the best option for achieving this.
UPDATE: Strict rules based on capitalisation have been checked.
{%- if product.tags contains 'Colour - Black' and 'Leather' -%}
<div class="FeaturedProduct__Gallery">
<a href="#">
<img src="BLACK PRODUCT IMG" width:auto;>
</a>
</div>
<div class="FeaturedProduct__Info">
<div class="ProductMeta">
<h1 class="ProductMeta__Title Heading u-h6" style="font-weight: 600">HEADING</h1>
<div class="ProductMeta__PriceList Heading">
<span class="ProductMeta__Price Price Text--subdued u-h6">{{ 7999 | money_without_trailing_zeros }}</span>
</div>
</div>
<div class="FeaturedProduct__ViewWrapper">
<div class="Text--subdued">DESCRIPTION</div>
</div>
<div class="ProductForm">
<button type="button" class="ProductForm__AddToCart Button Button--secondary Button--full">
BUTTON TEXT
{%- if section.settings.show_price_in_button -%}
<span class="Button__SeparatorDot"></span>
<span>{{ 7999 | money_without_trailing_zeros }}</span>
{%- endif -%}
</button>
</div>
</div>
{%- endif -%}
{%- if product.tags contains 'Colour - Tan' and 'Leather' -%}
<div class="FeaturedProduct__Gallery">
<a href="#">
<img src="TAN PRODUCT IMAGE" width:auto;>
</a>
</div>
<div class="FeaturedProduct__Info">
<div class="ProductMeta">
<h1 class="ProductMeta__Title Heading u-h6" style="font-weight: 600">HEADING</h1>
<div class="ProductMeta__PriceList Heading">
<span class="ProductMeta__Price Price Text--subdued u-h6">{{ 7999 | money_without_trailing_zeros }}</span>
</div>
</div>
<div class="FeaturedProduct__ViewWrapper">
<div class="Text--subdued">Perfect for Day | Evening</div>
</div>
<div class="ProductForm">
<button type="button" class="ProductForm__AddToCart Button Button--secondary Button--full">
BUTTON TEXT
{%- if section.settings.show_price_in_button -%}
<span class="Button__SeparatorDot"></span>
<span>{{ 7999 | money_without_trailing_zeros }}</span>
{%- endif -%}
</button>
</div>
</div>
{%- endif -%}

We've tried all avenues we are aware to get this to function however we fear without js this will not work as intended.
Anyone have a js script in which we can dictate the products rendered by product tag and limit to 4 values?

Cant figure out infinite scrolling with Waypoints

Trying to apply infinite scrolling using Waypoints but cant seem to get it working.
I have the following scripts loaded in my base.html after downloading them and saving in my static folder:
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
Then I have the following code in my template exteded from the base:
{% extends "base.html" %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'home/main.css' %}">
{% endblock css %}
{% block content %}
<br>
<div class="container status-update">
<div class="container">
<form>
<div class="input-group-lg">
<input type="text" class="form-control" value="What's new?">
</div>
<br style="height:20px">
<button type="submit" class="btn btn-primary btn-lg" name="button">Post</button>
</form>
</div>
</div>
<br>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #6298bf">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-link active" href="{% url 'home' %}">Activity Feed</a>
<a class="nav-link" href="{% url 'vehicle_updates' %}">Vehicle Updates<span class="sr-only">(current)</span></a>
<a class="nav-link" href="/space.html">Garage Updates</a>
</div>
</div>
</nav>
</div>
<br>
<div class="container">
<div class="primary-segments">
<h2>Activity Updates</h2>
<div class="infinite-container">
{% for post in posts %}
<div class="infinite-item">
<div class="card m-3">
<div class="card-body" style="background-color:#bdcade; padding-bottom:0px">
<div class="media mb-3">
<img src="{{ user.profile.image.url }}" class="d-block ui-w-40 rounded-circle" style="width:40px;height:auto;" alt="">
<div class="media-body ml-3">
<h5 style="color:#ffffff">{{ post.user.first_name }} {{ post.user.last_name }}</h5>
<div class="small text-muted">Yesterday</div>
</div>
</div>
</div>
{% if post.image %}
<img src="{{ post.image.url }}" class="card-img-top" alt="">
{% endif %}
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.content }}</p>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary">Like</button>
<button type="button" class="btn btn-secondary">Comment</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
{% endif %}
</div>
</div>
<script type="javascript">
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0]
});
</script>
{% endblock content %}
When I run the server and load the page, it just shows a `more' button at the bottom of the page that I can click on to take me to the next group of objects (set pagination to 3 in the view).
Doesn't look like it is throwing any errors in the console when I run the server, so I'm not sure where to look next for the problem. Any help would be much appreciated.

Figured it out.
Moved the the JS script tags from the bottom of the body up into the head and it started working. Wasn't aware of this location dependency.

jQuery's fadeToggle() selects more elements than desired

$(document).ready(function(event) {
$(".reply-btn").click(function() {
$(".section-row-reply").closest(".section-row-reply").fadeToggle();
});
});
I have a for-loop that generates the following:
comments
replies
reply form.
I want the jquery function,fadeToggle() to reveal the reply form for each comment when the reply button is clicked
<!-- jquery 2.2.4 -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<!-- bootstrap 3.3.7 -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<!-- post comments -->
<div class="section-row">
<div class="section-title">
<h3 class="title">{{ comments.count }} Comment{{ comments|pluralize }}</h3>
</div>
<div class="post-comments">
{% for comment in comments %}
{% if comment %}
<!-- comment -->
<div class="media">
<div class="media-left">
<img class="media-object" src="{{ comment.profile_picture.url }}" alt="">
</div>
<div class="media-body">
<div class="media-heading">
<h4>{{ comment.user }}</h4>
<span class="time">{{ comment.timestamp }}</span>
</div>
<p>{{ comment.content }}</p>
<div class="rely-button">
<button type="button" name="button" class="reply-btn btn btn-outline-dark btn-sm" id="reply-button">Reply</button>
</div>
<br>
<!-- display replies to the comment -->
{# reply per comment #}
{# all replies to comments will be shown below the comment #}
{% if comment.replies %}
{% for reply in comment.replies.all %}
<div class="media-replies pull-right">
<div class="media-left">
<img class="media-object" src="{{ reply.profile_picture.url }}" alt="">
</div>
<div class="media-body">
<div class="media-heading">
<h4>{{ reply.user }}</h4>
<span class="time">{{ reply.timestamp }}</span>
</div>
<p>{{ reply.content }}</p>
</div>
</div>
{% endfor %} {# endfor comment.replies #}
{% endif %} {# endif comment.replies #}
<!-- /display replies to parent comment -->
{# after replies have been shown, we can have the reply-comment-form #}
{% if user.is_authenticated %}
<!-- post reply -->
<div class="section-row-reply pull-right" style="display:none" id="show-reply-form">
<form class="post-reply" method="post">
{% csrf_token %}
<input type="hidden" name="comment_id" value="{{ comment.id }}">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="input" name="content" placeholder="Reply here..."></textarea>
</div>
</div>
<div class="col-md-12">
<button class="primary-button" value="submit" type="submit">Reply</button>
</div>
<!-- form_errors -->
{{ comment_form.errors }}
</div>
</form>
</div>
<!-- /post reply -->
{% endif %} {# endif user.is_authenticated #}
{# comments are display in the manner above in the div section #}
</div>
</div>
{% endif %} {# endif comment #}
{% endfor %} {# endfor comment in comments #}
</div>
</div>
<!-- /post comments -->
This is a django powered site hence the {% %}, {# #} and {{ }} at the html layer. The function works but not exactly. When any reply button is clicked (to display the reply form), other reply forms for other comments are displayed.
**The idea is to make the reply button for each comment display only the reply form for that comment. Any help will be greatly appreciated. I suspect my selection of elements at the jquery layer. **
all css are that of bootstrap 3.3.7

Removing bootstrap Modal from DOM

I am working on a piece of code to load part of my content dynamically after user triggers the event by clicking.
Case Scenario is: when user clicks on the post, it will open a modal and display the detailed view which is the dynamic generated content using the slug in the link. However, I need to remove the modal from the DOM when user closes the modal. for now i have only been able to hide it but I need to remove it.
here is my code.
PHP Laravel HTML Markup ():
<div class="content-blocks blog hidex">
<section class="content">
<div class="block-content">
<h3 class="block-title">My Blog</h3>
<div id="post-list" class="col-md-10 col-md-offset-1">
{% set posts = blogPosts.posts %}
{% for post in posts %}
<div class="post">
<div class="post-thumbnail">
{% if post.featured_images.count %}
{% set image = post.featured_images|first %}
<a class="open-post" href="{{'blog-post'|page}}">
<img
data-src="{{ image.filename }}"
src="{{ image.path }}"
alt="{{ image.description }}"
style="max-width: 100%"/>
</a>
{% endif %}
</div>
<div class="post-title">
<a class="open-post" href="{{ post.url }}"><h2>{{ post.title }}</h2></a>
<p class="post-info">
<span class="post-author">Posted by {{ post.user.first_name}} </span>
<span class="slash"></span>
<span class="post-date">on {{ post.published_at|date('M d, Y') }}</span>
<span class="slash"></span>
{% if post.categories.count %} in {% endif %}
{% for category in post.categories %}
<span class="post-category">{{ category.name }}</span>
{% if not loop.last %}, {% endif %}
{% endfor %}
</p>
</div>
<div class="post-body">
<p>{{ post.summary }}</p>
<a class="btn open-post" href="{{ post.url }}">Read More</a>
</div>
</div>
{% endfor %}
<div class="text-center">
{% if posts.lastPage > 1 %}
<ul class="pagination">
{% if posts.currentPage > 1 %}
<li>
<a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}"
aria-label="Previous">
<span aria-hidden="true">«</span>
</a></li>
{% endif %}
{% for page in 1..posts.lastPage %}
<li class="{{ posts.currentPage == page ? 'active' : null }}">
{{ page }}
</li>
{% endfor %}
{% if posts.lastPage > posts.currentPage %}
<li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}"
aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</section>
</div>
JavaScript:
//Blog post Modal
$('.open-post').on('click', function(){
var postUrl = $(this).attr("href");
var post = '<div class="modal" id="post-modal"><div class="inline-menu-container"><a id="modal-close" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></a></div><div class="modal-dialog"><div class="modal-content"></div></div></div>';
$(post).modal({
remote: postUrl
})
return false;
});
// close the modal
$('#close').on( 'click', function() {
$('.name-block').removeClass('reverse');
$('.name-block-container').removeClass('reverse');
$('.menu-blocks').removeClass('hidex');
$('.content-blocks').removeClass('showx');
$('.content-blocks').addClass('hidex');
$('.inline-menu-container').removeClass('showx');
$('.inline-menu-container').addClass('hidex');
$('.menu-item').removeClass('active');
});
result of Javascript code in the DOM:
<div class="modal in" id="post-modal" style="display: block; padding-left: 0px;">
<div class="inline-menu-container">
<a id="modal-close" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></a>
</div>
<div class="modal-dialog">
<div class="modal-content">
/// all the dynamic content in the modal
</div>
</div>
Now I need to remove this result without refreshing the page.
Update:
This is how it looks in the HTML in Inspect after closing the modal:
Note:
I tried to remove the modal content from the DOM using the #post-modal id but wasn't successful. also, i haven't been able to find an example of using Delegate while the modal elements and content are completely added by javascript after loading the 'DOM'.

Bind an event and then remove().
$('.modal').on('hidden.bs.modal', function () {
$(this).remove();
});
or
$('.modal').on('hidden.bs.modal', function () {
$('.modal').remove();
});

Thanks to I.G. Pascual and Serg Chernata here is the solution:
Javascript code:
$(document).on('hidden.bs.modal', '.modal', function () { $("#post-modal").remove(); $(".modal-dialog").remove(); });

you can try this
$(modal).modal().on('hidden.bs.modal',function(e){
e.target.remove();
})
you can directly add the hidden event on the initialization itself. so you don't have to trigger separately each time.

Below given snippet will show you how can you do something that you want without having to do anything extra and also by not even writing conventional bootstrap modal code.
For further reference you can also visit this link. It will show you how you can create modal dynamically with minimum efforts.
function open_modal(name) {
var message = $('#frm_1');
BootstrapDialog.show({
title: 'New message to ' + name,
message: $('#frm_1'),
onshown: function() {
$('#recipient-name').val(name);
},
onhide: function(dialog) {
console.log('Cerrada');
$('#hidden-div').append(message);
},
buttons: [{
label: 'Close',
action: function(dialog) {
dialog.close();
}
}, {
label: 'Send message',
cssClass: 'btn btn-primary',
action: function(dialog) {
// Do whatever send message does, here
}
}]
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<button type="button" class="btn btn-primary" onclick="open_modal('#mdo')">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" onclick="open_modal('#fat')">Open modal for #fat</button>
<button type="button" class="btn btn-primary" onclick="open_modal('#getbootstrap')">Open modal for #getbootstrap</button>
<div id="hidden-div" style="display : none">
<form id="frm_1">
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>

Include template with dynamic Django form

I have a model with a choices field, and the creation form has different fields depending on the field. I'm implementing the design of a dashboard in which the user can click a button (one button for each choice) and a model containing the model form will be displayed.
I want to use a template only for the model and send the form and action URL to it depending on which button the user clicks, but that would mean I have to mix JS and Django variables and I don't know if that's a good idea.
The code right now is something like this:
dashboard.html
<div class="add-connections">
<div class="col-sm-3 text-center" >
<div class="connection-box">
{% if user_connections.EP %}
<img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
{% else %}
Activate
{% endif %}
</div>
</div>
<div class="col-sm-3 text-center" >
<div class="connection-box">
{% if user_connections.OLX %}
<img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
{% else %}
Activate
{% endif %}
</div>
</div>
<div class="col-sm-3 text-center" >
<div class="connection-box">
{% if user_connections.CC %}
<img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
{% else %}
Activate
{% endif %}
</div>
</div>
<div class="col-sm-3 text-center" >
<div class="connection-box">
{% if user_connections.FR %}
<img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
{% else %}
Activate
{% endif %}
</div>
</div>
</div>
{% url 'create_olx_connection' as olx_url %}
{% url 'create_ep_connection' as ep_url %}
{% url 'create_cc_connection' as cc_url %}
{% url 'create_fr_connection' as fr_url %}
{% include "properties/dashboard/connection_modal.html" %}
connection_modal.html
<!-- Modal -->
<div class="modal fade modal-property" id="modal-new-connection" tabindex="-1" role="dialog" aria-labelledby="myConnectionModal">
<div class="modal-dialog" role="document">
<div class="modal-content panel-success">
<div class="modal-header panel-heading">
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-uppercase text-white"><b>Connections</b></h4>
</div>
<div class="modal-body">
<form action="{{ action_url }}"
{{ form.as_p }}
<div>
<button type="submit" class="btn btn-outline-success">Activate connection</button>
Cancel
</div>
</form>
</div>
</div>
</div>
</div>
views.py
def get_context_data(self, **kwargs):
context = super(
ManageServicesView, self).get_context_data(**kwargs)
...
context['connection_forms'] = {
'olx_form': OLXform(),
'el_pais_form': ElPaisForm(),
'finca_raiz_form': FincaRaizForm(),
'calicasa_form': CaliCasaForm()
}
return context
I want something like {% include "properties/dashboard/connection_modal.html" with form=chosen_form and action_url=chosen_url %} but I don't know how to link each button's click event with Django variables to be able to do that. I don't want to code a model for each option, I think it has to be a cleaner way. I'd appreciate your suggestions.

You could put a {% for ... %} loop in connection_modal.html to generate all the modals, with the correct forms, that you need. Than put a another for loop in dashboard.html to create the correct links.
Tweaking views.py:
context['connections'] = {
'OLX': {
'form' : OLXform(),
'user_connected': user_connections.OLX
},
'EP': {
'form' : ElPaisForm(),
'user_connected': user_connections.EP
},
# other connections here
}
dashboard.html:
{% for connection,data in user_connected.items %}
<div class="col-sm-3 text-center" >
<div class="connection-box">
{% if data.user_connected %}
<img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
{% else %}
Activate
{% endif %}
</div>
</div>
{% endfor %}
connection_modal.html:
{% for connection,data in user_connected.items %}
{% if not data.connected %}
<!-- Modal for {{connection}} -->
<div id="modal-new-connection-{{connection}}" class="modal fade modal-property" tabindex="-1" role="dialog" aria-labelledby="myConnectionModal">
<!-- modal code before form -->
{{ data.form }}
<!-- modal code after form -->
</div>
{% endif %}
{% endfor %}
This should create as many modals as you need, each with their own id value, that can be called from the appropriate link. For example modal id "modal-new-connection-OLX" will be created with the OLX form and be called from the OLX link.