Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.09.2017, 12:08
Новичок на форуме
Отправить личное сообщение для Aleqr Посмотреть профиль Найти все сообщения от Aleqr
 
Регистрация: 06.09.2017
Сообщений: 5

помощь по js
Есть апи магазина . который выводит на сайт два поля в них вводится товар и ник эта инфа передается на сайт и там уже происходит оплата . Задача сделать чтобы ник вводился автомотически из апи стима (ник записан в мету ) . Сайт работает на wordpress . Вот скрипт апи.
var TrademcAPI = {};
(function(self){
    var base = 'https://api.trademc.org/',
        widgetStyles = base + 'widget-styles/',
        loadedStyles = [];
        
    self.GetOnline = function(params){
        var source = {
            Shop: 1,
            TextMask: 'Онлайн: {players} из {max_players}. Версия {version}',
            BackgroundColor: '#6F7D95',
            UIColor: '#fff',
            Styles: widgetStyles + 'online.css?131313',
            PastPlaceID: 'trademc-online'
        };
        params = extend(params, source);
        
        getJSON('getOnline', { shop: params.Shop }, function(data){
            var message,
                container = document.getElementById(params.PastPlaceID),
                blockStatus = '';
            
            if(data.response){
                message = params.TextMask;
                message = message.replace(/{players}/g, data.response.players);
                message = message.replace(/{max_players}/g, data.response.max_players);
                message = message.replace(/{version}/g, data.response.version);
                
                var perc = parseFloat(data.response.players / data.response.max_players * 100).toFixed(2);
                
                blockStatus = '<div class="trademc-progress-bar-bg">\
                                   <div style="background-color:' + params.UIColor + ';width:' + perc + '%" class="trademc-progress-bar-line"></div>\
                               </div>';
            } else {
                message = data.error.error_msg;
            }
            
            var html = '<div style="background:' + params.BackgroundColor + ';color:' + params.UIColor + '" class="trademc-progress-bar">\
                            <div class="trademc-progress-bar-description">' + message + '</div>\
                            ' + blockStatus + '\
                        </div>';
            
            loadCss(params.Styles);
            container.innerHTML = html;
        });
    }
    
    self.GetBuyForm = function(params){
        var source = {
            Shop: 1,
            Title: 'Купить донат',
            Nickname: 'Введите Ваш никнейм',
            Item: 'Выберите товар',
            Coupon: 'Введите купон, если есть',
            Button: 'Продолжить',
            Success_URL: 'https://trademc.org',
            Fail_URL: 'https://trademc.org',
            Styles: widgetStyles + 'buyform.css',
            PastPlaceID: 'trademc-buyform'
        };
        params = extend(params, source);
        
        getJSON('getItems', { shop: params.Shop }, function(data){
            var container = document.getElementById(params.PastPlaceID),
                coupon = '',
                items = '';
                
            if(data.response.coupon_exist)
                coupon = '<input name="coupon" class="trademc-buyform-input" placeholder="' + params.Coupon + '">';
            
            for(var i = 0, l = data.response.items.length; i < l; i++){
                items += '<span data-itemid="' + data.response.items[i].id + '">\
                              <strong>' + data.response.items[i].name + '</strong>\
                              <small>Цена: ' + data.response.items[i].cost + ' Р</small>\
                          </span>';
            }
            
            var html = '<div class="trademc-buyform">\
                            <div class="trademc-buyform-title">' + params.Title + '</div>\
                            <input name="nickname" class="trademc-buyform-input" placeholder="' + params.Nickname + '">\
                            <div class="trademc-buyform-select" data-itemid="0">\
                                <div class="trademc-buyform-select-title"><span>' + params.Item + '</span></div>\
                                <div class="trademc-buyform-select-droplist">' + items + '</div>\
                            </div>\
                            ' + coupon + '\
                            <div class="trademc-buyform-button">' + params.Button + '</div>\
                        </div>';
            
            loadCss(params.Styles);
            container.innerHTML = html;
            
            function addEvent(el, f){
                el = document.querySelectorAll(el);
                for (var i = 0, l = el.length; i < l; i++){
                    el[i].onclick = f;
                }
            }

            addEvent('.trademc-buyform-select-title', function(){
                this.parentNode.classList.toggle('visible');
            });
            
            addEvent('.trademc-buyform-select-droplist > span', function(){
                this.parentNode.parentNode.classList.remove('visible');
                this.parentNode.previousElementSibling.innerHTML = this.children[0].innerHTML;
                this.parentNode.parentNode.setAttribute('data-itemid', this.getAttribute('data-itemid'));
            });
            
            addEvent('.trademc-buyform-button', function(){
                var widget = this;
                if(widget.classList.contains('load'))
                    return;
                
                var nickname = widget.parentNode.querySelector('[name=nickname]').value;
                var itemID = widget.parentNode.querySelector('.trademc-buyform-select').getAttribute('data-itemid');
                
                if(!nickname){
                    widget.parentNode.querySelector('[name=nickname]').classList.add('error');
                    widget.parentNode.querySelector('[name=nickname]').focus();
                }
                
                else if(itemID == "0")
                    widget.parentNode.querySelector('.trademc-buyform-select').classList.add('error');
                
                else
                {
                    var coupon = '';
                    if(data.response.coupon_exist){
                        var couponInput = widget.parentNode.querySelector('[name=coupon]');
                        coupon = couponInput.value;
                    }
                    
                    widget.classList.add('load');
                    getJSON('buyItem', { item: itemID, nickname: nickname, coupon: coupon, success_url: params.Success_URL, fail_url: params.Fail_URL }, function(data){
                        if(data.error){
                            couponInput.value = '';
                            couponInput.focus();
                            couponInput.classList.add('error');
                            couponInput.setAttribute('placeholder', data.error.error_msg);
                            widget.classList.remove('load');
                            return;
                        }
                        
                        var body = document.getElementsByTagName("body")[0];

                        var form = document.createElement('form');
                        form.method = 'get';
                        form.style.display = 'none';
                        form.action = 'https://api.trademc.org/shop.userTransfer';
                        form.innerHTML = '<input type="hidden" name="params[data]" value="' + data.response.data + '">';
                        
                        body.appendChild(form);
                        form.submit();
                    });
                }
            });
        });
    }
    
    function getJSON(method, params, callback){
        var stringParams = Object.keys(params).map(function(key){ 
            return 'params[' + encodeURIComponent(key) + ']=' + encodeURIComponent(params[key]); 
        }).join('&');
        
        var XHR = window.XDomainRequest || window.XMLHttpRequest;
		var xhr = new XHR();
        
		xhr.open('GET', base + 'shop.' + method + '?' + stringParams, true);
		xhr.onload = function(){
			var answer = JSON.parse(xhr.responseText);
            callback(answer);
		}
		xhr.onerror = function() {
			callback({ error: { error_msg: "Ошибка." } });
		}
		xhr.send();
    }
    
    function extend(target, source) {
        if(!target)
            return source;
        
        for (var key in source) {
            if (typeof target[key] === 'undefined') {
                target[key] = source[key];
            }
        }
        
        return target;
    }
    
    function loadCss(path){
        if(loadedStyles.indexOf(path) != -1)
            return;
        
        var style = document.createElement('link');
        style.href = path;
        style.type = 'text/css';
        style.rel = 'stylesheet';
        style.async = true;
        document.getElementsByTagName('head')[0].appendChild(style);
        
        loadedStyles.push(path);
    }
})(TrademcAPI);


