How to write a proper shop page?
 

Can someone please help me write a proper shop page? I want to create a custom page that I make myself as that is the only way to get the placement I want for the shopkeepers (I don't know how to do it in the default shop files). So I guess I would like to ask if someone can help me write 'get' and 'getview' pages for items.. and where it deducts the price of the item from their inventory and they can also choose the quantity at some point.

The reason I want this is so that I can have a shopkeeper and then images of items underneath, and when they click the image it takes them to another page where they can maybe select the quantity? They then click buy and it deducts the money set by me in the adminCP and adds it to their inventory..

Kyttias was kind enough to help me with doing this for adoptables so I have included them in spoilers in case anyone wants help with the structure.. sorry for asking but I have already tried what I can think of and it hasn't worked >.< Thank you... I really want to get my shops up and running for my beta testers XD





They are both seperate files so I guess items would need to be called getitem and getitemview? Or something like that XD Thanks if someone helps me... this has stumped me for days >.<

(It would also be nice if someone could help me with the 'adopt' shops. Or would it still be the same file? And you just put in their adoptable id? It's just I may not want all of my pets up for free, like they are from the adoptable page at the moment)

Hmm... Well... I modified my default shop pages. Specifically, classes/class_itemshop.php. Outside of that, I really can't help. Shops are tied to three or four other files and having to clone all of them would just be tedious. Save backups of the original classes/class_itemshop.php, and bear with me. (And I assume the class for adoptshop would be similar, but I actually haven't modified mine yet.) Because you add items to shops through the AdminCP, these additional files I'm talking about all work together to display the items that belong in a particular shop, pull up item information, and construct the functionality needed for the buttons. To recreate it all, you'd need exactly the same files already in place -- so you really have no choice but to work with them, else work entirely from scratch with little help from the community.

Inside public function display is where all the important magic is happening for this. So examine everything going on in this function in its default state and try to wrap your head around it.

If you could draw or create a visual mockup/representation of what you want the finished product to look like, I can try to help from there? I will also need to know the name of at least two item shops to start my example, but the more the merrier. I designed my shops to use tooltips, but any arrangement of information is possible.

You want two things - to render an NPC image based on the shop, and, I assume to change the entire way items are listed.

As a start, in public function display:
I have two shops, Crossed Roads and Spectrum. If I make a shop and forget to list it here, it will use the default.

The switch statement I've constructed above is using $this->shopname. The word "this" means, literally, defined inside this class. This page. Up at the top you'll find public $shopname;. If you were some other page, you'd need to pull up that information with a function yourself. Why create a page for each shop if each shop is going to need to pull all the same data from the database to construct itself? This is the entire basis of object oriented PHP - to avoid repeating yourself.

So this is why I encourage you to modify the default shop rendering.

If you'll show me how you want items to display, if you don't want the default table that is, I can get to the next step. ^^

-

But, then again, upon reading closer, I think you may also be wanting an entirely new kind of shop? One that uses items, rather than currency? (Possibly multiple items? And currency in addition? How complex.)

If you like the default shops as they are, you can ignore everything I've said. But an entirely new kind of shop that uses items as a currency would need work beyond what I can do in a single night.

I mean, I like the concept, so I can try to tinker over winter break. How many shops of this kind were you wanting? Just one, or many?

Well, no I kind of wanted a normal shop (money as the currency). Items as a currency would be weird to me XD But that's kind of what I wanted (what you have put) where it displays NPC's above the items (so like yours but below them instead of next to them). I can quickly get a draft of what I would kind of like...

EDIT:

And the names are not yet fully thought of XD But I take it you can literally just change them to whatever? If so, I guess it wouldn't matter what the example names are ^_^

Thank you for helping me! You've helped a lot! ^_^
~Parayna

Great! This shouldn't be so hard, then. (Though now I do kind of want an item exchange system, but I think I can just squint over the alchemy mod for hints on that.)

My only foreseeable issue with your design above is in the displaying of items, for the user's sake - how will they know what the item does before they buy it? If you can, get me some more detail on what you want there. (Though if each shop has a specific type of item, there is much less confusion overall and descriptions may be irrelevant.)

Let's get done building how we want to display the page in plain HTML first, then I can work on converting it. ^^ As a start, this covers what you have in mind so far, -ish? http://jsbin.com/jabufegula/1/edit?html,css,output (You can turn off tabs for the html/css/output displays at the top, as well as drag the widths of each of these windows. By default, the output window may be narrow, so drag it wider to get the full feel of it.)

Yeah. That is actually exactly what I had in mind XD For what the items do, I was either thinking of it either telling you before you buy (maybe leading to a seperate page) or having a hover over box thing (forgot the name :P) The only problem though there would be the mobile users thing.. not sure if it would work for them :/ But I dunno... XD I need some sort of description showing as even though the items will be in certain shops, they may increase the click value by different amounts (for example)

Thank you ^_^,

~Parayna

I could probably get these tooltips to work? They're mobile-friendly, anyway. If you want tooltips in other areas of your site, then I can direct you where to save the files. ^^ Or if not, I can include them all in this one page.

I couldn't seem to find a pure-Javascript version (I didn't have much time to scour the net for a mobile-friendly pure-Javascript version). The jQuery version works just fine, you'll just also need the jQuery library. My Bootstrap theme comes with it, but I don't know that any of the default themes do, or if you included it while building your own. Let me know if you don't have it and I can either help you put it in or find an alternative. (There's a discussion to be had on whether the jQuery library is too big for mobile browsing, my general conclusion is no, it's not too big. And it'll only have a delay in loading the first time, not every consecutive time. And linking the same copy from the same content delivery network, CDN, that Google/YouTube/other major sites use means there's a chance the users will already have the jQuery library already cached, so there won't be delay at all.)

