The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Forum Shop [phpBB3, AwesomeBB]

4 posters

Go down

Forum Shop [phpBB3, AwesomeBB] Empty Forum Shop [phpBB3, AwesomeBB]

Post by Guest August 24th 2023, 12:02 pm

Many of you have wondered how to have your own shop on the forum and it seemed difficult to make, answers vague etc. Let me share with you my complete code on how to do this. Let's start by explaining how it works.

1. Making a shop using HTML/CSS
2. Making a topic(thread) where, whenever user buy an item, he will post automatically in that topic and you, as an Admin can see what he/she bought and simply deduct points manually.
3. Implementing logic where shop "communicates" with forum and send needed data of what user bought.

- So, let's go with easiest. Open topic(thread) on your forum wherever you desire. In this topic, whenever user buys something, he will post automatically what was it and how much it costs. Depending on if he have enough points or not, you will decide what to do.

Once this is done, let's make complete Store. I will give you complete code I already made.
Go to AP -> Modules -> HTML pages managament and there click on CREATE IN ADVANCED MODE(HTML).
Fill in data like this:

Forum Shop [phpBB3, AwesomeBB] Screen58


Copy/Paste this code inside page body:

Code:
<meta charset="UTF-8" /> <title>Gothic Pub</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f4f4f4;
    }

    #container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background-color: #ffffff;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    }

    ul {
        list-style: none;
        padding: 0;
    }

    li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #cccccc;
        padding: 10px 0;
    }

    img {
        max-width: 100px;
        height: auto;
    }

    .item-details {
        flex: 1;
        margin-left: 20px;
    }
    .buy {
        background-color: rgb(109, 93, 248);
        width: 60px;
        height: 30px;
        font-weight: 700;
        border: none;
        color: white;
        cursor: pointer;
    }

    h1 {
        text-align: center;
    }

    h3 {
        margin: 0;
        font-size: 18px;
    }

    p {
        margin: 5px 0;
        font-size: 14px;
        color: #555;
    }

    .price {
        font-weight: bold;
        color: #e91e63;
    }
</style>
<div id="container">
    <h1>
        Welcome to Gothic Pub Shop
    </h1>

    <ul>
        <li>
            <img alt="Item 1" src="https://i.ibb.co/cYyKX2F/3.png" />
            <div class="item-details">
                <h3>
                    Verified member badge
                </h3>

                <p>
                    Verified member badge will be placed under your avatar permanently.
                </p>

                <p class="price">
                    200 coins
                </p>

                <button onclick="forwardData(this)" id="1" class="buy">
                    Buy
                </button>
            </div>
        </li>

        <li>
            <img alt="Item 2" src="https://i.ibb.co/t3HdvKg/1.png" />
            <div class="item-details">
                <h3>
                    Username change
                </h3>

                <p>
                    Change your username.
                </p>

                <p class="price">
                    100 coins
                </p>

                <button onclick="forwardData(this)" id="2" class="buy">
                    Buy
                </button>
            </div>
        </li>

        <li>
            <img alt="Item 3" src="https://i.ibb.co/WHjDPQ0/1.png" />
            <div class="item-details">
                <h3>
                    Unique rank
                </h3>

                <p>
                    You can choose your own rank name.
                </p>

                <p class="price">
                    150 coins
                </p>

                <button onclick="forwardData(this)" id="3" class="buy">
                    Buy
                </button>
            </div>
        </li>

        <li>
            <img alt="Item 4" src="https://i.ibb.co/tXxkLgp/2.png" />
            <div class="item-details">
                <h3>
                    Premium membership
                </h3>

                <p>
                    Buy premium membership for one month duration. It includes free post packages for your forum, forum banner one month for free, premium rank, hidden section for premium users.
                </p>

                <p class="price">
                    300 coins
                </p>

                <button onclick="forwardData(this)" id="4" class="buy">
                    Buy
                </button>
            </div>
        </li>

        <li>
            <img alt="Item 5" src="https://i.ibb.co/3NHsxtk/b.png" />
            <div class="item-details">
                <h3>
                    Forum banner
                </h3>

                <p>
                    Add your forum banner under our navigation menu for 1 month.
                </p>

                <p class="price">
                    100 coins
                </p>

                <button onclick="forwardData(this)" id="5" class="buy">
                    Buy
                </button>
            </div>
        </li>
    </ul>

    <div align="center">
        <a href="https://gothicpub.forumotion.com/">REDIRECT BACK TO FORUM</a>
    </div>
