Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Need help! (I know specific right)
New Posts  All Forums:Forum Nav:

Need help! (I know specific right)

post #1 of 21
Thread Starter 
Ok so I am making this website for my business for people to buy custom computers. Only problem is I don't know how to make it so they can actually customize it in the web browser. Kind of like with ibuypower and cyberpowerpc. I want people to be able to pick what goes in the computer. Can someone help me do this. I'm in waaay over my head on this one.
Thanks in advance, I know you guys are great helpers! thumb.gif


*EDIT* Even if you just give me a place to start, I can expand it, I'm just not proficient in CSS or Java... or HTML really.
Edited by ADHDadditiv - 5/14/13 at 10:09pm
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
post #2 of 21
Are you saying that you want to see an updated picture to the side based on what they've picked? Or are you saying that you simply don't understand how to set up the actual form which will allow for the selection of custom components and adjust the price of the system in the cart based on what they selected?

If it's the former - that can get fairly complicated... depending on how far into it you wanted to go and how many different basic systems you planned on offering. If it's the latter... then that's incredibly easy and no problem whatsoever. I can help you with that.

Are you going to host yourself or are you going to use an ecommerce host? I ask because many hosts will already have a template/API/framework that you can use to get up to speed pretty quickly. Usually without knowing anything at all about Javascript or even web design in general for that matter. Most are free and included with all hosting packages - which I would definitely recommend over hosting yourself. Even if all your business is local... if you're going to be a one-man-show for the most part... it's definitely worth the $20-50/mo. to have someone else dealing with server backups, security, connections, etc. I don't have that luxury so I'm stuck with both development and IT management myself... and there are some long and nerve-wracking days doing it that way.

Essentially for the form you'd simply want to set it up in sections and either use radio buttons per component or use a dropdown (SELECT) with options for each thing. Then you can just have a java function that is called via the onClick (Radio) or onChange (Select) property which adds or subtracts the amount for that change. For example if the default CPU is a 3570K and they select a 3770K, the onChange call would cause a recalc which would add $120 to the grand total. (On most of these where you see "[Add $120.75]" after the description in a dropdown... that's what's being used by the javascript function to determine what calculation to use and how much... so products can be adjusted quickly). If you store the price differences in the database and dynamically populate the selects from the inventory levels you can even handle inventory controls as part of the cart (i.e. if you're out of stock on something it isn't available as an option to someone). Naturally, if you're loading from a db then you're going to need php, asp, coldfusion (what I develop in mostly), or at least some perl scripts to run on the server side to fetch and present that data.

I'll wait for more specifics of what your project is likely to entail, but for your first foray into ecommerce... you might want to consider one of the template driven, or preconfigured solutions from several hosts. Some of the easiest and best looking (IMO) are:

3D Cart, 1ShoppingCart, Volusion, etc... of course, many small companies that need something more custom but still not full in-house and have decent traffic just go the Yahoo SMB route... it's pretty painless to start and scales very nicely if you start turning into the next iBuyPower or close. A local company here (OutletPC.com) uses yahoo and has some pretty decent volume... not sure exactly but I know they're doing close to $500K/mo. or so.

Anyway, some food for thought, and I'll be happy to help in any way I can... working on a big project myself at the moment - so it might take me a day or so between responses... but I'll keep checking back to see if you need anything. biggrin.gif
Edited by DiGiCiDAL - 5/15/13 at 4:37am
post #3 of 21
Thread Starter 
Quote:
Originally Posted by DiGiCiDAL View Post

Are you saying that you want to see an updated picture to the side based on what they've picked? Or are you saying that you simply don't understand how to set up the actual form which will allow for the selection of custom components and adjust the price of the system in the cart based on what they selected?
Well both but mainly the second part. I don't even know where to start with the actual form.
Quote:
Originally Posted by DiGiCiDAL View Post