Код добовляемый на сайт
<script src="https://api.trademc.org/trademcapi.js"></script>
<div id="trademc-buyform"></div>
<script>TrademcAPI.GetBuyForm({"Shop":"1","Title":"Купить донат","Nickname":"Введите ваш никнейм","Item":"Выберите товар","Coupon":"Введите купон, если есть","Button":"Продолжить","Success_URL":"https://trademc.org","Fail_URL":"https://trademc.org","PastPlaceID":"trademc-buyform"});</script>

Ник из api стима вызывается по команде
get_user_meta($user_id, 'steam_steamid', true)
Ответить с цитированием
  #2 (permalink)  
Старый 06.09.2017, 12:11
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Aleqr, а что у вас не получается?
Ответить с цитированием
  #3 (permalink)  
Старый 06.09.2017, 12:12
Новичок на форуме
Отправить личное сообщение для Aleqr Посмотреть профиль Найти все сообщения от Aleqr
 
Регистрация: 06.09.2017
Сообщений: 5

Сообщение от Nexus Посмотреть сообщение
Aleqr, а что у вас не получается?
Вот сделать то самое автозаполнеиние поля
Ответить с цитированием
  #4 (permalink)  
Старый 06.09.2017, 12:13
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Aleqr, а что вы сделали, чтобы реализовать задуманное?
Ответить с цитированием
  #5 (permalink)  