</div>
<script>
    function forwardData(e) {
        var message = e.id;

        if (message == "1" || message == "4" || message == "5") {
            localStorage.setItem("id", message);
        } else if (message == "2") {
            var username = prompt("Enter new username");
            if (username != "" && username != undefined && username != null) {
                localStorage.setItem("id", message);
                localStorage.setItem("username", username);
            } else {
                return;
            }
        } else if (message == "3") {
            var rank = prompt("Enter unique rank name");
            if (rank != "" && rank != undefined && rank != null) {
                localStorage.setItem("id", message);
                localStorage.setItem("rank", rank);
            } else {
                return;
            }
        }

        // Redirect to the receiver page
        window.location.href = "https://gothicpub.forumotion.com/post?t=173&mode=reply";
    }

    console.log("Copyright: Gothic Pub\nMade by: The Raven\nVersion: 2.0");
</script>

In this code you can change your own images, text, but there are things you must understand. Each button has it's own ID. It is used to represent each item standalone. If you add more buttons, your button ID must increase by 1. How are ID's used in javascript you ask?
We get button id with this line of code:
Code:
var message = e.id;

In script itself we compare the ID and depending on that we either forward only ID of purchased item or some additional data. If we need only ID, we just use this:
Code:
 localStorage.setItem("id", message);
