We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
  • Pages:
  • 1
  • 2
Simple Semi-Automatic Shop System; ZetaBoards Dynamo Add-on
Topic Started: Aug 29 2014, 09:16 PM (3,643 Views)
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
What it does: Adds a simple shop page where admins can add items and list it at whatever price they want. Users can buy these items and have their money deducted automatically and a notification will be sent to the seller to tell them that their item has been bought. Admins have to add the items, but can add items for members on their behalf.

Preview: Here (you will need an account).

Prerequisites: You must be using ZetaBoards Dynamo for this to work.

How to install: You will set this up on a separate web page. To do this, go to: Admin CP >> Board Customization >> Website Maker >> Create new Webpage. You can choose whatever you want for the page id and title. For the content add the following:

Code:
 
<div id="simple_shop" class="dynamo_loader" />


Code: This is the main code. Add this to: Admin CP >> Themes >> Board Template >> Below the Board
Code:
 
<script type="text/javascript">
//<![CDATA[
if($("#simple_shop").size()) {
$("body").on("dynamo_loaded", function() {

// Simple semi-automatic shop by Viral of http://viralsmods.com
// You must be using ZetaBoards Dynamo for this to work http://dynamo.viralsmods.com

var options = {
preview_image : {
_default : "defaultpreviewimagelink.png", // image to show when none is given (leave blank for N/A)
width : '50px',
height : '50px'
},
message : "I have purchased an item from your shop (item ID: %ITEMID%)." // %ITEMID% gets replaced with the item's id
};

var items = [];

items[items.length] = {
id : "item-id",
seller : [user_id, "username"],
preview_image : "imagelink.png",
name : "Item name",
desc : "Item description",
price : 200
};

/* END OF EDITS */

if("currency" in dynamo.server.modules) {

var symbol = dynamo.server.modules.currency.settings.symbol;

window.buyItem = function(itemID, userID, price) {
var formatted_price = dynamo.toolbox.format_number(price);
var confirmation = confirm("Are you sure you want to purchase this item for " + symbol + formatted_price + "?");
if(confirmation) {
dynamo.module.load("currency", function() {
dynamo.tip.prompt.ini({
m : "currency",
p1 : "donate",
c : "finish",
zbids : [userID],
info : {
user : userID,
message : options.message.replace(/%ITEMID%/gi, itemID),
amount : price
}
});
});
}
};

var rows = [{
cells : [
{
content : 'Preview',
type : 'th',
style : {
width : options.preview_image.width
}
},
{
content : 'Seller',
type : 'th'
},
{
content : 'Name',
type : 'th'
},
{
content : 'Description',
type : 'th'
},
{
content : 'Price',
type : 'th'
},
{
content : 'Buy Item',
type : 'th'
}
]
}], i, item, preview;

for(i in items) {
item = items[i];
formatted_price = dynamo.toolbox.format_number(item.price);
preview = item.preview_image.length ? item.preview_image : options.preview_image._default;
preview = preview.length
? '<img src="' + preview + '" alt="' + item.name + '" width="' + options.preview_image.width + '" height="' + options.preview_image.height + '" />'
: 'N/A';
rows[rows.length] = {
cells : [
{
content : preview,
style : {
align : 'center'
}
},
{content : '<a href="' + main_url + 'profile/' + item.seller[0] + '">' + item.seller[1] + '</a>'},
{content : item.name},
{content : item.desc},
{content : symbol + formatted_price},
{content : '<a href="javascript:buyItem(\'' + item.id + '\', ' + item.seller[0] + ', ' + item.price + ');">Buy</a>'}
]
};
}

dynamo.table.create("#main .site_wrapper", {
colspan : 6,
rows : rows
});

} else {
$("#main .site_wrapper").html('The shop cannot be loaded as the currency system has not been installed.');
}

});
}
//]]>
</script>


Instructions: Note that this code will not work until you add your own items. To do this, find the block which looks like:

Code:
 
items[items.length] = {
id : "item-id",
seller : [user_id, "username"],
preview_image : "imagelink.png",
name : "Item name",
desc : "Item description",
price : 200
};


