Pjax на сайте

Добрый день. Есть к примеру такой скрипт

<script>
   //замена цены на странице
$('.card-product-section .old').html('[[if? &is=`[*price-disc*]:not_empty` &then=`[[format_price? &price=`[*price-disc*]`]]` &else=``]]');
$('.card-product-section .new').html('[[format_price? &price=`[*price*]`]]');
$("#materialNew").html('[*material*]');
$('.mobile-footer .new').html('[[format_price? &price=`[*price*]`]]');
$('.bottombox .old').html('[[if? &is=`[*price-disc*]:not_empty` &then=`[[format_price? &price=`[*price-disc*]`]]` &else=``]]');
$('.bottombox .new').html('[[format_price? &price=`[*price*]`]]');
</script>


Мне необходимо вынести его во внешний файл script.js. Как теперь можно получать эти значения? Так как во внешнем файле данные значения не преобразуются. Заранее спасибо за помощь

21 комментарий

avatar
Сделайте на странице скрытые тэги со свойствами display:none и с нужными id и своими атрибутами (да, так можно).
типа
<span id="test" price="15999" class="disp-none" ></span>


и в js файле обращайтесь уже к нужному тэгу
$('#test').attr('price');
Комментарий отредактирован 2019-07-18 10:08:40 пользователем Grinyaha
avatar
К сожалению данные в атрибутах не меняются
avatar
что значит данные в атрибутах не меняются? Что туда поставите то там и будет)
avatar
Приведу полный код
Это цены

 <div class="sidebar-body">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="price">
                                                    <span class="old">[[if? &is=`[*price-disc*]:not_empty` &then=`[[format_price? &price=`[*price-disc*]`]]` &else=``]]</span>
                                                    [[if? &is=`[*price*]:not_empty` &then=` <span class="new">[[format_price? &price=`[*price*]`]]</span>` &else=``]]
                                                </div>
												<span id="test" price="[[format_price? &price=`[*price*]`]]" class="disp-none" ></span>
                                                <div class="info-btn d-flex align-items-center">
													<a href="#modalOrder" data-toggle="modal">
                                                            <div class="prod-icon"><i class="material-icons">shopping_cart</i></div>
                                                        </a>
                                                    <a href="#modalCall" data-toggle="modal">
														
                                                        <div class="prod-icon"><i class="material-icons">phone</i></div>
                                                    </a>
                                                    <a href="#modalQuestion" data-toggle="modal">
                                                        <div class="prod-icon"><i class="material-icons">message</i></div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>

А это код обработчик


         $(".owl-small .owl-item").mouseup(function () {
            $(this).click();
            let color = $(".owl-small .active #color").val();
            let old_price = $(".owl-small .active #old_price").val();
            let price = $(".owl-small .active #price").val();
            let material = $(".owl-small .active #material").val();
            let product_id = $(".owl-small .active #product_id").val();
            // console.log(material);
            // console.log(color);
            //console.log(price);
            // console.log(old_price);
      
            if (!(color === "" && old_price === "" && price === "" && material === "")) {
                let type = true;
                if (color == undefined && old_price == undefined && price == undefined && material == undefined) {
                    type = false;
                      // console.log("norm");
                    //замена цены на странице
                    $('.card-product-section .old').html('[[if? &is=`[*price-disc*]:not_empty` &then=`[[format_price? &price=`[*price-disc*]`]]` &else=``]]');
                    $('.card-product-section .new').html('[[format_price? &price=`[*price*]`]]');
                    $("#materialNew").html('[*material*]');
                    $('.mobile-footer .new').html('[[format_price? &price=`[*price*]`]]');
					$('.bottombox .old').html('[[if? &is=`[*price-disc*]:not_empty` &then=`[[format_price? &price=`[*price-disc*]`]]` &else=``]]');
					$('.bottombox .new').html('[[format_price? &price=`[*price*]`]]');
				

                    //end
                }
                else {
                    type = true;
                    price_make();
                    price_replace();
                }
            }
       
          

            function price_make() {
                //обработка цены
                let float_part_old = old_price.slice(-3);
                let float_part = price.slice(-3);
                if (float_part_old.substring(0, 1) === "," || float_part_old.substring(0, 1) === ".") {
                    old_price = old_price.replace(",", ".");
                }
                else {
                    old_price = old_price + '.00';
                }
                if (float_part.substring(0, 1) === "," || float_part.substring(0, 1) === ".") {
                    price = price.replace(",", ".");
                }
                else {
                    price = price + '.00';
                }
                //end
            }

            function price_replace() {
                //замена цены на странице
                if (!(old_price === "" || old_price.substring(0, 1) === ".")) {
                    //document.getElementById('olDprice').innerHTML = old_price + ' руб.';
                    $('.card-product-section .old').html(old_price + ' руб.');
                    $('.bottombox .old').html(old_price + ' руб.');
                }
                else {
                    //document.getElementById('olDprice').innerHTML = '';
                    $('.card-product-section .old').html('');
                    $('.bottombox .old').html('');
                }

                if (!(price === "" || price.substring(0, 1) === ".")) {
                    //document.getElementById('neWprice').innerHTML = price + ' руб.';
                    $('.card-product-section .new').html(price + ' руб.');
                    $('.mobile-footer .new').html(price + ' руб.');
                    $('.bottombox .new').html(price + ' руб.');
                }
                else {
                    //document.getElementById('neWprice').innerHTML = '';
                    $('.card-product-section .new').html('');
                    $('.mobile-footer .new').html('');
                    $('.bottombox .new').html('');
                }

                if (!(material === "")) {
                    document.getElementById('materialNew').innerHTML = material;
                }
                else {
                    document.getElementById('materialNew').innerHTML = '';
                }
                //end
            }
        });
   
