Press me First button signifies a real-life purchase. Upon clicking it, product_buy_now() function is triggered, which populates the following arrays:
news_from_to
number_of_news
news_price_data
Once the data is set, inbox_open() function is called to set up the popover's title and data-content attributes. It should work as intended. To see how the final result should appear, you can refer to this sample code that does not utilize dynamically filled arrays: https://jsfiddle.net/HopeLess/0gbcatL3/. Thank you in advance for your assistance!
<!-- HTML -->
<button class="btn btn-sm btn-danger" style="margin: 40px 0 0 0;" onclick="product_buy_now()">Press Me First</button>
<button id="inbox" class="btn btn-primary btn-sm" style="margin: 40px 0 0 400px;" data-toggle="popover" data-placement="left" data-html="true" title="" data-content="">inbox</button>
<!-- Script -->
<script>
// inbox
var inbox = document.getElementById("inbox");
var inbox_news = document.getElementById("inbox_news");
var poH = document.createElement("span");
var poC = document.createElement("span");
var news_from_to = [];
var number_of_news = [];
var news_price_data = [];
// inbox.open
function inbox_open(news_from_to, number_of_news, news_price_data) {
console.log("Opening Executed!");
console.log("");
console.log("Craft Data:");
console.log(news_from_to);
console.log(number_of_news);
console.log(news_price_data);
console.log("");
for(var i = 0; i < news_from_to.length; i++) {
// create header/content components
var b = document.createElement("button");
var c = document.createElement("span");
b.innerHTML = (i + 1);
b.className = "poH";
c.className = "poC";
c.style = "display: none;";
// set price
var news_price_of_items = 0;
for(var j = news_from_to[i]; j < (news_from_to[i] + number_of_news[i]); j++) { news_price_of_items += news_price_data[j]; }
// insert data
c.innerHTML = "You Bought: <br />"+
number_of_news[i]+ " items <br />"+
"for $"+ news_price_of_items;
// store popover header/content
poH.appendChild(b);
poC.appendChild(c);
}
inbox.setAttribute("title", poH.innerHTML);
inbox.setAttribute("data-content", poC.innerHTML);
console.log("Craft as Crafted:")
console.log(poH.innerHTML);
console.log(poC.innerHTML);
}
// run inbox_open()
//inbox_open(news_from_to, number_of_news, news_price_data);
// enable BS 4 popover functionality
$(document).ready(function() { $('[data-toggle="popover"]').popover(); });
/* PRODUCT BUY NOW */
// buy now data
var now_cart_item = [];
var now_cart_in_item = [];
// product.buy_now
function product_buy_now() {
// update inbox
if(news_from_to.length == 0) {
console.log("if branch:");
console.log("");
news_from_to = [0];
number_of_news = [1];
/* news_price_data = [product_price_data[now_cart_item[0]][now_cart_in_item[0]]]; */
news_price_data = [10];
inbox_open(news_from_to, number_of_news, news_price_data);
}
else {
console.log("else branch:");
console.log("");
news_from_to.push(news_price_data.length);
number_of_news.push(1);
/* news_price_data.push(product_price_data[now_cart_item[0]][now_cart_in_item[0]]); */
news_price_data = [20];
inbox_open(news_from_to, number_of_news, news_price_data);
}
// mail purchase info
//now_mail();
// clear data holders for next purchase
now_cart_item = [];
now_cart_in_item = [];
}
/* JQUERY */
// BS 4 popover header buttons.addEventListener
$('#inbox').on('shown.bs.popover', function () {
// get header/content classes
var poHs = document.getElementsByClassName("poH");
var poCs = document.getElementsByClassName("poC");
for(var i = 0; i < poHs.length; i++) {
popover_hardCodeHandler(i);
}
poHs[0].className += " seen active";
poCs[0].style = "display: block;";
}
);
function popover_hardCodeHandler(i) {
var poHs = document.getElementsByClassName("poH");
var poCs = document.getElementsByClassName("poC");
poHs[i].onclick = function() {
// remove active class from all poHs and set display none for all poCs
for(var j = 0; j < poHs.length; j++) { poHs[j].className = poHs[j].className.replace(" active", ""); }
for(var j = 0; j < poCs.length; j++) { poCs[j].style = "display: none;"; }
// add seen and active class to current element
this.className += " seen active";
// set content for current element
poCs[i].style = "display: block;";
}
}
</script>