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
Related
This works for only the first of my entries however, in the rest of my entries, the error doesn't show. How do I ensure if the entries don't match on the rest, the error message appears too? I'm using Python/Flask and Html/Js
<script>
function compare_input() {
var f_input = document.querySelector(".credit").value;
var s_input = document.querySelector(".debit").value;
if (f_input !== s_input) {
alert('Debit and Credit must be equal');
}
}
</script>
Inputs
For Credit
{% for number in range(1, 6) %}
<tr>
<td>
<select name="credit_{{ number }}_account">
{% for account in accounts %}
<option value="{{ account['acct_num'] }}">{{ account['acct_num'] }} - {{ account['acct_name'] }}</option>
{% endfor %}
</select>
</td>
<td style="padding-bottom: 1px">
<input style="border: none" class="credit" name="credit_{{ number }}_value" type="text" datatype="currency" placeholder="$0" id="credit_{{ number }}_value">
</td>
</tr>
{% endfor %}
For Debit
{% for number in range(1, 6) %}
<tr>
<td>
<select name="debit_{{ number }}_account">
{% for account in accounts %}
<option value="{{ account['acct_num'] }}">{{ account['acct_num'] }} - {{ account['acct_name'] }}</option>
{% endfor %}
</select>
</td>
<td style="padding-bottom: 1px">
<input style ="border: none" class="debit" name="debit_{{ number }}_value" type="text" datatype="currency" placeholder="$0" id="debit_{{ number }}_value">
Top entries are credit then debit. All the entries that need to read the same error when credit doesn't equal debit
I don't really know much Js either, just learning
How to change image on variant selection if we have javascript associative array of variant_id and variant_img_src?
html Code:-
<select name="id" >
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}"> {{ variant.title }} - {{ variant.price | money }}</option>
{% else %}
{% endfor %}
Javascipt Code:-
var images = [];
{% for variant in product.variants %}
{% for image in product.images %}
images[ {{ variant.id }}] = "{{ variant.image.src | product_img_url: 'medium' }}";
{% endfor %}
{% endfor %}
Like this
const images = {
"default": document.getElementById("img").src,
"variant2": "http://lorempixel.com/400/200/sports/2/",
"variant3": "http://lorempixel.com/400/200/sports/3/"
};
document.getElementById("variants").addEventListener("change", function() {
document.getElementById("img").src = images[this.value];
})
<select id="variants">
<option value="default">Please select</option>
<option value="variant2">Variant 2</option>
<option value="variant3">Variant 3</option>
</select><hr/>
<img src="http://lorempixel.com/400/200/sports/1/" id="img" />
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.
Please take a look at my code here. The page is deployed here.
I'm using an ID price to refer to the price of an item. A general jQuery function attempts to change the price of every item on a selection change (with respect to the size of the item), as below:
jQuery(document).ready(function(){
jQuery(".variation_select").change(function(){
var price = $(".variation_select option:selected").attr("data-price");
var sale_price = $(".variation_select option:selected").attr("data-sale-price");
if (sale_price != "" && sale_price != "None" && sale_price != null ) {
$("#price").html("<h4>" + "₹ " + sale_price + " <small class='og-price'>" + "₹ " + price + "</small></h4>");
} else {
$("#price").html("₹ " + price);
}
});
});
As the items and their data come from the backend and I have multiple items, the HTML understandably replicates and as a result, I have more than a single element with the same ID. The HTML that displays the item's price is as below:
<div class="row">
{% for object in object_list %}
<div class="col-sm-6 col-md-4">
{% if object.productimage_set.count > 0 %}
{% for img in object.productimage_set.all %}
<div class="thumbnail">
<img class='img-responsive' src="{{ img.image.url }}" >
{% endfor %}
{% endif %}
<div class="caption">
<h3 style="text-align: center;">{{ object.title }}</h3>
<form id='add-form' method='GET' action="{% url 'cart' %}">
<p id='jquery-message' class='lead'></p>
{% if object.variation_set.count > 1 %}
<h4 id='price' style="text-align: center; display: block;">₹ {{ object.variation_set.first.price }}</h4>
<select name= 'item' class='form-control variation_select' style="margin: 0 auto; width: 30%; display: block;">
{% for vari_obj in object.variation_set.all %}
<option data-sale-price="{{vari_obj.sale_price}}" data-price="{{ vari_obj.price }}" value="{{ vari_obj.id }}">{{ vari_obj }}</option>
{% endfor %}
</select>
<br>
{% else %}
<input type="hidden" name='item' value='{{ object.variation_set.first.id }}' />
<h4 id="price" style="text-align: center; display: block;">₹ {% if object.variation_set.first.sale_price %}
{{ object.variation_set.first.sale_price }}
<small style="text-align: center; display: inline-block" class="og-price">₹</small>
<small class="og-price">{{ object.variation_set.first.price }}</small>
{% else %}
{{ object.variation_set.first.price }}
{% endif %}
</h4>
{% endif %}
<p style="text-align: center;">{{object.description}}</p>
<br>
<input class='form-control' type='number' name='qty' value='1' style="text-align: center; margin: 0 auto; width: 30%; display: block;" />
<br>
<p><input id='submit-btn' type='submit' value='Add to Cart' class="btn btn-primary" style="text-align: center; margin: 0 auto; padding: 5% 10%; display: block;" />
</p>
</form>
</div>
</div>
</div>
{% endfor %}
</div>
As I can understand, the price of only the first item changes, since its the first block of code with a unique ID instance, rest all that follow are violate the rule of having unique IDs. Hence their prices don't change. While putting them in the same class changes their prices together, something else I don't want too. How can I solve this problem of having multiple items in my page and still being able to select their prices individually?
On your changed function, you can use the jquery "closest()", like this.
$(this).closest("#price").html("₹ " + price);
It will fetch the nearest object with an ID of "price" and change its html content.
I hope it helps. You can read more on jquery closest api docs.
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)