☰

Ali Total Price

Shows Total Price on Aliexpress

  1. // ==UserScript==
  2. // @name         Ali Total Price
  3. // @author       AndShy
  4. // @description  Shows Total Price on Aliexpress
  5. // @version      2.14
  6. // @license      GPL-3.0
  7. // @namespace    https://github.com/AndShy
  8. // @homepageURL  https://github.com/AndShy/Ali-Total-Price
  9. // @match        *://*.aliexpress.com/*
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.     var pathRegExp1 = /\/item\//i
  16.     var pathRegExp2 = /\/product\//i
  17.     var pathRegExp3 = /\/w\//i;
  18.     var pathRegExp4 = /\/af\//i;
  19.     var pathRegExp5 = /\/wholesale/i;
  20.     var pN = window.location.pathname;
  21.     var currency;
  22.  
  23.     switch(true){
  24.         case pathRegExp1.test(pN):
  25.         case pathRegExp2.test(pN):
  26.             itemPageObserver();
  27.             break;
  28.  
  29.         case pathRegExp3.test(pN):
  30.         case pathRegExp4.test(pN):
  31.         case pathRegExp5.test(pN):
  32.             searchPageObserver();
  33.             break;
  34.  
  35.         default:
  36.             return;
  37.     }
  38.  
  39.     function searchPageObserver() {
  40.         const searchObserverConf = {childList: true, subtree: true};
  41.         var searchObserver = new MutationObserver(LazyLoadOnSearch);
  42.         var timer1 = setInterval(function() {
  43.             currency = document.querySelector('#switcher-info > span.currency');
  44.             if (currency) {
  45.                 if (currency.innerText.length == 3) {
  46.                     currency = currency.innerText;
  47.                     clearInterval(timer1);
  48.                     var listItems = document.querySelector('ul.list-items');
  49.                     if (listItems) {searchObserver.observe (listItems,searchObserverConf)};
  50.                     LazyLoadOnSearch();
  51.                 }
  52.             }
  53.         },100)
  54.     }
  55.  
  56.     function itemPageObserver() {
  57.         const itemObserverConf1 = {attributes: true, attributeFilter: ['value'], childList: false, subtree: false};
  58.         const itemObserverConf2 = {attributes: true, childList: false, subtree: true, characterData: true};
  59.         const itemObserverConf3 = {attributes: true, childList: true, subtree: true, characterData: true};
  60.         var priceEl = document.querySelector('span.uniform-banner-box-price');
  61.         if (!priceEl) priceEl = document.querySelector('div.product-price');
  62.         var quantInpEl = document.querySelector('span.next-input.next-medium.next-input-group-auto-width > input');
  63.         var shippingEl = document.querySelector('div.product-dynamic-shipping > div > div.dynamic-shipping');
  64.         var itemObserver = new MutationObserver(refreshItemValues);
  65.         var timer1 = setInterval(function() {
  66.             currency = document.querySelector('#switcher-info > span.currency');
  67.             if (currency) {
  68.                 if (currency.innerText.length == 3) {
  69.                     currency = currency.innerText;
  70.                     clearInterval(timer1);
  71.                     itemInsertHTML();
  72.                     if (quantInpEl) itemObserver.observe(quantInpEl, itemObserverConf1);
  73.                     if (priceEl) itemObserver.observe(priceEl, itemObserverConf2);
  74.                     if (shippingEl) itemObserver.observe(shippingEl, itemObserverConf3);
  75.                     refreshItemValues();
  76.                 }
  77.             }
  78.  
  79.         },100)
  80.  
  81.     }
  82.  
  83.     function itemInsertHTML() {
  84.         var lotEl = document.querySelector('div.product-price-current.lot');
  85.         var productInfo = document.querySelector('div.product-info');
  86.         if (productInfo){
  87.             var totPrice = document.createElement('div');
  88.             totPrice.innerHTML =
  89.             "<div class='bold' title='1 pcs/lot price = (base price * quantity + shipping cost)/quantity' style='font-size:14px; background-color:#f0f0f0'>" +
  90.             "<span>One piece/lot price:&nbsp;&nbsp;</span><span id='pcs_prc' style='color:blue;'>---</span></div>" +
  91.             "<div class='bold' style='font-size:24px'><span>Total Price:&nbsp;&nbsp;</span><span id='ttl_prc' style='color:red'>---</span></div>";
  92.             productInfo.insertBefore(totPrice, productInfo.querySelector('div.product-action'));
  93.             if (lotEl) {
  94.                 var lot_html =
  95.                 "<span class='bold' title='price for 1pcs from lot' style='font-size:14px; color:black'>&nbsp;&nbsp;&nbsp;1pcs:&nbsp;" +
  96.                 "<span id='lot_pcs_prc' style='color:green;'>---</span></span>";
  97.                 /*var lot_html =
  98.                     "<table cellspacing='0' cellpadding='0' style='margin-left: 0;border-collapse: collapse;color:black;font-size: 10px;display: inline;' class='bold'>" +
  99.                     "<tbody><tr align='center'><td>lot price</td><td rowspan='3'>&nbsp;=&nbsp;</td><td rowspan='3' id='lot_pcs_prc' style='font-size: 14px;'>test3</td>" +
  100.                     "</tr><tr align='center'><td><tt>——————</tt></td></tr><tr align='center'><td>lot pcs</td></tr></tbody></table>";*/
  101.                 lotEl.insertAdjacentHTML('beforeend', lot_html);
  102.             }
  103.         }
  104.     }
  105.  
  106.     function refreshItemValues() {
  107.         var myPcsPrcEl = document.getElementById('pcs_prc');
  108.         var myTtlPrcEl = document.getElementById('ttl_prc');
  109.         var myLotPcsPrcEl = document.getElementById('lot_pcs_prc');
  110.         var lotEl = document.querySelector('span.product-price-piece');
  111.         var shCostEl = document.querySelector("div.product-dynamic-shipping > div > div > div > span > span > strong")
  112.         var quantInpEl = document.querySelector('span.next-input.next-medium.next-input-group-auto-width > input');
  113.         var itemPriceEl = document.querySelector('div.product-price-current > span.product-price-value');
  114.  
  115.         if (!itemPriceEl) {
  116.             itemPriceEl = document.querySelector('div > span.oyuLA');
  117.             if (!itemPriceEl) {itemPriceEl = document.querySelector('span.uniform-banner-box-price')}
  118.         }
  119.         if (!!itemPriceEl && !!shCostEl && !!quantInpEl) {
  120.             if (!itemPriceEl.innerText.includes(' - ')) {
  121.                 var itemPriceValue, shCostValue, tmp;
  122.                 itemPriceValue = strToCurrency(itemPriceEl.innerText.split(' /')[0]);
  123.                 shCostValue = strToCurrency(shCostEl.innerText);
  124.                 tmp = (+itemPriceValue * +quantInpEl.value) + +shCostValue;
  125.                 myTtlPrcEl.innerText = calcTotalPrice(tmp, 2);
  126.                 myPcsPrcEl.innerText = calcTotalPrice(tmp/+quantInpEl.value, 2);
  127.                 if (myLotPcsPrcEl) {
  128.                     myLotPcsPrcEl.innerText = calcTotalPrice(+itemPriceValue/+lotEl.innerText.match(/\d+/), 5);
  129.                 }
  130.             }
  131.             else {
  132.                 myPcsPrcEl.innerText = '---';
  133.                 myTtlPrcEl.innerText = '---';
  134.                 if (myLotPcsPrcEl) myLotPcsPrcEl.innerText = '---';
  135.             }
  136.         }
  137.         else {
  138.             myPcsPrcEl.innerText = '---';
  139.             myTtlPrcEl.innerText = '---';
  140.             if (myLotPcsPrcEl) myLotPcsPrcEl.innerText = '---';
  141.         }
  142.     }
  143.  
  144.     function priceFromEl (el) {
  145.         if (el) {
  146.             if (el.innerText) {
  147.                 strToCurrency(el.innerText);
  148.             }
  149.         }
  150.     }
  151.  
  152.     function LazyLoadOnSearch() {
  153.         var prodList = document.querySelectorAll('div.product-info > div.hover-help > div.item-shipping-wrap');
  154.         var prodGallery = document.querySelectorAll('div.right-zone > div.item-shipping-wrap');
  155.         for (var i = 0, max_i = prodList.length; i < max_i; i++) {
  156.             if (prodList[i].dataset.edited != 'True') {
  157.                 var packagingEl;
  158.                 var ttlPriceList = document.createElement('div');
  159.                 ttlPriceList.style = 'padding-bottom: 5px';
  160.                 prodList[i].parentNode.insertBefore(ttlPriceList, prodList[i].nextElementSibling);
  161.                 ttlPriceList.innerHTML =
  162.                 "<span class='item-shipping-wrap' style='font-size:12px; font-weight:bold'>Total Price:&nbsp;&nbsp;</span>" +
  163.                 "<span class='item-shipping-wrap' style='font-size:12px; color:red; font-weight:bold'>" + SearchPageTotalPrice(ttlPriceList) + "</span>";
  164.                 packagingEl = ttlPriceList.parentNode.querySelector('div.item-price-wrap > div.item-price-row.packaging-sale');
  165.                 if (packagingEl) {
  166.                     packagingEl.style = 'display: block';
  167.                     packagingEl.parentNode.parentNode.parentNode.parentNode.parentNode.classList.remove('packaging_sale');
  168.                 }
  169.                 prodList[i].dataset.edited = 'True';
  170.             }
  171.         }
  172.         for (var j = 0, max_j = prodGallery.length; j < max_j; j++) {
  173.             if (prodGallery[j].dataset.edited != 'True') {
  174.                 var ttlPriceGallery = document.createElement('div');
  175.                 ttlPriceGallery.style = 'padding-bottom: 5px';
  176.                 prodGallery[j].parentNode.insertBefore(ttlPriceGallery, prodGallery[j].nextElementSibling);
  177.                 ttlPriceGallery.innerHTML =
  178.                 "<span class='item-shipping-wrap' style='font-size:12px; font-weight:bold'>Total Price:&nbsp;&nbsp;</span>" +
  179.                 "<span class='item-shipping-wrap' style='font-size:12px; color:red; font-weight:bold'>" + SearchPageTotalPrice(ttlPriceGallery) + "</span>";
  180.  
  181.                 prodGallery[j].dataset.edited = 'True';
  182.             }
  183.         }
  184.     }
  185.  
  186.     function SearchPageTotalPrice (myEl) {
  187.         if (myEl.parentNode.querySelector('span.price-current') && myEl.parentNode.querySelector('span.shipping-value')){
  188.             var itemPriceEl = myEl.parentNode.querySelector('div.item-price-wrap > div > span.price-current');
  189.             var shCostEl = myEl.parentNode.querySelector('div.item-shipping-wrap > span.shipping-value');
  190.             var itemPriceValue = [], shCostValue;
  191.             shCostValue = strToCurrency(shCostEl.innerText);
  192.             if (itemPriceEl.innerText.includes(' - ')) {
  193.                 itemPriceValue = itemPriceEl.innerText.split(' - ');
  194.                 itemPriceValue[0] = strToCurrency(itemPriceValue[0]);
  195.                 itemPriceValue[1] = strToCurrency(itemPriceValue[1]);
  196.                 return (calcTotalPrice(+itemPriceValue[0] + +shCostValue, 2) + ' - ' + calcTotalPrice(+itemPriceValue[1] + +shCostValue, 2));
  197.             }
  198.             else {
  199.                 itemPriceValue[0] = strToCurrency(itemPriceEl.innerText);
  200.                 return (calcTotalPrice(+itemPriceValue[0] + +shCostValue, 2));
  201.             }
  202.         }
  203.     }
  204.  
  205.     function strToCurrency (str) {
  206.         var currencyRegExp = /^\D*?([\d\s\,\.]*?)(?:[\.\,](\d{2}))?\D*$/;
  207.         var tmp = [];
  208.         if (!str.match(/\d/)) return 0;
  209.         //if (str.match(/[a-zA-Z]{4,}/)) return 0;
  210.         tmp = currencyRegExp.exec(str);
  211.         tmp[1] = tmp[1].replace(/\D+/g,'');
  212.         return (tmp[1] + '.' + (tmp[2]?tmp[2]:'00'));
  213.     }
  214.  
  215.     function calcTotalPrice(value, decDigits) {
  216.         return new Intl.NumberFormat('us-US', {style: 'currency', currency: currency, minimumFractionDigits: decDigits, maximumFractionDigits: decDigits}).format(value);
  217.     }
  218.  
  219. })();