How to add tax and grand total to my simplecart JS - javascript

Hello all I'm trying to use simplecart.js to create a custom checkout page for my website I want to add a simplecart_grandtotal but it doesn't seem to display. How can I go about doing that? My simple code is which i have taken from the demo http://wojodesign.com/simpleCart/myCart.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8">
<script src="js/jquery-1.7.min.js"></script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<title>simpleCart (js) Demo</title>
<link rel="stylesheet" href="example.css" type="text/css" media="screen" charset="utf-8" />
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" media="screen" charset="utf-8" /><![endif]-->
<script src="simpleCart2.js" type="text/javascript" charset="utf-8"></script>
<!--Make a new cart instance with your paypal login email-->
<script type="text/javascript">
simpleCart.email = "yasdasb#gmail.com";
simpleCart.cartHeaders = ['Image','Name','Price','Quantity_input','Total'];
simpleCart.checkoutTo = PayPal;
</script>
<!--Include the SimpleCart(js) script
<script src="javascripts/simpleCart.js" type="text/javascript" charset="utf-8"></script>
Make a new cart instance with your paypal login email
<script type="text/javascript">
simpleCart = new cart("brett#wojodesign.com");
</script>-->
</head>
<body>
<div class="main">
<div id="content">
<div id="sidebar" style="margin-top:20px">
<h2>You Might Also Like</h2>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/blackGold.jpg" alt="" />
</div>
<div class="alsoInfo">
Black Gold<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/goldShoe.jpg" alt="" />
</div>
<div class="alsoInfo">
Gold Shoe<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<div class="alsoContainer">
<div class="alsoImage">
<img src="images/thumbs/greenStripe.jpg" alt="" />
</div>
<div class="alsoInfo">
Green Stripe<br/>
add to cart
</div>
<div class="alsoPrice">$58</div>
</div>
<!--End #sidebar-->
</div>
<div id="left">
<!--Add a Div with the class "simpleCart_items" to show your shopping cart area.-->
<div class="simpleCart_items" >
</div>
<div class="checkoutEmptyLinks">
<!--Here's the Links to Checkout and Empty Cart-->
empty cart
Checkout
</div>
</div>
<!--End #content-->
</div>
</div>
</body>
</html>

this demo not have all the code go to https://github.com/wojodesign/simplecart-js/blob/master/simpleCart.js and take from there.
and then you can add :
<div class="simpleCart_tax"></div>
<div class="simpleCart_taxRate"></div>
<div class="simpleCart_grandTotal"></div>
http://simplecartjs.org/documentation/displaying_cart_data

Related

I can't reach an element from HTML by using Javascript

I want to create a project with using colors.
All of my files are in the same folder.
I can't reach the my color input that is in the index.html by:
const firstColor = document.getElementById("color1").value;
I can just reach elements which is in the game.js.
Also my canvas is in the game.html.
I have added tags into all of my HTML files.
My index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cyber Bird</title>
<link rel="stylesheet" href="main.css">
</head>
<body align="center">
<div id="title">Cyber Bird</div>
<div id="mainMenu">
<div id="selectColors">
<div id="colorsTitle">SELECT <span>2</span> COLORS FOR YOUR <span id="cb">CYBER BIRD</span></div> <br> <hr> <br>
<span id="first"> First: <input type="color" name="color1" id="color1" value="#f1aabc"></span>
<span id="second"> Second: <input type="color" name="color2" id="color2" value="#2d96b9"></span>
</div>
START
</div>
<script src="src/game.js"></script>
</body>
</html>
My game.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cyber Bird</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container" align="center">
<div id="scoreBoard">
<div id="header">SCOREBOARD</div>
<div id="description">Score: </div>
<div id="score">0</div>
</div>
<canvas id="myCanvas" height="500" width="900"></canvas>
<div class="helper" id="toJump">press <span>SPACE</span> to jump</div>
<div class="helper" id="toStart">click <span onclick="startGame()">HERE</span> to start</div>
<div class="helper" id="toSelect">select new <span>COLORS</span></div>
</div>
<div id="darken"></div>
<div id="gameOver" align="center">
<div id="message">GAME OVER</div>
<div id="yourScore">Your score is: <span id="finalScore"></span></div>
<div id="tryAgain" class="button" onclick="startGame()">Try Again</div>
</div>
<script src="game.js"></script>
</body>
</html>
You're not passing the data from your index.html to game.html. So when you call this:
START
You're loading a new page, which removes all of your existing variables - including 'color1'.
I see 2 options here:
Make this a single-page web app. So when you click your START button, it hides the index div and loads a game div
Save your values from index.html somewhere (browser storage?) and then call that after you load your new game.html page.

