I have a JSON file that contains the price of a product. I need to calculate the price of an individual item and the total price of the item. I succeeded in calculating the individual price of the product, but the final one did not work.
Here is the code jQuery:
var cart = {};
function init() {
$.getJSON("goods.json", goodsOut);
}
function goodsOut(data) {
var out='';
for (var key in data) {
out +='<div class="cart">';
out +=`<p class="name">${data[key].name}</p>`;
out +=`<img src="img/${data[key].img}" alt="">`;
out +=`<div class="cost">${data[key].cost} $</div>`;
out +=`<button class="add-to-cart" data-id="${key}">Купить</button>`;
out +='</div>';
}
$('.goods-out').html(out);
$('.add-to-cart').on('click', addToCart);
}
function addToCart() {
//добавляем товар в корзину
var id = $(this).attr('data-id');
if (cart[id]==undefined) {
cart[id] = 1;
}
else {
cart[id]++;
}
showMiniCart();
saveCart();
}
function saveCart() {
localStorage.setItem('cart', JSON.stringify(cart));
}
function showMiniCart() {
if (!isEmpty(cart)) {
$('.mini-basket').html('Basket is empty!');
}
else {
$.getJSON('goods.json', function (data) {
var geds = data;
var out="";
for (var key in cart) {
out += '<div class="mini-basket_list">'
out += `<img src="img/${geds[key].img}" alt="Error" class="cart-product__img">`;
out += `<span class="name-basket">${geds[key].name}</span>`+'<br>';
out += ` <button data-id="${key}" class="plus-goods btn">+</button> `;
out += `<span class="quantityy">${cart[key]}</span>`;
out += ` <button data-id="${key}" class="minus-goods btn">-</button> `;
out += `<p class="cost-basket">Цена: <span class="cost-basket_plus">${Number(cart[key])*Number(geds[key].cost)}</span> $</p>`;
out += `<button data-id="${key}" class="del-goods btn">x</button> `;
out += '</div>'
}
$('.mini-basket').html(out);
$('.del-goods').on('click', delGoods);
$('.plus-goods').on('click', plusGoods);
$('.minus-goods').on('click', minusGoods);
});
}
}
function delGoods() {
var id = $(this).attr('data-id');
delete cart[id];
saveCart();
showMiniCart();
}
function plusGoods() {
var id = $(this).attr('data-id');
cart[id]++;
saveCart();
showMiniCart();
}
function minusGoods() {
var id = $(this).attr('data-id');
if (cart[id]==1) {
delete cart[id];
}
else {
cart[id]--;
}
saveCart();
showMiniCart();
}
function loadCart() {
if (localStorage.getItem('cart')) {
cart = JSON.parse(localStorage.getItem('cart'));
showMiniCart();
}
}
function isEmpty(object) {
for (var key in object)
if (object.hasOwnProperty(key)) return true;
return false;
}
$(document).ready(function () {
init();
loadCart();
});
Here is the code JSON:
{
"1234": {
"name": "Aplle",
"cost": "5",
"img" : "apple.png"
},
"1235": {
"name": "Cherry",
"cost": "7",
"img" : "cherry.png"
},
"1236": {
"name": "Grape",
"cost": "10",
"img" : "grape.png"
},
"1237": {
"name": "Slice of watermelon",
"cost": "12",
"img" : "watermelon.png"
}
}
Here is the code HTML:
<body>
<header class="header">
<nav class="nav">
<div class="basket">
<div class="cart__text">
Basket
</div>
<div class="cart-content">
<div class="block" data-simplebar>
<div class="mini-basket">
</div>
</div>
<div class="cart-content__bottom">
<div class="cart-content__fullprice">
<span>Total: </span>
<span class="fullprice"></span> <!--Here I want to display a total-->
<span>$</span>
</div>
</div>
</div>
</div>
</nav>
</header>
<section>
<div class="goods-out"></div>
</section>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/simplebar.js"></script>
<script src="js/main.js"></script>
</body>
Total should be shown in a span with fullprice class.
Related
I'm creating dynamic tabs. I'm currently facing two problems:
When I click on the span x to delete current tab, it deletes all my tabs.
When I getting the array data, it always gets the first tab data only.
Can anyone help me with this? I've tried many ways but I still cannot get my desired result. Here is my fiddle Dynamic Tabs.
Currently my array result looks like this for the 2nd problem when there is two tabs, '2023' and '2025':
[{
February: "1",
January: "1",
Year: "2023"
}, {
February: "1",
January: "1",
Year: "2023"
}]
My expected result would be:
[{
February: "1",
January: "1",
Year: "2023"
}, {
February: "1",
January: "1",
Year: "2025"
}]
$(document).ready(function() {
addTab();
});
$('#add_tab').click(function() {
addTab()
});
//delete current tab
$(".nav-tabs").on("click", "span", function() {
var anchor = $(this).siblings('a');
console.log(anchor)
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs").children('a').first().click();
});
function addTab() {
var nextTab = $(".nav-tabs").children().length;
var date = new Date().getFullYear() + nextTab;
// create the tab
$('<a class="nav-link" href="#tab-' + date + '" data-toggle="tab">' + date + '</a><span> x </span>').appendTo('#tabs');
// create the tab content
var html = "";
html += '<div class="tab-pane monthSettings" id="tab-' + date + '">';
html += '<label><b>Year: </b></label>';
html += '<input class="txtYear" type="text" value="' + date + '">';
html += '<label><b>January: </b></label>';
html += '<input class="txtJanuary" type="number" value="1">';
html += '<label><b>February: </b></label>';
html += '<input class="txtFebruary" type="number" value="1">';
html += '</div>';
//append to tab-content
var test = $(html).appendTo('.tab-content');
// make the new tab active
$('#tabs a:last').tab('show');
}
//get array
$(document).on('click', '#btnGetArray', function(e) {
var array = []
$(".monthSettings").each(function() {
let detail = {
Year: $(".txtYear").val() || 0,
January: $(".txtJanuary").val() || 0,
February: $(".txtFebruary").val() || 0,
}
array.push(detail)
console.log(array)
});
});
#import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.nav-tabs>a {
display: inline-block;
position: relative;
margin-right: 10px;
}
.nav-tabs>a>span {
display: none;
cursor: pointer;
position: absolute;
right: 6px;
top: 8px;
color: red;
}
.nav-tabs>a>span {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div class="bg-gray-300 nav-bg">
<nav class="nav nav-tabs" id="tabs">
+ Add Year
</nav>
</div>
<div class="card-body tab-content"></div>
<button id="btnGetArray">GetData</button>
The issue is because your selectors for retrieving the .txtYear, .txtJanuary and .txtFebruary will only look at the value of the first element in the collection, no matter how many it finds.
To correct this you can use find() from the parent element, which you can reference from the each() loop, to retrieve the child elements in that iteration.
Taking this a step further, you can simplify the logic by using map() instead of each() to build your array, but the use of find() remains the same.
In addition, there's some other improvements which can be made to the code, such as ensuring all event handlers are within document.ready and using template literals to make the HTML string concatenation easier to read.
jQuery($ => {
$('#add_tab').on('click', addTab);
addTab();
$(".nav-tabs").on("click", "span", function() {
var anchor = $(this).siblings('a');
console.log(anchor)
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs").children('a').first().click();
});
$(document).on('click', '#btnGetArray', e => {
var array = $(".monthSettings").map((i, container) => ({
Year: $(container).find('.txtYear').val() || 0,
January: $(container).find('.txtJanuary').val() || 0,
February: $(container).find('.txtFebruary').val() || 0,
})).get();
console.log(array);
});
});
function addTab() {
var nextTab = $(".nav-tabs").children().length;
var date = new Date().getFullYear() + nextTab;
$(`<a class="nav-link" href="#tab-${date}" data-toggle="tab">${date}</a><span> x </span>`).appendTo('#tabs');
var html = `
<div class="tab-pane monthSettings" id="tab-${date}">
<label><b>Year: </b></label>
<input class="txtYear" type="text" value="${date}" />
<label><b>January: </b></label>
<input class="txtJanuary" type="number" value="1" />
<label><b>February: </b></label>
<input class="txtFebruary" type="number" value="1" />
</div>`
var test = $(html).appendTo('.tab-content');
// make the new tab active
$('#tabs a:last').tab('show');
}
#import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.nav-tabs>a {
display: inline-block;
position: relative;
margin-right: 10px;
}
.nav-tabs>a>span {
display: none;
cursor: pointer;
position: absolute;
right: 6px;
top: 8px;
color: red;
}
.nav-tabs>a>span {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div class="bg-gray-300 nav-bg">
<nav class="nav nav-tabs" id="tabs">
+ Add Year
</nav>
</div>
<div class="card-body tab-content"></div>
<button id="btnGetArray">GetData</button>
I have a project . I have to reference a json file . My code which is the flashcard.html file :
{%include 'header.html' %}
<style>
{%include 'css/flashcard.css' %}
{%include 'css/header.css' %}
</style>
<div id="content" style="width: 100%; position: relative;"></div>
<i class="fas fa-caret-right" style="position: absolute; top: 20%; left: 95%; font-size: 50px;" id="next"></i>
<i class="fas fa-caret-left" style="position: absolute; top: 20%; left:5%; font-size: 50px;" id="back"></i>
<script>
let mydata = {%include 'data.json' %}
let frontSideFront = true
let cardNum = 0
let totalCards = 2
//var mydata = JSON.parse(data);
for(var i = 0 ; i < totalCards ; i++ ){
frontSideFront = true
$("#content").append(`
<div class="card-container" id="${i}">
<div class="front">${mydata['questions'][i]}</div>
<div class="back">sd</div>
</div>
`)
}
for(var m = 0 ; m < totalCards ; m++ ){
if (m !== cardNum) {
$(`#${m}`).css('visibility', 'hidden');
}
}
$("#next").click(function (e) {
$(`#${cardNum}`).css('visibility', 'hidden');
$(`#${cardNum}`).css('position', 'absolute');
cardNum++
$(`#${cardNum}`).css('visibility', 'visible');
$(`#${cardNum}`).css('position', 'relative');
});
$("#back").click(function (e) {
$(`#${cardNum}`).css('visibility', 'hidden');
$(`#${cardNum}`).css('position', 'absolute');
cardNum--
$(`#${cardNum}`).css('visibility', 'visible');
$(`#${cardNum}`).css('position', 'relative');
});
$(".card-container").click((e)=>{
if(frontSideFront){
frontSideFront = false
$(".front").css({
"transform": "rotateY(-180deg)",
})
$(".back").css({
"transform": "rotateY(0deg)",
})
}else{
frontSideFront = true
$(".front").css({
"transform": "rotateY(0deg)",
})
$(".back").css({
"transform": "rotateY(180deg)",
})
}
})
</script>
The code is to create a flashcard. But the problem is that my data.json file is not being accessed . I even tried absolute paths.Like:
D:\anshu\python\uceed-website\venv\uceedWebsite\data.json
and even
../../../data.json
and :
../../data.json
and:
./data.json
.
My file structure :
You can ask any doubts and questions .
Thanks in advance.
I have created a partial view and I added the rendering in Index page. I have a button (See More) and every time I am calling controller with ajax and append the new data in the screen.
The problem is when i have no more results to show and a user keeps pressing the button I append multiple times "no results found".
Is there a way to prevent this?
My Index:
<div class="sectionMain" id="stopscroll">
#foreach (var item in Model)
{
if (item.restDetails != null && item.restDetails.Count() != 0)
{
#*<label class="sectionLabels" style="padding-left: 3%;">Restaurants</label>*#
#Html.Hidden("nextItems")
<div id="test" class="sectionSeeMore">
#Html.Partial("_RestaurantDetails", item.restDetails)
</div>
<div class="row">
<div class="col-5"></div>
<div class="col-2" style="text-align:center;">
<button id="btnsubmit" class="buttonCategory" onclick="callseemore(this)" style="font-family:'Fredoka-One';height: 36px;">See More</button>
</div>
<div class="col-5"></div>
</div>
}
break;
}
</div>
<script>
function callseemore(a){
var postcode = $("#inputPostCode").val();
var category = "";
var slides = document.getElementsByClassName("buttonCategoryMain");
for (var i = 0; i < slides.length; i++) {
if (slides.item(i).className == "buttonCategoryMain activebtnMain") {
category = slides.item(i).value;
}
}
var offerButton = document.getElementById("sidebarOfferBtn").classList.value;
var isofferparam = "False";
if (offerButton == "activebtn") {
isofferparam = "True";
}
var nextItems= $("#nextItems").val();
$.ajax({
url: "#Url.Action("RestaurantPaging", "Home")",
type: 'POST',
data: ({ categoryparam: category, postcodeparam: postcode, nextitemparam: nextItems, isOfferparam: isofferparam}),
cache: false,
success: function (result, status, xhr) {
debugger;
$('#tblSeeMore').append(result);
var asf = xhr.getResponseHeader("nextItems");
document.getElementById("nextItems").value =asf ;
}
})
}
</script>
PartialView:
#model IEnumerable<Restaurants.Models.RestaurantDetail>
#if (Model.Count() == 0)
{
<h3 style="text-align:center;font-family:'Fredoka-One'">No Results Found</h3>
}
else
{
<div style="display:flex;flex-flow:row wrap;" id="tblSeeMore">
#foreach (var itemRest in Model)
{
<div class="newRestaurantsSection" id="newRestaurantsSection">
<div class="newRestaurantBox">
#if (itemRest.RestaurantImgPath != null)
{
<img class="restImage" src="#Url.Content(itemRest.RestaurantImgPath)">
}
else
{
<img class="restImage" src="~/Content/Assets/Images/no_image.png" />
}
<div class="restMethods">
#if (itemRest.Pickup)
{
<span style="display: inline-block; border-right: 1px solid lightgrey;padding-right:3px;">
<img class="restMethodImg" src="~/Content/Assets/Images/takeaway.png" />
#*<i class="fas fa-box fa-2x"></i>*#
</span>
}
#if (itemRest.Delivery)
{
<span style="display: inline-block; border-right: 1px solid lightgrey;padding-right:3px;">
#*<i class="fas fa-motorcycle fa-2x"></i>*#
<img class="restMethodImg" src="~/Content/Assets/Images/delivery.png" />
</span>
}
#if (itemRest.OnlinePayments)
{
#*<i class="fas fa-credit-card fa-2x"></i>*#
<img class="restMethodImg" src="~/Content/Assets/Images/visa.png" />
}
</div>
<div class="row restLogoNameKitchenType">
<div class="col-xs-1" style="flex-grow: 0;">
#if (itemRest.Logo != null)
{
<img class="restLogo rounded-circle" src="#Url.Content(itemRest.Logo)">
}
else
{
<img class="restLogo rounded-circle" src="~/Content/Assets/Images/no_image.png" />
}
</div>
<div class="col-xs-9 restKitchenTypeContent">
<label class="restName">#itemRest.RestaurantName</label>
<br />
#{ string kitchenTypeFull = "";}
#foreach (var kitchenType in itemRest.RestaurantCategories)
{
kitchenTypeFull += "," + #kitchenType.Category.Description;
}
#if (kitchenTypeFull.Length > 0)
{
kitchenTypeFull = kitchenTypeFull.TrimStart(new Char[] { ',' });
<label>#kitchenTypeFull</label>
}
</div>
</div>
<div class="row restAddressPhoneOffer">
<div class="col-md-12">
<div class="row">
<div>
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="col" style="margin-left:-20px">
#itemRest.Address1,<br /> #itemRest.Area, #itemRest.PostalCode<br /> #itemRest.City
</div>
</div>
<div class="row">
<div>
<i class="fas fa-phone-alt"></i>
</div>
<div class="col" style="margin-left:-20px">
#itemRest.PhoneNumber
</div>
<div>
#if (itemRest.Offer)
{
<img style="width:60px;" class="restOfferImg" src="~/Content/Assets/Images/gift.png" />
}
else
{
<img style="width:60px;height:60px;" src="~/Content/Assets/Images/no_image _blank.png" />
}
</div>
</div>
</div>
<div class="col-md-12" style="margin-top:10px;margin-bottom:10px;padding-left:0px;padding-right:10px;">
#if (itemRest.MenuLink != null && itemRest.TableLink != null)
{
<div class="rowMenuTableLink">
<button class="rowMenuTableLinkM">
#Html.Raw(itemRest.MenuLink)
</button>
<button class="rowMenuTableLinkT">
#Html.Raw(itemRest.TableLink)
</button>
</div>
}
else if (itemRest.MenuLink == null && itemRest.TableLink == null)
{
<div class="rowTableLink" style="height:44px">
</div>
}
else
{
if (itemRest.MenuLink != null)
{
<div class="col-md-12 rowMenuLink">
<button class="restMenuResrBtns">
#Html.Raw(itemRest.MenuLink)
</button>
</div>
}
if (itemRest.TableLink != null)
{
<div class="col-md-12 rowTableLink">
<button class="restMenuResrBtns">
#Html.Raw(itemRest.TableLink)
</button>
</div>
}
}
</div>
</div>
</div>
</div>
}
</div>
#*#Html.ActionLink("See More", "RestaurantPaging", "Home", new { JSONModel = Json.Encode(Model) }, null)*#
}
<script type="text/javascript">
$(document).ready(function () {
var el = document.getElementsByClassName("newRestaurantBox");
var sidebar = document.getElementById('scrollableSidebar').style.display;
var sidebarclasses = document.getElementById('scrollableSidebar').classList.value;
var newRestaurantsView = document.querySelectorAll("[id='newRestaurantsSection']");
for (var i = 0, ilen = el.length; i < ilen; i++) {
if (sidebarclasses != "sectionSidebar sectionSidebarMin" && sidebar != "none") {
$(newRestaurantsView[i]).addClass('newRestsSectionSidebar');
$(newRestaurantsView[i]).removeClass('newRestaurantsSection');
}
else {
$(newRestaurantsView[i]).addClass('newRestaurantsSection');
$(newRestaurantsView[i]).removeClass('newRestsSectionSidebar');
}
}
})
</script>
print screen example:
You just have to remove the previously appended "No Results Found" and show whatever your post method gives as a response. i.e
Create a separate div inside #tblSeeMore which will contain "No Results Found"
<div id="divNoResults">
</div>
and change your ajax post call to this:
$.ajax({
url: "#Url.Action("RestaurantPaging", "Home")",
type: 'POST',
data: ({ categoryparam: category, postcodeparam: postcode, nextitemparam: nextItems, isOfferparam: isofferparam}),
cache: false,
success: function (result, status, xhr) {
debugger;
if(result == "No Results Found"){
$('#divNoResults').empty();
$('#divNoResults').append(result);
}
else
$('#tblSeeMore').append(result);
//rest of the code
}
})
Or you can just change the display of #divNoResults based on the result from the post method
<div id="divNoResults" style="display:none">
<p>No Results Found</p>
</div>
$.ajax({
url: "#Url.Action("RestaurantPaging", "Home")",
type: 'POST',
data: ({ categoryparam: category, postcodeparam: postcode, nextitemparam: nextItems, isOfferparam: isofferparam}),
cache: false,
success: function (result, status, xhr) {
debugger;
if(result == "No Results Found"){
$('#divNoResults').show();
}
else
$('#tblSeeMore').append(result);
//rest of the code
}
})
See here
I have two sections. I want to drag and drop elements between that two sections, but here's the element is appending but I need to drop the element at the first in that sections. When we drop the element it should place as first element for that section.
this is my code:
class Sections extends React.Component {
constructor(props) {
super(props);
this.state = {
sections: [
{
"idFolder":1,
"idUser":1,
"title":"Your Materials",
"products":[
{ "id":1,
"productType":"textile",
"name":"cotton"
"images":[
{
"original_file_name":"bear.jpeg"
}
]
},
{ "id":3,
"productType":"textile",
"name":"cotton"
}
]
},
{
"idFolder":2,
"idUser":1,
"title":"Your Materials",
"products":[
{ "id":5,
"productType":"textile",
"name":"cotton"
},
{ "id":6,
"productType":"textile",
"name":"cotton"
}
]
}
]
}
};
onDragStart(e){
e.dataTransfer.dropEffect = "copy";
e.dataTransfer.setData( "text", e.target.getAttribute('id'));
}
allowDrop (ev){
ev.preventDefault();
}
onDrop(e){
const data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
render(){
return(
<div>
<div className="row">
{
this.state.sections.map((sec_head, index) => {
return (
<div key={index} className="sec_container">
<h4 data-toggle="collapse" data-target={'#'+sec_head.idFolder}>{sec_head.title}</h4>
<ul id="list" className="sec_cont collapse in" id={sec_head.idFolder}
onDrop={this.onDrop}
onDragOver={this.allowDrop}
>
{
sec_head.products.map((product, i) => {
return(
<li
index={i} key={i} className="sec_items col-md-3 alert alert-dismissable"
onDragStart={ (e) => this.onDragStart(e) }
id={product.id} draggable="true"
>
×
<img />
<h5>{product.name}</h5>
</li>
)
})
}
</ul>
</div>
)
})
}
</div>
</div>
)
}
}
Problem
I have started upgrading my polymer PWA to version 2.0 of polymer. There is a suggestion in docs to upgrade the big project to polymer 1.8 version and elements to 2.0 hybrid style. I am doing the same but i got following error
Uncaught TypeError: Class extends value undefined is not a constructor or null
can someone help me solve this please,Also i don't get what's meant by hybrid style of element whether it's 2.0 or something else?
Thanks in advance.
My element (updated)
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<dom-module id="account-analytics">
<template>
<style >
.flex{
display: flex;
width: 100%;
align-items: center;
}
.flexChild{
flex-grow: 1;
text-align: center;
flex-basis: 40px;
}
</style>
<iron-ajax auto
id="accountAnalytics"
url="/napi/accountanalytics"
handle-as="json"
last-response="{{analytics}}"
loading="{{analyticsLoading}}"
debounce-duration="1000">
</iron-ajax>
<div style="font-size: 25px;font-weight: bold;display: none;padding-top: 2%;padding-left: 2%;padding-bottom: 2%" id="analyticsHead">eGlu Today</div>
<div class="flex">
<div class="flexChild"><b>Rules</b></div>
<div class="flexChild"><b>Scenes</b></div>
<div class="flexChild"> <i class="material-icons">linked_camera</i></div>
<div class="flexChild"><i class="material-icons">android</i></div>
<div class="flexChild"><img src="../../images/apple_logo_200px.jpeg" style="width: 30px;padding-bottom: 5px"></div>
</div>
<div class="flex">
<div class="flexChild">{{analytics.ruleCount}}</div>
<div class="flexChild">{{analytics.sceneCount}}</div>
<div class="flexChild">{{analytics.cameraCount}}</div>
<div class="flexChild">{{analytics.androidInstallations}}</div>
<div class="flexChild">{{analytics.iosInstallations}}</div>
</div>
</template>
</dom-module>
<script>
class accountAnalytics extends Polymer.Element{
static get is(){return 'account-analytics';}
static get properties(){
return{
hubId: {
type: String,
value: '7e-f2-ca-ab-40-34-34-95',
notify: true
},
analyticsLoading:{
type:Boolean,
notify:true
},
analytics:Object,
customerId:{
type:String,
value:'',
observer:'emailChanged'
},
integratorOptions:Boolean,
refreshCustomer:{
type:Boolean,
value:false,
notify:true,
observer:'_refreshCustomer'
}
};
}
constructor() {
super();
}
emailChanged() {
if(this.customerId=='')
this.$.analyticsHead.style.display='block';
this.fireAnalytics();
}
_refreshCustomer() {
this.fireAnalytics();
this.refreshCustomer=false;
}
ready(){
super.ready();
this.fireAnalytics();
}
fireAnalytics(){
if(this.customerId==undefined)
return;
var t= Date.now();
var p = this.getCookie('token');
this.$.accountAnalytics.headers={"token":p};
this.$.accountAnalytics.params={"customerId":this.customerId,"t":t};
// this.$.accountAnalytics.generateRequest();
}
getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
}
customElements.define(accountAnalytics.is, accountAnalytics);
</script>