Are you going to host yourself or are you going to use an ecommerce host? I ask because many hosts will already have a template/API/framework that you can use to get up to speed pretty quickly. Usually without knowing anything at all about Javascript or even web design in general for that matter. Most are free and included with all hosting packages - which I would definitely recommend over hosting yourself. Even if all your business is local... if you're going to be a one-man-show for the most part... it's definitely worth the $20-50/mo. to have someone else dealing with server backups, security, connections, etc. I don't have that luxury so I'm stuck with both development and IT management myself... and there are some long and nerve-wracking days doing it that way.
Yes, I have whatever comes with GoDaddy hosting, (fairly sure its ecommerce).
Quote:
Originally Posted by DiGiCiDAL View Post

Essentially for the form you'd simply want to set it up in sections and either use radio buttons per component or use a dropdown (SELECT) with options for each thing. Then you can just have a java function that is called via the onClick (Radio) or onChange (Select) property which adds or subtracts the amount for that change. For example if the default CPU is a 3570K and they select a 3770K, the onChange call would cause a recalc which would add $120 to the grand total. (On most of these where you see "[Add $120.75]" after the description in a dropdown... that's what's being used by the javascript function to determine what calculation to use and how much... so products can be adjusted quickly). If you store the price differences in the database and dynamically populate the selects from the inventory levels you can even handle inventory controls as part of the cart (i.e. if you're out of stock on something it isn't available as an option to someone). Naturally, if you're loading from a db then you're going to need php, asp, coldfusion (what I develop in mostly), or at least some perl scripts to run on the server side to fetch and present that data.
The problem is I am not proficient in javascript at all (I actually suck a little at it). I need help writing basically the entire code. If you could, would you mind writing a small example snippit so I can learn alot quicker then attempting and failing alot on my own.
Quote:
Originally Posted by DiGiCiDAL View Post

I'll wait for more specifics of what your project is likely to entail, but for your first foray into ecommerce... you might want to consider one of the template driven, or preconfigured solutions from several hosts. Some of the easiest and best looking (IMO) are:

3D Cart, 1ShoppingCart, Volusion, etc... of course, many small companies that need something more custom but still not full in-house and have decent traffic just go the Yahoo SMB route... it's pretty painless to start and scales very nicely if you start turning into the next iBuyPower or close. A local company here (OutletPC.com) uses yahoo and has some pretty decent volume... not sure exactly but I know they're doing close to $500K/mo. or so.
I will look into these!
Quote:
Originally Posted by DiGiCiDAL View Post

Anyway, some food for thought, and I'll be happy to help in any way I can... working on a big project myself at the moment - so it might take me a day or so between responses... but I'll keep checking back to see if you need anything. biggrin.gif

Its no problem, to be honest, I didn't expect a response in the first place. I thank you for the help. Would it matter which "shopping cart" system I use? I mean would it chance the outcome?
I understand the basics, which is someone selects an option, it updates a variable in the javascript and it takes down somewhere the options they picked for the build. Then the shopping cart system takes the variable as the price, and the stored part list appears somewhere for me (probably my email inbox or something). If you could help me with a snippit that would be fantastic (its godaddy so they use e-commerce).

*EDIT*

I'm a C++ Programmer, not a Java programmer frown.gif I don't know how to make anything in Java yet.
Edited by ADHDadditiv - 5/15/13 at 9:51am
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
post #4 of 21
Well, there are far, far more similarities between C++ and Java than there are differences. Syntax is nearly identical, operators, etc. are very similar. Consider:

Comparison of Java and C++

Essentially Java is very similar but designed to A) be simple enough to compile at runtime B) portable enough to run virtually anywhere with limited resources C) higher level - no hardware, memory direct calls. JavaScript is even easier... as it's designed to require no compilation at all, and parsed by any browser in an extremely limited footprint (can't remember how much but somewhere along the lines of 1Mb).

However, for what you are essentially looking for you can have it be even simpler (at least until you are making enough money to have a good site built for you - or have a few months to spend developing one). Set up your form to include selects that look like the following:
Code:
EDIT: See code in post #9

So essentially, each option has a value equal to the sales price of the specific component. Then you would have a javascript function (called "updateTotals()" ) which would update the value of a total field. Something along these lines:
Code:
EDIT : See code in post #9

Basically, what this does (although I'm sure you've figured it out) is assign local variables the current value of each named SELECT control in the form. Then assigns the reference (not the value but the object itself) to the INPUT text field where we're displaying the total, which it then updates by setting the value attribute to the total of the previous two items.

