:::EDITED 8/18/2018::: Code has been slightly modified to work with versions 6.9.4 forward. The changes are also compatible with older versions, but if you have the old code and update to 6.9.4 or newer, then you need the new code below. Changed line is in
teal there.
This is tested to work on .asp and .php versions with no difference to the code for both versions.
It's quite easy to allow your shoppers to select product options from a text or image link.
With a little bit of Javascript we can to this in an updaterproof fashion with no edits to the core ect code.
Below, we have a simple function that will be inserted in your proddetail.asp page. Place it at the bottom before the closing </body> tag.
<!-- begin option picker function -->
<script type="text/javascript">
function option1(someval) {
document.getElementById('optn0x0').value = someval;
updateprice0();
updateoptimage(0,0,2);
}
</script>
<!-- end option picker function -->
*****A few things to note regarding the code above. The
optn0x0 there is the unique ID for the first product option that is applied to a product. If you have more than one product option on the product, and you want to use this on the 2nd option for example, then this number will need to be changed. You can right click in your browser, and "inspect" to see this ID number. The same with the numbers after, updateoptimage
(0,0,2);, those may change if you have multiple options as well.
It's also possible to expand the function to allow you to control multiple options on the product.
I'll save that for another post if there is demand.
Next, it's just a matter of creating the html for your text or images to trigger your option changes.
here is some html that will produce 7 images that can be clicked to change a product option with 7 choices (of course you will set the correct filenames and paths for the images).
<div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="2.jpg" type="image" value="
6968" /><br />Blue</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="3.jpg" type="image" value="
6969" /><br />Green</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="4.jpg" type="image" value="
6970" /><br />Pink</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="5.jpg" type="image" value="
6971" /><br />Purple</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="6.jpg" type="image" value="
6972" /><br />Gold</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="7.jpg" type="image" value="
6973" /><br />Silver</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="8.jpg" type="image" value="
6974" /><br />Red</div>
</div>
In red there are the ID numbers for your options. When you create options for a product, the ect code will assign a unique number to every option choice. The easy way to get these numbers is to view your product in the browser, and right click "inspect" and you can locate these numbers. You will need to insert your option values in your html code, replacing what I have there in my sample code.
Next, the part in blue is the important part that calls up the function and stops the action of the add to cart button. Other than that, you can use images or text in your code to trigger option changes.
That's it really. You can place the html there in your product description and click the images to update your options.
*********************************
but WAIT there's more!!!!
*********************************
What if you want your color picker up there right next to your product option?
Below, I will show you an easy way to make that happen.
The problem we have to overcome is the custom fields have a limited input, so we are going to use some more javascript to get our html to show in the custom field.
We will make some small changes to the html and place this in the product description, OR, if you have this same option selection on quite a few products, then place this in your proddetail.asp page, somewhere in the content area.
<div id="hiddenitem" style="display:none;">
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="2.jpg" type="image" value="
6968" /><br />Blue</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="3.jpg" type="image" value="
6969" /><br />Green</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="4.jpg" type="image" value="
6970" /><br />Pink</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="5.jpg" type="image" value="
6971" /><br />Purple</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="6.jpg" type="image" value="
6972" /><br />Gold</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="7.jpg" type="image" value="
6973" /><br />Silver</div>
<div class="cell"><input
onclick="option1(this.value), event.preventDefault()" src="8.jpg" type="image" value="
6974" /><br />Red</div>
</div>
<script>
if (document.getElementById("showhidden") != null) {
document.getElementById("showhidden").innerHTML = document.getElementById("hiddenitem").innerHTML;
}
</script>
As you can see, we have added an ID to the div and some style to hide the html on the page.
Then at the bottom we added some javascript to make things work in the custom field.
Speaking of the custom field, in your admin, for the entry there. you just need
<p id="showhidden"></p>
Here is an example .php page on where it's inserted into the product description
http://www.floridasurpluswarehouse.com/dev/proddetail.php?prod=monitor001
Option picker / Color Picker
Posted - 01/13/2018 : 12:47:04