Старый 06.09.2017, 12:15
Новичок на форуме
Отправить личное сообщение для Aleqr Посмотреть профиль Найти все сообщения от Aleqr
 
Регистрация: 06.09.2017
Сообщений: 5

Сообщение от Nexus Посмотреть сообщение
Aleqr, а что вы сделали, чтобы реализовать задуманное?
Пробывал вставить с помошью команды value но не получается информация не выводится поле
Ответить с цитированием
  #6 (permalink)  
Старый 06.09.2017, 12:24
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Aleqr, вставить значение в поле можно так:

<input type="text" id="field" value=""/>
<script>
setTimeout(function(){
document.getElementById('field').value='New value';
},1500);
</script>
Ответить с цитированием
  #7 (permalink)  
Старый 06.09.2017, 12:24
Новичок на форуме
Отправить личное сообщение для Aleqr Посмотреть профиль Найти все сообщения от Aleqr
 
Регистрация: 06.09.2017
Сообщений: 5

Сообщение от Nexus Посмотреть сообщение
Aleqr, а что вы сделали, чтобы реализовать задуманное?
Пробывал вот так но не получилось . В js не силен нужно реализовать побыстрее

var html = '<div class="trademc-buyform">\
                            <div class="trademc-buyform-title">' + params.Title + '</div>\
                            <input name="nickname" class="trademc-buyform-input" placeholder="' + params.Nickname + '" value="<?php echo get_user_meta( get_current_user_id(), "ARRAY_NAME",false);?>>\
                            <div class="trademc-buyform-select" data-itemid="0">\
                                <div class="trademc-buyform-select-title"><span>' + params.Item + '</span></div>\
                                <div class="trademc-buyform-select-droplist">' + items + '</div>\
                            </div>\
                            ' + coupon + '\
                            <div class="trademc-buyform-button">' + params.Button + '</div>\
                        </div>';
Ответить с цитированием
  #8 (permalink)  
Старый 06.09.2017, 12:27
Новичок на форуме
Отправить личное сообщение для Aleqr Посмотреть профиль Найти все сообщения от Aleqr
 
Регистрация: 06.09.2017
Сообщений: 5

Сообщение от Nexus Посмотреть сообщение
Aleqr, вставить значение в поле можно так:

<input type="text" id="field" value=""/>
<script>
setTimeout(function(){
document.getElementById('field').value='New value';
},1500);
</script>
в Js Не силен подскажите подалуйста как это вставить в код
просто текст вставить у меня и так получилось а как вставить мету
get_user_meta($user_id, 'steam_steamid', true)

Последний раз редактировалось Aleqr, 06.09.2017 в 12:29.
Ответить с цитированием
  #9 (permalink)  
Старый 06.09.2017, 12:29
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Aleqr, в head страницы вставьте это:
<script>var SteamUserName='<?php echo get_user_meta( get_current_user_id(), "ARRAY_NAME",false);?>';</script>

Строку 3 своего кода замените на это:
<input name="nickname" class="trademc-buyform-input" placeholder="' + params.Nickname + '" value="'+window.SteamUserName+'">\
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запуск JS, нажатием клавиш. Помощь. DoeJohn Общие вопросы Javascript 4 29.01.2014 20:44
Вывыод контента через JS inet_boy Элементы интерфейса 0 18.11.2013 03:00
Окажите помощь РНР-сту с событиями JS brigz Общие вопросы Javascript 4 07.06.2012 21:48
select в js. нужна помощь vladislav_m Общие вопросы Javascript 10 02.04.2011 10:27
JS Jquery нужна помощь globalus2010 Javascript под браузер 1 25.03.2011 00:05