custom module to product view page with custom options *****************************************************************
passing the product Id and get there image gallery custom product ************************************************************
<?php
//print_r($_REQUEST);
?>
<?php $productDub = Mage::getModel('catalog/product')->load($_REQUEST['productId']);?>
<script type="text/javascript">
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div class="product-view">
<div class="product-essential">
<div style="border: 1px solid #c6c6c6;width: 53%;float: left;">
<div class="product-img-box" style="margin:0 auto;">
<p class="product-image" style="overflow: hidden; z-index: 9;">
<img id="image" src="<?php echo $productDub->getImageUrl(); ?>" alt="testg2" title="testg2" style="width: 265px; left: 0px; top: 58px; z-index: 0;"></p>
<?php $ajxurl=Mage::getBaseUrl('web')."index.php/cart"; ?>
</div>
<div class="more-views" style="float:left;">
<ul>
<?php $galleryData = $productDub->getData('media_gallery'); ?>
<?php foreach($galleryData as $gallary){ ?>
<?php foreach($gallary as $galla){ ?>
<?php //echo "<pre>"; print_r($galla); echo "</pre>"; ?>
<li style="float:left;">
<a href="#" onclick="popWin('<?php echo $baseurl."/index.php/catalog/product/gallery/id/".$product_id."/image/".$galla['value_id'] ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title=""><img src="<?php echo Mage::getBaseUrl('media').'catalog/product'.$galla['file']; ?>" width="100" height="100" alt=""></a>
</li>
<?php }
} ?>
</ul>
</div>
</div>
<div style="float:right;width:46%; ">
<div class="product-name">
<h1><?php echo $productDub->getName(); ?></h1>
</div>
<?php //if ($this->canEmailToFriend()): ?>
<p class="email-friend"><a href="<?php //echo Mage::helper('catalog/product')->getEmailToFriendUrl($productDub) ?>"><?php //echo $this->__('Email to a Friend') ?></a></p>
<?php //endif; ?>
<form action="<?php echo Mage::getBaseUrl('web').'customizer/index.php?product='.$_REQUEST['productId'];?>" method="post" id="product_addtocart_form"<?php if($productDub->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<div class="product-options" id="product-options-wrapper">
<?php if ($productDub->hasRequiredOptions()){ ?>
<p class="required"><?php echo '* Required Fields';?></p>
<?php } ?>
<?php
foreach ($productDub->getOptions() as $o) {
$optionType = $o->getType();
$option_title=$o->default_title;
$option_id=$o->option_id;
//echo 'Type = '.$optionType."</br>";
// echo 'Title = '.$option_title."</br>";
//echo 'optionId='. $option_id;
?>
<dt><label<?php if ($o->getIsRequire()) echo ' class="required"' ?>><?php if ($o->getIsRequire()) echo '<em>*</em>' ?><?php echo $o->getTitle(); ?></label></dt>
<div class="input-box">
<dd class="last" >
<?php
if ($optionType == 'drop_down') {
$values ='';
$values = $o->getValues();
$optionFinish=array();
$i=0;
$selectOp=array();
$requareval='';
if($o->getIsRequire()){
$requareval="required-entry";
}
echo ' <select name="options['.$option_id.']" id="select_'.$option_id.'" class="'.$requareval.' product-custom-option" title="" onchange="opConfig.reloadPrice()">
<option value="">-- Please Select --</option>';
foreach ($values as $k => $v) {
$option_type_id=$v->option_type_id;
$title=$v->title;
$price=$v->price;
$price_type=$v->price_type;
?>
<option value="<?php echo $option_type_id;?>" price="<?php echo $price; ?>"> <?php echo $title;?></option>
<?php
unset($v);
}
echo '</select>';
}else if($optionType=='checkbox'){
$values ='';
$values = $o->getValues();
echo '<ul id="options-'.$option_id.'-list" class="options-list">';
?>
<?php foreach ($values as $k => $v) {
$option_type_id='';
$title='';
$price_type='';
$option_type_id=$v->option_type_id;
$title=$v->title;
$price=$v->price;
$price_type=$v->price_type;
$requareval='';
if($o->getIsRequire()){
$requareval="validate-one-required-by-name";
}
?>
<li><input type="checkbox" class="checkbox <?php echo $requareval;?> product-custom-option" onclick="opConfig.reloadPrice()" name="options[<?php echo$option_id;?>][]" id="options_<?php echo $option_id.'_'.$option_type_id;?>" value="<?php echo $option_type_id;?>" price="<?php echo $price;?>"><span class="label"><label for="options_<?php echo $option_id.'_'.$option_type_id;?>"><?php echo $title; ?> </label></span>
<script type="text/javascript">$('options_<?php echo $option_id."_".$option_type_id;?>').advaiceContainer = 'options-<?php echo $option_id;?>-container';$('options_<?php echo $option_id."_".$option_type_id;?>').callbackFunction = 'validateOptionsCallback';</script></li>
<?php
unset($v);
} ?>
<span id="options-<?php echo $option_id;?>-container"></span>
</ul>
<?php
}else if($optionType=='radio'){
$values ='';
$values = $o->getValues();
$requareval='';
if($o->getIsRequire()){
$requareval="validate-one-required-by-name";
}
echo '<ul id="options-'.$option_id.'-list" class="options-list">';
?>
<?php foreach ($values as $k => $v) {
$option_type_id='';
$title='';
$price_type='';
$option_type_id=$v->option_type_id;
$title=$v->title;
$price=$v->price;
$price_type=$v->price_type;
?>
<li><input type="radio" class="radio <?php echo $requareval;?> product-custom-option" onclick="opConfig.reloadPrice()" name="options[<?php echo$option_id;?>][]" id="options_<?php echo $option_id.'_'.$option_type_id;?>" value="<?php echo $option_type_id;?>" price="<?php echo $price;?>"><span class="label"><label for="options_<?php echo $option_id.'_'.$option_type_id;?>"><?php echo $title; ?> </label></span><script type="text/javascript">$('options_<?php echo $option_id."_".$option_type_id;?>').advaiceContainer = 'options-<?php echo $option_id;?>-container';$('options_<?php echo $option_id."_".$option_type_id;?>').callbackFunction = 'validateOptionsCallback';</script></li>
<?php } ?>
</ul>
<span id="options-<?php echo $option_id;?>-container"></span>
<?php
}else if($optionType=='field'){
$values='';
$v = $o->getData();
$default_title=$o->default_title;
$option_type_id=$v['option_type_id'];
$option_id=$v['option_id'];
$title=$v['title'];
$price=$v['price'];
if($title=="width"){
$width_option_id= $option_id;
}
if($title=="height"){
$height_option_id=$option_id;
}
}else {
//print_r($o);
}
echo '</dd></div>';
/* ==========END Get OptionID ======== */
unset($o);
}
?>
<div class="add-to-box">
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php echo "Add to Cart"; ?></span></span></button>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">decorateGeneric($('#product-options-wrapper dl'), ['last']);</script>
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
try {
this.form.submit();
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}
if (button && button != 'undefined') {
button.disabled = true;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
// Remove custom datetime validators
for (var methodName in Validation.methods) {
if (methodName.match(/^validate-datetime-.*/i)) {
delete Validation.methods[methodName];
}
}
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var optionFileUpload = {
productForm : $('product_addtocart_form'),
formAction : '',
formElements : {},
upload : function(element){
this.formElements = this.productForm.select('input', 'select', 'textarea', 'button');
this.removeRequire(element.readAttribute('id').sub('option_', ''));
template = '<iframe id="upload_target" name="upload_target" style="width:0; height:0; border:0;"><\/iframe>';
Element.insert($('option_'+element.readAttribute('id').sub('option_', '')+'_uploaded_file'), {after: template});
this.formAction = this.productForm.action;
var baseUrl = '<?php echo $this->getUrl('*/product/upload') ?>';
var urlExt = 'option_id/'+element.readAttribute('id').sub('option_', '');
this.productForm.action = parseSidUrl(baseUrl, urlExt);
this.productForm.target = 'upload_target';
this.productForm.submit();
this.productForm.target = '';
this.productForm.action = this.formAction;
},
removeRequire : function(skipElementId){
for(var i=0; i<this.formElements.length; i++){
if (this.formElements[i].readAttribute('id') != 'option_'+skipElementId+'_file' && this.formElements[i].type != 'button') {
this.formElements[i].disabled='disabled';
}
}
},
addRequire : function(skipElementId){
for(var i=0; i<this.formElements.length; i++){
if (this.formElements[i].readAttribute('name') != 'options_'+skipElementId+'_file' && this.formElements[i].type != 'button') {
this.formElements[i].disabled='';
}
}
},
uploadCallback : function(data){
this.addRequire(data.optionId);
$('upload_target').remove();
if (data.error) {
} else {
$('option_'+data.optionId+'_uploaded_file').value = data.fileName;
$('option_'+data.optionId+'_file').value = '';
$('option_'+data.optionId+'_file').hide();
$('option_'+data.optionId+'').hide();
template = '<div id="option_'+data.optionId+'_file_box"><a href="#"><img src="var/options/'+data.fileName+'" alt=""><\/a><a href="#" onclick="optionFileUpload.removeFile('+data.optionId+')" title="Remove file" \/>Remove file<\/a>';
Element.insert($('option_'+data.optionId+'_uploaded_file'), {after: template});
}
},
removeFile : function(optionId)
{
$('option_'+optionId+'_uploaded_file').value= '';
$('option_'+optionId+'_file').show();
$('option_'+optionId+'').show();
$('option_'+optionId+'_file_box').remove();
}
}
var optionTextCounter = {
count : function(field,cntfield,maxlimit){
if (field.value.length > maxlimit){
field.value = field.value.substring(0, maxlimit);
} else {
cntfield.innerHTML = maxlimit - field.value.length;
}
}
}
Product.Options = Class.create();
Product.Options.prototype = {
initialize : function(config) {
this.config = config;
this.reloadPrice();
document.observe("dom:loaded", this.reloadPrice.bind(this));
},
reloadPrice : function() {
var config = this.config;
var skipIds = [];
$('body .product-custom-option').each(function(element){
var optionId = 0;
element.name.sub(/[0-9]+/, function(match){
optionId = parseInt(match[0], 10);
});
if (config[optionId]) {
var configOptions = config[optionId];
var curConfig = {price: 0};
if (element.type == 'checkbox' || element.type == 'radio') {
if (element.checked) {
if (typeof configOptions[element.getValue()] != 'undefined') {
curConfig = configOptions[element.getValue()];
}
}
} else if(element.hasClassName('datetime-picker') && !skipIds.include(optionId)) {
dateSelected = true;
$('.product-custom-option[id^="options_' + optionId + '"]').each(function(dt){
if (dt.getValue() == '') {
dateSelected = false;
}
});
if (dateSelected) {
curConfig = configOptions;
skipIds[optionId] = optionId;
}
} else if(element.type == 'select-one' || element.type == 'select-multiple') {
if ('options' in element) {
$A(element.options).each(function(selectOption){
if ('selected' in selectOption && selectOption.selected) {
if (typeof(configOptions[selectOption.value]) != 'undefined') {
curConfig = configOptions[selectOption.value];
}
}
});
}
} else {
if (element.getValue().strip() != '') {
curConfig = configOptions;
}
}
if(element.type == 'select-multiple' && ('options' in element)) {
$A(element.options).each(function(selectOption) {
if (('selected' in selectOption) && typeof(configOptions[selectOption.value]) != 'undefined') {
if (selectOption.selected) {
curConfig = configOptions[selectOption.value];
} else {
curConfig = {price: 0};
}
optionsPrice.addCustomPrices(optionId + '-' + selectOption.value, curConfig);
optionsPrice.reload();
}
});
} else {
optionsPrice.addCustomPrices(element.id || optionId, curConfig);
optionsPrice.reload();
}
}
});
}
}
function validateOptionsCallback(elmId, result) {
var container = $(elmId).up('ul.options-list');
if (result == 'failed') {
container.removeClassName('validation-passed');
container.addClassName('validation-failed');
} else {
container.removeClassName('validation-failed');
container.addClassName('validation-passed');
}
}
var opConfig = new Product.Options(<?php echo $this->getJsonConfig() ?>);
//]]>
</script>
No comments:
Post a Comment