Ok so this is going be a 5 star rating, only because there's a few codes that some of you will not understand, which is ok. You can ask any questions, and I will try and help you to understand.

Ok to the tutorial, points system must be active really if you want to use this, I mean you can use this without the points system, but then how would you know how many points a user has.

Ok, now go to
ACP>MODULES>HTML & JAVASCRIPT>Click HTML pages management

Click "Create new HTML page"
Let's create our shop!

Start off by ticking the following:

Title * : (title the link, I used shops)

Do you wish to use your forum header and footer ?: Check YES or NO

Use this page as homepage ? Check YES or NO

The settings I used were Yes to forum header and footer, and No for homepage.

Ok so once you have done this, add some starting tags

Code:

<style type="text/css">
</style>
<script type="text/javascript">
</script>

Reason why we have these is because we will add things to them later, and we want them in the beginning.

Ok so let's start with our Shops Name


<div id="header">Your Shops Name</div>


Great then we will add our containers for the actual shop


<div id="header">Your Shops Name</div>
<div id="shopWrapper">
<div id="InventWrapper">
</div>
</div>


Alright so the shopWrapper is what it says it is, that is our main wrapper, then the inventWrapper is our "Inventory Wrapper". We closed them but we will need to add codes inside of those divs.

We are now going to start adding our items for our Inventory.

Start with the itemWrapper

<div id="header">Your Shops Name</div>
<div id="shopWrapper">
<div id="InventWrapper">
<div id="itemWrapper">
</div>
</div>
</div>


Then we will add another div to create an inner wrapper for that.

<div id="header">Your Shops Name</div>
<div id="shopWrapper">
<div id="InventWrapper">
<div id="itemWrapper">
<div id="item1" class="item">
</div>
</div></div>
</div>


Now we are going to start adding the details of our item inside

<div id="header">Your Shops Name</div>
<div id="shopWrapper">
<div id="InventWrapper">
<div id="itemWrapper">
<span class="title">Item 2</span><br/>
<span class="image"><img src="http://www.thinkgeek.com/images/products/zoom/tqualizer_anim.gif"/></span><br />
<div class="descrip">
<span class="points" data-myPrice="2000">2000 pts</span><span class="sale">ON SALE</span><br />
<span class="description">Here would be a simple description of the item for sale. Then We will create a button below.</span>
</div></div>
</div>


Yes we skipped all the long description for this. What we added was
Title of Item
Image of Item
Description of Item
How much Item is
If sale or not

You will see in the spans that we have data-myPrice="2000" that needs to be changed each time you change the price of that one item.

Now we will add a submit button to add to our cart.

<div id="header">Your Shops Name</div>
<div id="shopWrapper">
<div id="InventWrapper">
<div id="itemWrapper">
<span class="title">Item 2</span><br/>
<span class="image"><img src="http://www.thinkgeek.com/images/products/zoom/tqualizer_anim.gif"/></span><br />
<div class="descrip">
<span class="points" data-myPrice="2000">2000 pts</span><span class="sale">ON SALE</span><br />
<span class="description">Here would be a simple description of the item for sale. Then We will create a button below.</span>
</div>
<input type="button" class="addButton" data-item='item2' value="Add To Cart"/>
</div>
</div>


As you can see we add the button with data-item='item2' this is for our code to recognize our variables.

Alright so the full code now

Code:


<div id="shopWrapper">
<div id="InventWrapper">
<div class="itemWrapper">
<div id="item2" class="item">
<span class="title">Item 2</span><br/>
<span class="image"><img src="http://www.thinkgeek.com/images/products/zoom/tqualizer_anim.gif"/></span><br />
<div class="descrip">
<span class="points" data-myPrice="2000">2000 pts</span>
<span class="sale">ON SALE</span><br />
<span class="description">Here would be a simple description of the item for sale. Then We will create a button below.</span>
</div>
    <input type="button" class="addButton" data-item='item2' value="Add To Cart"/>
</div>
</div> 
</div>
</div>


Good now just change all the item2 listed in the code, as well as the data-myPrice. I'll explain more of that later now lets go on with the code.

Now we are going to add the cart coding

<div class="cartWrapper">
<div class="cart" id="cartj">
<div class="cart_body">
<div class="cart_title">Shopping Cart</div>
<div class="cart_items">
<ul class='theList'>
</ul>
</div>
</div>
<span class="totaler">Total= $</span>
</div>
</div>

As you see this is quite simple, for HTML atleast. We also have important classes and Ids in the code so do not change these what so ever. You can change the styles but nothing else. Also you can change the $ to pts if wanted though some of the code would need to change.

Great now everything together

Code:

<div id="shopWrapper">
<div id="InventWrapper">
<div class="itemWrapper">
<div id="item2" class="item">
<span class="title">Item 2</span><br/>
<span class="image"><img src="http://www.thinkgeek.com/images/products/zoom/tqualizer_anim.gif"/></span><br />
<div class="descrip">
<span class="points" data-myPrice="2000">2000 pts</span>
<span class="sale">ON SALE</span><br />
<span class="description">Here would be a simple description of the item for sale. Then We will create a button below.</span>
</div>
    <input type="button" class="addButton" data-item='item2' value="Add To Cart"/>
</div>
</div> 
</div>
<div class="cartWrapper">
<div class="cart" id="cartj">
<div class="cart_body">
<div class="cart_title">Shopping Cart</div>
<div class="cart_items">
<ul class='theList'>
</ul>
</div>
</div>
      <span class="totaler">Total= $</span>
</div>
    </div>
</div>

Yeah so now we are getting closer and closer.

We are going to add the features of making our cart send a form. So what we do is create a simple form

<form id="privatemessage" action="/privmsg" method="post" name="post">
<input name="username[]" type="text" style="display:none" value="Mr.EasyBB"/>
<input value="Cart Submission Ticket" style="display:none" maxlength="64" name="subject" type="text" class="usernameinput"/>
<textarea id="cartMessage" style="display:none" class="noThis" name="message" ></textarea>
<input type="button" id="submitCart" onclick="this.disabled = false;document.getElementById('sendingBut').disabled = false" value="Update Cart"/>
<input type="submit" id="sendingBut" name="post" value="Send" disabled="disabled"/>
</form>

You can change all the red words above!

Ok so now let me explain, we have the form id, the action which when you write it in your html page will be "/privmsg"
The reason we are using this form with hidden elements is that without php access this is the only actual way we can create this. And honestly who wants to type everything out and ya know the big deal.

To continue with the information of the form we are going to explain the values and so forth;

Value for "username[]" we set it to the admin, which is me Mr.EasyBB so now the form will send to my inbox, if you want to send the form to more than one person, make another field next to that

<input name="username[]" type="text" style="display:none" value="OTHER USERNAME"/>

Then it will send to two people, you can do as many as you want I believe, I have not tested this part.
Value for the subject, we made ours "Cart Submission Ticket" which you can change. We made this, to easily organize the PM's in our inbox.

Next for the buttons explanation. You can see above that we have a button with an onClick event, and the other button we have set to disabled. What this does is make it so that the user can not send blank data information to your PM, they need to add things into their cart before submitting. So the first button, which we have marked value as "Update Cart" once they click this, the submit button now is functional. By clicking the Update Cart we are calling javascript to set the disabled of the second button to false.


This is all the HTML you will need, full code is below, then we will go onto the Javascript and CSS.

Code:

<div class="header">Your Shops Name Here</div>
<div class="shopWrapper">
<div class="inventWrapper">

<div class="itemWrapper">
<div id="item1" class="item">
<span class="title">Item 1</span><br/>
<span class="image"><img src="http://www.thinkgeek.com/images/products/zoom/tqualizer_anim.gif"/></span><br />
<div class="descrip">
<span class="points" data-myPrice="1000">1000 pts</span>
<span class="sale">ON SALE</span><br />
<span class="description">Here would be a simple description of the item for sale. Then We will create a button below.</span>
</div>
    <input type="button" class="addButton" data-item='item1' value="Add To Cart"/>
</div>
</div>