Naturally, this is a very, very basic starting point. In operation, you would want to simply loop over all elements with "part_" in their id, increment the value of the local "systemtotal" variable (or whatever nomenclature you prefer) on each iteration of that loop, and finally write the value to the form field. In more complex forms you can do some creative formatting of the option values to pass more than a simple price by setting them to values like "CPU13A204[48.75]" or "CPU13A204^48.75" which can then be parsed in your loop to return both the part number and the price/increase for each part.

I am, by far, no expert in ecommerce programming... I do much more enterprise intranet type application design, but hopefully that will get you headed in the right direction.

Also it looks like goDaddy uses (or allows you to simply add) ZenCart in their hosting options. It's far from the best, or for that matter the most attractive (IMHO at least) but it does have decent community support it appears. I don't really do anything in php so I know there are far better people to help out there than I as far as implementing ZenCart... but there are some books and videos it appears to walk you through it.

Good luck! Hope that was helpful!
Edited by DiGiCiDAL - 5/18/13 at 2:09am
post #5 of 21
Thread Starter 
Thanks! That was extremely helpful, I can probably get a system programmed in a couple hours with this. I just have one more question. Is there a way to have it do something like send me an e-mail with the build order in it? Otherwise this system is kind of useless simply because I would just receive money, and have to guess what they ordered (very bad idea). It would make logical sense to have it happen after checkout because then it can contain their information along with what they wanted correct?
PS: Thanks again, that is fantastic, and I can probably figure out how to get images and stuff in there since you mentioned its quite similar to C++. biggrin.gifthumb.gif
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
post #6 of 21
Well, the images can get pretty complicated depending on how you want to deal with it. In a most basic format where you are only updating the image of the component (presumably displayed to the left of the dropdown) then you can update the 'src' attribute of the image tag to cause it to update to a specific image URL. If you are simply having a picture of the inside of a computer and displaying it with the different components... then you'd need a picture of each potential combination (naturally only those that are visible), probably create an array to store the image values and then call the appropriate location's URL as the image source (src). For example if you have 4 components which will be visible in the image (GPU, CPU Cooler, HD, PSU), and each one has 4 potential selections, you would build and shoot 16 photos, calling them something like system_1_1111.jpg, system_1_2111.jpg, system_1_3111.jpg... and parse the image to load from their selectedIndex values from the dropdowns (you can use that property to determine which one is selected. So GPU option 2 + CPU Cooler option 3 + HD option 4 + PSU option 1 would load image system_1_2341.jpg as the current system image.

Anyway that's only one option, there are other possibilities if you get into layering where you could simply layer transparent background images on top of each other over a background of the case.

As far as getting all of the parts emailed to you, that's what you would handle on the form processor page (the action page for the form - or more likely the action page of the confirmation/payment page's form). Depending on your payment processor (paypal, yahoo, amazon, google, etc...) you will probably have to pass the values in some standardized naming format or with some other identifier. For that you would have to investigate the API's docs for the appropriate processor. As far as simple lists to email... you can come up with a number of solutions I'm sure.

