Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Solved] Online Shop



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

1
Offline

  Roke.

avatar
V.I.P. Member
V.I.P. Member
  • Description:
Hi, do you guys have the code for the shop online? Like this one: http://excellzone.mrforum.net/h4-online-shop

  • Information:
Forum:http://zanimanga.italians.tv/forumVersion:PUNBB
Type:Request a codeTags:Online

Powered by PunBB
Currently 0 users have thanked Roke. for this post:

2
Offline

  Shadow

avatar
Administrator
Administrator
Code:
[panda=html]<style type="text/css">
    .header {
        margin-top: 25px;
        background: #DDD;
        font-size: 25px;
        color: white;
        padding: 10px 15px;
        margin-bottom: 15px;
        border: 1px solid #CCC;
        box-shadow: inset 1px 1px 2px #999;
        border-radius: 4px;
        text-align: center;
    }
   
    /.shopWrapper {
        text-align: center;
        margin: 0 auto;
        border: 3px dashed/ #0000ff;
        overflow: hidden;
        height: auto;
        background: whiteSmoke;
    }
   
    .title {
        font-weight: bold;
        font-size: 12px;
        color: #303030;
        margin: 5px;
    }
   
    .image img {
        padding-top: 13px;
        height: 40px;
        width: 40px;
    }
   
    .image {
        text-align: center;
    }
   
    .points {
        background: url(http://s6.tinypic.com/286sfuu_th.jpg) no-repeat;
        padding-bottom: 5px;
        padding-left: 18px;
        color: #242424;
        font-weight: bold;
        font-size: 11px;
        float: left;
        text-align: center;
    }
   
    .sale {
        color: green;
        font-style: italic;
        font-size: 11px;
        float: right;
        text-align: center;
    }
   
    .item {
        width: 188px;
        min-height: 195px;
        border: 1px solid #CECECE;
        overflow: hidden;
        height: auto;
        padding: 5px;
        background: #fff;
        text-align: center;
    }
   
    .descrip {
        float: left;
        margin-left: -10px;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        background: #E9E9E9;
        border: 1px solid #CECECE;
        border-left: 0;
        width: 92.3%;
        text-align: left;
        margin-top: 30px;
        margin-bottom: 5px;
    }
   
    .description {
        color: #242424;
        font-size: 11px;
        word-wrap: break-word;
        text-align: left !important;
        float: left;
        text-indent: 11px;
    }
   
    .itemWrapper {
        text-align: center;
        margin: 0 auto;
        float: left;
    }
   
    .inventWrapper {
        float: left;
        width: 815px;
        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: ;
        overflow-x: hidden;
        overflow-y: scroll;
        border: 1px solid lime;
        height: 210px;
        background: white;
    }
   
    .cartWrapper .totaler {
        bottom: 0;
    }
   
    li:hover {
        cursor: pointer;
    }
   
    #checkout {
        float: left;
        height: 130px;
        text-align: center;
        background: white;
        border-top: 2px solid #343434;
        margin-top: 5px;
        width: 100% !important;
    }
   
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        margin-bottom: -30px;
        font-family: 'Segoe UI Web Light', 'Segoe UI Light', 'Segoe UI Web Regular', 'Segoe UI', 'Segoe UI Symbol', 'Helvetica Neue', Arial;
        font-size: 15px;
        color: black;
        border: 1px solid #cecece;
        background-color: #F3F3F3;
        padding: 4px 10px;
        -webkit-transition: all 0.3s;
    }
   
    input[type="button"]:hover,
    input[type="reset"]:hover,
    input[type="submit"]:hover {
        border: 1px solid #CECECE;
        background: #CECECE;
        box-shadow: 0 0 0px;
    }
   
    button.button1,
    button.button2,
    input.button1,
    input.button2 {
        margin: 3px;
        cursor: pointer;
        border-radius: 2px;
        font-family: 'Segoe UI Web Light', 'Segoe UI Light', 'Segoe UI Web Regular', 'Segoe UI', 'Segoe UI Symbol', 'Helvetica Neue', Arial;
        font-size: 16px;
        color: black;
        border: 1px solid #CECECE;
        background: #F3F3F3;
        padding: 15px 51px;
        -webkit-transition: all 0.3s;
    }
   
    button.button1:hover,
    button.button2:hover,
    input.button1:hover,
    input.button2:hover {
        color: white;
        border: 1px solid #A3A3A3;
        background-color: #A3A3A3;
    }
   
    .type_header {
        -webkit-box-shadow: none !important;
        margin: 0px;
        padding: 4px 10px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 12px;
        line-height: normal;
        font-family: arial, helvetica, sans-serif;
        color: white;
        background-image: url(http://i47.tinypic.com/33nusqs.jpg);
        background-color: #8A8783;
        border: 1px solid #6E6A65;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        background-position: initial initial;
        background-repeat: repeat no-repeat;
        width: 778px;
    }
</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 Currencies = R$ ' + $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 Currencies = R$ ' + $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 Currencies = R$ " + total;
                    $("#cartMessage").text(text);
                });
            });
    })(jQuery);