avatar
Вот эти конструкции прячьте в скрытые теги
[[if? &is=`[*price-disc*]:not_empty` &then=`[[format_price? &price=`[*price-disc*]`]]

и из js кода обращайтесь к нужным тегам и берите из их атрибутов значения. Не вижу проблемы.
avatar
Оно не вставляет значение .attr
Даже если для примера поставить значение 5

$('.card-product-section .new').attr('5');


то на сайте выводится 495 р. то есть
а вот если сделать так

$('.card-product-section .new').html('5');

то выводит 5
avatar
Вы не поняли идею. Берем скрытый тэг у которого есть атрибут price, присваиваем атрибуту значение в виде вашего велосипеда
<span id="test" price="[[if? &is=`[*price-disc*]:not_empty` &then=`[[format_price? &price=`[*price-disc*]`]]"></span>

Далее из JS забираем значение этого атрибута
не вот так
<s>$('.card-product-section .new').attr('5');</s>

а вот так
$('#price').attr('price');

а если вы хотите это значение уже куда то вставить на странице, то тогда надо делать
$('.card-product-section .new').html('5');

где вместо пятерки уже подставить переменную со значением из атрибута, либо прямо туда велосипед загнать. Уже не знаю как подробнее написать.
avatar
Также можно не использовать атрибуты, а брать значения html()
<span id="test">[[if? &is=`[*price-disc*]:not_empty` &then=`[[format_price? &price=`[*price-disc*]`]]</span>


из JS значение тогда получаем так
var test = $('#test').html();


теперь отправляем туда куда нам надо
var $('#test2').html(test);
avatar
Спасибо все получилось!
avatar
И еще вопрос, может кому то тоже пригодится.
Как получать значение понятно. А если такая крнструкция. Допусти я делаю swiper.

   let smallSwiper[+id+] = new Swiper('#swiper-small-[+id+]', {
                loop: false,
                direction: 'vertical',
                spaceBetween: 20,
                slidesPerView: 2,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
            });

как в пременной подставить значение другой переменной&
avatar
до вызова свайпера обозначьте переменную test = 20; без var
в свайпере spaceBetween: test, попробуйте
avatar
я про этот кусок кода
let smallSwiper[+id+] = new Swiper('#swiper-small-[+id+]'

Подставлять вместо {+id] значение из переменной.В теле все работает хорошо, а вот во внешнем js…
avatar
<code>
var id = $('#test').html();
let smallSwiper+id = new Swiper('#swiper-small-'+id, { и тд.
</code>
Комментарий отредактирован 2019-07-19 12:39:32 пользователем Grinyaha
avatar
хм, Uncaught SyntaxError: Unexpected token +
var inid = $('#inid').html();

      	        let smallSwiper+inid = new Swiper('#swiper-small-+inid', {
                loop: false,
                direction: 'vertical',
                spaceBetween: 20,
                slidesPerView: 2,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
            	});
avatar
я же написал вот так #swiper-small-'+id
а вы упорно пишете так #swiper-small-+inid
avatar
Большое спасибо вам за уделенное время и терпеливость. Очень помогли!
avatar
let smallSwiper+id = на этот кусок все еще ругается…
avatar
так может let smallSwiper+inid? судя по вашему коду.
avatar
inid поменял наId
Пока сделал так

var id = $('#inid').html();
var smal = "smallSwiper";
var smallSwipers = smal+id;
var smallSwipers = new Swiper('#swiper-small-'+id и т.д
avatar
ну работает и ладно)
avatar
Вы уж извините. Но позволю задать еще один вопрос. Все работает, но данный скрипт из script.js инициализирует только первый слайдер. Остальные не работают. Понимаю логикой что надо как то сказать скрипту что необходимо обрабатывать все документы с именем swiper. Только как это сделать не пойму
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.