Do you have any requirements for things you want the NPCs to say? The same thing every time? Or a random thing from a list of several possible things (it can be random for each individual store, that's how I'm doing it)?

If you could get the tooltips to work that would be amazing! Probably, if they go well, I would like to use them in other places as well (probably the inventory and the world feature when that gets implemented later in the open beta stage of the site) ^_^

I don't think I have the jQuery library.. but I am not totally sure. All of the themes I am using are based on the 'default' default mysidia theme and then I just changed aspects to fit what I wanted (images, colours, and sizes wise). Most of my betas have agreed to test out features cross platform so I would soon be able to figure out if there were any problems to be had on the mobile devices.

And I was kind of thinking of having them say different things, usually based around the same sort of idea as their other sayings (and yeah, for each different shop, as a way of being more varied and easier for people to digest). So probably using an array (which thankfully I sort of know how to do as I learnt how to make a gumball machine using arrays for a school project and that I may implement into my site as a mini game that gives out prizes, when I decide to sort games out of course.. XD)

But yeah. ^_^

^^ I'm almost done but I need to eat dinner first. I'll be back in two hours or so with everything ready to go.

Thank you! It's actually past midnight here so I will be going to bed now XD But in the morning I can come back online ^_^

Thanks~

Alright! Over in classes/class_itemshop.php, replace public function display with this one:
This is my first draft, but does not have tooltips for a description in place functioning yet. But it's definitely 99% done now. Do feel free to move the stylesheet out and join it with your existing template one. I needed it here for testing. ^^;