</script>


<style>
    div.module.main.module-advert {
        display: none;
    }
   
    img,
    .input_check,
    .input_radio {
        vertical-align: middle;
    }
   
    .ipsButton_secondary img {
        vertical-align: middle;
        margin-top: -1px;
    }
   
    .ipsButton_secondary:hover {
        color: #4C4C4C;
        background-color: #F8F8F8;
    }
   
    index.phpmedia="screen, print" .input_submit,
    .ipsButton_secondary {
        outline: none;
    }
   
    .ipsButton_secondary {
        height: 24px;
        line-height: 24px;
        font-size: 11px;
        padding: 0 10px;
        background: #ECECEC url('http://i46.tinypic.com/2v0y81x.png') repeat-x 0 0;
        border: 1px solid #D0D0D0;
        -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), inset rgba(255, 255, 255, 0.7) 0px 1px 0px;
        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), inset rgba(255, 255, 255, 0.7) 0px 1px 0px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), inset rgba(255, 255, 255, 0.7) 0px 1px 0px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        color: #616161;
        text-shadow: white 0px 1px 0px;
        display: inline-block;
        white-space: nowrap;
        cursor: pointer;
    }
   
    .ipsButton_secondary:active {
        -webkit-box-shadow: inset rgba(0, 0, 0, 0.15) 0px 1px 2px, rgba(255, 255, 255, 0.5) 0px 1px 0px;
        -moz-box-shadow: inset rgba(0, 0, 0, 0.15) 0px 1px 2px, rgba(255, 255, 255, 0.5) 0px 1px 0px;
        box-shadow: inset rgba(0, 0, 0, 0.15) 0px 1px 2px, rgba(255, 255, 255, 0.5) 0px 1px 0px;
        position: relative;
        top: 1px
    }
   
    #Doarfast {
        background: rgba(0, 0, 0, 0.6) url('http://fcimage.net/public/style_images/imgfc/trans60.png') repeat;
        box-shadow: 10px 10px 40px #000;
        color: #333;
        font-family: sans-serif;
        left: 30%;
        position: fixed;
        top: 20%;
        width: 550px;
        z-index: 999;
        padding: 8px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 20px;
        -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 20px;
        box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 20px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
   
    #Doarfaster {
        background-color: #3E3E3E;
        filter: Alpha(opacity=80);
        left: 0;
        min-height: 101%;
        opacity: 0.4;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
    }
   
    #Doarfast h1 {
        padding: 5px;
        font-size: 12px;
        text-align: center;
        color: #727272;
        text-shadow: rgba(255, 255, 255, 0.<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> 0px 1px 0px;
        background: #EEE url('http://i46.tinypic.com/2v0y81x.png') repeat-x 0 0;
    }
   
    .Doarfast-content {
        background-color: #FCFCFC;
        border-bottom: 1px solid #EAEAEA;
        border-top: 1px solid white;
    }
   
    .Doarfast-content td {
        padding: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
        border-bottom: 1px solid #EAEAEA;
        border-top: 1px solid white;
    }
   
    #Doarfast img.closebutton {
        background: url(http://i50.tinypic.com/33kqfld.png) no-repeat;
        cursor: pointer;
        float: right;
        height: 22px;
        margin: 5px;
        width: 22px
    }
   
    .pun input {
        padding: 6px;
        border: 1px solid #D4D4D4;
        background: #FCFCFC;
        color: #9F9F9F;
        text-shadow: white 0px 1px 0px;
        -webkit-box-shadow: inset rgba(0, 0, 0, 0.1) 0px 1px 3px;
        -moz-box-shadow: inset rgba(0, 0, 0, 0.1) 0px 1px 3px;
        box-shadow: inset rgba(0, 0, 0, 0.1) 0px 1px 3px;
    }
   
    .pun input:focus {
        background-color: #fefefe;
        color: #555;
        border-color: #bbb;
        -webkit-box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2)
    }
   
    .submit {
        padding: 15px;
        text-align: center;
        background: #EEE url('http://i46.tinypic.com/2v0y81x.png') repeat-x 0 0;
        border-top: 1px solid #CCC;
        height: 30px;
    }
