|
|
@@ -326,5 +326,295 @@
|
|
|
div.appendChild(document.createTextNode(str));
|
|
|
return div.innerHTML;
|
|
|
}
|
|
|
+
|
|
|
+ // ==========================================
|
|
|
+ // Quantity discount tier display + live price update
|
|
|
+ // ==========================================
|
|
|
+ initQtyTiers();
|
|
|
+ initVariantTableTiers();
|
|
|
+
|
|
|
+ function initVariantTableTiers() {
|
|
|
+ // Handles custom variant-table plugins (e.g. pvtfw / product-variant-table-for-woocommerce)
|
|
|
+ // where each variation is rendered as a <tr> with its own qty input and price.
|
|
|
+ var tierData = (typeof window.studiouFppTierData === 'object' && window.studiouFppTierData) ? window.studiouFppTierData : null;
|
|
|
+ if (!tierData) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var $table = $('table.variant').first();
|
|
|
+ if (!$table.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var i18n = studiouWcfppFront.i18n;
|
|
|
+
|
|
|
+ $table.find('tbody > tr').each(function () {
|
|
|
+ var $row = $(this);
|
|
|
+ var $cartBtn = $row.find('.pvtfw_variant_table_cart_btn').first();
|
|
|
+ var variantId = $cartBtn.length ? String($cartBtn.data('variant')) : '';
|
|
|
+ if (!variantId) {
|
|
|
+ var $qtyInput = $row.find('input.qty').first();
|
|
|
+ variantId = $qtyInput.attr('id') || '';
|
|
|
+ }
|
|
|
+ if (!variantId || !tierData[variantId]) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var cfg = tierData[variantId];
|
|
|
+ var tiers = cfg.tiers || [];
|
|
|
+ var basePrice = parseFloat(cfg.base_price) || 0;
|
|
|
+ if (tiers.length === 0 || basePrice <= 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var $priceCell = $row.find('td[data-title="Price"]').first();
|
|
|
+ if (!$priceCell.length) $priceCell = $row.find('.woocommerce-Price-amount').first().closest('td');
|
|
|
+ var $priceEl = $priceCell.find('.woocommerce-Price-amount').first();
|
|
|
+ var $qty = $row.find('input.qty').first();
|
|
|
+ if (!$priceEl.length || !$qty.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Append a compact tier summary beneath the price
|
|
|
+ var tierListHtml = '<div class="studiou-fpp-row-tiers" title="' + escHtml(i18n.qtyTiersTitle) + '">';
|
|
|
+ tierListHtml += '<span class="dashicons dashicons-tag"></span>';
|
|
|
+ tierListHtml += '<span class="studiou-fpp-row-tiers-list">';
|
|
|
+ for (var i = 0; i < tiers.length; i++) {
|
|
|
+ var t = tiers[i];
|
|
|
+ tierListHtml += '<span class="studiou-fpp-row-tier">' + t.from_qty + '+: −' + formatPercent(t.percent) + '</span>';
|
|
|
+ }
|
|
|
+ tierListHtml += '</span></div>';
|
|
|
+ $priceCell.append(tierListHtml);
|
|
|
+
|
|
|
+ // Store the original price HTML so we can revert when qty falls below the first tier
|
|
|
+ if (!$priceEl.data('studiou-fpp-base-html')) {
|
|
|
+ $priceEl.data('studiou-fpp-base-html', $priceEl.html());
|
|
|
+ }
|
|
|
+
|
|
|
+ // Bind qty change handlers to update this row's price display
|
|
|
+ var handler = function () {
|
|
|
+ updateRowPrice($row, tiers, basePrice, $priceEl, $qty);
|
|
|
+ };
|
|
|
+ $qty.on('input change keyup', handler);
|
|
|
+ // pvtfw ± buttons sit next to the input; they dispatch change events on the input,
|
|
|
+ // but some themes intercept them — bind click too
|
|
|
+ $row.find('.qty-count').on('click', function () {
|
|
|
+ setTimeout(handler, 0);
|
|
|
+ });
|
|
|
+
|
|
|
+ // Initial update (qty=1 usually, just to install the "Save X%" indicator if applicable)
|
|
|
+ updateRowPrice($row, tiers, basePrice, $priceEl, $qty);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateRowPrice($row, tiers, basePrice, $priceEl, $qty) {
|
|
|
+ var qty = parseInt($qty.val(), 10) || 1;
|
|
|
+ var tier = resolveTierSimple(tiers, qty);
|
|
|
+ $row.find('.studiou-fpp-row-save-badge').remove();
|
|
|
+
|
|
|
+ if (!tier || tier.percent <= 0) {
|
|
|
+ // Revert to original HTML
|
|
|
+ var base = $priceEl.data('studiou-fpp-base-html');
|
|
|
+ if (base) {
|
|
|
+ $priceEl.html(base);
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var unit = basePrice * (1 - tier.percent / 100);
|
|
|
+ $priceEl.html(formatPriceInner(unit));
|
|
|
+
|
|
|
+ var badge = '<span class="studiou-fpp-row-save-badge">−' + formatPercent(tier.percent) + '</span>';
|
|
|
+ $priceEl.after(badge);
|
|
|
+ }
|
|
|
+
|
|
|
+ function resolveTierSimple(tiers, qty) {
|
|
|
+ var match = null;
|
|
|
+ for (var i = 0; i < tiers.length; i++) {
|
|
|
+ if (tiers[i].from_qty <= qty) match = tiers[i];
|
|
|
+ else break;
|
|
|
+ }
|
|
|
+ return match;
|
|
|
+ }
|
|
|
+
|
|
|
+ function formatPercent(percent) {
|
|
|
+ var p = parseFloat(percent) || 0;
|
|
|
+ var str = p.toFixed(2).replace(/\.?0+$/, '');
|
|
|
+ return str + ' %';
|
|
|
+ }
|
|
|
+
|
|
|
+ function formatPriceInner(amount) {
|
|
|
+ var curr = studiouWcfppFront.currency || {};
|
|
|
+ var decimals = parseInt(curr.decimals, 10);
|
|
|
+ if (isNaN(decimals)) decimals = 2;
|
|
|
+ var decSep = curr.decimalSeparator || '.';
|
|
|
+ var thouSep = curr.thousandSeparator || ',';
|
|
|
+ var fmt = curr.priceFormat || '%1$s%2$s';
|
|
|
+ var symbol = curr.symbol || '';
|
|
|
+
|
|
|
+ var fixed = parseFloat(amount).toFixed(decimals);
|
|
|
+ var parts = fixed.split('.');
|
|
|
+ var intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thouSep);
|
|
|
+ var decPart = parts.length > 1 ? parts[1] : '';
|
|
|
+ var numStr = decPart ? intPart + decSep + decPart : intPart;
|
|
|
+
|
|
|
+ var symbolHtml = '<span class="woocommerce-Price-currencySymbol">' + symbol + '</span>';
|
|
|
+ return fmt.replace('%1$s', symbolHtml).replace('%2$s', numStr);
|
|
|
+ }
|
|
|
+
|
|
|
+ function initQtyTiers() {
|
|
|
+ var $container = $('.studiou-fpp-qty-tiers-display');
|
|
|
+ var $form = $('form.variations_form').first();
|
|
|
+ if (!$container.length || !$form.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var currentTiers = [];
|
|
|
+ var currentBasePrice = 0;
|
|
|
+
|
|
|
+ $form.on('found_variation', function (event, variation) {
|
|
|
+ currentTiers = (variation && variation.studiou_fpp_qty_tiers) ? variation.studiou_fpp_qty_tiers : [];
|
|
|
+ currentBasePrice = (variation && variation.studiou_fpp_base_price) ? parseFloat(variation.studiou_fpp_base_price) : 0;
|
|
|
+ // WC re-renders .single_variation on every selection, so defer a tick to run after it
|
|
|
+ setTimeout(function () {
|
|
|
+ renderTierTable();
|
|
|
+ updateDisplayedPrice();
|
|
|
+ }, 0);
|
|
|
+ });
|
|
|
+
|
|
|
+ $form.on('reset_data', function () {
|
|
|
+ currentTiers = [];
|
|
|
+ currentBasePrice = 0;
|
|
|
+ $container.hide().empty();
|
|
|
+ });
|
|
|
+
|
|
|
+ // Live price update on quantity change — broad listener so themes with non-standard
|
|
|
+ // qty input placement still trigger the update.
|
|
|
+ $(document).on('input change keyup', 'input.qty, input[name="quantity"]', function () {
|
|
|
+ updateDisplayedPrice();
|
|
|
+ });
|
|
|
+
|
|
|
+ function renderTierTable() {
|
|
|
+ if (!currentTiers || currentTiers.length === 0) {
|
|
|
+ $container.hide().empty();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var i18n = studiouWcfppFront.i18n;
|
|
|
+ var html = '<div class="studiou-fpp-qty-tiers-box">';
|
|
|
+ html += '<h4><span class="dashicons dashicons-tag"></span> ' + escHtml(i18n.qtyTiersTitle || 'Quantity Discount') + '</h4>';
|
|
|
+ html += '<table class="studiou-fpp-qty-tiers-table-display"><thead><tr>';
|
|
|
+ html += '<th>' + escHtml(i18n.qtyTiersFromQty || 'From Qty') + '</th>';
|
|
|
+ html += '<th>' + escHtml(i18n.qtyTiersDiscount || 'Discount') + '</th>';
|
|
|
+ html += '<th>' + escHtml(i18n.qtyTiersUnitPrice || 'Unit Price') + '</th>';
|
|
|
+ html += '</tr></thead><tbody>';
|
|
|
+
|
|
|
+ for (var i = 0; i < currentTiers.length; i++) {
|
|
|
+ var t = currentTiers[i];
|
|
|
+ var unit = computeDiscounted(currentBasePrice, t.percent);
|
|
|
+ html += '<tr data-from-qty="' + t.from_qty + '">';
|
|
|
+ html += '<td>' + t.from_qty + '+</td>';
|
|
|
+ html += '<td>' + formatPercent(t.percent) + '</td>';
|
|
|
+ html += '<td>' + formatPrice(unit) + '</td>';
|
|
|
+ html += '</tr>';
|
|
|
+ }
|
|
|
+ html += '</tbody></table></div>';
|
|
|
+
|
|
|
+ $container.html(html).show();
|
|
|
+ }
|
|
|
+
|
|
|
+ function findPriceElement() {
|
|
|
+ var selectors = [
|
|
|
+ '.single_variation .woocommerce-variation-price .woocommerce-Price-amount',
|
|
|
+ 'form.variations_form .woocommerce-variation-price .woocommerce-Price-amount',
|
|
|
+ '.single_variation_wrap .woocommerce-Price-amount',
|
|
|
+ 'form.variations_form .price .woocommerce-Price-amount'
|
|
|
+ ];
|
|
|
+ for (var i = 0; i < selectors.length; i++) {
|
|
|
+ var $el = $(selectors[i]).first();
|
|
|
+ if ($el.length) return $el;
|
|
|
+ }
|
|
|
+ return $();
|
|
|
+ }
|
|
|
+
|
|
|
+ function findQtyInput() {
|
|
|
+ var $qty = $form.find('input.qty').first();
|
|
|
+ if (!$qty.length) $qty = $('input.qty').first();
|
|
|
+ if (!$qty.length) $qty = $('input[name="quantity"]').first();
|
|
|
+ return $qty;
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateDisplayedPrice() {
|
|
|
+ if (!currentBasePrice || !currentTiers || currentTiers.length === 0) {
|
|
|
+ highlightActiveTierRow(0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var $qty = findQtyInput();
|
|
|
+ var qty = $qty.length ? (parseInt($qty.val(), 10) || 1) : 1;
|
|
|
+ var tier = resolveTier(currentTiers, qty);
|
|
|
+ var unit = tier ? computeDiscounted(currentBasePrice, tier.percent) : currentBasePrice;
|
|
|
+
|
|
|
+ var $wcPrice = findPriceElement();
|
|
|
+ if ($wcPrice.length) {
|
|
|
+ $wcPrice.html(formatPriceInner(unit));
|
|
|
+ }
|
|
|
+
|
|
|
+ highlightActiveTierRow(tier ? tier.from_qty : 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ function highlightActiveTierRow(fromQty) {
|
|
|
+ $container.find('tr').removeClass('studiou-fpp-qty-tier-active');
|
|
|
+ if (fromQty > 0) {
|
|
|
+ $container.find('tr[data-from-qty="' + fromQty + '"]').addClass('studiou-fpp-qty-tier-active');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function resolveTier(tiers, qty) {
|
|
|
+ var match = null;
|
|
|
+ for (var i = 0; i < tiers.length; i++) {
|
|
|
+ if (tiers[i].from_qty <= qty) {
|
|
|
+ match = tiers[i];
|
|
|
+ } else {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return match;
|
|
|
+ }
|
|
|
+
|
|
|
+ function computeDiscounted(basePrice, percent) {
|
|
|
+ var p = parseFloat(percent) || 0;
|
|
|
+ if (p <= 0) return basePrice;
|
|
|
+ return basePrice * (1 - p / 100);
|
|
|
+ }
|
|
|
+
|
|
|
+ function formatPercent(percent) {
|
|
|
+ var p = parseFloat(percent) || 0;
|
|
|
+ // Strip trailing zeros
|
|
|
+ var str = p.toFixed(2).replace(/\.?0+$/, '');
|
|
|
+ return str + ' %';
|
|
|
+ }
|
|
|
+
|
|
|
+ function formatPrice(amount) {
|
|
|
+ return '<span class="woocommerce-Price-amount amount">' + formatPriceInner(amount) + '</span>';
|
|
|
+ }
|
|
|
+
|
|
|
+ function formatPriceInner(amount) {
|
|
|
+ var curr = studiouWcfppFront.currency || {};
|
|
|
+ var decimals = parseInt(curr.decimals, 10);
|
|
|
+ if (isNaN(decimals)) decimals = 2;
|
|
|
+ var decSep = curr.decimalSeparator || '.';
|
|
|
+ var thouSep = curr.thousandSeparator || ',';
|
|
|
+ var fmt = curr.priceFormat || '%1$s%2$s';
|
|
|
+ var symbol = curr.symbol || '';
|
|
|
+
|
|
|
+ var fixed = parseFloat(amount).toFixed(decimals);
|
|
|
+ var parts = fixed.split('.');
|
|
|
+ var intPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thouSep);
|
|
|
+ var decPart = parts.length > 1 ? parts[1] : '';
|
|
|
+ var numStr = decPart ? intPart + decSep + decPart : intPart;
|
|
|
+
|
|
|
+ var symbolHtml = '<span class="woocommerce-Price-currencySymbol">' + symbol + '</span>';
|
|
|
+ return fmt.replace('%1$s', symbolHtml).replace('%2$s', numStr);
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
})(jQuery);
|