Develop Reference

Javascript remove class="d-none" function not defined HTMLSpanElement.onclick (Uncaught ReferenceError)

I'm trying to link a Javascript remove function (i.e. the ability to hide/unhide a dropdown menu) from a button on my website's navigation bar. When I run my server clicking the button doesn't do anything, and my console is giving me an Uncaught ReferenceError:
Uncaught ReferenceError: showNotifications is not defined
at HTMLSpanElement.onclick ((index):61:135)
social.js:
function showNotifications() {
const container = document.getElementById('notification-container');
if (container.classList.contains('d-none')) {
container.classList.remove('d-none');
} else {
container.classList.add('d-none');
}
}
The HTML document the function is linked to:
show_notifications.html:
<div class="dropdown">
<span class="badge notification-badge" style="background-color: #d7a5eb;" onclick="showNotifications()">{{ notifications.count }}</span>
<div class="dropdown-content d-none" id="notification-container">
{% for notification in notifications %}
{% if notification.post %}
{% if notification.notification_type == 1 %}
<div class="dropdown-item-parent">
#{{ notification.from_user }} liked your post
<span class="dropdown-item-close">×</span>
</div>
{% elif notification.notification_type == 2 %}
<div class="dropdown-item-parent">
#{{ notification.from_user }} commented on your post
<span class="dropdown-item-close">×</span>
</div>
{% endif %}
{% elif notification.comment %}
{% if notification.notification_type == 1 %}
<div class="dropdown-item-parent">
#{{ notification.from_user }} liked on your comment
<span class="dropdown-item-close">×</span>
</div>
{% elif notification.notification_type == 2 %}
<div class="dropdown-item-parent">
#{{ notification.from_user }} replied to your comment
<span class="dropdown-item-close">×</span>
</div>
{% endif %}
{% else %}
<div class="dropdown-item-parent">
#{{ notification.from_user }} has started following you
<span class="dropdown-item-close">×</span>
</div>
{% endif %}
{% endfor %}
</div>
</div>
I've tried to remain concise, but please let me know if you need any further code to identify the issue :)

Django - Why does this TableView has two paginators?

In my Django project I have a view that has two paginators, and I can't identify where each of them comes from. They look like this:
I want to delete one of them, but I realized they are not working the same way.
The one above to the right always paginates 25 results (10 on the first, 10 on the second and 5 on the third page.
The one below seems to be dividing the whole queryset in sets of 25, which then the other paginator iterates over.
So, for example, if I have 100 rows, the paginator below says there's 4 pages. If I select the number 2 in that paginator, the paginator on the right iterates over those 25 rows, and not the whole queryset.
My view looks like this:
class ClientTableView(AdminPermissionsMixin, PagedFilteredTableView):
model = Client
table_class = ClientTable
template_name = 'users/client/client_table.html'
filter_class = ClientFilter
formhelper_class = ClientFormHelper
exclude_columns = ('actions',)
export_name = 'regiones'
def get_context_data(self, **kwargs):
context = super(ClientTableView, self).get_context_data(**kwargs)
context['allows_user_creation'] = self.request.user.users_permission == '2'
return context
def get_queryset(self, **kwargs):
qs = super(ClientTableView, self).get_queryset()
qs = qs.filter(allows_credit=False)
return qs
The template client_table.html looks like this:
{% extends "table.html" %}
{% load staticfiles %}
{% block users_active %}active{% endblock %}
{% block page_title %}Clientes{% endblock page_title %}
{% block table_title %}Lista de clientes{% endblock %}
{% block breadcrumb %}
{{ block.super }}
<li class="breadcrumb-item accordion active">Lista de clientes</li>
{% endblock %}
{% block table_actions %}
<a href="{% url "credit_client_list" %}" class="mb-sm btn btn-primary" style="margin-right: 10px">Clientes
cartera</a>
{% if allows_user_creation %}
<i class="fa fa-plus-square"></i>Agregar cliente
{% endif %}
{{ block.super }}
{% endblock %}
{% block js %}
<script src="{% static "js/table-spanish.js" %}"></script>
{% endblock %}
And table.html looks like this:
{% extends "base.html" %}
{% load django_tables2 crispy_forms_tags staticfiles %}
{% block content %}
<div class="card card-custom gutter-b">
<div class="card-header flex-wrap py-3">
<div class="card-title">
<h3 class="card-label">
<i class="fas {% block table_icon %}fa-list-alt{% endblock %}"></i>
{% block table_title %}{% endblock %}
</h3>
</div>
<div class="card-toolbar">
{% block table_actions %}
{% if object_list|length > 0 %}
<div class="dropdown dropdown-inline ml-2">
<button type="button" class="btn btn-light-primary font-weight-bolder dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-file-export"></i>Exportar
</button>
<!--begin::Dropdown Menu-->
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right" style="">
<!--begin::Navigation-->
<ul class="navi flex-column navi-hover py-2">
<li class="navi-header font-weight-bolder text-uppercase font-size-sm text-primary pb-2">
Elige una opción:
</li>
<li class="navi-item">
<a href="{% url 'export_pdf' "local" %}" class="navi-link">
<span class="navi-icon">
<i class="far fa-file-pdf"></i>
</span>
<span class="navi-text">PDF</span>
</a>
</li>
<li class="navi-item">
<a href="{% url 'export_xlsx' "local" %}" class="navi-link">
<span class="navi-icon">
<i class="far fa-file-excel"></i>
</span>
<span class="navi-text">XLSX</span>
</a>
</li>
</ul>
<!--end::Navigation-->
</div>
<!--end::Dropdown Menu-->
</div>
{% endif %}
{% endblock %}
</div>
</div>
<div style="display: inline-block">
{% block table_statistics %}{% endblock %}
</div>
<div class="card-body">
{% block body_table %}
<div class="row">
<div class="col-sm-12 col-md-12 mb-5">
<div id="datatable1_filter" class="dataTables_length">
{% crispy filter.form %}
{# <label>Buscar:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="DataTables_Table_0"></label>#}
</div>
</div>
</div>
<form action="{% block url_table_actions %}{% endblock %}" method="post" id="action">
{% csrf_token %}
{% block table %}
{% render_table table "django_tables2/bootstrap4.html" %}
{% endblock %}
<input type="hidden" name="command" id="command"/>
</form>
{% endblock %}
{% block table_bottom %}
{% endblock table_bottom %}
</div>
</div>
{% endblock %}
{% block js %}
{# <script src="{% static "js/datatables.bundle.js" %}"></script>#}
<script src="{% static "js/basic.js" %}"></script>
{% endblock %}
WHAT I KNOW
I identified that the paginator on the right, is added by the line <script src="{% static "js/table-spanish.js" %}"></script> in client_table.html, and if I remove that line, that paginator disappears, and the other one iterates correctly over the whole queryset.
However, I would really like to keep that line, since it also gives me other functionalities which I'd rather keep simple.
I'd like to identify what line or library could be responsible for the other paginator, the one below and, if possible, delete that one instead and let the paginator on the right iterate over the whole queryset.

I think you're right side pagination is datatables.js and the lower pagination is from Django-tables2. Django-tables2 is going to give you pagination for that by default, you can easily disable it.
https://django-tables2.readthedocs.io/en/latest/pages/pagination.html#disabling-pagination
Just add table_pagination = False
class ClientTableView(AdminPermissionsMixin, PagedFilteredTableView):
table_pagination = False
(django-filters' PagedFilteredTableView inherits from django-tables2' SingleTableView)

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

Add to Cart redirects to an Empty cart [Shopify]

I am facing problem in Add to cart button in my Website. (I am using Shopify).
Before this problem I had an add to cart button in my product page. When I click add to Cart button, my product is added into the cart. But you won't notice unless you look to the Cart icon in the top of the page which was impossible on mobile to see it while you're clicking it.
So my thoughts to improve it was to redirect to Cart page right after the click but I'm facing a problem. Some people when click on the Add to Cart button they're redirected to an Empty cart page.
First I tried to insert a code that I saw (and possibly is not the best one) on the bottom of my html file. And when I faced that problem I don't know why but I thought to insert the code on Google Tag Manager to load on all pages thinking that will resolve my problem. Wrong! All the same.
I'm not very good in javascript. I'm a designer but I've changed everything on this theme always trying to improve it.
I would love to have some Help please.
The Code that I was using at first was:
<script type="text/javascript">
document.getElementById("btnAddtocart").onclick = function () {
location.href = "/cart";
};
</script>
Then I thought I should insert a delay to the script and I changed the code to:
<script type="text/javascript">
setTimeout(function() {
document.getElementById("btnAddtocart").onclick = function () {
location.href = "/cart";
};
}, 750);
</script>
Everything was the same. Some people would have products on cart and other people won't.
Please keep in mind that I don't know javascript. Maybe this script that I'm adding is not the best one and some type of cookie is lost in the process or something like that and maybe some devices/browsers lose the product information when they're redirected.
My product_1column.liquid code is:
<div class="product-single">
<div class="row">
<div class="col-md-5 col-sm-5">
<div class="product-media thumbnai-{{ thumbnai_position }}">
<div class="product-single-photos pull-{{ thumbnai_position }}">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<!-- ZOOM NO TOUCH -->
<a href="{{ featured_image | img_url: 'master' }}" class="cloud-zoom" data-rel="position: 'inside', useWrapper: false, showTitle: false, zoomWidth:'auto', zoomHeight:'auto', adjustY:0, adjustX:10">
<img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" title="Optional title display">
</a>
</div>
<!--<p class="visible-sm visible-xs a-center">Click on the image to zoom</p>-->
<div class="more-views">
<div class="swiper-container" data-margin="10" data-items="5" data-xs-items="5" data-direction="{% if thumbnai_position == "none" %}horizontal{% else %}vertical{% endif %}" >
<div class="swiper-wrapper">
{% for image in product.images %}
<div class="swiper-slide">
<a href="{{ image.src | img_url: 'master' }}" class="thumb-link" title="" data-rel="{{ image.src | img_url: '1024x1024' }}">
<img src="{{ image.src | img_url: 'medium' }}" alt="{{ image.alt | escape }}">
</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-sm-7">
<div class="product-info">
<h1 itemprop="name">{{ product.title }}</h1>
{% if product_review %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
{% if product.available %}
{% comment %} <span class="available instock"><i class="fa fa-check-square-o"></i>{{ 'products.product.inStock' | t }}</span>{% endcomment %}
{% else %}
<span class="available outofstock"><i class="fa fa-check-square-o"></i>{{ 'products.product.outOfStock' | t }}</span>
{% endif %}
{% if product_vendor %}
<span class="product-vendor">{{ 'products.product.vendor' | t }}{{ product.vendor }}</span>
{% endif %}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% assign variant = product.selected_or_first_available_variant %}
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<div class="product-single-prices">
<span id="ProductPrice" class="price" itemprop="price">
{{ product.price | money }}
</span>
{% if product.compare_at_price > product.price %}
<s id="ComparePrice" class="product-single-sale">
{{ product.compare_at_price_max | money }}
</s>
{% endif %}
</div>
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<div class="product-options {% unless settings.color_swatch %} linked-options{% endunless %}">
<select name="id" id="productSelect" class="product-single-variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% if settings.color_swatch %}
{% if product.available and product.variants.size > 1 %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
{% endif %}
</div>
<div class="product-actions">
<div class="product-single-quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %}">
<label class="label" for="Quantity">{{ 'products.product.quantity' | t }}</label>
<div class="quantity">
<span class='qtyminus' data-field='quantity'><i class="fa fa-angle-down"></i></span>
<input type='text' id="Quantity" data-field='quantity' name='quantity' value='1' class='quantity-selector' />
<span class='qtyplus' data-field='quantity'><i class="fa fa-angle-up"></i></span>
</div>
</div>
{% if product.available %}
<button type="submit" name="add" id="btnAddtocart" class="btn btn-primary btn-addToCart">
{{ 'products.product.add_to_cart' | t }}
</button>
{% else %}
<input type="submit" name="add" class="btn btn-primary btn-addToCart" id="product-addTocart" disabled value="{{ 'products.product.unavailable' | t }}">
{% endif %}
<div class="product-wishlist">
{% include 'add-to-wishlist' %}
</div>
</div>
</form>
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% if settings.social_sharing_products %}
<div class="product-sharing">
{% include 'social-sharing' %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% include 'product-info' %}
{% if settings.related_product %}
{% include 'related-products' %}
{% endif %}
Plus, this theme have a .js file that I think is super relevant to this problem:
https://privatebin.net/?28b4693d0a1e0a73#/JycpCfEEeAqmn2Fr/5+99VgOMilFkS3jMZz/3EQm5g=
And the original theme is http://gred-themes.com/landingpage/simolux/ so you can see how it was in the beginning.
Thank you in advance for your help.

When you do location.href='/cart' you are instructing the browser to jump to the cart. An empty cart is an empty cart if you go there.
Instead you want to submit the form with the added product(s) to the cart, in which case Shopify will add the products in the form to the cart, and in some cases may transfer the browser to the cart.
Sorry if that is confusing, but from your code, it seems you are indeed just sending yourself to the cart, without taking the time to add the products to the cart that you want to buy.
So to sum up.. you have a submit button that is supposed to submit the cart. Just let it do it's thing. Take out your event listener for onclick. You do nothing with that anyway, so get rid of it. Or in your click listener, do whatever you want, but also submit the form!! So you have to get a reference to the form, and use the submit() on it...

How to add variants to my cart - Storenvy

I am having difficulty getting my variants to carry over to my shopping cart on my product page for my custom storenvy store.
Any help would be much appreciated! I am not much a of a coder. I think I am close, but I could be wrong.
Here is the code I am using and the link to the live page is: http://apricotmantle.storenvy.com/collections/259687-merch/products/17058861-bloody-beach-zombie-limited-edition-pinup-print
CODE:
<div class="slide products_{{product.id}} active">
<div class="home-content">
<img class="artwork" src {{product.photo.url}}" alt="{{product.name | escape }}" />
<div class="artworkContent">
<h1>{{ product.name }}</h1>
<div id="add_notice" style="display:none;"></div>
{% if product.description != blank %}
{{ product.description | auto_link | paragraphs }}
{% endif %}
{% if product.image_count > 1 %}
<div id="slider-code">
<div class="viewport">
<ul class="overview" id="thumbs">
{% for photo in product.photos offset:1 limit:3 %}
<li>
<a href="{{photo.url}}" class="product_thumb" {%if forloop.first %}id="first_thumb" {%endif%} rel="product_photos">
<img src="{{photo.medium_url}}" height="100" width="145" alt="{{product.name | h}} - Thumbnail {{forloop.index}}"/>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if product.coming_soon %}
<h3>Coming soon!</h3>
{% else %}
{% for variant in product.variants limit:1 %}
<div class="add {{ variant.status }}">
{% if variant.quantity < 1 %}
<img src="/themes/default/images/btn_sold_out-v2.png" />
{% else %}
<p id="price">{{ product.price | money_with_sign }}</p>
<form id="add-to-cart" action="/cart/add" method="post" >
<select id="variant-select">
<option>Product Options</option>
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{variant.title }} for {{ variant.price | money}}</option>
{% endfor %}
</select>
<input type="image" name="add" value="Purchase" id="purchase" src="{{ 'purchase.png' | asset_url}}" />
<span id="product-price">{{ product.price | money }}</span>
</form>
{% endif %}
</div><!-- end .add -->
<div class="{{ product.css_class }}">
{% if product.on_sale %}<div class="sale">On Sale</div>{% endif %}
{% if product.preorder %}<div class="preorder">Pre-Order</div>{% endif %}
{% if product.coming_soon %}<div class="soon">Coming Soon</div>{% endif %}
{% if product.sold_out %}<div class="soldout">Sold Out</div>{% endif %}
</div>
{% endfor %}
{% endif %}
Storenvy Marketplace Page
<!--<h6>Share This</h6>
<div id="share_product">
{{ product | facebook_like_button }}
{{ product | tweet_button }}
{{ product | wanelo_button }}
{{ product | pinterest_button }}
<hr/>
</div>-->
</div><!-- end .product_info --></div>
</div>