</style>

<div class="header"><font>Online Shop</font></div>
<div class="shopWrapper">
    <div class="inventWrapper">
        <div class="type_header">Excellzone store</div>
        <div class="itemWrapper">
            <div id="item1" class="item">
                <span class="title"><font><font>VIP Membership</font></font></span>
                <br>
                <span class="image"><img src="http://i.imgur.com/taaL40o.png"></span>
                <br>
                <div class="descrip">
                    <span class="points" data-myprice="3000"><font><font>3000 points </font></font></span>
                    <span class="sale"><font><font>For sale </font></font></span>
                    <br>
                </div>
                <font><font><input type="button" class="addButton" data-item="item1" value="Buy"></font></font>
            </div>
        </div>
        <div class="itemWrapper">
            <div id="item2" class="item">
                <span class="title"><font><font>10,000 Nexon Card</font></font></span>
                <br>
                <span class="image"><img src="http://gametimezone.com/images/codes/nexon10card.jpg"></span>
                <br>
                <div class="descrip">
                    <span class="points" data-myprice="7000"><font><font>7000 points </font></font></span>
                    <span class="sale"><font><font>For sale </font></font></span>
                    <br>
                </div>
                <font><font><input type="button" class="addButton" data-item="item2" value="Buy"></font></font>
            </div>
        </div>
        <div class="itemWrapper">
            <div id="item3" class="item">
                <span class="title"><font><font>25,000 Nexon Card</font></font></span>
                <br>
                <span class="image"><img src="http://gainfreestuff.com/wp-content/uploads/2013/07/nexon.jpg"></span>
                <br>
                <div class="descrip">
                    <span class="points" data-myprice="15000"><font><font>15000 points </font></font></span>
                    <span class="sale"><font><font>For sale </font></font></span>
                    <br>
                </div>
                <font><font><input type="button" class="addButton" data-item="item3" value="Buy"></font></font>
            </div>
        </div>
        <div class="itemWrapper">
            <div id="item4" class="item">
                <span class="title"><font><font>Steam Game (50$ Vaule)</font></font></span>
                <br>
                <span class="image"><img src="http://static.trustedreviews.com/94/000025e7f/5c9b/Steam-Logo.png"></span>
                <br>
                <div class="descrip">
                    <span class="points" data-myprice="10000"><font><font>10000 points </font></font></span>
                    <span class="sale"><font><font>For sale </font></font></span>
                    <br>
                </div>
                <font><font><input type="button" class="addButton" data-item="item4" value="Buy"></font></font>
            </div>
        </div>
        <div class="itemWrapper">
            <div id="item5" class="item">
                <span class="title"><font><font>Windows 7 UL</font></font></span>
                <br>
                <span class="image"><img src="http://oazeek.com/wp-content/uploads/2012/05/Windows-7.png"></span>
                <br>
                <div class="descrip">
                    <span class="points" data-myprice="1000"><font><font>1000 points </font></font></span>
                    <span class="sale"><font><font>For sale </font></font></span>
                    <br>
                </div>
                <font><font><input type="button" class="addButton" data-item="item5" value="Buy"></font></font>
            </div>
        </div>
        <div class="itemWrapper">
            <div id="item6" class="item">
                <span class="title"><font><font>Minecraft</font></font></span>
                <br>
                <span class="image"><img src="http://fc06.deviantart.net/fs70/f/2011/282/1/8/minecraft_logo_by_krouton3-d4cbzex.png"></span>
                <br>
                <div class="descrip">
                    <span class="points" data-myprice="1000"><font><font>1000 points </font></font></span>
                    <span class="sale"><font><font>For sale </font></font></span>
                    <br>
                </div>
                <font><font><input type="button" class="addButton" data-item="item6" value="Buy"></font></font>
            </div>
        </div>
        <div class="itemWrapper">
            <div id="item7" class="item">
                <span class="title"><font><font>25$ prepaid visa</font></font></span>
                <br>
                <span class="image"><img src="https://points.rbcrewards.com/Catalogue/ProductImage?image=VisaGCLogo.jpg&width=230&height=230"></span>
                <br>
                <div class="descrip">
                    <span class="points" data-myprice="12000"><font><font>12000 points </font></font></span>
                    <span class="sale"><font><font>For sale </font></font></span>
                    <br>
                </div>
                <font><font><input type="button" class="addButton" data-item="item7" value="Buy"></font></font>
            </div>
        </div>
        <div class="itemWrapper">
            <div id="item8" class="item">
                <span class="title"><font><font>25 PC Games</font></font></span>
                <br>
                <span class="image"><img src="http://th09.deviantart.net/fs50/PRE/i/2009/340/1/0/Game_Aicon_Pack_32_by_HarryBana.png"></span>
                <br>
                <div class="descrip">
                    <span class="points" data-myprice="10000"><font><font>10000 points </font></font></span>
                    <span class="sale"><font><font>For sale </font></font></span>
                    <br>
                </div>
                <font><font><input type="button" class="addButton" data-item="item8" value="Buy"></font></font>
            </div>
        </div>
    </div>
    <div class="cartWrapper">
        <div class="cart" id="cartj">
            <div class="cart_body">
                <div class="cart_title"><font><font>Shopping cart</font></font>
                </div>
                <div class="cart_items">
                    <ul class="theList">
                    </ul>
                </div>
            </div>
            <span class="totaler"><font><font>Total Currencies = </font></font></span>
        </div>
        <form id="privatemessage" action="/privmsg" method="post" name="post">
            <input name="username[]" type="text" style="display:none" value="Excell">
            <input value="Order of Store" style="display:none" maxlength="64" name="subject" type="text" class="usernameinput">
            <textarea id="cartMessage" style="display:none" class="noThis" name="message"></textarea>
            <span class="buttons">
