SimpleCartJS – Individual Shipping Price per Product

@Grizzly_AdamFeb 27.2016

Hello everyone, this is my first post. I hope I am not breaking any protocols by immediately asking for assistance. I run a xenforo forum that is completely funded by products we sell out of our Swag Shoppe and I have been trying to set up SimpleCartJS to give me more control over the design, shipping calculator, etc.

I have gotten the “view cart” page set up nicely but I have been experience difficulty setting up individualized shipping cost per each item, as described on this page (second to last code snippet): ~~[url]~~http://simplecartjs.org/documentation/shipping[/url]

I am still learning javascript and would really appreciate some guidance. Thank you.

to post a comment

JavaScript

5 Comments(s) _↴

@Grizzly_AdamauthorFeb 28.2016 — #And now I will add code-- didn't realize I would have to wait for moderation to reply.

viewcart.html

[code=html]<html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="http://www.firewoodhoardersclub.com/styles/simplecartjs.css">
 
 <script src="http://firewoodhoardersclub.com/js/simplecart/simpleCart.js"></script>
 
 <script type="text/javascript">
 
 simpleCart({
 checkout: {
 type: "PayPal",
 email: "[email protected]"
 },
 cartStyle: "table",
 cartColumns: [
 { attr: "name" , label: "Item" } ,
 { attr: "size" , label: "Size" } ,
 { attr: "price" , label: "Price", view: 'currency' } ,
 { view: "decrement" , label: false , text: "-" } ,
 { attr: "quantity" , label: "Qty" } ,
 { view: "increment" , label: false , text: "+" } ,
 { attr: "total" , label: "SubTotal", view: 'currency' } ,
 { view: "remove" , text: "X" , label: false }]
 });
 
 
 
 </script>
 
 <style>
 .image { 
 position: relative;
 width: 100%; /* for IE 6 */
 }
 
 h2 { 
 position: absolute; 
 top: 11px; 
 left: -10px; 
 width: 100%; 
 }
 </style>
 
 </head>
 
 <body>
 <div class="image">
 <a href="http://firewoodhoardersclub.com/forums/widget-pages/cart/"><img align="right" width="50px" src="http://firewoodhoardersclub.com/pictures/carticon.png" alt="" /></a>
 <font align="right" size="1"><b><h2><span style="border-radius: 100px; background:red;color : white;padding : 4px 8px;"class="simpleCart_quantity"></span></h2></b></font>
 </div>
 <center>
 <br><br><br><br>
 <font size="3">You have <span class="simpleCart_quantity"></span> item(s) in your Cart.
 <br>
 <a href="javascript:;" class="simpleCart_empty" style="color:green;margin-left:0px;text-decoration:none;">Empty Cart</span></a> <a style="color:green;margin-left:30px;text-decoration:none;" href="http://firewoodhoardersclub.com/forums/swag/">Keep Shopping</a></font><p>
 
 <span class="simpleCart_items"></span><p>
 
 <font size="3"><span style="color:green;margin-right:0px;text-decoration:none;">Subtotal: <b><span class="simpleCart_total"></span></b><br>
 Shipping: <b><span class="simpleCart_shipping"></span></b><br>
 
 Total: <b><span class="simpleCart_grandTotal"></span></span></b></font><br>
 
 
 <a href="javascript:;" class="simpleCart_checkout"><img src="http://firewoodhoardersclub.com/pictures/paypal.png"></a>
 
 </center>
 </body>
 </html>[/code]

@Grizzly_AdamauthorFeb 28.2016 — #Not style on this one yet

shoppingcart.html

[code=html]<html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="http://firewoodhoardersclub.com/js/simplecart/simpleCart.js"></script>
 <script type="text/javascript">
 simpleCart({
 checkout: {
 type: "PayPal",
 email: "*****@gmail.com"
 },
 cartStyle: "table"
 });
 </script>
 
 <style>
 .image { 
 position: relative; 
 width: 100%; /* for IE 6 */
 }
 
 h2 { 
 position: absolute; 
 top: 11px; 
 left: 3px; 
 width: 100%; 
 }
 </style>
 
 </head>
 
 <body>
 <div align=right>
 <div class="image">
 
   <center><img width="50px" src="http://firewoodhoardersclub.com/pictures/carticon.png" alt="" />
 
   <font size="1"><b><h2><span style="border-radius: 100px; background:red;color : white;padding : 4px 8px;"class="simpleCart_quantity"></span></h2></b></font></center>
 
 </div>
 </div>
 
 <table class="shelfitem" style="display:inline-block;"><tr>
 <td valign="middle" align="center"><img alt="Shirt Front" src="http://firewoodhoardersclub.com/pictures/black-gotwood.jpg"style="max-height: auto; max-width: 75px;"></td>
 
 
 
 <td align ="center" valign="top" height="105">
 
 <div class="simpleCart_shelfItem">
 <center><font size=3 color=red><b>Clearance!</b></font><br>
 <span class="item_name">Black "Got Wood" Shirt</span> <span class="item_price">$7</span><br>
 <select class="item_size">
 <option value="Small"> Small </option>
 <option value="Medium"> Medium </option>
 <option value="Large"> Large </option>
 <option value="XL"> XL </option>
 <option value="XXL"> XXL </option>
 <input type="hidden" value="7" class="item_Shipping">
 <input type="hidden" value="1" class="item_Quantity">
 <br>
 <a class="item_add" href="javascript:;"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif"></a>
 </center></div>
 </select>
 
 
 </center>
 
 </td></tr></table><hr>
 
 
 <a href="javascript:;" class="simpleCart_checkout">Checkout</a>
 <a href="javascript:;" class="simpleCart_empty">Empty Cart</a>
 
 You have <span class="simpleCart_quantity"></span> items in your Cart. <a href="viewcart.html">View Cart</a></p>
 Total: <b><span class="simpleCart_total"></span></b> <a href="javascript:;" class="simpleCart_checkout">Checkout</a>
 
 </body>
 </html>[/code]

@Grizzly_AdamauthorFeb 28.2016 — #And the stylesheet if anyone wants to see it.

simplecartjs.css

[CODE].image { 
 position: relative; 
 width: 100%; /* for IE 6 */
 }
 
 h2 { 
 position: absolute; 
 top: 200px; 
 left: 0; 
 width: 100%; 
 }
 
 
 
 
 th {
 background-color: green;
 color: white;
 }
 th, td {
 padding: 15px;
 text-align: center;
 }
 
 table {
 border-collapse: collapse;
 }
 
 table {
 border: 1px solid black;
 }
 
 tr:nth-child(even) {background-color: #f2f2f2}
 
 table a:link, table a:visited, table a:active {
 border-radius: 6px;
 background: #DCDCDC;
 padding: 5px; 
 width: 0px;
 height: 0px;
 color: red;
 font-weight: bold;
 text-decoration: none;
 }
 
 @media screen and (max-width: 640px) {
 th, td {
 padding: 5px;
 text-align: center;
 }
 }[/CODE]

@rootFeb 28.2016 — #You nee the JQuery form. See my signature.

@Grizzly_AdamauthorFeb 28.2016 — #Admins/moderators: could you please move my thread to the jquery forum?

Also in #JavaScript _↴

Enabling/disabling buttons Google Map Jquery.load Problem onLoad vs. onClick?

Success!

Help @Grizzly_Adam spread the word by sharing this article on Twitter...

Tweet This

SimpleCartJS – Individual Shipping Price per Product

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

SimpleCartJS – Individual Shipping Price per Product

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