![Forum Shop [phpBB3, AwesomeBB] Hitskin_logo](https://2img.net/i/fa/hitskin/hitskin_logo.png){kind=logo}
Hitskin.com
![Forum Shop [phpBB3, AwesomeBB] Empty](https://2img.net/i/empty.gif)
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](https://i.servimg.com/u/f67/20/51/33/11/screen58.jpg)
Copy/Paste this code inside page body:
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:
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:
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:
In case you are not familiar with what I did, you can always ask me. Moving on. Notce this:
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
AwesomeBB
Here, right away in the top pay attention to this:
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:
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.
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:
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:
|
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:
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:
|
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:
|
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, 9:17 am; edited 3 times in total
![Forum Shop [phpBB3, AwesomeBB] Sarkzk10](https://i.servimg.com/u/f28/11/40/02/06/sarkzk10.png)
![Forum Shop [phpBB3, AwesomeBB] Fb11](https://i.servimg.com/u/f21/18/21/41/30/fb11.png)
Facebook![Forum Shop [phpBB3, AwesomeBB] Tw10](https://i.servimg.com/u/f21/18/21/41/30/tw10.png)
Twitter![Forum Shop [phpBB3, AwesomeBB] Pi10](https://i.servimg.com/u/f21/18/21/41/30/pi10.png)
Pinterest![Forum Shop [phpBB3, AwesomeBB] Yt10](https://i.servimg.com/u/f21/18/21/41/30/yt10.png)
Youtube
