Shopify - Cart.js not adding product to cart - javascript

Currently I'm trying to get Shopify's cart.js to add my products to cart.
It used to work perfectly but when I added variants it's started to break and for the life of me I can't get it to work. When clicking the button - it doesn't add the product to the bag at all.
<form action="/cart/add" method="post" data-cart-submit>
{% if product.variants.size > 1 %}
<div class="w-form">
<div class="inpost-form-option w-clearfix">
<label class="inpost-form-label">{{ product.options.first }}</label>
<select id="variant-select" class="inpost-quantity w-select">
{% for variant in product.variants %}
{% if variant.available == true %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% endif %}
{% endfor %}
</select>
</div>
</div>
{% endif %}
<button class="inpost-buy w-button" type="submit" data-cart-add="{{ variant.id }}">Add to Bag →</button>
</form>
Added Javascript
<script type="text/javascript">
jQuery(function() {
CartJS.init({{ cart | json }});
});
</script>
Console Error
shop_events_listener-91b4691….js:1 POST
https://monah-uk.myshopify.com/cart/add.js 404 (Not Found)

Related

Is it possible to use the action tag in the form tag in ul or li?

I am trying to do web development with Django. It is recommended to use a form to be translated in its path while changing the language. In the proposed document, the language change function is given to the action attribute. Can I do this in ul or li?
The suggested form is as follows:
<form action="{% url 'set_language' %}" method="post">{% csrf_token %}
<input name="next" type="hidden" value="{{ redirect_to }}">
<select name="language">
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
<option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected{% endif %}>
{{ language.name_local }} ({{ language.code }})
</option>
{% endfor %}
</select>
<input type="submit" value="Go">
</form>
def change_language(request):
response = HttpResponseRedirect('/')
if request.method == 'POST':
language = request.POST.get('language')
if language:
if language != settings.LANGUAGE_CODE and [lang for lang in settings.LANGUAGES if lang[0] == language]:
redirect_path = f'/{language}/'
elif language == settings.LANGUAGE_CODE:
redirect_path = '/'
else:
return response
from django.utils import translation
translation.activate(language)
response = HttpResponseRedirect(redirect_path)
response.set_cookie(settings.LANGUAGE_COOKIE_NAME, language)
return response
urlpatterns = [
path('admin/', admin.site.urls),
path('change_language/',
change_language,
name='change_language'),
path('', include('Home.urls')),
path('haberler/',include('New.urls')),
path('i18n/', include('django.conf.urls.i18n')),
<div class="header__meta">
<div class="header__meta-request">{% get_current_language as LANGUAGE_CODE %}
{% translate 'Teklif İsteyin' %}
</div>
<div class="header__lang-wrapper">
<div class="header__current-lang">
{% get_current_language as LANGUAGE_CODE %} {{LANGUAGE_CODE}}</div>
<div class="header__language-switcher-list">
<ul class="language-switcher language-switcher--white">
{% get_current_language as LANGUAGE_CODE %} {% get_available_languages as LANGUAGES %} {% get_language_info_list for LANGUAGES as languages %} {% for language in languages %}
<li translate="yes" class="language-switcher">
<a href="/{{ language.code }}/{{ request.full_path |slice:'4:'}}" {% if language.code == LANGUAGE_CODE %} class="selected" {% endif %}>
{{ language.code }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>

How can I create a if using the value of select?

Hello I have the following code :
<select name="test1" class="form-control">
<option value=""></option>
{% for test in tests %}
<option value="{{ test.id }}">{{ test.name }}</option>
{% endfor %}
</select>
Then I want to do something like this ;
{% if test.id %}
# show something but I need to know if there is sometinh in test.id
# I think the problem comes from this line, in fact I want this condition is realised if test.id is not empty else the condition is not realised.
{% endif %}
How can I do this ?
See if this approach can help.
<select name="test1" class="form-control">
<option value=""></option>
{% for test in tests %}
<option value="{{ test.id }}">{{ test.name }}</option>
{% if test.id %}
#show what you want..
{% empty %} <<<<======
#if empty do this...
{% endif %}
{% endfor %}
</select>
Just an example:
import Http Response from django
from django.shortcuts import render
#create a function
def your_view(request):
# create a dictionary
context = {
#enter code here
"data" : [],
}
# return response
return render(request, "template.html", context)
Now in templates/template.html,
{% for i in data %}
<div class="row">
{{ i }}
</div>
{% empty %}
<h4>There is nothing in this list</h4>
{% endfor %}
You can have a better look at this link:
https://www.geeksforgeeks.org/for-empty-loop-django-template-tags/

How do you make the fields read-only in a Django form when a specific condition is met?

Based on the following image, I am trying to make the fields category and current points non-editable when the status of the task is Finalized or Cancelled, otherwise the fields should be editable.
Below is the code from my html file.
{% extends "base.html" %} {% load widget_tweaks %}
{% block content %}
<div id="form-group">
<form method="POST" action="." enctype="multipart/form-data">
{% csrf_token %}
<label>Select your category</label>
{{ form.category|add_class:"card" }}
<label>What's the status of the task?</label>
{{ form.status|add_class:"card" }}
<label>Current points:</label>
{{ form.points|add_class:"card" }}
<label>Finalized date:</label>
{{ form.ending_date|add_class:"card" }}
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>
Below is the code from my forms.py file.
class TaskModelForm(forms.ModelForm):
class Meta:
model= Task
fields = ['category', 'status', 'points']
def __init__(self, *args, **kwargs):
super(TaskModelForm, self).__init__(*args, **kwargs)
self.fields['status'].required = False
self.fields['points'].required = False
When I want to edit the contents of this form I need to verify if the status is Finalized, so the fields are non-editable, otherwise the fields should be editable and I am thinking something about:
{% extends "base.html" %} {% load widget_tweaks %}
{% block content %}
{% if form.status.value == 'Active' %} <!--make the fields editable -->
<div id="form-group">
<form method="POST" action="." enctype="multipart/form-data">
{% csrf_token %}
<label>Select your category</label>
{{ form.category|add_class:"card" }}
...
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>
{% endif %}
{% if form.status.value == 'Finalized' %} <!--make the fields non-editable -->
<div id="form-group">
<form method="POST" action="." enctype="multipart/form-data">
{% csrf_token %}
<label>Select your category</label>
{{ form.category|add_class:"card" }}
...
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>
{% endif %}
However, I believe my approach might not work because this could be a more front-end problem rather than back-end one (just a guess). Can you point me out to the right direction to solve this problem?
Since the status is something that the user selects, you can't address your requirement with Python (Django) running on the server. You have to address it with a JavaScript running in the web page that displays the form. Something like this will definitely do the trick.
{% extends "base.html" %} {% load widget_tweaks %}
{% block content %}
<body onload="makeReadOnly();">
<div id="form-group">
<form method="POST" action="." enctype="multipart/form-data">
{% csrf_token %}
<div class="tweet-composer">
<label>Insert your task</label>
{{ form.task|add_class:"card js-keeper-editor" }}
</div>
<label>Select your category</label>
{{ form.category|add_class:"card" }}
<label>Current points:</label>
{{ form.points|add_class:"card" }}
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>
</body>
{% endblock content %}
<script type="text/javascript">
{% block jquery %}
function makeReadOnly()
{
if (document.getElementById('id_status').value == 'Finalized'){
document.getElementById('id_task').readOnly=true;
document.getElementById('id_category').readOnly=true;
}else if (document.getElementById('id_status').value == 'Active'){
document.getElementById('id_task').readOnly=true;
document.getElementById('id_category').readOnly=false;
}
}
document.getElementById('id_status').addEventListener('change', makeReadOnly);
{% endblock %}
</script>
With the "view page source" you can see the HTML structure that Django generates out of your form, so that you can identify the right bits with JQuery selectors. Alternatively you can do
f = SomethingForm()
f.as_p()
in the ./manage.py shell console.
At the Django end, you may need custom form validation to handle the inter-dependency between the value of status and whether the other fields are required or not.

Shopify Option Selectors Not Changing Price

I'm trying to fix my option selection because previously this company had Bold Installed and it messed with our option selection. I've got the Option selection to show but EXACTLY how I want it but it works for now... But the price will not change no matter what I do! Can anyone help me figure what I'm missing here?
The first code snippet is contained in my 'product-form.liquid' snippet
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="form-vertical">
<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.product_swatches %}
{% if product.available and bold_variants_size > 1 %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
{% endif %}
{% if settings.product_different_swatches %}
{% include 'different_product_swatches' with product.type, titlee: settings.product_different_swatches_title %}
{% endif %}
<div class="formWrap">
<div class="price-variant-wrap">
<span class="priceText">PRICE:</span>
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span id="ProductPrice" class="h2" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
{% if product.compare_at_price_max > product.price %}
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<p id="ComparePrice">
{{ 'products.product.compare_at' | t }} {{ current_variant.compare_at_price | money }}
</p>
{% endif %}
</div>
{% assign isFreeGift=false %}
{% for tag in product.tags %}
{% if tag =='SECOMAPP_FREEGIFT'%}
{% assign isFreeGift=true %}
{% endif %}
{% endfor %}
{% if isFreeGift == false %}
<div class="product-bottom-wrap">
<div class="fancy_btn_wrap">
<div class="product-single__add-to-cart">
{% if settings.prod_quantity == 'plus-minus' %}
{% include 'quantity' %}
{% elsif settings.prod_quantity == 'number' %}
<label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
{% endif %}
<div class="submit-container">
<button type="submit" name="add" id="AddToCart" data-price="{{ current_variant.price | money_without_currency }}" class="btn {{settings.product_page_button_type}} ">
<input type="hidden" name="return_to" value="back" />
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
</div>
</div>
</div>
</div>
{% endif %}
</div>
<div id="shopmessage-checkbox" class="fbmessage"></div>
</form>
<div class="sca-fg-cat-list" style="display: none;" name="secomapp-fg-data-{{ product.id }}"> </div>
This code below is in my product.template
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
{% if settings.product_description_location == 'above_form' %}
<div class="product-description rte" itemprop="description">
{% if product.description contains '<!-- split -->' %}
{{ description[0] }}
{% else %}
{{ product.description }}
{% endif %}
</div>
{% endif %}
{% comment %}
ID addToCartForm is a selector for the ajax cart plugin
{% endcomment %}
{% include 'product-form' %}
{% include 'addthis' %}
</div>
<script>
var selectCallback = function(variant, selector) {
{% if settings.product_swatches %}
// BEGIN SWATCHES
if (variant) {
var form = jQuery('#' + selector.domIdPrefix).closest('form');
for (var i=0,length=variant.options.length; i<length; i++) {
var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
if (radioButton.size()) {
radioButton.get(0).checked = true;
}
}
}
// END SWATCHES
{% endif %}
timber.productPage({
money_format: "{{ shop.money_format }}",
variant: variant,
selector: selector
});
};
jQuery(function($) {
new Shopify.OptionSelectors('productSelect', {
product: {{ product | 'json' }},
onVariantSelected: selectCallback,
enableHistoryState: false
});
// Add label if only one product option and it isn't 'Title'. Could be 'Size'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
{% endif %}
// Hide selectors if we only have 1 variant and its title contains 'Default'.
{% if bold_variants_size == 1 and bold_selected_or_first_available_variant.title contains 'Default' %}
$('.selector-wrapper').hide();
{% endif %}
});
{% unless product.title == 'Gift Card' %}
var checkExist = setInterval(function() {
if ($('.spr-badge .spr-badge-caption').length) {
var rating = $('.spr-starrating.spr-summary-starrating').html();
var noOfRatings = $('.spr-summary-caption').html();
var ratingHolder = $('.ratingHolder');
ratingHolder.prepend(noOfRatings);
ratingHolder.prepend(rating);
ratingHolder.click(function(){
$('#product_tabs .tab_3 a').trigger('click');
$('html, body').animate({
scrollTop: $("#product_tabs").offset().top - $('.site-header').outerHeight() - 30
}, 1000);
});
clearInterval(checkExist);
}
});
{% endunless %}
</script>
Not quite sure what's happening here pretty much the code from the live code but bold is removed and the is different. the 'productSelect' is lower cased on live code as oppose to it being uppercase which actually makes the 'select' show.
Thanks!
If you go back to the liquid before you used Bold, you will be in a good place. Your code should just work. From that point, you can customize to make it as you wish today. Shopify has a primitive support for going back in time. Have you tried that? Or getting a copy of your theme from your theme supplier before Bold? That would also give you clean working Liquid.

Shopify Featured Product Slider

So I have a featured section part of a Shopify website, I initially was going to set up an array of static data and have the featured product fade in/out every few seconds through that. However, my JS isn't working yet I am POSITIVE it's correct. Is this a problem with Shopify itself? If anyone could explain to me a way of fading in/out or creating a mini slider for the specific div i'd really appreciate it.
I was attempting to fade out the div ".big-product"
Here is a screenshot to further visualize.
<h2 class="light">Featured Products</h2>
{% if collections.frontpage.products.size > 0 %}
<div class="big-product" id="featprod">
<div class="product-image" id="product-image">
<img src=" {{ product.images.first | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" />
<div class="product-info">
<h3 class="title">{{ product.title }}</h3>
<p class="price">
{{ product.vendor }}
</p>
<p class="description">{{ product.description | strip_html | truncatewords: 40 | escape_html }}</p>
<form action="/cart/add" method="post">
{% if product.variants.size == 1 %}
<!-- If there is only 1 variant, only show the purchase button -->
<input type="hidden" name="id" value="{{ product.variants.first.id }}" id="variant-{{ variant.id }}" />
{% else %}
<select name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}" id="variant-{{ variant.id }}">
{{ variant.title | escape }} for {{ variant.price | money }}
</option>
{% else %}
<option value="{{ variant.id }}" id="variant-{{ variant.id }}" disabled="disabled" class="disabled">
{{ variant.title | escape }} — SOLD OUT
</option>
{% endif %}
{% endfor %}
</select>
{% endif %}
<input type="submit" href="{{ product.url }}" class="button" name="add" value="add to cart" />
details
</form>
<p class="tags alt">
{{ product.tags | join: ', ' }}
</p>
Here is a quick slider example. I'm sure there are more elegant ways to achieve the same effect. I'm just pulling the content 'template' from the features array and putting it in the feature div. And then fading in the content.
var start = 1;
function moveSlider () {
$feature.children('div').remove();
$feature.html(features[start]);
$feature.children('div').fadeIn();
start++;
if (start == features.length) {
start = 0;
}
};
setInterval(function () {
moveSlider();
}, 3000);
Demo

Categories