Basic Full Page setup is not working?

I am using fullPage.js for my website. I went to test it and it isn't functioning like it is supposed to and creating a full height page. I tried changing the scripts and links around, as well as using different jQuery Libraries. All the sources are 100% correct. Any leads or suggestions? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap / CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
</head>
<body>
<div id="fullpage"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
library :: https://cdnjs.com/libraries/fullPage.js
so you have to change the src attribute of script file .
since you are using src of full page is jquery.fullPage.js but that is not valid .
use https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js in src attribute .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css" />
</head>
<body>
<div id="wrapper"> <!-- Contains all content that uses FullPage-->
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
<div class="section">
<h1>hello</h1>
</div>
</div>
<script>
$(document).ready(function() {
$('#wrapper').fullpage();
});
</script>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
Change id="wrapper" to id="fullpage"
Default structure looks like below:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>

how to make fullPage.js plugin to work?

I'm so newbie in javascript !
I need your help, guys (pretty please).
I need to initialize fullPage.js plugin into my webpage, but I don't know what is missing. I've read the tutorial for this but I'm doing something wrong and I don't know what.
This is my html code:
<head>
<title>Title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href='css/style.css' type='text/css' media='all' />
<link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
<link rel="shortcut icon" href='img/favicon.ico' type='image/x-icon'/ >
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> <!-- fullPage.js plugin -->
<script src="js/script.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script> <!-- fullPage.js plugin -->
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script> <!-- fullPage.js plugin -->
<script type="text/javascript" src='js/jquery-migrate.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
scrollingSpeed: 1000
});
});
</script>
</head>
<body>
<div class="container-fluid" id="fullpage">
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- fullPage.js plugin -->
</body>
Many thanks,
Sandra P.
I think this can help you.
And I recommend to try to replace it:
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<script type="text/JavaScript" src="js/jquery.fullPage.min.js"></script>
to this
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
This should correct the error TypeError:. $(...).Fullpage.
Just look at the live example.
I changed your example and it works, see this.
Update
Properly include in that order:
Styles;
jQuery;
jQuery Migrate (I think you do not need it);
jQuery FullPage and other jQuery
plugins;
you code.
it should look like this
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<link rel="stylesheet" type="text/css" href="youCSS" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<!--other jQuery plugins-->
<script type="text/JavaScript" src="youJS"></script>
Update 2
Replace youJS :)
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#fullpage').fullpage({
anchors : ['first-section', 'second-section', 'third-section', 'fourth-section', 'fifth-section', 'lastPage'],
scrollingSpeed : 1000
});
});
</script>
</head>
<body>
<div class="container-fluid" id="fullpage">
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
<div class="section">
<div class="row first-section"> Some text.
</div>
</div>
</div>
</body>

Issue: The whole page loading instead just the div with .load()

I have a layout with 3 columns in divs: cMenu, cList and cContent.
In menu, I use this:
<script>
$(document).ready( function() {
$("#mMateriasPrimas").on("click", function() {
$("#cLista").load("materias_primas_lista.php");
});
});
</script>
<div class="menu_wrapper">
<div class="menu_item">
Matérias primas
</div>
<div class="menu_hover">
</div>
<!-- other menu itens following here -->
</div>
And this is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/style.css" rel="stylesheet">
<link href="css/typo.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<?php require 'includes/connect_link.php' ; ?>
<div class="wrapper">
<div class="header">
<strong>TOP</strong>
</div><!-- .header-->
<div class="middle">
<div class="container">
<main class="content">
<strong>MAIN</strong>
</main><!-- .content -->
</div><!-- .container-->
<div class="left-sidebar" id="cMenu">
<?php require '_menu.php'; ?>
</div><!-- .left-sidebar -->
<div class="right-sidebar" id="cLista">
<?php // require 'materias_primas_lista.php'; ?>
</div><!-- .right-sidebar -->
</div><!-- .middle-->
</div><!-- .wrapper -->
<div class="footer">
<strong>Footer</strong>
</div><!-- .footer -->
</body>
</html>
When I click on my link, the cList div receives the correct file and reload the whole page.
Can someone help me, please?
The default action when you click a link is to load the href. You can prevent it by calling event.preventDefault().
$("#mMateriasPrimas").on("click", function(event) {
event.preventDefault();
$("#cLista").load("materias_primas_lista.php");
});

