Personalized checkout and custom promotions with Shopify Scripts
Hi, I am using an app name "Multi country pricing" through which I am showing different prices by location. The app is using products variants for showing different prices by location. Now the problem is prices are showing incorrect when item is out of stock. I have done what I could do but nothing helped. Please help me sort this issue as it's so frustrating. Thanks in advance
Here is the screenshot of my product
here's my product-template. liquid code
{% unless settings.breadcrumb_styles == 'none' %}{% include 'breadcrumb' %}{% endunless %}
<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="image" content="https:{{ product.featured_image.src | product_img_url: 'grande' }}">
<span itemprop="name" class="hide">{{ product.title }}</span>
<meta itemprop="mpn" content="925872" />
<meta itemprop="brand" content="{{ product.vendor }}">
<meta itemprop="sku" content="{{ product.variants.first.sku }}">
<div itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating" style="display: none;">
Rated <span itemprop="ratingValue">3.5</span>/5
based on <span itemprop="reviewCount">11</span> customer reviews
</div>
<meta itemprop="description" content="{{ product.description | strip_html | truncate: 100 }}">
{% assign _lazyload = settings.use_lazyload %}
{% assign _product_layout = 'normal' %}
{% assign _main_class = 'col-12' %}
<div class="container">
<div id="col-main" class="page-product layout-{{ _product_layout }} slider-normal">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
{% if product.available %}
<link itemprop="availability" href="https://schema.org/InStock" />
{% else %}
<link itemprop="availability" href="https://schema.org/OutOfStock" />
{% endif %}
<div class="product">
<div class="product-content-wrapper">
<div class="row">
<div class="col-lg-7 col-md-6 col-sm-12 col-12">
{% include 'product-detail-image' %}
</div>
<div class="col-lg-5 col-md-6 col-sm-12 col-12">
<div id="product-info" class="product-info" data-stock="{{ section.settings.show_product_quantity }}">
<div class="product-info-inner">
{% include 'product-detail-discount-popup' %}
<div class="d-flex brand-label">
{% if section.settings.show_product_vendor and product.vendor != blank %}
<div class="product-vendor">{{ product.vendor | link_to_vendor }}</div>
{% endif %}
{% include 'product-label' %}
</div>
<h1 itemprop="name" content="{{ product.title }}" class="page-heading">{{ product.title }}</h1>
{% include 'product-detail-review' %}
{% include 'product-detail-price' %}
{% include 'product-detail-short-description' %}
{% include 'product-detail-sku-stock' %}
{% include 'product-detail-inventory' %}
{% include 'product-detail-deals' %}
{% if product.available %}
{% assign hide_default_title = false %}
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
{% assign hide_default_title = true %}
{% endif %}
<div class="group-cw clearfix">
{% form 'product', product, class:'product-form product-action variants' %}
{% include 'product-detail-variants' %}
<div class="qty-add-cart">
{% include 'product-detail-qty' %}
{% include 'product-detail-btn' %}
</div>
{% endform %}
{% include 'layout-people-in-cart' %}
{% include 'product-detail-order-shipping' %}
{% include 'product-detail-pre-order-btn' %}
{% include 'product-detail-wishlist-compare' %}
</div>
{% else %}
{% include 'product-detail-unavailable' %}
{% endif %}
{% comment %} {% include 'product-detail-short-description' %} {% endcomment %}
{% include 'product-detail-popup' %}
{% include 'product-detail-pre-order' %}
{% include 'product-secure-image' %}
{% if settings.show_social_sharing_product and settings.share_js != blank %}
{% include 'social-sharing' %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% include 'product-toggle' %}
{% if section.settings.product_tab_review == 'below' and settings.product_review_option != 'none' %}
<div class="review-item" id="tab_review_tabbed">
<div id="tab-review" class="container">
{% include 'product-detail-review-content' %}
</div>
</div>
{% endif %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'related-product' %}
{% include 'related-product' %}
{% when 'super-deals-product' %}
{% include 'super-deals-product' %}
{% when 'article' %}
{% include 'category-top-article' %}
{% else %}
{% endcase %}
{% endfor %}
</div>
{% if settings.enable_notify_product_page %}
{% include 'layout-notify' %}
{% endif %}
{% include 'product-template-script' %}
And here's my product-template-script. liquid code
<script type="application/json" id="VariantJson-{{ section.id }}">
[
{% for variant in product.variants %}
{
"id":{{ variant.id | json }},
"incoming": {{ variant.incoming | default: false | json }},
"unformat_incoming_date": {{ variant.next_incoming_date | date:"%d/%m/%Y" | json }},
"next_incoming_date": {{ variant.next_incoming_date | date: format: 'month_day_year' | json }},
"inventory_policy": {{ variant.inventory_policy | json }},
"inventory_quantity": {{ variant.inventory_quantity | json }}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
]
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
{% unless template.suffix == 'redirect' %}AT_Main.stickAddToCart();{% endunless %}
AT_Main.deadLine_time();
AT_Main.delivery_time();
AT_Main.scrollToReview();
jQuery('.panel-product-accordion .panel-title > a').on('click',function (e) {
$('.panel-product-accordion .panel-collapse').removeClass('show');
$(this).parents('.panel-product-accordion').first().find('.panel-collapse').addClass('show');
})
});
// initialize multi selector for product
$(window).on('load', function () {
setTimeout(function(){
AT_Main.scareWidth();
}, 1000);
$(".qty-inner .qty-up").on("click", function() {
var oldValue = $("#quantity").val(),
newVal = 1;
newVal = parseInt(oldValue) + 1;
$("#quantity").val(newVal);
});
$(".qty-inner .qty-down").on("click", function() {
var oldValue = $("#quantity").val();
if (oldValue > 1) {
newVal = 1;
newVal = parseInt(oldValue) - 1;
$("#quantity").val(newVal);
}
});
var variantProd = JSON.parse(jQuery('#VariantJson-{{ section.id }}').html());
/* selectCallback */
var selectOptionsCallback = function(variant, selector) {
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.length) {
radioButton.get(0).checked = true;
}
}
}
var add_to_cart = '#add-to-cart';
var $price = '#purchase-' + selector.product.id.toString() + ' .detail-price';
if (jQuery('#product-info.product-info').data('stock')) {
if (variant) {
var variant_stock = variantProd.find(item => item.id === variant.id);
if (variant.available) {
$('.inventory-quantity').removeClass('hide');
if(variant_stock.inventory_quantity > 0){
$('.inventory-quantity .text .number').html('<span class="number">' + variant_stock.inventory_quantity + '</span>')
var _total_inventory_quantity = variant_stock.inventory_quantity + 5;
}
else{
$('.inventory-quantity .text .number').html('<span class="number">5</span>')
var _total_inventory_quantity = 10;
}
var _percent = (5/_total_inventory_quantity)*100;
$('.inventory-quantity .line2').css('width', _percent + '%');
}
else{
$('.inventory-quantity').addClass('hide');
}
}
}
if (variant && variant.available) {
jQuery("#stock").html('<span>{{"products.product.available" | t }}:</span><span class="stock"> {{"products.product.in_stock" | t }}</span>');
// Update variant image
if (variant.featured_image) {
var originalImage = jQuery(".slider-for-00 .slick-current .image-zoom");
var newImage = variant.featured_image;
var element = originalImage[0];
var groupImage = String(variant.featured_image.alt);
AT_Main.productPage_variantFilter(groupImage == 'null' ? 'none-group' : groupImage);
Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
jQuery('.slider-thumbs-00 img').each(function() {
var grandSize = jQuery(this).attr('src');
grandSize = grandSize.replace('small','2048x2048');
if (grandSize == newImageSizedSrc) {
jQuery(this).parent().trigger('click');
let w_thumb = jQuery('.slider-thumbs-00').outerWidth()
,w_track = jQuery('.slider-thumbs-00 .slick-track').outerWidth();
if ((w_track <= w_thumb || AT_Main.getWidthBrowser() < 768)) {
jQuery('.slider-thumbs-00 .slick-track').addClass('no-translate3d');
}else{
jQuery('.slider-thumbs-00 .slick-track').removeClass('no-translate3d');
}
return false;
}
});
});
}
// selected a valid variant
$(add_to_cart).removeClass('disabled').removeAttr('disabled').html('<span class="demo-icon icon-electro-add-to-cart-icon"></span>{{ "products.product.add_to_cart" | t }}'); // remove unavailable class from add-to-cart button, and re-enable button
if(variant.compare_at_price == null){
$($price).html('<span class="price">'+Shopify.formatMoney(variant.price, '{{shop.money_format}}')+'</span>');
jQuery(".brand-label .label-sale").addClass('hide');
}
else {
$($price).html('<del class="price-compare">'+Shopify.formatMoney(variant.compare_at_price, '{{shop.money_format}}') + '</del>' + '<span class="price-sale">' + Shopify.formatMoney(variant.price, '{{shop.money_format}}') + '</span>');
jQuery(".brand-label .label-sale").removeClass('hide');
}
{% if section.settings.enable_pre_order_button %}
$('.shopify-payment-button').removeClass('hide');
{% endif %}
/* Update currency */
{% if settings.currency_type == '2' %}
currenciesCallbackSpecial('#product-info span.money');
{% endif %}
}
else {
jQuery("#stock").html('<span>{{"products.product.available" | t }}:</span><span class="stock"> {{"products.product.out_stock" | t }}</span>');
$(add_to_cart).addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
var message = variant ? "{{'products.product.sold_out' | t }}" : "{{'products.product.unavailable' | t }}";
$(add_to_cart).html(message);
{% if section.settings.enable_pre_order_button %}
$('.shopify-payment-button').addClass('hide');
{% endif %}
}
{% if section.settings.show_product_sku %}
if (variant && variant.sku ) { jQuery("#sku").html(variant.sku).parent().show(); }
else{jQuery("#sku").parent().hide(); }
{% endif %}
};
{% if product.variants.size > 0 %}
new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json | remove:'\u003E' | remove:'\u003C' | remove:'\u00a0' }}, onVariantSelected: selectOptionsCallback, enableHistoryState: true });
{% endif %}
// Add label if only one product option
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
{% endif %}
// Hide selectors if we only have 1 variant and its title contains 'Default'.
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
$('.selector-wrapper').hide();
{% endif %}
});
</script>
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024