The usage descriptions have less to do with your item description and everything to do with what item function they have. It detects what category of function the item is stored as in the database and then will display appropriate text based on that. It's basically something I've done in addition to the existing description, but is entirely optional. (And it's not yet apparent, as the tooltips are not implemented yet). It's just something I created for my own site so I wouldn't have to repeat myself in the description of an item, leaving the functionality in a separate variable than the flavor text. ^^

Thank you! But for some reason it just comes up with a blank page whenever I add it to the place you said. No idea why that could be XD

Really? =/ You sure you copy-pasted the entire thing and replaced the entire display function? It works fine on my end...

Try sending me your entire class/classes_itemshop.php, please?

(In addition, do any of your item names, descriptions, or shop names contain apostrophes or quotes? These could cause potential issues. Nothing that's not fixable, of course.)

Yay! I got it working! No idea why it didn't work the fast time although it was probably because I forgot to copy and past ONE character that ended up breaking the whole thing, knowing me XD Thanks!

Yay! *high fives*

Sorry I couldn't get the tooltips working yet, I'll try to find time later today.

That's fine ^_^ I'm just glad I have it working now XD It means I can get more functionality on the site and can get more things added :P Thank you for helping me ^_^

I have a tiny problem, although it isn't major XD The first item on the list seems to be bigger than the others (height wise). Any idea why that might be? It just doesn't look right. XD I have screenshot it to show you.. (and also, how do you allow apostrophes? >.< I decided that I do need them and after attempting to do it myself I have had to give up for fear of breaking the script XD) And one more thing.. how do I position the text box so it is a bit further down the page? If I can't do that then I will just have to make sure I write loads so that it looks neater >.< Sorry if I am bothering you XD



Thank you ^_^''

I'm actually a little confused about the height of the first one, too. Can you inspect the html of the loaded page (right click, inspect element) and get me the entire contents of the html we made here? Both s_containers, please?

You mean these?:



Just tell me if you need anything else. Thanks~

EDIT:

It seems to be for the entire first column :/

http://fc05.deviantart.net/fs70/f/20...mc-d8c8nyk.png

That's extremely odd. I literally copy pasted what you gave me to make my next example linked below, and it's not happening for me there. :displeased:

I made some changes to the css here, for the text box, not sure if it's good enough, so I encourage you to play with it yourself - http://jsbin.com/qolixiyopo/1/edit?css,output

What browser are you using? Chrome, Firefox, IE?

EDIT: Actually, WOW, just tested it on my gf's computer, it IS a problem in Firefox, but not in Chrome. Weird. I hate it when that happens. I don't actually have Firefox to be able to test fixes for it, but the problem is entirely with the css/html rendering.

I am using Firefox. Chrome is too slow for me and IE is rubbish XD And on the example there it still happens for me. So it might be something to do with my browser or something...

EDIT: I downloaded Chrome and it appears to work better... so it's only Firefox? :/

Exactly. You'll need to find a solution that works in all browsers. Try making a css/html design of what you want yourself. The one I made worked in my browser, but I wasn't able to test it. If you need help transferring over your changes to the file we're editing (if you totally redo the divs and such) I'll be more than happy to help get the final file organized.

In the last jsbin I linked, I included your entire theme. If you remove your stylesheet (this one in particular - templates/blueqilin/media/style-blue.css ) the problem is fixed. Obviously you can't just remove your entire stylesheet, but for some reason, the problem is definitely in there. At least, that was what my gf was able to figure out so far on her computer. ><; So now it comes down to be a problem only in Firefox, specifically only with this theme.

In the meanwhile, I'll try to make sure item descriptions that contain apostrophes won't bug anything out. ^^;

I did it! I changed the 'display: inline-block;' to 'display: inline-table;' And I put it in my CSS file so I can later change the colours for my themes :P Thanks for the offer to help, but I decided I needed to try and do something for myself so I googled different CSS display commands and found one that worked :P

Now to check if it works in Chrome (works in Firefox at the moment)

EDIT: Yup! Works! ^_^ Happy now XD I can finally go to bed >.<

Thanks!

And OK, thank you ^_^

Mm, that definitely works because your theme uses a table. If you ever switch to one that does not, things may break again, but I dunno. In your css (the one I mentioned) very early on there's an area where it defines br? Everything would also be fixed if you removed display: block; from that. At least, that's what my gf found, ahaha. ^^;

Oh, alright! That might be a tiny bit easier actually... as then it would hopefully not break if I ever get brave and try and create a theme completely from scratch :P Thank them for me ^_^ And also thank you :P

I have another question >.< Sorry, I am curious D: Would it be possible to make the inventory look like the shop? So it would not have the NPC or text just the item boxes and the item names and how much quantity you have at the moment? (With the tooltips eventually) And with a button to use the item? (And maybe the button leads to the page where you select the pet you wish to use it on)

It's entirely possible! *chuckle* Look, if you can create a fake screenshot of what you want, and even better, make it with html/css in a jsbin and link it to me, then I can try to make it for you.

Keep in mind that not all items are useable, or at least not useable on pets. You may not have plans for any items like this right now, but you may in the future. (Say you need to own 'Shiny Key' to access to a certain page. It has no use, you just have to own it, so there would be no need for there to be a use button. You'll need to show me how you want items that don't need a use button to look, too.) For items with a use button, it does indeed already take users to another page to select a pet.

Items can also be sold. You also get to choose a quantity to sell. (I personally recommend getting rid of the 'toss' button, at that point, if that's alright? Less clutter for something you can essentially already do by selling the item.)

Tooltip time!

In your directory where Mysidia is installed there is a css folder (not talking about anything theme-related in the template folder, this css folder is the one at the root). We're going to add this as tooltip.css -



A nearby folder, also in the heart of things, is called js. Open up this folder and add this as tooltip.js:


Now, in your theme's header.tpl, add in these lines (before the end of the </head>, of course):


You now have all the necessary components for tooltips.

To make tooltips elsewhere on your site, from now on, all you need to do is add title="Contents of the tooltip here!" rel="tooltip" to any element you want to have a tooltip. Could be links, divs, spans, images, etc. You can also use some basic html inside them, such as italicies, bold, and linebreaks.

For more reference on the tooltip system I just had you install, visit this link.

-

Moving along, here is the final version of classes/class_itemshop.php:



Finally, I'm happy to inform you that is absolutely safe to use apostrophes inside of item names, item descriptions, shop names, and the NPC text. However, please refrain from using quotation marks in any of these areas.

So, to clarify, DO NOT:
"Sour" Candy
This is an "official" fanclub hair pin.
The "Best" Shop
"Welcome", says the shopkeeper.

It would, however, okay, to use single quotes instead, as these are just apostrophes and apostrophes are okay!

I have no time to make a screenshot now, school beckons, but I can when I come home. Thanks for the tooltips! They have slashes in though.. where there are apostrophes. Do we need to add in (stripslashes) codes? It also still happens in the Store name unless that is to do with the admin CP not liking shops with slashes in the name to be created.. (or apostrophes as it automatically adds them in). Do you know where I would put the stripslashes in? I have managed it with many things in the script before, just I can't find where to put it this time XD

That's really odd. I tested with my items, and one of them has an apostrophe in it's description and showed no slash. =| Usually you have to manually put in slashes, not manually remove them. So maybe they were put in when the item was created. Check in the database table for me? I may have found a slash in mine and removed it directly in the database itself, I cant remember.

OK, I'll check. I remember I had this problem with something else and I fixed it by putting stripslashes in the code.. but I'll look a moment.

OK, these are the screenshots (see if you can make any more sense of them XD)



No idea of the problem :/

NPC text - Should be fine.
Item descriptions - Should be fine.
Item names - Where you want an apostrophe to appear, use ' instead:

Creator's Bracelet = Creator's Bracelet

Shop names - I thought of a fix! Where you want an apostrophe to appear, use *** instead. In view/shopview.php, change public function browse to:

Mai***s Shop = Mai's Shop

OK.. before I do that, I have another problem. No idea why but I have only just noticed it. Took me about 1 hour and 30 minutes to finally figure out the pattern and what is wrong >.< But everytime I put this in the header:

It seems to break the user profile! Even though it shouldn't have anything to do with it. And I know that that it the cause as when I remove it it works perfectly normal and then when I put it back in it breaks again...

This is what happens:

http://fc01.deviantart.net/fs70/f/20...mc-d8c8pdg.png

Basically the URL shows the supposed to be invisible #visitormessage or #whatever. >.< And then when I remove it, it is fine! D:

I kinda want to move onto the inventory but I can't until I get all the little things sorted XD And I fixed the inventory names etc so thanks for that XD

Open up inc/tabs.php and delete the contents (but not the file). Open up your header.tpl and right after the link to tooltip.css, add in:

I'm not entirely sure what the issue was, but this fixed it. This was one of the only (if not the only) pages that used jQuery of the original site, and I think there was some issue with what order things were loading in.

Thank you ^_^ It worked! Phew... finally caught up! XD Now I just need to do the inventory and the items aspect (most of it) will be finished finally! (And I saw on another post you say you might put the NPC thing as a mod, and I think you should XD Many people would find it good, I think ^_^)

Could you help me with the inventory in this way, please?



^_^

Perhaps, but it'll take a little bit longer than the shop page did.

On a side note, I'm having a little trouble with an item I created that had an apostrophe, so, something tells me it's not safe to use them either. There should be a work around similar to how we figured out the shop names, though...

So please don't create any item names with apostrophes until I get back to you on this.

Another random fact about Mysidia in general (to be warned about)- If you try to rename an item but someone already owns one, it will also screw up their inventory - you have to rename the item not only in the items table, but also the inventory table for all users who may have it (the Search button at the top of the page will help with this, at least).

Oh, OK. Thanks for telling me XD I'll be sure to try and avoid it. For now, I am safe. But for future reference thanks :P

Re:
 

Hey, sorry this isn't to do with helping out...

But I was wondering if either of you would be opposed to releasing the format for the shop page as a mod, or to me using the codes provided here with my own site?

Wanted to ask permission first, hehe. But this is pretty much exactly how I'd like to set up my shop pages (aside from the NPC being centered).

Let me know!

You're definitely welcome to use it. I'll try to tidy up all the information here into a mod so people have less to read through. It's hard to make a code for everyone, so I'll have to try my best to explain what's going on so they know how to implement their own layout plans. I commented my code and all, but I'm really not sure how straightforward it is currently. ^^;

edit: Official mod thread created!