<center><button id="submitCart" type="button" class="button1" onclick="this.disabled = false;document.getElementById('sendingBut').disabled = false"><font><font>Update cart</font></font></button><center><span style="color:red">Update before sending.</span></center>
            </center>
            <center>
                <button type="submit" name="post" class="button2" id="sendingBut" disabled="disabled"><font><font>Submit request</font></font>
                </button>
            </center>
            </span>
        </form>
    </div>
</div>
<div id="k551be5" style="clear:both;">
    <div align="center">
        <div style="text-align:center; display:inline-block; margin:0 auto;">
            <table border="0" cellspacing="0" cellpadding="0" style="padding:0; margin:0; border:none;">
                <tbody>
                    <tr>
                        <td valign="top" style="padding:32px;">
                           
                        </td>
                        <td valign="top" style="padding:32px;">
                         
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Now, it's up to you to alter the code for your needs.

Important part: Search for "Excell" in this code and replace with your forum username, that way, when someone submit the order, private message will be sent to your account.



Forum Administrator, Coolyou,
Due to the volume of PMs I receive, I do not provide support via PM.
We have community forums for most support requests. If it's truly confidential, please do PM me.

Useful links:
-> Before asking question,  please use a Search option.
-> If you want to check our staff members click here.
->  Forum rules, this is a MUST READ thread.
->  FAQ (Frenquently asked questions)

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

3
Offline

  Roke.

avatar
V.I.P. Member
V.I.P. Member
Thanks a lot! Soon i will donate something to the Forum, you always help me <3

Powered by PunBB
Currently 0 users have thanked Roke. for this post:

4
Offline

  Shadow

avatar
Administrator
Administrator
[sucesso="Marked as Solved"]The question(s) in this topic have been answered and the owner has been able to solve the problem. Because of this, the topic has been marked as Solved.

If you have further questions, please open a new topic.[/sucesso]



Forum Administrator, Coolyou,
Due to the volume of PMs I receive, I do not provide support via PM.
We have community forums for most support requests. If it's truly confidential, please do PM me.

Useful links:
-> Before asking question,  please use a Search option.
-> If you want to check our staff members click here.
->  Forum rules, this is a MUST READ thread.
->  FAQ (Frenquently asked questions)

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

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


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum