I originally posted this in the “How Do I?” section of the forums a couple of weeks ago, but didn’t receive a response. So this time around I’m trying out this forum to see if someone has an idea.
Anyway, I’ve got an idea that if implemented successfully could be great for the type of items I will be selling at my shop. You see, I do vinyl decals as sort of a hobby and am looking to setup shop on the internet.
It would be great if I could allow users to specify a custom size for a product (decal in this case), and have the product price automatically update based on this size (a set price per square inch).
So far I’ve come up with the basic scripting for this, but I’m far from a programmer (hardware and networking are more my suit). Anyone care to pitch in a few words?
Here is the test product page.
Test Product Page
Here is some of the code I have used so far:
In js/varien/product.js I’ve added the following function:
/**************************** RESIZE PRODUCT FUNTION ********************************/
var bTop = document.theForm.baseTop;
var bBot = document.theForm.baseBottom;
var rTop = document.theForm.resultTop;
var rBot = document.theForm.resultBottom;
//bBot.value = bTop.value;
if(which == 1 || which == 4)
rTop.value = Math.round(((bTop.value * rBot.value) / bBot.value)*1000)/1000;
else if(which == 2 || which == 3)
rBot.value = Math.round(((bBot.value * rTop.value) / bTop.value)*1000)/1000;
I’ve also edited Line 46 of app/design/frontend/default/default/template/catalog/product/view.phtml. This is the line that begins the Add to Cart form. The only thing I’ve done is added a name for the form, in this case “theForm”, to give the function a form to reference:
<form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form" name="theForm">
Finally, directly after Line 40 of app/design/frontend/default/default/template/catalog/product/view/type/configurable.phtml, I’ve added the following code that is responsible for the entry of Height/Length:
<td class="label"><?php echo $this->__('Height: ') ?></td>
<input type="hidden" name="baseTop" value="<?php echo $_product->getOrigHeight() ?>"/>
<input type="hidden" name="baseBottom" value="<?php echo $_product->getOrigLength() ?>"/>
<input type="text" size="5" name="resultTop" value="<?php echo $_product->getOrigHeight() ?>" onkeyup="doMathBase(3);"><br/>
<td class="label"><?php echo $this->__('Length: ') ?></td>
<input type="text" size="5" name="resultBottom" value="<?php echo $_product->getOrigLength() ?>" onkeyup="doMathBase(4);">
The base Height/Length for this product is 2 x 10. You can see this if you enter 20 as the length for the test product, the height will automatically populate as 4.
Now… I understand as these new inputs are part of the Add to Cart form, that they should be posting into the Cart. I’m not sure how I would verify this. Ultimately what I need to do is be able to enter dimensions and have the product’s Price (but just for this user’s session, I don’t want to update the product’s price directly) adjust itself. The Height and Length will be used to calculate the area of the decal in square inches, rounded up, then applied to a static price per square inch value.
As well if you have any questions about what I’ve done or what I’m trying to do (in case I didn’t explain thoroughly enough) feel free to tell me.