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

Board Index » Forumotion »  [Read Only] Questions & Problems »[Solved] Online Shop

Foto

[Solved] Online Shop

by ,


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

1
Offline

  Roke.

Roke.
V.I.P. Member
V.I.P. Member
2015-04-13, 10:06
  • 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

Shadow
Administrator
Administrator
2015-04-13, 15:58
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://2img.net/i/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.

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

3
Offline

  Roke.

Roke.
V.I.P. Member
V.I.P. Member
2015-04-13, 16:05
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

Shadow
Administrator
Administrator
2015-04-14, 14:20
[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]

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

5
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content 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

 

About PunBB Design

PunBB Design (ex. PunBB Community) Forum is Forumotion hosted forum created 2012 as a test forum for helping out members and improving design and quality of the Forumotion forums. Over the time it became bigger and bigger in term of content, members and activity. That's why several times Forumotion offered us a free domain name for our community (www.punbb.biz). Today we want to back it's old activity and make it even better! In 2013 PunBB Design is awarded for best Forumotion forum.

General Links

Forum Resources

Forumotion Links

BtT
  • This skin is designed by Shadow for PunBB Design™.