GoodMap API3 with PhoneGap

I work on application in which i need map i worked in map module and in browser it shows correct result but as it is an mobile application so i run it into emulator and the following error occues
Uncaught TypeError: object is not a function at file:///android_asset/www/nav-map.html:3
my html file Nav-map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<script src="js/hsmain.min.js"></script>
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoswipe/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" />
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox-1.1.0.mode.datebox.js"></script>
<script src="js/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="lib/work-space.js"></script>
<script src="lib/config.js"></script>
<script src="lib/userprofile.js"></script>
<script src="lib/loginlogout.js"></script>
<script src="lib/binder.js"></script>
<script src="lib/newsfeed.js"></script>
<script src="lib/harvestdata.js"></script>
<script src="lib/members.js"></script>
<script src="lib/pictures.js"></script>
<script src="lib/properties.js"></script>
<script src="lib/clubnewsfeeds.js"></script>
<script src="lib/jsutility.js"></script>
<script src="lib/weather.js"></script>
<script src="lib/groups.js"></script>
<script src="lib/groupnewsfeeds.js"></script>
<script src="lib/companies.js"></script>
<script src="lib/companynewsfeeds.js"></script>
<script src="lib/map.js"></script>
<script src="lib/searching.js"></script>
<script src="lib/notitfications.js"></script>
<link href="960/jquery-mobile-fluid960.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
#map-canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="ClubMapPage">
<!--header-->
<script>$('#ClubMapPage').on('pageshow',function(){
UserProfile.loadProfile();
Notifications.getTopNotification();
Properties.getClubNameAndImage();
Map.getMap();
})
</script>
<div id="landing-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="container_12 padding5">
<div class="grid_1">
<span class="inline-button floatleft">Back</span>
</div>
<div class="grid_10">
<div class="hs-icon-wrap">
<span class="dropdown inline-button"><a class="hs-request dropdown-toggle showRequestsBtn" data-toggle="dropdown" data-role="button" href="#messages" data-iconpos="notext" >Requests</a>
</span>
<span class="dropdown inline-button"><a class="hs-notification dropdown-toggle showNotificationsBtn" data-role="button" href="#" data-toggle="dropdown" data-iconpos="notext" >Notifications</a>
</span>
</div>
</div>
<div class="grid_1">
<span class="inline-button floatright">Right</span>
</div>
</div>
</div>
<!--contents-->
<div data-role="content" class="hs-content">
<div class="hs-notifications-menu-contents-wrap feeds-content-header HSnotifications">
<div class="hs-notification-menu-heading">
Notifications
<a title="Remove" class="removebutton hideNotificationsBtn" href="javascript://" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" >
<ul class="hs-notificatin-list notificationul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- End Of Notifications -->
<div class=" hs-notifications-menu-contents-wrap feeds-content-header HSrequests" >
<div class="hs-notification-menu-heading">
Requests
<a title="Remove" class="removebutton hideRequestsBtn" href="#" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" style="">
<ul class="hs-notificatin-list requestul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- end of requests -->
<div class="container_12">
<div class="content-header">
<h4><img class="smallClubImage" alt="" src="images/header-small-image.png" /></h4>
Info
<div data-role="navbar" class="nav-glyphish-example" data-grid="c">
<ul>
<li class="no-border">Members</li>
<li class="active">Map</li>
<li>Harvest</li>
<li><a href="clubpages/albums.html" id="nav-picture" data-icon="custom" >Picture</a></li>
</ul>
</div>
</div>
<div class="content-wrap map-wrap">
<div id="map-canvas" style="height:500px; width:100%; margin:0; padding:0">
</div>
</div>
</div>
</div>
</div>
I had the same error but I solved it two months ago!
I was because a jquery plugin of mine was not ending in ;
You can Try to end your JS lines with ; I can see you don't follow this best practices advice. So, add it to you own js files (at the end) in order to let the files concatenation understand That a new file is really a new single function (or statement)
Sorry If this is not the solution to your problem! Thank you for reading
Hi there is some problem with your class names you put the class names same as some keywords like Image you cannot put Image as a class name also check if other same problem exist i think you should check by using some IDE it will shows the special names in different color.
also change the class name Map
I had the same error once i think it will help you
Thanks

Categories