<div class="itemWrapper"><div id="item2" class="item">
<span class="title">Item 2</span><br/>
<span class="image"><img src="http://www.thinkgeek.com/images/products/zoom/tqualizer_anim.gif"/></span><br /><div class="descrip">
<span class="points" data-myPrice="2000">2000 pts</span><span class="sale">ON SALE</span><br />
<span class="description">Here would be a simple description of the item for sale. Then We will create a button below.</span>
</div>
    <input type="button" class="addButton" data-item='item2' value="Add To Cart"/>
</div>
</div> 

</div>
    <div class="cartWrapper">
<div class="cart" id="cartj">
<div class="cart_body">
<div class="cart_title">Shopping Cart</div>
<div class="cart_items">
<ul class='theList'>
</ul>
</div>
</div>
      <span class="totaler">Total= $</span>
</div>
    </div>
<div id="checkout">
Would you like to check out now? If so just click the CheckOut button. Allow 24-48 hours for all the items to be processed
<form id="privatemessage" action="/privmsg" method="post" name="post">
<input name="username[]" type="text" style="display:none" value="Mr.EasyBB"/>
<input value="Cart Submission Ticket" style="display:none" maxlength="64" name="subject" type="text" class="usernameinput"/>
<textarea id="cartMessage" style="display:none" class="noThis" name="message" ></textarea>
<input type="button" id="submitCart" onclick="this.disabled = false;document.getElementById('sendingBut').disabled = false" value="Update Cart"/>
<button id="sendingBut" disabled="disabled">Send</button>
<input style="display:none;" type="submit" id="sendingBut" name="post" value="Send" disabled="disabled"/>
</form>
</div>
</div>

Now for the CSS=

If you remember, I told you to start the HTML page off with a <script></script> and a <style></style> tag. We are going to work on the style right now.

Code:

<style type="text/css">
/*This styles the Header of the Shop, change it to what you want*/
.header{
color:#ff0000;
font-size:24px;
text-align:center;
text-shadow:4px 3px 4px #00ff00;
height:40px;
padding-bottom:40px;
}
/*This styles the Shop Wrapper The blue dashed border is from this code*/
.shopWrapper{
text-align:center;
margin:0 auto;
border:3px dashed #0000ff;
overflow:hidden;
height:auto;
background: whiteSmoke;
}
/*This styles the title of the item in each div*/
.title{
color:#000;
font-size:12px;
}
/*This styles the image of the the item*/
.image img{
height:100px;
width:100px;
}
/*This styles the image class as well*/
.image{
text-align:center;
}
/*This styles the points of the item, our color is yellow as you can see below*/
.points{
color:yellow;
font-size:8px;
float:left;
text-align:center;
}
/*This will style your ON SALE text if item is on sale*/
.sale{
color:#ff0000;
font-size:8px;
float:right;
text-align:center;
}
/*This styles the div of the item itself*/
.item{
width:130px;
min-height:150px;
border:1px solid #000;
overflow:hidden;
height:auto;
padding:5px;
background:#fff;
text-align:center;
}
/*This styles the description box background and so forth*/
.descrip{
background:#E9D09B;
overflow:hidden;
height:auto;
min-height: 50px;
}
/*This style is for the text inside the .descrip */
.description {
color: black;
font-size: 8px;
word-wrap: break-word;
text-align: left !important;
float: left;
text-indent: 5px;
}
/*This tyles what the .item is wrapped in. We need this to keep a clean flow*/
.itemWrapper{
text-align:center;
margin:0 auto;
float:left;
}
/*This is the inventory wrapper like state above*/
.inventWrapper{
float:left;
width:600px;
height:auto;
overflow:hidden;
}
/*Styles the carts background color, you can do more if you want*/
.cart{
overflow: hidden;
background: white;
}
/*Cart Title style here*/
.cart_title{
text-align:center;
color:#000;
border-bottom:2px solid #000;
}
/*The Cart items text to be centered, you can align left or right if you'd like*/
.cart_items{text-align:center;}
/*The cart body used to keep a clean flow, and no odd wrapping of the font. Also to keep the height we made our cart scroll up and down if alot of items exist*/
.cart_body{
text-align: center;
margin: 0 auto;
overflow-x: hidden;
overflow-y: scroll;
border: 1px solid lime;
height: 600px;
background: white;
}
/*Cart wrapper change only width if need be*/
.cartWrapper{
float:right;
width:300px;
}
/*Do not change anything here unless you want to change color and etc.*/
.totaler{bottom:0;}
/*To let the user know that the li items in the cart are clickable to be removed*/
li:hover{cursor:pointer;}
/*The bottom div of the checkout itself*/
#checkout{
float: left;
height: 100px;
text-align: center;
background: white;
border-top: 2px solid lime;
margin-top: 5px;
width: 100% !important;
}
</style>