but we we need something more (let's say user want to change his username, we will ask him to enter username and then send it like this:
Code:
else if (message == "2") {
            var username = prompt("Enter new username");
            if (username != "" && username != undefined && username != null) {
                localStorage.setItem("id", message);
                localStorage.setItem("username", username);
            } else {
                return;
            }

In case you are not familiar with what I did, you can always ask me. Moving on. Notce this:
Code:
window.location.href = "https://gothicpub.forumotion.com/post?t=173&mode=reply";

Here I set the location of topic where bought items are. Go to topic you selected for buying items, scroll all the way down and click on reply (not quick reply) and then copy complete URL. You will get something similar to mine with mode=reply etc. Change that to fit your forum address.

Save this.

2. Go to AP -> Modueles -> Javascript codes managament

Create new script and name it whatever you want. Apply in all the pages and paste this:

phpBB3

Code:
$(function() {

    if (location.pathname == '/post' && location.search == '?t=173&mode=reply') {
        // Retrieve the message from local storage
        var id = localStorage.getItem('id');
        var username = localStorage.getItem('username');
        var rank = localStorage.getItem('rank');

        switch (id) {
            case "1":
                $('#text_editor_textarea').val('[b]Purchased:[/b] Verified member badge\n[b]Credit:[/b] 200');
                break;
            case "2":
                $('#text_editor_textarea').val('[b]Purchased:[/b] Username change\n[b]New username:[/b] ' + username + '\n[b]Credit:[/b] 100');
                break;
            case "3":
                $('#text_editor_textarea').val('[b]Purchased:[/b] Unique rank\n[b]Rank name:[/b] ' + rank + '\n[b]Credit:[/b] 150 ');
                break;
            case "4":
                $('#text_editor_textarea').val('[b]Purchased:[/b] Premium membership\n[b]Credit:[/b] 300  ');
                break;
            case "5":
                $('#text_editor_textarea').val('[b]Purchased:[/b] Forum banner\n[b]Credit:[/b] 100 ');
                break;
        }
        localStorage.clear();
        $(".button1").trigger('click');
    }

});

AwesomeBB

Code:
$(function() {

    if (location.pathname == '/post' && location.search == '?t=173&mode=reply') {
        // Retrieve the message from local storage
        var id = localStorage.getItem('id');
        var username = localStorage.getItem('username');
        var rank = localStorage.getItem('rank');

        switch (id) {
            case "1":
                $('#text_editor_textarea').val('[b]Purchased:[/b] Verified member badge\n[b]Credit:[/b] 200');
                break;
            case "2":
                $('#text_editor_textarea').val('[b]Purchased:[/b] Username change\n[b]New username:[/b] ' + username + '\n[b]Credit:[/b] 100');
                break;
            case "3":
                $('#text_editor_textarea').val('[b]Purchased:[/b] Unique rank\n[b]Rank name:[/b] ' + rank + '\n[b]Credit:[/b] 150 ');
                break;
            case "4":
                $('#text_editor_textarea').val('[b]Purchased:[/b] Premium membership\n[b]Credit:[/b] 300  ');
                break;
            case "5":
                $('#text_editor_textarea').val('[b]Purchased:[/b] Forum banner\n[b]Credit:[/b] 100 ');
                break;
        }
        localStorage.clear();
        $(".btn-default").trigger('click');
    }

});

Here, right away in the top pay attention to this:
Code:
location.pathname == '/post' && location.search == '?t=173&mode=reply'

Remember in previous script when we copy complete URL? Well, now for location.search we need what topic number is it, so we need to copy ONLY that part here. In my case it is:
Code:
t=173&mode=reply

Next few lines are variables with values I can take from shop. Not all of them will contain value but we take all of it just in case. Then we check with switch for every ID and depending on what ID it is, we are making text for post instead of the user. In my case, it has to look like this. Prices are added manually (just write numbers you selected in your shop).

In case you don't know how to modify this for yourself, again, ask me.

Same thing can be applied for other versions depending on the ID of textbox (you can just use "textarea") without this id. Also, the button trigger for phpBB3 is .button1 but on other forum versions it works differently. If I have time, will update it.


Last edited by The Raven on September 5th 2023, 10:17 am; edited 3 times in total
avatar
Guest
Guest


Back to top Go down

Forum Shop [phpBB3, AwesomeBB] Empty Re: Forum Shop [phpBB3, AwesomeBB]

Post by YoshiGM August 24th 2023, 5:32 pm

Sounds interesting, but can you provide us a demo to check how it works ?

YoshiGM
YoshiGM
Active Poster

Male Posts : 1502
Reputation : 144
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Forum Shop [phpBB3, AwesomeBB] Empty Re: Forum Shop [phpBB3, AwesomeBB]

Post by Guest August 24th 2023, 5:41 pm

YoshiGM wrote:Sounds interesting, but can you provide us a demo to check how it works ?

Shop: https://gothicpub.forumotion.com/h1-shop
Once you buy a thing, it goes to this thread and automatically post for you: https://gothicpub.forumotion.com/t173-shop-center
avatar
Guest
Guest


Back to top Go down

Forum Shop [phpBB3, AwesomeBB] Empty Re: Forum Shop [phpBB3, AwesomeBB]

Post by Obscure August 25th 2023, 2:36 am

Really nice! Thank you for sharing!
Obscure
Obscure
Forumember

Female Posts : 48
Reputation : 10
Language : English
Location : USA

http://imgtest.forumotion.com/

Back to top Go down

Forum Shop [phpBB3, AwesomeBB] Empty Re: Forum Shop [phpBB3, AwesomeBB]

Post by YoshiGM August 25th 2023, 4:57 pm

The Raven wrote:
YoshiGM wrote:Sounds interesting, but can you provide us a demo to check how it works ?

Shop: https://gothicpub.forumotion.com/h1-shop
Once you buy a thing, it goes to this thread and automatically post for you: https://gothicpub.forumotion.com/t173-shop-center

Ohh, looks very nice!

Thanks for the tutorial Hello
YoshiGM
YoshiGM
Active Poster

Male Posts : 1502
Reputation : 144
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Forum Shop [phpBB3, AwesomeBB] Empty Re: Forum Shop [phpBB3, AwesomeBB]

Post by Guest August 31st 2023, 10:44 am

Script updated in first post so that forum banner item can be purchased.
avatar
Guest
Guest


Back to top Go down

Forum Shop [phpBB3, AwesomeBB] Empty Re: Forum Shop [phpBB3, AwesomeBB]

Post by SarkZKalie September 5th 2023, 4:09 am

Brilliant!

That's exactly what our community should have one Twisted Evil


Forum Shop [phpBB3, AwesomeBB] Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1420
Reputation : 220
Language : English

https://rotavn.forumotion.com/

Back to top Go down

Forum Shop [phpBB3, AwesomeBB] Empty Re: Forum Shop [phpBB3, AwesomeBB]

Post by Guest September 5th 2023, 10:18 am

Tutorial updated for AwesomeBB as well.
avatar
Guest
Guest


Back to top Go down

Forum Shop [phpBB3, AwesomeBB] Empty Re: Forum Shop [phpBB3, AwesomeBB]

Post by Simone Boi March 16th 2024, 5:00 pm

Hi! Thanks for this tutorial, I'm going to use it. However, I'm having trouble getting it to work on mobile devices. The post isn't automatically sent. How can I solve this?
avatar
Simone Boi
Forumember

Posts : 92
Reputation : 2
Language : Italian

https://gamespledge.forumattivo.com/

Back to top Go down

Back to top

- Similar topics

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