We Keep Coding

Shopify Login Form form.posted_successfully? not working

I would like to appear a text with a script if logging is successful. But right now my text is appeasers even user clicks the button or puts wrong login info. So i would like text to appear only if post is successful
<input id="login-button" type="submit" value="{{ 'customer.login.sign_in' | t }}" data-cc-animate data-cc-animate-delay="0.6s"/>
<p id="message"></p>
<script>
$("#login-button").click(function(){
$("#message").text("Please wait while we log you in...");
});
</script>
I would like to trigger code above if this condition is true
{%- if form.posted_successfully? -%}
<script>want to execute script here </script>
</p>
{%- endif -%}
Heres the full liquid of login form
<style>
.whatsAppIconDarkLoginRegister{
width: 18%;
border: 1px solid #f4f4f4;
border-radius: 50px;
}
.whatsAppIconDarkLoginRegister:hover{
border: 1px solid #2b2b2b;
border-radius: 50px;
}
#media (max-width: 428px) {
.whatsAppIconDarkLoginRegister {
width: 50%;
}
}
.becomePartner{
color: #9b8642;
margin-top: -5px !important;
padding-bottom: 15px;
}
.login-page-call , .login-page-email {
font-style: italic;
padding: 5px;
}
.login-page-call:hover , .login-page-email:hover {
font-style: italic;
color: #9b8642 !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px !important;
}
.login-page-contact-div{
font-size: 14px;
padding-bottom:10px;
}
</style>
<div class="content" id="template">
<div id="customer">
<div class="template_header">
<h1 class="h2 feature-header" data-cc-animate>{{ 'customer.login.title' | t }}</h1>
</div>
{% form 'customer_login' %}
<div data-cc-animate data-cc-animate-delay="0.2s">
{{ form.errors | default_errors }}
</div>
<div class="container text-center" id="needAsisstance">
<div class="row">
<div class="col">
<h6>Need Assistance ?</h6>
<div class="login-page-contact-div">
<p>
Call us
<span class="login-page-call">+1 786 633 19 38</span>
<span>/</span>
<a hhref="tel:+17866331298"><span class="login-page-call">+1 786 633 12 98</span></a>
<span>or email us at</span><br>
<span class="login-page-email">contact#arditicollection.com</span>
</p>
</div>
<div id="whatsAppCall"></div>
</div>
</div>
</div>
<div class="form">
<div id="login_email" class="input-row" data-cc-animate data-cc-animate-delay="0.2s">
<input aria-label="{{ 'customer.login.email' | t }}" placeholder="{{ 'customer.login.email' | t }}"
type="email" value="" name="customer[email]" id="customer_email" class="large" size="30"/>
</div>
{% if form.password_needed %}
{% comment %}
Customer Account Login
{% endcomment %}
<div id="login_password" class="input-row">
<input aria-label="{{ 'customer.login.password' | t }}" placeholder="{{ 'customer.login.password' | t }}"
type="password" value="" name="customer[password]" id="customer_password" class="large password"
size="16" data-cc-animate data-cc-animate-delay="0.35s"/>
<div id="forgot_password" data-cc-animate data-cc-animate-delay="0.5s">
<a href="#"
onclick="showRecoverPasswordForm();return false;">{{ 'customer.login.forgot_password' | t }}</a>
</div>
</div>
{% endif %}
<div class="wide-action">
<input type="submit" value="{{ 'customer.login.sign_in' | t }}" data-cc-animate data-cc-animate-delay="0.6s"/>
<p class="note">
<a data-cc-animate-click href="{{ routes.account_register_url }}" data-cc-animate data-cc-animate-delay="0.75s">
{{ 'customer.login.register' | t }}
</a>
</p>
<span class="">
<a data-cc-animate-click href="https://www.arditicollection.com/pages/become-a-partner" data-cc-animate data-cc-animate-delay="0.9s">
<p class="becomePartner">Become A Partner</p>
</a>
</span>
<span class="note">
<a data-cc-animate-click href="{{ routes.root_url }}" data-cc-animate data-cc-animate-delay="0.9s">
{{ 'customer.login.return_to_store' | t }}
</a>
</span>
</div>
</div>
<input class="darshRedirect" type="hidden" name="checkout_url" value="{{ canonical_url }}" />
{% endform %}
</div>
{% comment %}
Recover Password Form
{% endcomment %}
<div id="recover-password" style='display:none'>
<div class="template_header align-center">
<h2 class="title">{{ 'customer.recover_password.title' | t }}</h2>
<p class="note">{{ 'customer.recover_password.subtext' | t }}</p>
</div>
{% form 'recover_customer_password' %}
{{ form.errors | default_errors }}
<div class="form">
<div id="recover_email" class="input-row">
<input aria-label="{{ 'customer.recover_password.email' | t }}" placeholder="{{ 'customer.recover_password.email' | t }}" type="email" value="" size="30" name="email" id="recover-email" class="large" />
</div>
<div class="wide-action">
<input type="submit" value="{{ 'customer.recover_password.submit' | t }}" />
<span class="note">{{ 'customer.recover_password.cancel' | t }}</span>
</div>
</div>
{% endform %}
</div>
{% comment %}
Guest Login form for shops with optional customer accounts. This form is displayed only when users click on the checkout link
on the cart page.
{% endcomment %}
{% comment %}
{% if shop.checkout.guest_login %}
<div id="guest">
<div class="template_header">
<h3 class="title">{{ 'customer.login.guest_title' | t }}</h3>
</div>
{% form 'guest_login' %}
<input type="submit" value="{{ 'customer.login.guest_continue' | t }}" />
{% endform %}
</div>
{% endif %}
</div>
{% endcomment %}
<script type="text/javascript">
function showRecoverPasswordForm() {
document.getElementById('recover-password').style.display = 'inline-block';
document.getElementById('customer').style.display='none';
}
function hideRecoverPasswordForm() {
document.getElementById('recover-password').style.display = 'none';
document.getElementById('customer').style.display = 'inline-block';
}
if (window.location.hash == '#recover') { showRecoverPasswordForm() }
</script>
<script>
let text;
if (Math.random() < 0.5) {
text = "<a href='https://wa.me/17866331938' target='_blank'><img src='https://cdn.shopify.com/s/files/1/0098/8318/9314/files/whatsAppIconDark.png?v=1671706870' class='img-fluid whatsAppIconDarkLoginRegister myimg' alt='Arditi Collection® WhastAppIcon'></a>";
} else {
text = "<a href='https://wa.me/17866331298' target='_blank'><img src='https://cdn.shopify.com/s/files/1/0098/8318/9314/files/whatsAppIconDark.png?v=1671706870' class='img-fluid whatsAppIconDarkLoginRegister myimg' alt='Arditi Collection® WhastAppIcon'></a>";
}
document.getElementById("whatsAppCall").innerHTML = text;
</script>
<script>
$(document).ready(function(){
var darshRef = document.referrer;
$('.darshRedirect').val(darshRef );
});
</script>

how can i close my side bar after clicking <a> tag in shopify?

These is codes that I used for HTML section
I didn't use JavaScript in this section
but there is CSS that I didn't add ,
I hope that you can help us to solve this issue
<div class="section--divider">
<div class="sideBar_container">
<input type="checkbox" class="menu_btn" id="menu_toggle">
<label for="menu_toggle" class="menu_icon">
<h4 class="video-coll">Videos Collection</h4>
<span class="menu"></span>
</label>
<div class="sideBar_overlay" id="sideBar_overlay">
<div class="sideBar" id="sideBar">
<h4 class="sideBar_title">{{section.settings.title}}</h4>
<input type="checkbox" class="menu_btn" id="menu_toggle" checked>
<label for="menu_toggle" class="inside_menu_icon menu_icon">
<span class="menu inside_menu"></span>
</label>
<div class="sideBar_inner">
<div class="top_menu">
<ul>
<div class="link_details">
<li><a class="link_title" id="bastesho" href="#video_text_block_{{ forloop.index }}">{{ block.settings.title }}</a>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="page-width">
<div class="section-header text-left">
<h2>{{ section.settings.title }}</h2>
</div>
<div class="">
<div class="index-section" id="video_text_block_{{ forloop.index }}">
<div class="page-width feature-row-wrapper">
<div class="feature-row__item" style="max-width: 530px" data-aos>
<div>
<div class="image-wrap" style="height: 0; padding-bottom:56.623%">
<iframe src="//www.youtube.com/embed/_9VUPq3SxOc?vq=720" width="530" height="300" frameborder="0" allowfullscreen></iframe>
<iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?vq=720" width="530" height="300" frameborder="0" allowfullscreen></iframe>
<iframe src="//player.vimeo.com/video/{{ block.settings.video_url.id }}?color={{ settings.color_button | remove: "#" }}&byline=0&portrait=0&badge=0" width="530" height="300" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="feature-row">
<div class="feature-row__item feature-row__text feature-row__text--{{ block.settings.layout }} text-{{ block.settings.align_text }}" data-aos>
<div class="subheading appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.subtitle }}</div>
<div class="h1 appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.title | escape }}</div>
<div class="rte appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.text }}</div>
<div class="appear-delay{% cycle '','-1','-2','-3','-4' %}">
<a href="{{ block.settings.button_link }}" class="btn{% if block.settings.button_style == 'secondary' %} btn--tertiary{% endif %}">
{{ block.settings.button_label }}
</a>
</div>
</div>
{{ video_layout }}
</div>
</div>
</div>
</div>
</div>
I didn't use JavaScript in this section
but there is CSS that I didn't add ,
I hope that you can help us to solve this issue
i want to close sidebar after clicking tag (link) on mobile view

How to change the id of any tag wiht javascript?

Html Code:-
{% for post in posts %}
<article class="media content-section">
<div class="media-body">
<h2><a id="post_title" class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}</a></h2>
<div class="article-metadata">
<a class="mr-2" href="{% url 'blog-profile' name=post.author %}">{{ post.author }}</a>
<div class="float-right">
<small class="text-muted">Category</small>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<div style="float:right;">
<img style="height:19px; width:18px;" src="{% static "blog/viewicon.png" %}">
<p style="float: right; display: inline !important;" id="ViewCount">
</p>
</img>
</div>
</div>
<p class="article-content">{{ post.content|truncatechars:200|safe }}</p>
</div>
<script>
function changeid ()
{
var e = document.getElementById('post_title');
e.id = 'post_title_1';
var e = document.getElementById('ViewCount');
e.id = 'ViewCount_1';
}
</script>
</article>
{% endfor %}
I am trying to change the id of those two tags but, this script doesn't seem to work, or it's been not exected. I want to change that id because I want to insert some data to them from the server. Since we can't have the same id the data which I am trying to embed is embedded by defaut to only the first run of the loop.

You don't need to change the id in each iteration using JavaScript. You can achieve the same using Django's inbuilt forloop.counter template tag.
( https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#for )
So in your case, it would be something like:
{% for post in posts %}
<article class="media content-section">
<div class="media-body">
<h2><a id="post_title_{{ forloop.counter }}" class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}</a></h2>
<div class="article-metadata">
<a class="mr-2" href="{% url 'blog-profile' name=post.author %}">{{ post.author }}</a>
<div class="float-right">
<small class="text-muted">Category</small>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<div style="float:right;">
<img style="height:19px; width:18px;" src="{% static " blog/viewicon.png " %}">
<p style="float: right; display: inline !important;" id="ViewCount__{{ forloop.counter }}">
</p>
</img>
</div>
</div>
<p class="article-content">{{ post.content|truncatechars:200|safe }}</p>
</div>
</article>
{% endfor %}

Use an IIFE - An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.
<script>
(() => {
let a = document.getElementById('post_title');
a.setAttribute("id", 'post_title_1');
let b = document.getElementById('ViewCount');
b.setAttribute("id", 'ViewCount_1');
})();
</script>

try using document.getElementById('footer').setAttribute('id','post_title_1')
Also Make sure you are calling the changeid() function
{% for post in posts %}
<article class="media content-section">
<div class="media-body">
<h2><a id="post_title" class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}</a></h2>
<div class="article-metadata">
<a class="mr-2" href="{% url 'blog-profile' name=post.author %}">{{ post.author }}</a>
<div class="float-right">
<small class="text-muted">Category</small>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<div style="float:right;">
<img style="height:19px; width:18px;" src="{% static "blog/viewicon.png" %}">
<p style="float: right; display: inline !important;" id="ViewCount">
</p>
</img>
</div>
</div>
<p class="article-content">{{ post.content|truncatechars:200|safe }}</p>
</div>
<script>
function changeid ()
{
document.getElementById('post_title').setAttribute('id','post_title_1');
document.getElementById('ViewCount').setAttribute('id','ViewCount_1')
}
</script>
</article>
{% endfor %}

Cannot read property 'submit' of null i use laravel and javascript

I want to add a product to my favorites, but I do not want to make a load for the entire page, so I use JavaScript as shown in the code where I made an ancor disruption and created a form and took an id from the form and implemented it by using the submit function, but the following error appears and does
Uncaught TypeError: Cannot read property 'submit' of null
Please advise the importance
Thank you
this view
<div class="product-info">
<div class="tab-content" id="myTabContent">
<!-- Start Single Tab -->
<div class="tab-pane fade show active" id="man" role="tabpanel">
<div class="tab-single">
<div class="row">
#foreach($products as $p)
<div class="col-xl-3 col-lg-4 col-md-4 col-12">
<form action="{{route('cart.store')}}" method="post" id="add-cart-{{$p->id}}">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{$p->id}}">
<input type="hidden" name="Product_Name_ar" value="{{$p->Product_Name_ar}}">
<input type="hidden" name="Price" value="{{$p->Price}}">
<div class="single-product">
<div class="product-img">
<a href="{{route('product', ['product' => $p->id])}}">
<img class="default-img" src="{{ asset('images/products/'.$p->image) }}" alt="#">
<img class="hover-img" src="{{ asset('images/products/'.$p->image) }}" alt="#">
</a>
<div class="button-head">
<div class="product-action">
#if(Auth::guard('customer')->check())
<span class="favorite-count">{{ $p->favorite_to_customers->count() }}</span>
<a title="Wishlist" href="javascript:void (0);" onclick="document.getElementById('favorite-{{$p->id}}').submit()" class="{{ Auth::guard('customer')->user()->favorite_products()->where('product_id', $p->id)->count() != 0 ? 'favorite' : '' }}">
<i class="fa fa-heart "></i><span>Add to Favorite</span></a>
<form id="favorite-{{$p->id}}" action="{{route('product.favorite', $p->id)}}" method="post">
{{ csrf_field() }}
</form>
#else
<span class="favorite-count">{{ $p->favorite_to_customers->count() }}</span>
<a title="Wishlist" href="javascript:void (0);" onclick="toastr.info('To add favorite list you to need login first', 'info', {
closeButton: true,
progressBar: true
})">
<i class="fa fa-heart "></i>
<span>Add to Favorite</span></a>
#endif
</div>
<div class="product-action-2">
<button style="background: transparent; border: none; color: black" class="btn btn-warning">Add to chart</button>
</div>
</div>
</div>
<div class="product-content">
<h3>{{ $p->Product_Name_ar }}</h3>
<div class="product-price">
<span>{{ $p->Price }} K.D</span>
</div>
</div>
</div>
</form>
</div>
#endforeach
</div>
</div>
</div>
<!--/ End Single Tab -->
</div>
</div>
This Controller
class Favoritecontroller extends Controller
{
public function add($id) {
$customer = Auth::guard('customer')->user();
$isFavorite = $customer->favorite_products()->where('product_id', $id)->count();
if($isFavorite == 0) {
$customer->favorite_products()->attach($id);
}else {
$customer->favorite_products()->detach($id);
}
return redirect()->back();
}
}
This Route
Route::group(['middleware' => ['auth:customer']], function () {
Route::post('favorite/{id}/add', 'FavoriteController#add')->name('product.favorite');
});

I assume your JS fails here
... onclick="document.getElementById('favorite-{{$p->id}}').submit()"
The proper way to do it
... onclick="addToWhishList({{$p->id}})"
Then in your JS
<script>
function addToWhishList(formId) {
//console.log(formId);
document.getElementById('favorite-' + formId).submit();
}
</script>
Check working Demo

Sort items by price on clicking dropdown

I have a dropdown and list of property. The dropdown contains two option, Low to High and High to Low. If any user clicks on any one of the dropdown item, the properties listed should sort by its price. How can I achieve that using javascript?
property.html
<div class="col-sm-6">
<div class="pxp-sort-form form-inline float-right">
<div class="form-group">
<select class="type-regular custom-select" id="pxp-sort-results" name="price-sorting">
<option value="" selected="selected disabled">Default Sort</option>
<option class="price-sorting" value="l2h" id="l2h">Price (Lo-Hi)</option>
<option class="price-sorting" value="h2l">Price (Hi-Lo)</option>
</select>
</div>
</div>
</div>
<div class="row products-grid">
{% for item in properties.all %}
<div class="col-sm-12 col-md-6 col-xxxl-4 product">
<a href="{% pageurl item %}" class="pxp-results-card-1 rounded-lg" data-price="{{ item.price }}" data-prop="1">
<div id="property-{{item.id}}" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
{% for j in item.prop_images.all %}
{% image j.prop_img original as property_img %}
<div class="carousel-item {% if forloop.first %} active {% endif %}" style="background-image: url('{{property_img.url}}')"></div>
{% endfor %}
</div>
<span class="carousel-control-prev" data-href="#{{item.prop_name}}" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
</span>
<span class="carousel-control-next" data-href="#property-{{item.id}}" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
</span>
</div>
<div class="pxp-results-card-1-gradient"></div>
<div class="pxp-results-card-1-details" id="prop-dtls">
<div class="pxp-results-card-1-details-title">{{item.prop_name}}</div>
<div class="pxp-results-card-1-details-price price">{{item.price}}</div>
</div>
<div class="pxp-results-card-1-features">
<span>{{item.bedroom}} BD <span>|</span> {{item.bathroom}} BA <span>|</span> {{item.sqft}} SF</span>
</div>
<div class="pxp-results-card-1-save"><span class="fa fa-star-o"></span></div>
</a>
</div>
{% endfor %}
</div>
The values are coming dynamically from backend.

You can either do this with Javascript (reordering the DOM elements) or with the response you get from your server.
JS:
function reverseChildren(parent) {
for (var i = 1; i < parent.childNodes.length; i++){
parent.insertBefore(parent.childNodes[i], parent.firstChild);
}
}
You can set add an onclick JS event handler on the parent DIV of the elements to reverse all the child elements.
Source: https://stackoverflow.com/a/37860657/3345051
OR
You can send a response back from the server using the .order_by() filter method with a flag in the request to determine if it is reverse or not.
For example:
Non-reverse - Item.objects.all().order_by('price')
Reversed - Item.objects.all().order_by('-price')
class ItemView(View):
def get(self, request, *args, **kwargs):
isReversed = '-price' if request.GET['reverse'] is True else 'price'
items = Item.objects.all().order_by(isReversed)
return JsonResponse(items)

The below code worked perfectly as I wanted.
$(document).on("change", ".price-sorting", function() {
var sortingMethod = $(this).val();
if(sortingMethod == 'l2h')
{
sortProductsPriceAscending();
}
else if(sortingMethod == 'h2l')
{
sortProductsPriceDescending();
}
});
function sortProductsPriceAscending()
{
var products = $('.product');
products.sort(function(a, b){
return $(a).data("price") - $(b).data("price")});
$(".products-grid").html(products);
}
function sortProductsPriceDescending()
{
var products = $('.product');
products.sort(function(a, b){ return $(b).data("price") - $(a).data("price")});
$(".products-grid").html(products);
}
HTML code
<div class="col-sm-6">
<div class="pxp-sort-form form-inline float-right">
<div class="form-group">
<select class="type-regular custom-select price-sorting" id="pxp-sort-results">
<option value="" selected="selected disabled">Default Sort</option>
<option value="l2h" id="l2h">Price (Lo-Hi)</option>
<option value="h2l">Price (Hi-Lo)</option>
</select>
</div>
<div class="form-group d-flex">
<a role="button" class="pxp-map-toggle"><span class="fa fa-map-o"></span></a>
</div>
</div>
</div>
<div class="row products-grid">
{% for item in properties.all %}
<div class="col-sm-12 col-md-6 col-xxxl-4 product" data-price="{{ item.price }}">
<a href="{% pageurl item %}" class="pxp-results-card-1 rounded-lg" data-prop="1">
<div id="property-{{item.id}}" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
{% for j in item.prop_images.all %}
{% image j.prop_img original as property_img %}
<div class="carousel-item {% if forloop.first %} active {% endif %}" style="background-image: url('{{property_img.url}}')"></div>
{% endfor %}
</div>
<span class="carousel-control-prev" data-href="#{{item.prop_name}}" data-slide="prev">
<span class="fa fa-angle-left" aria-hidden="true"></span>
</span>
<span class="carousel-control-next" data-href="#property-{{item.id}}" data-slide="next">
<span class="fa fa-angle-right" aria-hidden="true"></span>
</span>
</div>
<div class="pxp-results-card-1-gradient"></div>
<div class="pxp-results-card-1-details" id="prop-dtls">
<div class="pxp-results-card-1-details-title">{{item.prop_name}}</div>
<div class="pxp-results-card-1-details-price price">&#8377 {{item.price}}</div>
</div>
<div class="pxp-results-card-1-features">
<span>{{item.bedroom}} BD <span>|</span> {{item.bathroom}} BA <span>|</span> {{item.sqft}} SF</span>
</div>
<div class="pxp-results-card-1-save"><span class="fa fa-star-o"></span></div>
</a>
</div>
{% endfor %}
</div>