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  
  • RegisterRegister  
  • Log inLog in  
  • November 2017
    MonTueWedThuFriSatSun
      12345
    6789101112
    13141516171819
    20212223242526
    27282930   

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Shopmotion


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

    None

    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds


    Poll
    Top posting users this week


    Go to page : 1, 2, 3  Next

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

    avatar

    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.]
    Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

    uppp

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

    avatar
    Uppp?

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

    avatar
    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 on January 9th 2013, 9:49 pm by steve_hopey

    avatar
    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 on January 9th 2013, 9:53 pm by Mr.EasyBB

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

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

    avatar
    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 on January 9th 2013, 10:01 pm by Mr.EasyBB

    avatar
    Liked
    Well it looks great bud, good job Smile

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

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

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

    avatar
    Not sure tommycoo, did you change your privacy settings to allow external emails? 

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

    avatar
    oh yes that's right thanks Smile

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

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

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

    avatar
    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 on March 16th 2013, 8:59 pm by Mr.EasyBB

    avatar
    @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 on March 16th 2013, 11:22 pm by tommycoo

    avatar
    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 on March 16th 2013, 11:26 pm by Mr.EasyBB

    avatar
    i've follow that
    but still same ?

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

    avatar
    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 on March 17th 2013, 9:06 pm by Mr.EasyBB

    avatar
    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 on March 18th 2013, 5:22 am by tommycoo

    avatar
    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 on March 19th 2013, 1:50 am by Dhimaz

    avatar
    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 on March 19th 2013, 1:55 am by Mr.EasyBB

    avatar
    can you fix my forum?
    I will PM

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

    avatar
    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 on March 19th 2013, 2:01 am by Mr.EasyBB

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

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

    avatar
    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 on May 9th 2013, 11:15 pm by Mr.EasyBB

    avatar
    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 on 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