I am trying to get new website off the ground through bigcommerce and found out they don't have anything for freight shipping. I know enough to identify my problem and the code that needs changed within the template file but not create code to do what I want. Currently shipping is calculated at checkout and displays "Calculated at checkout" The block of code displaying the shipping is
<div class="DetailRow" style="display: %%GLOBAL_HideShipping%%">
<div class="Label">%%LNG_Shipping%%:</div>
<div class="Value">
%%GLOBAL_ShippingPrice%%
</div>
</div>
I need the line %%GLOBAL_ShippingPrice%% which makes "Calculated at checkout" appear only on items under 150lbs and for items greater than 150lbs the message "Contact us for a shipping quote". Weight is currently generated in the listing by the a block of code in the same file reading.
<div class="DetailRow" style="display: %%GLOBAL_HideWeight%%">
<div class="Label">%%LNG_Weight%%:</div>
<div class="Value">
<span class="VariationProductWeight">
%%GLOBAL_ProductWeight%%
</span>
</div>
</div>
It seems %%GLOBAL_ProductWeight%% is what probides the weight displayed but it reads "xyz LBS" and since it adds LBS to the number I'm not sure how to write code to check the return as greater or less than 150 or how to get it to then display the correct message. If any additional information is needed to create a code to do this let me know and I will provide it.
You can use the "replace" js function to remove the "LBS" string from your text.
(function getCorrectTextBasedOnWeight() {
var weightSpanElements = document.getElementsByClassName('VariationProductWeight');
var answerMessageSpan = document.getElementById('answerMessage');
for (var i = 0; i < weightSpanElements.length; ++i) {
var item = weightSpanElements[i];
var weightValue = item.innerHTML.replace("LBS", "");
if (weightValue <= 150) {
answerMessageSpan.innerHTML = "Calculated at checkout";
} else {
answerMessageSpan.innerHTML = "Contact us for a shipping quote";
}
}
})();
You can use this sample in JSFiddle: http://jsfiddle.net/amontellano/YdV4S/
Simply change the value inside of the span of the HTML section and you will see how the answerMessage display the correct text based on weight value.
Related
enter image description hereI am trying to develop a ticketing tool for work and its a template site to make taking notes for helpdesk more easily and when something is an escalation and you click the button for escalation template. When the escalation template loads I want it to pull information from session storage to avoid copying and pasting notes already taken.
This is how I am storing the information in session storage and I checked via Chrome browser that information is being stored in the session storage.
if(callInbound)
{
sessionStorage.setItem("ACTIVITYTYPE", document.form1.activity.value);
sessionStorage.setItem("CONTACTNAME", document.form1.name.value);
sessionStorage.setItem("VIPSTATUS", document.form1.vip.value);
sessionStorage.setItem("CONTACTNUMBER", document.form1.phone.value);
sessionStorage.setItem("CALLERLOCATION", document.form1.location.value);
sessionStorage.setItem("ISSUEDESCRIPTION",document.form1.issueDescription.value); <--PROBLEM ITEM
sessionStorage.setItem("ERRORMESSAGE", document.form1.errorMessage.value);
sessionStorage.setItem("TROUBLESHOOTING", document.form1.troubleshooting.value);
sessionStorage.setItem("KNOWLEDGEUSED", document.form1.knowledgeUsed.value);
sessionStorage.setItem("SEARCHTERMSTRIED", document.form1.searchtermsTried.value);
sessionStorage.setItem("SCREENSHOTSATTACHED", document.form1.screenshotsAttached.value);
sessionStorage.setItem("SURVEYOFFERED", document.form1.surveyOffered.value);
sessionStorage.setItem("SURVEYTAKEN", document.form1.surveyTaken.value);
}
This is the page where the information is being loaded and all but the one identified as problem is being populated into the template.
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>DSI Call Outbound</title>
<script type="text/javascript" src="DSI.js"></script>
<script language="JavaScript" type="text/javascript">
window.addEventListener('load', ()=>{
let callInboundCallDropped = sessionStorage.getItem("CALLINBOUNDCALLDROPPED");
let callOutboundCallDropped = sessionStorage.getItem("CALLOUTBOUNDCALLDROPPED")
let additionalIssue = sessionStorage.getItem("ADDITIONALISSUE");
let voicemailCallBack = sessionStorage.getItem("VOICEMAILRECEIVED");
if (callInboundCallDropped == "true")
{
document.form1.issueDescription.value = sessionStorage.getItem("ISSUEDESCRIPTION");<--Problem Item
document.form1.name.value = sessionStorage.getItem("CONTACTNAME");
document.form1.phone.value = sessionStorage.getItem("CONTACTNUMBER");
document.form1.errorMessage.value = sessionStorage.getItem("ERRORMESSAGE");
}
else if (callOutboundCallDropped == "true")
{
document.form1.name.value = sessionStorage.getItem("CONTACTNAME");
document.form1.phone.value = sessionStorage.getItem("CONTACTNUMBER");
document.form1.issueDescription.value = sessionStorage.getItem("ISSUEDESCRIPTION");<--Problem item
document.form1.errorMessage.value = sessionStorage.getItem("ERRORSMESSAGE");
}
else if(additionalIssue == "true")
{
document.form1.activity.value = "***ADDITIONAL ISSUE***";
document.form1.name.value = sessionStorage.getItem("CONTACTNAME");
document.form1.phone.value = sessionStorage.getItem("CONTACTNUMBER");
}
else if(voicemailCallBack == "true");
{
document.form1.name.value = sessionStorage.getItem("CONTACTNAME");
document.form1.phone.value = sessionStorage.getItem("CONTACTNUMBER");
document.form1.issueDescription.value = sessionStorage.getItem("VOICEMAILSUBJECT");
document.form1.errorMessage.value = sessionStorage.getItem("ERRORMESSAGE");
}
//sessionStorage.clear();
})
</script>
All other items load properly from session storage when the page is loaded. I confirmed that the information is in session storage via the application section in the inspection section of Chrome browser and by adding alert("ISSUEDESCRIPTION"); below the problem item line and it works as expected.
I have tried the following:
// Store your value from one page sessionStorage.setItem("values",
"input_text");
// Retrieve the value from another page var value =
sessionStorage.getItem("values");
//replacing the line with and assigning and id to the div element in the html document.getElementById("issueDescription").value = sessionStorage.getItem("ISSUEDESCRIPTION");
This is the problem element:
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge w3-animate-zoom"></i></div>
<div class="w3-rest">
<p>Issue Description</p>
<input class="w3-input w3-border" name="issueDescription" type="text" placeholder="[Issue Description Here]">
</div>
</div>
This is an element on the same page that is correctly being filled with session storage information:
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge w3-animate-zoom"></i></div>
<div class="w3-rest">
<p>Phone Number Used</p>
<input class="w3-input w3-border" name="phone" type="text" placeholder="(xxx)xxx-xxxx">
</div>
</div>
please tell me if I'm just referencing something incorrectly like a typo although I've spent multiple hours doublechecking everything. Wish there were a troubleshooting/debugging feature in Visual Studio Code for this kind of stuff to step through it. If there is and I'm unaware please let me know.
Unsure of why this didn't work the first few times I tried it, but this time when I copied and pasted the elements name in the "documents.form1.issueDescription.value = sessionStorage.getItem("ISSUEDESCRIPTION");"
the issue was resolved, swear I did this on repeat late last night, must've been a spelling error.
This is not a duplicate so please don't close this. I did my research and already found what is considered a duplicate and it did not answer my quesiton. I want to modify all elements with the same class name in the dom so I already know the difference between getElementById and getElementsByClassName.
I have some code that almost works. I have to take a string, convert it to a number, then convert it back to a currency based string and then replace the text withing the innerHTML on screen. In my console.log, I am getting back the exact amounts I need for all the elements with the class="lh1em". I got everything working up until the point I have to replace the text with this new variable I have created with the new and improved data. I have tried to do it with a function, without a function but in both cases, I get no results, no errors except I get correct info in the console.log.
Here is my html:
<div class="price">
<span class="label">from</span>
<span class="value"><span class="text-lg lh1em item "> $3,845.00</span>
</span>
<br>
<span class="label">from</span>
<span class="value"><span class="text-lg lh1em item "> $3,645.00</span>
</span>
</div>
and my javascript
let customPrice = document.getElementsByClassName('lh1em');
Array.from(customPrice).forEach(function(dollarAmount) {
let withoutDollar = dollarAmount.innerText.substr(1);
let withoutComa = withoutDollar.replace(",",'');
let noPointZero = withoutComa.replace(/\.00/, '');
noPointZero = Number(noPointZero);
let newDollar = noPointZero - 600;
let formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
let doubleOccupancyPrice = formatter.format(newDollar);
function changeText() {
document.getElementsByClassName('lh1em').innerHTML = doubleOccupancyPrice;
}
changeText();
console.log(doubleOccupancyPrice);
});
If anyone can show me what I am doing wrong, I would sure appreicate it. Thank you in advance.
Credit goes to #pilchard for helping me come up with the answer to this.
I just had to replace my function with the following code:
dollarAmount.innerHTML = doubleOccupancyPrice;
With that, I was able to get the right info both in cosole and on the dom
I am developing one web application where, there is one page, with the search bar, where one can search the projects by name. we'll get the list of projects or the desired project just below that search bar. Now when I click on the project name, I want to get the list of team members for that project to be visible just below that project details. I have the following code, I used 'post' call to call the backend and get the list of members for that project and get the result into JSON. Now I want to put these values to the <p> tags for that team member information. Following is the code:
In Index.php
<div id="members" class="list" style="display: none;">
<div class="result">
<div class="photo">
<img>
</div>
<div class="team_info">
<div class="tm">
<div class="member_name">
<h5>Member Name</h5>
<p id="member_name"></p>
</div>
<div class="prof">
<h5>profession</h5>
<p id="mem_profession"></p>
</div>
</div>
</div>
<div class="contact_button">
<h4 id="contact">See Contact</h4>
</div>
</div>
</div>
<script type="text/javascript">
$('#project_name').on("click",function(){
$.post('/teamMembers.php', {}, function(res){
for(var i=0; i < res.length; i++ ){
$('#member_name').val(res[i]['name']);
$('#mem_profession').val(res[i]['profession']);
}
$('#members').show();
});
});
</script>
In teamMembers.php Controller file
<?php
if(isset($_SESSION['project_name'])){
$project_name = $_SESSION['project_name'];
$members = \Model\Team_Member::getList(['where'=>"project_name = '$project_name'"]);
$this->toJson($members);
}
?>
I have stored the project name in $_SESSION and I get the response of these json request in the following manner:
[{
"name":"ABC",
"email":"test#test.com",
"phone":"9874563210",
"project_name":"Test Project",
"profession":"student",
"id":1312
}]
After all this code, I am still facing some issues like: I am not able to see the any of the team members details, not even the label, even though I use .show() function. Another I am not sure if that was the correct way to set the values to the <p> element from the json response. Help is appreciated
Paragraphs cannot have values, you need to set the text within them:
for(var i=0; i < res.length; i++ ){
$('#member_name').html(res[i]['name']);
$('#mem_profession').html(res[i]['profession']);
}
OR
for(var i=0; i < res.length; i++ ){
$('#member_name').text(res[i]['name']);
$('#mem_profession').text(res[i]['profession']);
}
If your markup repeats, you need to make sure each element has unique ID's. ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements.
EDIT: I tested with the following code. You do not need the for() loop (unless you're planning to expand this, at which point the unique ID's come into play):
// you do not need the first couple of lines of code, was just used for testing
var json = '[{"name":"ABC","email":"test#test.com","phone":"9874563210","project_name":"Test Project","profession":"student","id":1312}]';
var res = JSON.parse(json);
$('#member_name').html(res[0]['name']);
$('#mem_profession').html(res[0]['profession']);
$('#members').show();
EDIT 2: If you have more than one member of a project you can append their data to each paragraph like this:
var json = '[{"name":"ABC","email":"test#test.com","phone":"9874563210","project_name":"Test Project","profession":"student","id":1312},{"name":"XYZ","email":"test#test.com","phone":"9874563210","project_name":"Test Project","profession":"teacher","id":1312}]';
var res = JSON.parse(json);
for(var i = 0; i < res.length; i++) {
$('#member_name').append(res[i]['name'] + ', ');
$('#mem_profession').append(res[i]['profession'] + ', ');
}
This results in output like this:
Member Name
ABC, XYZ,
profession
student, teacher,
Hi i'm trying to replace some divs with other divs, this works fine but when i try to replace the second load of divs they don't change anymore.
Basicaly I'm trying to create a "winetour" that lets a user choose some options and generates the perfect wine to go along with it.
You get presented with a couple of options (img links) and if you click one the div's content changes and presents another set of clickable images taking you deeper in your process of choosing a great wine.
HTML:
<div id"Gelegenheid">
<img src="Images/Ontbijt.jpg" id="ontbijt" alt="Ontbijt">
<img src="Images/Borrel.jpg" id="borrel" alt="Borrel">
<img src="Images/Dinner.jpg" id="feest" alt="Diner">
<img src="Images/Feest.jpg" id="diner" alt="Feest">
</div>
<div id"Ontbijt" style="display: none"> Some content that shows trough the "tour"</div>
<div id"Borrel" style="display: none"> Some content that shows trough the "tour"</div>
<div id"Dinner" style="display: none">
<img src="Images/White.jpeg" id="ontbijt-licht" alt="ontbijt-licht">
</div>
<div id"Dinner-detail-voor" style="display: none"> Some content that shows trough the "tour"</div>
<div id"Dinner-detail-head" style="display: none"> Some content that shows trough the "tour"</div>
JavaScript:
function continueTour(i) {
if (i==1) {
document.getElementById("Gelegenheid").innerHTML = document.getElementById("Ontbijt").innerHTML;
} else if (i==2) {
document.getElementById("Gelegenheid").innerHTML = document.getElementById("Borrel").innerHTML;
} else if (i==3) {
document.getElementById("Gelegenheid").innerHTML = document.getElementById("Diner").innerHTML;
} else if (i==4) {
document.getElementById("Gelegenheid").innerHTML = document.getElementById("Feest").innerHTML;
} else {
document.getElementById("Dinner").innerHTML = document.getElementById("Dinner-detail-voor").innerHTML;
}
}
So basically if you click on a link that's inside the "Gelegenheid" div you will be taken to for example Dinner, but the problem is, inside dinner there are some more links and i want to link them for example to "Dinner-detail-voor"
I want to make this working with core JavaScript (so no JQuery) but i don't know what's going on?
Thanks in advance!
Found the answer.
Added
document.getElementById("from").style.display = "none" ;
document.getElementById("to").style.display = "table" ;
to each of the javscript index functions, now it works where 'from' is the father and 'to' is the child that is being linked to, not very neat but it works,
If someone has a shorter or alternative solution feel free to post!
first we create an array for all the content, array is base 0 so we start from function myFunction(0); next we create a tag with updated variable in them. the if statement is use to reset the variable when hit max. hope this help.
http://jsfiddle.net/xgay3f83/3/
function continueTour(i) {
var content = ['content 1', 'content 2', 'content 3', 'content 4'];
var target = document.getElementById('target');
var next = i + 1;
var end = content.length;
if(next>end) {
i = 0;
next = 1;
}
var openTag = '<a href="#" class="hvr-grow" onClick = "continueTour('+next+')">';
var closeTag = '</a>';
target.innerHTML = openTag+content[i]+closeTag;
}
On our current website that is hosted offsite via another company it is all done with .NET, I simply have access to HTML, JS, and CSS files to edit. A lot of data is output on the page via tokens. On our web page we have a weight token, it grabs the items weight and outputs it between a span tag. So if you're viewing the source it'll show the following:
<span id="order_summary_weight">78.000000 lbs</span>
The token by default outputs the lbs. What I need to do is have javascript grab the 78.000000, convert it to an integer I'm assuming and if that integer, in this case 78.000000 is greater than 50.000000 I'd like it append a line after the 78.000000 lbs to say "Your weight total is over 50 lbs, we will contact you directly with a shipping charge." Understand some weight totals may be as small as 0.010000
I'm coming to you fine folks here because I am at a complete lost where to start in this endeavor.
Something like this ? :
html :
<div class="wrap">
<span class="price" id="order_summary_weight">78.000000 lbs</span>
</div>
<hr>
<div class="wrap">
<span class="price" id="order_summary">50.000000 lbs</span>
</div>
JS :
$('.wrap').each(function(){
var price = $(this).find('.price').text();
price = price.replace(' lbs', '');
price = parseInt(price);
if(price > 50){
$(this).append('<div class="alert">Your weight total is over 50 lbs, we will contact you directly with a shipping charge.</div>');
}
});
DEMO : http://jsfiddle.net/w3qg4/1/
function getWeight()
{
var x=document.getElementById("order_summary_weight");
if(x > 50){
alert("Your weight total is over 50 lbs, we will contact you directly with a shipping charge. Understand some weight totals may be as small as 0.010000");
}
}