The information needed is in notes in the css. Use these wisely.

Now to the javascript

Code:

(function($){
$(document).ready(function(){
var $total = 0.0

$('.addButton').click(function (){
    var theID ='#' + $(this).attr('data-item');
var pointstoAdd = parseFloat($(theID).find('.points').attr('data-myprice'));
$total += pointstoAdd;
$('.totaler').html('Total= $' + $total.toFixed(2));
var $newItem = '<li class="cart-item" data-points="'+ pointstoAdd+'">' + $(theID).find('.title').text()+ '</li>';
$('.theList').append($newItem);
BindIt();
});

function BindIt(){
   
    $('.cart-item').unbind('click');
   
    $('.cart-item').click( function(){
        $total -= parseFloat($(this).attr('data-points'));
        $('.totaler').html('Total= $' + $total.toFixed(2));
        $(this).remove();
    });
}
});
 $(document).ready(
              function() {
                $('#submitCart').click(function() {
                var text = '';
var total = 0;

$(".theList li").each(function () {
  var string = $(this).text();
  var points = parseInt($(this).data('points'));

  //capitalize first letter of string
  text += string.charAt(0).toUpperCase() + string.slice(1)
  //add line break at the end
      + ' = ' + points + "\n";

  total += points;
});

//I think calculating total is easier than trying to manipulate $(".totaler")
text += "Total = $" + total;
$("#cartMessage").text(text);
            });
        });
})(jQuery);
</script>

This code is our BASE of the entire shop!

I am going to explain some the things above! This is our math function, our implementing function, and our form function. Its all one thing! Only thing you will ever need to change here is if either if it is '$' or 'pts' or whatever you want to call your point system.

Change this in the code

$('.cart-item').click( function(){
$total -= parseFloat($(this).attr('data-points'));
$('.totaler').html('Total= $' + $total.toFixed(2));
$(this).remove();
});
}
});

$(".totaler")
text += "Total =$" + total;
$("#cartMessage").text(text);
});

if you want to change it to points use this instead...

$('.cart-item').click( function(){
$total -= parseFloat($(this).attr('data-points'));
$('.totaler').html('Total=' + $total.toFixed(2)+'pts');
$(this).remove();
});
}
});

$(".totaler")
text += "Total =" + total + 'pts';
$("#cartMessage").text(text);
});

And only the red dollar signs. This is the only thing you should do!

And that is it for the script. Try it out, if something is not working there are some possiblities.

A) a confliction javascript code
B) Wrong implementation of the tutorial
C) No closed tag, accidental editing

FULL CODE HERE::

Code:

<style type="text/css">
.header{color:#ff0000;font-size:24px;text-align:center;text-shadow:4px 3px 4px #00ff00;height:40px;padding-bottom:40px;}
.shopWrapper{text-align:center;margin:0 auto;border:3px dashed #0000ff;overflow:hidden;height:auto;background: whiteSmoke;}
.title{color:#000;font-size:12px;}
.image img{height:100px;width:100px;}
.image{text-align:center;}
.points{color:yellow;font-size:8px;float:left;text-align:center;}
.sale{color:#ff0000;font-size:8px;float:right;text-align:center;}
.item{width:130px;min-height:150px;border:1px solid #000;overflow:hidden;height:auto;padding:5px;background:#fff;text-align:center;}
.descrip{background:#E9D09B;overflow:hidden;height:auto;min-height: 50px;}
.description {color: black;font-size: 8px;word-wrap: break-word;text-align: left !important;float: left;text-indent: 5px;}
.itemWrapper{text-align:center;margin:0 auto;float:left;}
.inventWrapper{float:left;width:600px;height:auto;overflow:hidden;}
.cart{overflow: hidden;background: white;}
.cart_title{text-align:center;color:#000;border-bottom:2px solid #000;}
.cart_items{text-align:center;}
.cart_body{text-align: center;
margin: 0 auto;
overflow-x: hidden;
overflow-y: scroll;
border: 1px solid lime;
height: 600px;
background: white;}
.cartWrapper{float:right;width:300px;}
.totaler{bottom:0;}
li:hover{cursor:pointer;}
#checkout{float: left;
height: 100px;
text-align: center;
background: white;
border-top: 2px solid lime;
margin-top: 5px;
width: 100% !important;}
</style>


<script type="text/javascript">
(function($){
$(document).ready(function(){
var $total = 0.0

$('.addButton').click(function (){
    var theID ='#' + $(this).attr('data-item');
var pointstoAdd = parseFloat($(theID).find('.points').attr('data-myprice'));
$total += pointstoAdd;
$('.totaler').html('Total= $' + $total.toFixed(2));
var $newItem = '<li class="cart-item" data-points="'+ pointstoAdd+'">' + $(theID).find('.title').text()+ '</li>';
$('.theList').append($newItem);
BindIt();
});

function BindIt(){
   
    $('.cart-item').unbind('click');
   
    $('.cart-item').click( function(){
        $total -= parseFloat($(this).attr('data-points'));
        $('.totaler').html('Total= $' + $total.toFixed(2));
        $(this).remove();
    });
}
});
 $(document).ready(
              function() {
                $('#submitCart').click(function() {
                var text = '';
var total = 0;

$(".theList li").each(function () {
  var string = $(this).text();
  var points = parseInt($(this).data('points'));

  //capitalize first letter of string
  text += string.charAt(0).toUpperCase() + string.slice(1)
  //add line break at the end
      + ' = ' + points + "\n";

  total += points;
});

//I think calculating total is easier than trying to manipulate $(".totaler")
text += "Total = $" + total;
$("#cartMessage").text(text);
            });
        });
})(jQuery);
</script>
<div class="header">Your Shops Name Here</div>
<div class="shopWrapper">
<div class="inventWrapper">

<div class="itemWrapper">
<div id="item1" class="item">
<span class="title">Item 1</span><br/>
<span class="image"><img src="http://www.thinkgeek.com/images/products/zoom/tqualizer_anim.gif"/></span><br />
<div class="descrip">
<span class="points" data-myPrice="1000">1000 pts</span>
<span class="sale">ON SALE</span><br />
<span class="description">Here would be a simple description of the item for sale. Then We will create a button below.</span>
</div>
    <input type="button" class="addButton" data-item='item1' value="Add To Cart"/>
</div>
</div>

<div class="itemWrapper"><div id="item2" class="item">
<span class="title">Item 2</span><br/>
<span class="image"><img src="http://www.thinkgeek.com/images/products/zoom/tqualizer_anim.gif"/></span><br /><div class="descrip">
<span class="points" data-myPrice="2000">2000 pts</span><span class="sale">ON SALE</span><br />
<span class="description">Here would be a simple description of the item for sale. Then We will create a button below.</span>
</div>
    <input type="button" class="addButton" data-item='item2' value="Add To Cart"/>
</div>
</div> 

</div>
    <div class="cartWrapper">
<div class="cart" id="cartj">
<div class="cart_body">
<div class="cart_title">Shopping Cart</div>
<div class="cart_items">
<ul class='theList'>
</ul>
</div>
</div>
      <span class="totaler">Total= $</span>
</div>
    </div>
<div id="checkout">
Would you like to check out now? If so just click the CheckOut button. Allow 24-48 hours for all the items to be processed
<form id="privatemessage" action="/privmsg" method="post" name="post">
<input name="username[]" type="text" style="display:none" value="Mr.EasyBB"/>
<input value="Cart Submission Ticket" style="display:none" maxlength="64" name="subject" type="text" class="usernameinput"/>
<textarea id="cartMessage" style="display:none" class="noThis" name="message" ></textarea>
<input type="button" id="submitCart" onclick="this.disabled = false;document.getElementById('sendingBut').disabled = false" value="Update Cart"/>
<input type="submit" id="sendingBut" name="post" value="Send" disabled="disabled"/>
</form>
</div>
</div>


[You must be registered and logged in to see this link.]