This block will add one item to your webpage. As it is at the moment, it will not work. You need to edit it to suit your needs!

1) Change `"item-id"` (2nd line) to whatever you think signifies this item. It must be meaningful as this is how the seller can tell what item his/her buyer has purchased. Keep the speech marks.
2) Change `user_id` (3rd line) to the ID of the seller. You can find their ID by going to their profile page and copying the numbers at the end of the URL. A link to my profile is: http://if.invisionfree.com/profile/230248/ - my ID is 230248. No speech marks this time, but make sure the comma stays there!
3) Change `"username"` (3rd line)to the username of the seller. Keep the speech marks.
4) Change `"imagelink.png"` (4th line) to a link to a preview image of the item. If one does not exist, leave it blank (`""`). Keep the speech marks!
5) Change `"Item name"` (5th line) to the item's name. Keep the speech marks.
6) Change `"Item description"` (6th line) to a description of the item. Keep the speech marks.
7) Change `200` (7th line) to the price of the item. No speech marks, and no comma at the end!

So how do I add more items?

Simple! Copy and paste the block above so you have two of them! For example, I could have two items by using the following code:

Spoiler: click to toggle


Any other settings I can change?

At the top of the code, you will see the following block:

Code:
 
var options = {
preview_image : {
_default : "defaultpreviewimagelink.png", // image to show when none is given (leave blank for N/A)
width : '50px',
height : '50px'
},
message : "I have purchased an item from your shop (item ID: %ITEMID%)." // %ITEMID% gets replaced with the item's id
};


This are a few options that can be edited to suit your needs.

1) Change `"defaultpreviewimagelink.png"` (3rd line) to the default preview image if you do not specify one in the item. You can leave this blank (`""`) if you want. Again, keep the speech marks!
2) The width and height can be changed respectively (these are the dimensions of the preview image).
3) To change the message sent to the seller, change `"I have purchased an item from your shop (item ID: %ITEMID%)."`. You can use the dynamic text `%ITEMID%` which will automatically change to the item's ID which is being purchased.

Notes: This system uses Dynamo's donation system in the background. For this reason, you must have the currency system installed (which should be obvious if you're building a shop :P). Also note that all limitations on donations are also set for buying items because of this. For example, if a group has been set to not be allowed to donate, then that means that they cannot buy items in the shop either.




If you have any questions, please ask - but do try adding this yourself first!
Edited by Viral, Aug 30 2014, 12:08 AM.
Offline Profile Quote Post Goto Top
 
Replies:
enias
Member
[ *  * ]
what if the shop doent load, I did all as it is described, put an item for sale.. jus keep like loading
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
enias
Oct 11 2014, 04:42 PM
what if the shop doent load, I did all as it is described, put an item for sale.. jus keep like loading
Hi enias,

I'm a member of the Dynamo Support team, I think I may be able to help you. Is the problem reoccurring or happening all the time (not working at all). I don't think it may be due to the code but I'd like to check. Could you go to http://support.viralsmods.com/index/ and submit a topic into support where staff can help you have the problem sorted? If it's happening all the time then it could be either the code or Dynamo having problems with your board but it's reoccurring (like happening once in a while) then I think it may be Dynamo. Either way, I'd like to investigate this further :)

Thanks.
Offline Profile Quote Post Goto Top
 
Tyler Dream
Member Avatar
Member
[ *  *  *  * ]
What if there's only a limited amount of items? Is there a way to add an "Amount Left" field?
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
I just did this for someone else, actually. See the code below and update accordingly. Note that the quantity does not update itself automatically, you'd have to do that manually when someone purchases an item.

Code:
 
