').text(text).html();
};
// "Weight - 30 gm / Length - 5 cm / Width - 3 cm", one measurement per line. Every
// line has to read as a label and a value, or the text is ordinary prose and is left
// exactly as it is. Values keep their units because everything after the separator is
// taken verbatim. Returns 'empty', true (made a table) or false (left alone).
var toTable = function ($paragraph) {
if (!$paragraph.length) return 'empty';
var text = $.trim($paragraph.text());
// a product with no description can leave the token's bare name behind
if (!text || text === 'product-description') return 'empty';
var lines = text.split(/\r?\n/).map(function (line) { return $.trim(line); }).filter(Boolean);
if (lines.length < 2) return false;
var rows = [];
for (var i = 0; i < lines.length; i++) {
var pair = lines[i].match(/^([^-–:]{1,28}?)\s*[-–:]\s*(.+)$/);
if (!pair) return false;
rows.push('| ' + escape($.trim(pair[1])) + ' | ' + escape($.trim(pair[2])) + ' |
|---|
');
}
// th scope="row" rather than a Specification/Value header row: for a label-and-value
// list that is the structure a screen reader wants, and a header row would add the
// visual weight this block is meant to avoid.
$paragraph.replaceWith('');
return true;
};
var built = false;
$container.find('.product_specs_block').each(function () {
var $block = $(this);
var result = toTable($block.find('p').first());
if (result === 'empty') { $block.remove(); return; } // no label over an empty block
if (result === true) built = true;
});
// Short descriptions are prose on every product today, but if one is ever written as a
// measurement list it becomes a table too - unless the block above already made one,
// so the same measurements can never appear twice.
if (!built) {
$container.find('.product_text p').each(function () { toTable($(this)); });
}
}
/*
3. Filtered product sections
Shopivana can only ask for a category, a count and its own sort order, so "Jhumkas"
or "Under 499" are worked out here from the cards it rendered.
*/
/*
Shopivana's products page can only search by text, so a price link like "Under 499"
has nowhere to point. ?jg_max=499 (or ?jg_min=) on any page applies the same filter
to the cards that page renders. A container's own data-jg-* always wins, and with
this file missing the link simply opens the full Shop page.
*/
function urlPriceFilter() {
var params;
try {
params = new window.URLSearchParams(window.location.search);
} catch (e) {
return null;
}
var max = parseFloat(params.get('jg_max'));
var min = parseFloat(params.get('jg_min'));
if (isNaN(max) && isNaN(min)) {
return null;
}
return { max: max, min: min };
}
function filterCards($, $container) {
var filter = String($container.data('jg-filter') || '').toLowerCase();
var maxPrice = parseFloat($container.data('jg-max-price'));
var minPrice = parseFloat($container.data('jg-min-price'));
var limit = parseInt($container.data('jg-limit'), 10);
var fromUrl = urlPriceFilter();
var kept = 0;
if (fromUrl) {
if (isNaN(maxPrice)) { maxPrice = fromUrl.max; }
if (isNaN(minPrice)) { minPrice = fromUrl.min; }
}
$container.children().each(function () {
var $item = $(this);
var price = priceOf($item);
var keep = true;
if (filter && nameOf($item).toLowerCase().indexOf(filter) === -1) {
keep = false;
}
if (keep && !isNaN(maxPrice) && price !== null && price > maxPrice) {
keep = false;
}
if (keep && !isNaN(minPrice) && price !== null && price < minPrice) {
keep = false;
}
if (keep && !isNaN(limit) && kept >= limit) {
keep = false;
}
if (keep) {
kept++;
} else {
$item.remove();
}
});
return kept;
}
/*
4. Product sliders
*/
function buildSlider($, $container) {
if (!$.fn.owlCarousel) {
return false;
}
var perView = parseInt($container.data('jg-slider'), 10) || 4;
var options = $.extend({}, SLIDER_DEFAULTS, {
items: perView,
responsive: {
0: { items: 2, margin: 14 },
768: { items: Math.min(3, perView), margin: 20 },
992: { items: perView, margin: 28 }
}
});
// "owl-carousel" is what owl.carousel.css hooks onto (it clips the track); the
// theme's own sliders carry it in the markup, this one is built at runtime.
$container.addClass('owl-carousel products_slider').owlCarousel(options);
makeSliderAccessible($, $container);
return true;
}
// Owl 2.2 builds its arrows and dots as plain : give them button semantics
// and keyboard support.
function makeSliderAccessible($, $container) {
$container.find('.owl-nav .owl-prev').attr({ role: 'button', tabindex: 0, 'aria-label': 'Previous products' });
$container.find('.owl-nav .owl-next').attr({ role: 'button', tabindex: 0, 'aria-label': 'Next products' });
$container.find('.owl-dots .owl-dot').each(function (index) {
$(this).attr({ role: 'button', tabindex: 0, 'aria-label': 'Go to slide ' + (index + 1) });
});
$container.on('keydown', '.owl-prev, .owl-next, .owl-dot', function (event) {
if (event.which === 13 || event.which === 32) {
event.preventDefault();
$(this).trigger('click');
}
});
}
/*
5. Product detail gallery
The theme's product_custom.js binds the thumbnails on page load, but Shopivana renders
the card afterwards, so those clicks never worked. This is delegated, so it does.
*/
function initDetailGallery($) {
$(document).on('click', '.product_image_thumbnails .product_image_thumbnail', function (event) {
event.preventDefault();
var $thumb = $(this);
var source = $thumb.find('img').attr('src') || $thumb.attr('href');
if (!source) return;
$thumb.closest('.product_image_thumbnails').find('.product_image_thumbnail').removeClass('active');
$thumb.addClass('active');
$thumb.closest('.product_image').find('.product_image_large img').attr('src', source);
});
}
/*
6. Init
Shopivana renders the cards over AJAX, so each container is watched and handled as
soon as its cards appear (and again if Shopivana ever re-renders them).
*/
function handleContainer($, container) {
var $container = $(container);
if (!$container.children().length || $container.data('jg-done')) {
return;
}
$container.data('jg-done', true);
polishCards($, $container);
cleanCardText($, $container);
specTable($, $container);
var $section = $container.closest('[data-jg-section]');
var kept = filterCards($, $container);
if ($section.length && !kept) {
$section.remove(); // nothing matched - drop the section instead of showing an empty one
return;
}
if ($container.data('jg-slider')) {
buildSlider($, $container);
}
$section.addClass('jg_ready');
}
function watch($, container) {
handleContainer($, container);
if (!window.MutationObserver) {
window.setTimeout(function () { handleContainer($, container); }, 3000);
return;
}
var timer = null;
new MutationObserver(function () {
window.clearTimeout(timer);
timer = window.setTimeout(function () { handleContainer($, container); }, 60);
}).observe(container, { childList: true });
}
whenReady(function ($) {
initDetailGallery($);
$('.product-card[data-product-card], .products_container[data-product-card]').each(function () {
watch($, this);
});
});
})();