Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Необходимо добавить еще один DIV. И получить значение. (https://javascript.ru/forum/css-html/79016-neobkhodimo-dobavit-eshhe-odin-div-i-poluchit-znachenie.html)

svileff 07.12.2019 02:54
Необходимо добавить еще один DIV. И получить значение.
 
Открываю корзину и имею такую структуру:
<div class="t706__cartwin-products">
<div class="t706__product" data-cart-product-i="0">
<div class="t706__product-amount t-descr t-descr_sm">1 210&nbsp;р.</div>
</div>
<div class="t706__product" data-cart-product-i="1">
<div class="t706__product-amount t-descr t-descr_sm">2 110&nbsp;р.</div>
</div>
<div class="t706__product" data-cart-product-i="2">
<div class="t706__product-amount t-descr t-descr_sm">567&nbsp;р.</div>
</div>
</div>

Необходимо добавить еще один DIV. И получить значение (выделил). Поместить его в добавленный DIV c -20%

Получить примерно надо такое:

<div class="t706__product" data-cart-product-i="0">
<div class="t706__product-amount t-descr t-descr_sm">1 210&nbsp;р.</div>
<div class="t706__product-amount-sale">968&nbsp;р.</div>
</div>

Вот наработки по добавлению DIV. Но почему то не выходит. Нужна помощь.

<script>
$( document ).ready(function() {

var number = 0;
//Функция создания DIV
function createinput(){
setTimeout(function() {
var spisok = $(".t706__cartwin-products").length;
for (var x = 0; x <= spisok; x++) {
$('.t706__cartwin-products:eq('+x+')').append('<div class="t706__product-amount-sale t-descr t-descr_sm">1 210&nbsp;р.</div>');
number = $('.t706__cartwin-products:eq('+x+')').html();
};
};

//При открытии корзины запускаем функцию
$( "[href = #order] , .t706__carticon-wrapper" ).click(function() {createinput();});
</script>

laimas 07.12.2019 06:45
Зачем setTimeout?

t706__cartwin-products и надо полагать здесь 706, это ID продукта, а значит такой в корзине будет только один, зачем цикл? Этот же элемент уже имеет <div class="t706__product-amount t-descr t-descr_sm">1 210&nbsp;р.</div>, зачем же его добавлять и при этом не понятно как вы хотите получить <div class="t706__product-amount-sale">968&nbsp;р.</div>?

рони 07.12.2019 09:24
svileff,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 07.12.2019 09:25
svileff,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
function numberWithCommas(str) {
    return (+str).toFixed(2).replace(/(\d+)(\.\d+)?/g, function (c, b, a) {
    return b.replace(/(\d)(?=(\d{3})+$)/g, "$1 ") + a
});
}

$(".t-descr_sm").each(function(i, el) {
var num = (el.textContent.replace(/[^0-9.]/g, "") || 0) * 0.8;
var txt = numberWithCommas(num);
$(el).after(`<div class="t706__product-amount-sale">${txt}&nbsp;р.</div>`)
})
});
  </script>
</head>

<body>
<div class="t706__cartwin-products">
<div class="t706__product" data-cart-product-i="0">
<div class="t706__product-amount t-descr t-descr_sm">1 210&nbsp;р.</div>
</div>
<div class="t706__product" data-cart-product-i="1">
<div class="t706__product-amount t-descr t-descr_sm">2 110&nbsp;р.</div>
</div>
<div class="t706__product" data-cart-product-i="2">
<div class="t706__product-amount t-descr t-descr_sm">567&nbsp;р.</div>
</div>
</div>
</body>
</html>

svileff 07.12.2019 23:20
У меня DIV добавился не в том месте где надо и 0.00 показывает. Видима я структуру не всю указал. Вот вся структура корзины.

<div class="t706__cartwin-products">
<div class="t706__product" data-cart-product-i="0">
<div class="t706__product-thumb">
<div class="t706__product-imgdiv" style="background-image:url(https://static.tildacdn.com/tild3632-3963-4232-b737-393335343436/903417_S.jpg);">
</div>
</div>
<div class="t706__product-title t-descr t-descr_sm">Elizavecca Milky Piggy Hell-Pore Longolongo Gronique Gold Mask Pack<div style="opacity:0.7;font-size:12px;font-weight:400;">903417</div>
</div>
<div class="t706__product-plusminus t-descr t-descr_sm">
<span class="t706__product-minus">
<img src="https://static.tildacdn.com/lib/linea/c8eecd27-9482-6c4f-7896-3eb09f6a1091/arrows_circle_minus.svg" style="width:16px;height:16px;border:0;"></span>
<span class="t706__product-quantity">3</span><span class="t706__product-plus"><img src="https://static.tildacdn.com/lib/linea/c47d1e0c-6880-dc39-ae34-521197f7fba7/arrows_circle_plus.svg" style="width:16px;height:16px;border:0;"></span>
</div>
<div class="t706__product-amount t-descr t-descr_sm">3 861&nbsp;р.</div>
<div class="t706__product-del"><img src="https://static.tildacdn.com/lib/linea/1bec3cd7-e9d1-2879-5880-19b597ef9f1a/arrows_circle_remove.svg" style="width:20px;height:20px;border:0;">
</div>
</div>

<div class="t706__product" data-cart-product-i="1">
<div class="t706__product-thumb">
<div class="t706__product-imgdiv" style="background-image:url(https://static.tildacdn.com/tild6130-6561-4633-a631-306663633061/904117_S.jpg);">
</div>
</div>
<div class="t706__product-title t-descr t-descr_sm">Elizavecca Milky Piggy Vitamin C 21% Ample Mask<div style="opacity:0.7;font-size:12px;font-weight:400;">904117</div>
</div>
<div class="t706__product-plusminus t-descr t-descr_sm"><span class="t706__product-minus"><img src="https://static.tildacdn.com/lib/linea/c8eecd27-9482-6c4f-7896-3eb09f6a1091/arrows_circle_minus.svg" style="width:16px;height:16px;border:0;"></span><span class="t706__product-quantity">1</span><span class="t706__product-plus"><img src="https://static.tildacdn.com/lib/linea/c47d1e0c-6880-dc39-ae34-521197f7fba7/arrows_circle_plus.svg" style="width:16px;height:16px;border:0;"></span>
</div>
<div class="t706__product-amount t-descr t-descr_sm">1 320&nbsp;р.</div>
<div class="t706__product-del"><img src="https://static.tildacdn.com/lib/linea/1bec3cd7-e9d1-2879-5880-19b597ef9f1a/arrows_circle_remove.svg" style="width:20px;height:20px;border:0;">
</div>
</div>
</div>


Соответственно надо скидку поставить после цены.

рони 07.12.2019 23:31
svileff,
так укажите полный селектор в строке 19

рони 07.12.2019 23:34
svileff,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
function numberWithCommas(str) {
    return (+str).toFixed(0).replace(/(\d+)(\.\d+)?/g, function (c, b, a) {
    return b.replace(/(\d)(?=(\d{3})+$)/g, "$1 ") + (a || "")
});
}

$(".t706__product-amount.t-descr.t-descr_sm").each(function(i, el) {
var num = (el.textContent.replace(/[^0-9.]/g, "") || 0) * 0.8;
var txt = numberWithCommas(num);
$(el).after(`<div class="t706__product-amount-sale">${txt}&nbsp;р.</div>`)
})
});
  </script>
</head>

<body>
<div class="t706__cartwin-products">
<div class="t706__product" data-cart-product-i="0">
<div class="t706__product-thumb">
<div class="t706__product-imgdiv" style="background-image:url(https://static.tildacdn.com/tild3632-3963-4232-b737-393335343436/903417_S.jpg);">
</div>
</div>
<div class="t706__product-title t-descr t-descr_sm">Elizavecca Milky Piggy Hell-Pore Longolongo Gronique Gold Mask Pack<div style="opacity:0.7;font-size:12px;font-weight:400;">903417</div>
</div>
<div class="t706__product-plusminus t-descr t-descr_sm">
<span class="t706__product-minus">
<img src="https://static.tildacdn.com/lib/linea/c8eecd27-9482-6c4f-7896-3eb09f6a1091/arrows_circle_minus.svg" style="width:16px;height:16px;border:0;"></span>
<span class="t706__product-quantity">3</span><span class="t706__product-plus"><img src="https://static.tildacdn.com/lib/linea/c47d1e0c-6880-dc39-ae34-521197f7fba7/arrows_circle_plus.svg" style="width:16px;height:16px;border:0;"></span>
</div>
<div class="t706__product-amount t-descr t-descr_sm">3 861&nbsp;р.</div>
<div class="t706__product-del"><img src="https://static.tildacdn.com/lib/linea/1bec3cd7-e9d1-2879-5880-19b597ef9f1a/arrows_circle_remove.svg" style="width:20px;height:20px;border:0;">
</div>
</div>

<div class="t706__product" data-cart-product-i="1">
<div class="t706__product-thumb">
<div class="t706__product-imgdiv" style="background-image:url(https://static.tildacdn.com/tild6130-6561-4633-a631-306663633061/904117_S.jpg);">
</div>
</div>
<div class="t706__product-title t-descr t-descr_sm">Elizavecca Milky Piggy Vitamin C 21% Ample Mask<div style="opacity:0.7;font-size:12px;font-weight:400;">904117</div>
</div>
<div class="t706__product-plusminus t-descr t-descr_sm"><span class="t706__product-minus"><img src="https://static.tildacdn.com/lib/linea/c8eecd27-9482-6c4f-7896-3eb09f6a1091/arrows_circle_minus.svg" style="width:16px;height:16px;border:0;"></span><span class="t706__product-quantity">1</span><span class="t706__product-plus"><img src="https://static.tildacdn.com/lib/linea/c47d1e0c-6880-dc39-ae34-521197f7fba7/arrows_circle_plus.svg" style="width:16px;height:16px;border:0;"></span>
</div>
<div class="t706__product-amount t-descr t-descr_sm">1 320&nbsp;р.</div>
<div class="t706__product-del"><img src="https://static.tildacdn.com/lib/linea/1bec3cd7-e9d1-2879-5880-19b597ef9f1a/arrows_circle_remove.svg" style="width:20px;height:20px;border:0;">
</div>
</div>
</div>
</body>
</html>

svileff 07.12.2019 23:42 
<script>
$( document ).ready(function createinput(){
function numberWithCommas(str) {
    return (+str).toFixed(3).replace(/(\d+)(\.\d+)?/g, function (c, b, a) {
    return b.replace(/(\d)(?=(\d{3})+$)/g, "$1 ") + a
});
}
$(".t706__product-amount.t-descr.t-descr_sm").each(function(i, el) {
var num = (el.textContent.replace(/[^0-9.]/g, "") || 0) * 0.8;
var txt = numberWithCommas(num);
$(el).after(`<div class="t706__product-amount-sale">${txt}&nbsp;р.</div>`)
})
});
//При открытии корзины запускаем функцию 
$( "[href = #order], .t706__carticon-wrapper").click(function() {createinput();});
</script>


Я запускаю через открытие корзины в окне. Может тут допустил ошибку...

рони 07.12.2019 23:48
svileff,
<script>
$(function() {
    $("[href = '#order'], .t706__carticon-wrapper").click(function() {
        function numberWithCommas(str) {
            return (+str).toFixed(0).replace(/(\d+)(\.\d+)?/g, function(c, b, a) {
                return b.replace(/(\d)(?=(\d{3})+$)/g, "$1 ") + (a || "")
            })
        }
        $(".t706__product-amount.t-descr.t-descr_sm").each(function(i, el) {
            var num = (el.textContent.replace(/[^0-9.]/g, "") || 0) * .8;
            var txt = numberWithCommas(num);
            $(el).after('<div class="t706__product-amount-sale">' + txt + "&nbsp;\u0440.</div>")
        })
    })
});
  </script>

svileff 07.12.2019 23:54
Странно сделал как написали вообще все пропало
https://lowo.store/all

рони 07.12.2019 23:59
svileff,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
это грузить не надо, у вас уже есть jquery

svileff 08.12.2019 00:06
Скидка так и не появляется

рони 08.12.2019 00:25
svileff,
на момент клика корзины не существует, она либо формируется, либо грузится с сервера, надо ставить дополнение в функцию формирования корзины.
можно конечно через таймер, но это очень плохой вариант.
$(function() {
    $("[href = '#order'], .t706__carticon-wrapper").click(function() {
        window.setTimeout(function() {
            function numberWithCommas(str) {
                return (+str).toFixed(0).replace(/(\d+)(\.\d+)?/g, function(c, b, a) {
                    return b.replace(/(\d)(?=(\d{3})+$)/g, "$1 ") + (a || "")
                })
            }
            $(".t706__product-amount.t-descr.t-descr_sm").each(function(i, el) {
                var nextLength = $(el).next(".t706__product-amount-sale").length;
                if (nextLength) return;
                var num = (el.textContent.replace(/[^0-9.]/g, "") || 0) * .8;
                var txt = numberWithCommas(num);
                $(el).after('<div class="t706__product-amount-sale">' +
                    txt + "&nbsp;\u0440.</div>")
            })
        }, 1500)
    })
});

svileff 08.12.2019 00:41
Да так все срабатывает... Но небольшая задержка происходит. И еще как можно ограничить скидку что бы она начинала появляться когда общая сумма достигнет 3000 руб.

рони 08.12.2019 00:47
Цитата:
Сообщение от svileff
Но небольшая задержка происходит.
Цитата:
Сообщение от рони
это очень плохой вариант.
Цитата:
Сообщение от рони
надо ставить дополнение в функцию формирования корзины.
Цитата:
Сообщение от svileff
И еще как можно
можно, но уже нет желания городить костыли.
смотрите общую сумму и делай условие в строке 9
if(сумма > 3000) $(".t706__product-amount.t-descr.t-descr_sm").each(function(i, el) {

svileff 08.12.2019 00:59 
$(".t706__cartwin-prodamount").bind( 'DOMSubtreeModified',function() {
var firsttime = true;
var productsum = window.tcart.prodamount;
num++;
if(  (num == 2 || firsttime )  && (productsum > 3000) ) $(".t706__product-amount.t-descr.t-descr_sm").each(function(i, el) {


Что то типа такого?

рони 08.12.2019 01:04
Цитата:
Сообщение от svileff
Что то типа такого?
:) возможно.

svileff 08.12.2019 01:07
Кстати когда миняеш значение товара цена миняется а скидка нет... Как это можно подправить.

рони 08.12.2019 01:17
svileff,
var nextLength = $(el).next(".t706__product-amount-sale").length;
 if (nextLength) return;

заменить на
$(el).next(".t706__product-amount-sale").remove()

svileff 08.12.2019 01:22
Заменил не меняется

рони 08.12.2019 01:27
Цитата:
Сообщение от svileff
Кстати когда миняеш значение товара цена миняется а скидка нет...
видимо я не понимаю, о чём это.

svileff 08.12.2019 01:30
Когда в корзине меняю количество товара например 2шт., цена указывается за 2 товара. А скидка показывает за 1шт.

рони 08.12.2019 01:47
svileff,
не особо понимаю, возможно вы хотите так
$(function() {
    $("[href = '#order'], .t706__carticon-wrapper").click(function() {
        window.setTimeout(function() {
function numberWithCommas(str) {
            return (+str).toFixed(0).replace(/(\d+)(\.\d+)?/g, function(c, b, a) {
                return b.replace(/(\d)(?=(\d{3})+$)/g, "$1 ") + (a || "")
            })
        }
        $(".t706__product-amount.t-descr.t-descr_sm").each(function(i, el) {
            var num = (el.textContent.replace(/[^0-9.]/g, "") || 0) * .8;
            var quantity = $(el).prev().find(".t706__product-quantity").text() || 1;
            var txt = numberWithCommas(num * quantity);
            $(el).after('<div class="t706__product-amount-sale">' + txt + "&nbsp;\u0440.</div>")
        })
}, 1500)
    })
});

далее сами ...

svileff 08.12.2019 02:10
Понятно спасибо!!!

svileff 09.12.2019 00:15
Я почти дописал весь скрипт. Но есть небольшие недочеты. Помогите пожалуйста. Не могу решить некоторые проблемы... 
<script>
    $( document ).ready(function() {
var num = 0;
var firsttime = true;
//Следим за изменением суммы товаров
     $(".t706__cartwin-prodamount").bind( 'DOMSubtreeModified',function() {
    //Получаем сумму товара
    var productsum = window.tcart.prodamount;
    num++;    
//Если сумма товара от 1000 до 5000, то промо код выдаёт
if ( ( productsum > 1000) && ( productsum < 5000) ){
    $('.t-inputpromocode__wrapper').removeClass("promo-kod");
} else {
    $('.t-inputpromocode__wrapper').addClass("promo-kod");
};
//Если сумма товара больше 7000, то выдаём скидку 
 if (  (num == 2 || firsttime )  && (productsum > 7000) ){
        function numberWithCommas(str) {
            return (+str).toFixed(0).replace(/(\d+)(\.\d+)?/g, function(c, b, a) {
                return b.replace(/(\d)(?=(\d{3})+$)/g, "$1 ") + (a || "")
            })
        }
        // Добавляем скидку к каждому товару
        $(".t706__product-amount.t-descr.t-descr_sm").each(function(i, el) {
            $(el).next(".t706__product-amount-sale").remove();
            var nums = (el.textContent.replace(/[^0-9.]/g, "") || 0) * .85;
            var txt = numberWithCommas(nums);
            $(el).after('<div class="t706__product-amount-sale t-descr t-descr_sm">' +
            txt + "&nbsp;\u0440.</div>");
            $(".t706__product-amount.t-descr.t-descr_sm").addClass("sum");
        })
    //Получаем итоговую сумму
    var allsum = window.tcart.amount;
    //Вычитаем 15% от суммы товаров
    var mydisc = productsum*0.15;
    //Корректируем итог на скидку товара
    window.tcart.amount = allsum - mydisc;
    var prodsumWdisc = productsum - mydisc;
    var prodamoun = numberWithCommas(window.tcart.amount);
    //Выводим надпись итоговой суммы в корзину 
    $(".t706__cartwin-prodamount").html(prodamoun + ' р.');
    //Выводим надпись итоговой суммы в корзину 
    $(".t706__cartwin-totalamount").html(window.tcart.amount);
    window.tcart.prodamount = window.tcart.prodamount + ' р;<br> Скидка составила: ' + mydisc + ' р;<br> Сумма товара с учётом скидки: ' + prodsumWdisc;
    //Создаём надпись для скрытых полей
    $("[name='yourdiscount']").val(mydisc);
    $("[name='minusdiscount']").val(prodsumWdisc);
    num=0; firsttime = false;
}; if ( num >= 2 ){ num = 0};});  }); 
</script>


1. Когда достигаю суммы 7000 выводит скидку, а когда уменьшаю сумму скидка остается.
2. В самой корзине нажимая на + - изменяется цена, а скидка изменяется но не вся. Первые 3 ряда не меняются. Не могу найти причину.

То что получилось https://lowo.store/all

svileff 09.12.2019 23:29
Все сам решил, все спасибо.


Часовой пояс GMT +3, время: 14:49.