For example in the form you could have a series of which you could then update the value property of each within your recalculate function or better yet (as it's called when they submit your form) as part of your validation function - and just update each value using the text description of the select options... you can do this by looking at the .text property. So kinda like this...
Code:
function updatePartsList(selectId,hiddenId) {
    var partselection = document.getElementById(selectId);
    var soldselection = document.getElementById(hiddenId);
    soldselection.value = partselection.options[partselection.selectedIndex].text;
}

With that you could simply call the function from your update function via something along these lines (obviously changing the passed values appropriately):
Code:
var temp = updatePartsList('part_CPU','part_sold_cpu');

naturally that would be a static call, but you could just as easily define variables for the actual ID's to pass in and then pass the name dynamically as part of your loop process.

Some things that should make it easier on you:

JavaScript and DOM reference

In particular (for this application) you'll want to investigate properties and objects related to SELECT and Text and Hidden INPUT on your form, as well the src property of IMAGE.

Hope that's been helpful and maybe worthy of something (wink, wink)... wink.gif
post #7 of 21
Thread Starter 
Ok so I tried to use the script, been working on this for about an hour, the total doesnt seem to want to update. Not that I think it should, you have | var systemtotal = document.getElementById(cart_Total'); | which, to me, says that the systemtotal = cart_total. So I attempted to change it to say that the cart_Total = system total and moved it to after the operation takes place (systemtotal.value = cpuItem+ ramItem) but then I realized something else. The actual total itself is set to a static number (being 150). Im not sure if I just don't know enough about Java to understand the syntax of it, but I'm fairly sure thats incorrect. The total should somehow equal whatever cart_total i, or systemtotal (because then I dont have to change the other bits of code). So basically I think I'm asking how to get the Total to change.
Hopefully you actually check this thread again. biggrin.gif
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
post #8 of 21
Thread Starter 
If it makes a difference, I am using dreamweaver.

PS: I didn't make this second post to post this, I accidentely doubleposted so I thought I would just use this post for it.
Edited by ADHDadditiv - 5/17/13 at 10:46pm
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
post #9 of 21
LOL sorry, obviously I've gotten lazy in my old age and am now too dependent on my parser and IDE - I use Dreamweaver too (or ColdFusion Builder which is based on Eclipse).

Left out a couple of pretty important things by not paying attention and writing off the top of my head! doh.gif

Try this:
Code:
<script type='text/javascript'>
function updateTotals() {
     var cpuItem = document.getElementById('part_CPU').value;
     var ramItem = document.getElementById('part_RAM').value;
     var systemtotal = parseInt(cpuItem, 10) + parseInt(ramItem, 10);
     document.getElementById('cart_Total').value = systemtotal;
}
</script>

Either in the HEAD or it can just be on the page - just make sure it's before the form on the page.

Then for the form try this:
Code:
<form name="cart" id="cart" action="checkout.html" method="post">
     <select name="part_CPU" id="part_CPU" onChange="updateTotals()">
          <option value="150">Intel Core i3-3225 Dual Core Processor (Included)</option> 
          <option value="180">Intel Core i5-3350P Quad Core Processor (+$30)</option>
          <option value="220">Intel Core i5-3570K Quad Core Processor (+$70)</option>
          <option value="290">Intel Core i7-3770 Quad Core Processor (+$140)</option>
          <option value="330">Intel Core i7-3770K Quad Core Processor (+$180)</option>
     </select>
     <select name="part_RAM" id="part_RAM" onChange="updateTotals()">
          <option value="50" selected>4GB DDR3 1600MHz Memory - 2X2GB (Included)</option> 
          <option value="100">8GB DDR3 1600MHz Memory - 4X2GB (+$50)</option>
          <option value="150">16GB DDR3 1866MHz Memory - 4X4GB (+$100)</option>
          <option value="300">32GB DDR3 2133MHz Memory - 4X8GB (+$250)</option>
     </select>
     <input type="text" name="cart_Total" id="cart_Total">
</form>
<script type="text/javascript">
updateTotals();
</script>

Note the VERY IMPORANT changes that I stupidly left out in my hasty code before:
1) If you're using getElementById('id') - it's a good idea to actually provide the ID in the form fields (doh.gif either that or use getElementByName)
2) If you're trying to use math on text... cast the values as numeric or it will just concatenate the strings doh.gifdoh.gif (I used parseInt, but if you're not rounding your prices, you'd want to use parseFloat).

Finally, just to make it easier (i.e. not to have to manually calc the totals for the system on the first load of the page... call the function immediately... that fills the initial total amount. That would let you simply update prices in the option values for the default configuration and have the total auto-calc rather than forgetting to update the static value at the bottom.

As stated before, this is really just a hint to get you started... it's not nearly sophisticated enough to work for a decent ecom site really... plus most of that you'll want/need to handle on the server side - otherwise people can easily mess with it (forged posts, etc). All of this should be dealt with in the cart framework however, and I highly recommend using one - either that or just pay someone to build a good site for you. I don't make enough on things like this, so I don't do them any longer, but you should be able to get what you are looking for with a little 'bling' thrown in for less than $1K. (Just pay on completion and not by the hour - as should always be the case). smile.gif

Sorry I misled you a little by just coding off the top of my head - guess I'm a little rustier than I thought! whistle.gif


EDIT:

Now for an example of what I was talking about in the second post... try this example out for how you could reference the actual selected text from the drop down menus:
Code:
<script type='text/javascript'>
function updateTotals() {
     var cpuItem = document.getElementById('part_CPU').value;
         var pickedcpu = document.getElementById('part_CPU').selectedIndex;
     var ramItem = document.getElementById('part_RAM').value;
         var pickedram = document.getElementById('part_RAM').selectedIndex;
     var systemtotal = parseInt(cpuItem, 10) + parseInt(ramItem, 10);
     document.getElementById('cart_Total').value = systemtotal;
         document.getElementById('selectedCPU').value = document.getElementById('part_CPU').options(pickedcpu).text;
         document.getElementById('selectedRAM').value = document.getElementById('part_RAM').options(pickedram).text;
}
</script>
<form name="cart" id="cart" action="checkout.html" method="post">
        <div style="float:left; width:400px;">
     <select name="part_CPU" id="part_CPU" onChange="updateTotals()">
          <option value="150">Intel Core i3-3225 Dual Core Processor (Included)</option> 
          <option value="180">Intel Core i5-3350P Quad Core Processor (+$30)</option>
          <option value="220">Intel Core i5-3570K Quad Core Processor (+$70)</option>
          <option value="290">Intel Core i7-3770 Quad Core Processor (+$140)</option>
          <option value="330">Intel Core i7-3770K Quad Core Processor (+$180)</option>
     </select>
     <br/>
     <select name="part_RAM" id="part_RAM" onChange="updateTotals()">
          <option value="50" selected>4GB DDR3 1600MHz Memory - 2X2GB (Included)</option> 
          <option value="100">8GB DDR3 1600MHz Memory - 4X2GB (+$50)</option>
          <option value="150">16GB DDR3 1866MHz Memory - 4X4GB (+$100)</option>
          <option value="300">32GB DDR3 2133MHz Memory - 4X8GB (+$250)</option>
     </select>
     </div>
        <div style="float:left;">
     CPU SELECTION: <input type="text" name="selectedCPU" id="selectedCPU" size="100" /><br/>
     RAM SELECTION: <input type="text" name="selectedRAM" id="selectedRAM" size="100" /><br/>
     TOTAL ORDER: <input type="text" name="cart_Total" id="cart_Total">
    </div>
</form>

<script type="text/javascript">
updateTotals();
</script>

Much of how you want/need to code your actual shopping cart forms will be determined by what server-side scripts will be handling the form submissions, payment processing, email generation, etc... That depends not only on what (if any) framework you are using but most importantly what the server is running (php,asp,coldfusion,jsp) or if you're going really lo-tech, a CGI processor in PERL.
Edited by DiGiCiDAL - 5/18/13 at 1:58am
post #10 of 21
Thread Starter 
Ok thanks for that, so a couple more questions (I will probably throw something your way for helping me so much)
First off, I tried to do one of those input's but I used an image instead, but I cannot figure out how it will know which image to input. So I tried to make a variable that would take the cpu price, and then add a .jpg onto the end of it so it would be something like |cpu_image = "directoryname/" + cpu_value + ".jpg" | so I could get it to reference the picture via the cpu price essentially. But it wont work, I cannot even get it to output that in text version.

Also I want to know if I can have something like, if you pick this case, another options window will open and you can select which color you want your case to be. I also need it for the GPU, CPU Cooler (for how many fans they want), etc, etc. Is there a way to do this.
PS: I am attempting to make this similar to Cyberpowerpc and Ibuypower if possible. Just nice and clean.

Third, I need to know if I can get this to reference the person's choices and then show how much power they will need in the PSU section based on the CPU and GPU choice. Also I need this so I can reference the GPU choice and say roughly how many FPS it will get in certain games.

You've been a huge help so far Digicidal, and I greatly thank you for the time you have spent so far on me!
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
Black Jarvis V1.9
(21 items)
 
Mazdaspeed6
(18 items)
 
 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Need help! (I know specific right)