<script type="text/javascript">
//<![CDATA[
if ($("#simple_shop").size()) {
$("body").on("dynamo_loaded", function() {

// Simple semi-automatic shop by Viral of http://viralsmods.com
// You must be using ZetaBoards Dynamo for this to work http://dynamo.viralsmods.com

var options = {
preview_image: {
_default: "defaultpreviewimagelink.png", // image to show when none is given (leave blank for N/A)
width: '50px',
height: '50px'
},
message: "I have purchased an item from your shop (item ID: %ITEMID%)." // %ITEMID% gets replaced with the item's id
};

var items = [];

items[items.length] = {
id: "test1",
seller: [userid, "username"],
preview_image: "img.png",
name: "item name",
desc: "some description",
quantity: 4,
price: 500
};

/* END OF EDITS */

if ("currency" in dynamo.server.modules) {

var symbol = dynamo.server.modules.currency.settings.symbol;

window.buyItem = function(itemID, userID, price) {
var formatted_price = dynamo.toolbox.format_number(price);
var confirmation = confirm("Are you sure you want to purchase this item for " + symbol + formatted_price + "?");
if (confirmation) {
dynamo.module.load("currency", function() {
dynamo.tip.prompt.ini({
m: "currency",
p1: "donate",
c: "finish",
zbids: [userID],
info: {
user: userID,
message: options.message.replace(/%ITEMID%/gi, itemID),
amount: price
}
});
});
}
};

var rows = [{
cells: [{
content: 'Preview',
type: 'th',
style: {
width: options.preview_image.width
}
}, {
content: 'Seller',
type: 'th'
}, {
content: 'Name',
type: 'th'
}, {
content: 'Description',
type: 'th'
}, {
content: 'Quantity',
type: 'th'
}, {
content: 'Price',
type: 'th'
}, {
content: 'Buy Item',
type: 'th'
}]
}],
i, item, preview;

for (i in items) {
item = items[i];
formatted_price = dynamo.toolbox.format_number(item.price);
preview = item.preview_image.length ? item.preview_image : options.preview_image._default;
preview = preview.length ? '<img src="' + preview + '" alt="' + item.name + '" width="' + options.preview_image.width + '" height="' + options.preview_image.height + '" />' : 'N/A';
rows[rows.length] = {
cells: [{
content: preview,
style: {
align: 'center'
}
}, {
content: '<a href="' + main_url + 'profile/' + item.seller[0] + '">' + item.seller[1] + '</a>'
}, {
content: item.name
}, {
content: item.desc
}, {
content: item.quantity
}, {
content: symbol + formatted_price
}, {
content: '<a href="javascript:buyItem(\'' + item.id + '\', ' + item.seller[0] + ', ' + item.price + ');">Buy</a>'
}]
};
}

dynamo.table.create("#main .site_wrapper", {
colspan: 6,
rows: rows
});

} else {
$("#main .site_wrapper").html('The shop cannot be loaded as the currency system has not been installed.');
}

});
}
//]]>
</script>
Edited by Viral, Nov 11 2014, 03:25 PM.
Offline Profile Quote Post Goto Top
 
beastboybrown
Member Avatar
Member
[ *  * ]
I've tried and tried to get the shop to work and it just keeps loading..... Can I get some help?
http://w11.zetaboards.com/DBZ_RPG/pages/shop/
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
You have errors cropping up, post your code and someone should be able to point it out :)
Offline Profile Quote Post Goto Top
 
Zaqre
Member
[ * ]
Could there be a better way to add an item? Like a Gui pop up like the dynamo currency settings? Where you can have the option to upload the image, set the price, how many to sell, etc. and hit submit or create item and it creates the item with out having to manually edit the code?
Offline Profile Quote Post Goto Top
 
Viral
Member Avatar
Viral
[ *  *  *  *  *  * ]
This is just a simple code without access to a database so short answer is 'no'. However, if I ever get around to working on a full shop system for Dynamo, the answer will be 'yes'.
Offline Profile Quote Post Goto Top
 
Magnesic
Member Avatar
Member
[ * ]
Hi Viral.

We've (Me and BeastBoyBrown, who commented above) been having some problems with Dynamo. For atleast 2 months, we've been unsuccessful in implementing it onto our board. After resetting it and doing the process over, we have had no luck.

I did snag the code that had given me.

Code
Offline Profile Quote Post Goto Top
 
Western Prince
Member
[ * ]
Out of curiosity is there a way to break this down into categories.

IE: Forum Services (for avatars, name changes, etc) then RP Items (For all the RP aspect shop items)
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply
  • Pages:
  • 1
  • 2