I am pulling products from the iTunesConnect using the in-app-purchase cordova plugin and want to show the valid products (title) in a radio button list.
The store.('product')update function renders this (I don't know why they are shown twice?!)
2015-12-27 10:59:12.158 paypal3drupal[1059:18480] 200 - OK
2015-12-27 10:59:12.896 paypal3drupal[1059:18480] product_item: {"id":"120points","alias":"120 Points","type":"consumable","state":"valid","title":"120 Points","description":"Get 120 points for asking questions","price":"€10,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.897 paypal3drupal[1059:18480] product_item: {"id":"120points","alias":"120 Points","type":"consumable","state":"valid","title":"120 Points","description":"Get 120 points for asking questions","price":"€10,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.897 paypal3drupal[1059:18480] product_item: {"id":"200points","alias":"200 Points","type":"consumable","state":"valid","title":"Points 200","description":"Get 200 points for everything","price":"€15,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.897 paypal3drupal[1059:18480] product_item: {"id":"200points","alias":"200 Points","type":"consumable","state":"valid","title":"Points 200","description":"Get 200 points for everything","price":"€15,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.900 paypal3drupal[1059:18480] \o/ STORE READY \o/
The cordova example renders the product like this
// When any product gets updated, refresh the HTML.
store.when("product").updated(function (p) {
app.renderIAP(p);
});
and
app.renderIAP = function(p) {
var elId = p.id.split(".").pop();
var el = document.getElementById(elId + '-purchase');
if (!el) return;
if (!p.loaded) {
el.innerHTML = '<h3>...</h3>';
}
else if (!p.valid) {
el.innerHTML = '<h3>' + p.alias + ' Invalid</h3>';
}
else if (p.valid) {
var html = "<h3>" + p.title + "</h3>" + "<p>" + p.description + "</p>";
if (p.canPurchase) {
html += "<div class='button' id='buy-" + p.id + "' productId='" + p.id + "' type='button'>" + p.price + "</div>";
}
el.innerHTML = html;
if (p.canPurchase) {
document.getElementById("buy-" + p.id).onclick = function (event) {
var pid = this.getAttribute("productId");
store.order(pid);
};
}
}
How can I dynamically target and populate a radio button widget in Drupalgap? More specifically, how can I populate the radio button options and values (option value = product_item_id, option label = product_item.title)?
Based on the form documents example I have a custom page with static values that displays the form with a submit button.
/**
* Implements hook_menu().
*/
function my_module_menu() {
try {
var items = {};
items['in-app'] = {
title: 'get points',
page_callback: 'drupalgap_get_form',
page_arguments: ['my_module_payment_form']
};
return items;
}
catch (error) {
console.log('my_module_menu - ' + error);
}
}
/**
* Define the form.
*/
function my_module_payment_form(form, form_state) {
try {
form.elements['points'] = {
type: 'radios',
title: 'Points',
options: {
0: 'cancel',
70: '70 Points', // should look something like product_item.id[0] : product_item.title[0]
120: '120 Points',
250: '250 Points'
},
default_value:0,
required: true
};
form.elements['submit'] = {
type: 'submit',
value: 'Buy points'
};
return form;
}
catch (error) { console.log('my_module_payment_form - ' + error); }
}
/**
* Define the form's submit function.
*/
function my_module_payment_form_submit(form, form_state) {
try {
drupalgap_alert('You selected ' + form_state.values['points'] + '!');
}
catch (error) { console.log('my_module_payment_form_submit - ' + error); }
}