Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • Latest imagesLatest images  
  • RegisterRegister  
  • Log inLog in  
  • March 2024
    MonTueWedThuFriSatSun
        123
    45678910
    11121314151617
    18192021222324
    25262728293031

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Similar topics
      Who is online?
      In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

      None

      Most users ever online was 140 on July 4th 2021, 2:03 pm
      RSS feeds


      Poll
      Top posting users this week
      No user


      Go to page : 1, 2, 3  Next

      View previous topic View next topic Go down  Message [Page 1 of 3]

      Mr.EasyBB

      Want a Shop?

      Mr.EasyBB
      12/05/2012
      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.]

      Similar topics

      -

      » Shop Page?
      Share this post on: reddit

      avatar
      uppp

      Post December 10th 2012, 12:20 pm by lecet98

      Mr.EasyBB
      Uppp?

      Post December 10th 2012, 5:37 pm by Mr.EasyBB

      steve_hopey
      I get the following error when I add the css:


      Detected error
      We have counted a wrong number of quotation marks therefore a chain is unclosed. It means your CSS risks to be not valid and will not be posted correctly on your forum.

      We advise you to reread your code.

      Post January 9th 2013, 9:49 pm by steve_hopey

      Mr.EasyBB
      Liked
      I post the entire code for your HTML page and there are no errors. The CSS does not need to go into your CSS stylesheet. This should go into style tags and in an html page so that your regular CSS does not over fill with needless CSS when this is only for HTML page really. Anymore assistance after you try just pasting this code in your html page please post again.




      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="/" 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>

      Post January 9th 2013, 9:53 pm by Mr.EasyBB

      steve_hopey
      Aww i see, wow thanks! Great site btw Smile

      Post January 9th 2013, 10:00 pm by steve_hopey

      Mr.EasyBB
      Thank you I appreciate it. We still are slowly fixing all the small things lol. We had a compatibility issue so we changed the entire site up and now is more fluid than before.

      Post January 9th 2013, 10:01 pm by Mr.EasyBB

      steve_hopey
      Liked
      Well it looks great bud, good job Smile

      Post January 9th 2013, 10:09 pm by steve_hopey

      tommycoo
      hey why this is don't work for me ?

      Post March 14th 2013, 8:32 am by tommycoo

      Mr.EasyBB
      Not sure tommycoo, did you change your privacy settings to allow external emails? 

      Post March 14th 2013, 2:42 pm by Mr.EasyBB

      tommycoo
      oh yes that's right thanks Smile

      Post March 16th 2013, 9:36 am by tommycoo

      tommycoo
      why don't work again, it still redirect to homepage

      Post March 16th 2013, 8:23 pm by tommycoo

      Mr.EasyBB
      Tommycoo I don't think you are understanding the purpose of this code nor how to enter it correctly. As this is a very simple code to just copy and paste in an HTML management page. So I'm sorry, you do have to have a basic understanding of basic HTML.

      Post March 16th 2013, 8:59 pm by Mr.EasyBB

      tommycoo
      @easy : yeah thats true i'dont have it. but can u just teach how to put it in the html page ?

      i've check my header and footer yes
      i''ve allow external emails
      and i've add this code
      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="/" 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>

      but when i click send, it will be redirect to my homepage ?
      i'm really* need this

      Post March 16th 2013, 11:22 pm by tommycoo

      Mr.EasyBB
      1. Change line 31 above = your username.
      2. Delete line 35
      3. Delete style="display:none;" in line 36. 

      Sorry about this as I suppose I did not update this post. Remember I am still redoing this site and everything will be in order soon. 

      Post March 16th 2013, 11:26 pm by Mr.EasyBB

      tommycoo
      i've follow that
      but still same ?

      Post March 17th 2013, 7:41 pm by tommycoo

      Mr.EasyBB
      I'm not sure what you are doing wrong. Maybe a link would help me better, as when you tell me its just the same or that it is redirecting this doesn't conclude the issue at hand. Maybe there is a javascript error on your website. I need to see something to work with here.

      Post March 17th 2013, 9:06 pm by Mr.EasyBB

      tommycoo
      if u want my link here is [You must be registered and logged in to see this link.]
      and if you want a test account let me know Wink

      Post March 18th 2013, 5:22 am by tommycoo

      Dhimaz
      Please Help me !
      [You must be registered and logged in to see this link.]
      I wanted to like
      [You must be registered and logged in to see this link.]

      Post March 19th 2013, 1:50 am by Dhimaz

      Mr.EasyBB
      Dhimaz you have an error firstly:

      Uncaught SyntaxError: Unexpected token ILLEGAL 

      It is this code:

      Code:

       var cookie = my_getcookie('LGvms') || 2000;
         var url = holder.firstChild.href + '&page_profil=messages';
         if(url.indexOf('&u=-1') > 0) return;
         jQuery(holder).load(url + ' #profile-advanced-details .subtitle'', function() {
      Uncaught SyntaxError: Unexpected token ILLEGAL
            var nums = holder.firstChild.innerHTML.match(/[0-9]+/g);
            var totalVMs = parseInt(nums[nums.length-1]);
            if(totalVMs > cookie) {
               holder.innerHTML = '<a href="' + url + '">You have ' + (totalVMs - cookie) + ' new visitor messages.</a>';
               holder.style.display = '';
            }
            my_setcookie('LGvms', totalVMs, 1);
         });

      And other than that I see nothing wrong with the code so what is wrong per say?

      Post March 19th 2013, 1:55 am by Mr.EasyBB

      Dhimaz
      can you fix my forum?
      I will PM

      Post March 19th 2013, 2:00 am by Dhimaz

      Mr.EasyBB
      No I can not fix your forum lol. I am currently busy updating EasyBB, what is wrong honestly? Does it not send the PM?

      Post March 19th 2013, 2:01 am by Mr.EasyBB

      refresh101
      Me Too DiDnt Sent Via PM Why Is That?
      (Just Redirecting To Homepage)?

      Post May 9th 2013, 11:06 pm by refresh101

      Mr.EasyBB
      Find this =

      Code:
      <button id="sendingBut" disabled="disabled">Send</button>
      <input style="display:none;" type="submit" id="sendingBut" name="post" value="Send" disabled="disabled"/>

      and make it this

      Code:
      <input type="submit" id="sendingBut" name="post" value="Send" disabled="disabled"/>

      Post May 9th 2013, 11:15 pm by Mr.EasyBB

      Puppycheese889
      Hey I tried to make it tokens but it didn't work. here is my script.

      Code:
      <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)+'Tokens');$(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 + 'Tokens';$("#cartMessage").text(text);});        });})(jQuery);</script>

      Nevermind I fixed it. Thank you this works great!

      Actually I have a small problem. When you hit submit it redirects you to the homepage and doesn't send any message or anything. Here is my code help me!

      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)+' Tokens');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)+'Tokens');$(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 + 'Tokens';$("#cartMessage").text(text);});        });})(jQuery);</script><div class="header">Converseit Shop</div><div class="shopWrapper"><div class="inventWrapper">
      <div class="itemWrapper"><div id="item1" class="item"><span class="title">Rainbow Usernames</span><br/><span class="image"><img src="http://oi47.tinypic.com/2vw8q47.jpg"/></span><br /><div class="descrip"><span class="points" data-myPrice="1000">1000 Tokens</span><span class="sale">NEW</span><br /><span class="description">It will make your username rainbow colored on the site. Wohooo Rainbows!!!!</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= 0 Tokens</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="/" method="post" name="post"><input name="username[]" type="text" style="display:none" value="Puppycheese123"/><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>

      Post May 10th 2013, 3:57 pm by Puppycheese889

      Post  by Sponsored content

      View previous topic View next topic Back to top  Message [Page 1 of 3]

      Go to page : 1, 2, 3  Next