Skip to content

C
coconva2118
Commit 346d7b2b authored by Ketan's avatar Ketan
Browse files
Options

wall mural done

parent 3b8e7747
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 100 deletions
app/design/frontend/Sm/shop4u/Magento_Catalog/templates/product/view/details.phtml
View file @ 346d7b2b
...@@ -115,27 +115,71 @@ $customtab_content = $_config->getProductDetail('customtab_content'); ...@@ -115,27 +115,71 @@ $customtab_content = $_config->getProductDetail('customtab_content');
transform: rotateY(180deg); transform: rotateY(180deg);
} }
</style> </style>
<script> <script>
var DefVal = 350; var DefWidVal = 350;
var DefHeiVal = 350;
var widthLabel = 'Width For Wall Mural'; var widthLabel = 'Width For Wall Mural';
var heightLabel = 'Height For Wall Mural'; var heightLabel = 'Height For Wall Mural';
var positionLabel = 'Image Position'; var positionLabel = 'Image Position';
//jQuery('span:contains("Image Width")').parent().next('div').children('input').val(); //jQuery('span:contains("Image Width")').parent().next('div').children('input').val();
require([ require([
'jquery', 'jquery',
'selectareas' 'selectareas'
//'//localhost/coconva2118/pub/static/version1569245418/frontend/Sm/shop4u/en_US/js/jquery.selectareas.js' //'//localhost/coconva2118/pub/static/version1569245418/frontend/Sm/shop4u/en_US/jquery/selectareas.js'
], function (jQuery, selectareas) { ], function (jQuery, selectareas) {
//jQuery('img.fotorama__img').hide();
jQuery('.price-final_price').html(' '); jQuery('.price-final_price').html(' ');
jQuery.noConflict(); jQuery('span:contains('+widthLabel+')').parent().parent().hide();
jQuery('span:contains('+heightLabel+')').parent().parent().hide();
jQuery('span:contains('+positionLabel+')').parent().parent().hide();
//jQuery('span:contains(" Flip Image ")').parent().parent().css("padding-top: 30% !important;");
if (jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').length && jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').length) { if (jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').length && jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').length) {
//jQuery('body').loader('show'); //jQuery('body').loader('show');
jQuery('label:contains("Flip Image")').first().hide(); jQuery('label:contains("Flip Image")').first().hide();
jQuery(".col2-layout .container .row ").append('<div id="preloader" class="loader-wrapper"><div class="loader"></div></div>'); jQuery(".col2-layout .container .row ").append('<div id="preloader" class="loader-wrapper"><div class="loader"></div></div>');
//-----------------------------width and height in foot--------------------------------------//
var optFoot="<option value=1>1</option>"; var optInch="<option value=0>0</option><option value=1>1</option>";
for(var i =2; i <= 100; i++){optFoot += '<option value='+i+'>'+i+'</option>'; if(i < 13){ optInch += '<option value='+i+'>'+i+'</option>';}}
if(typeof optFoot !== 'undefined'){
jQuery('<div class="unitInInch" style=""><label>Width (in foot and inch)</label><label style=" margin-left: 10%;">Height (in foot and inch)</label><div style="display: flex;"><div class="widthInch" style="display: flex;justify-content: flex-start;width: 42%;"><div></div><div style="width: 39%;display: flex;"><select id="foot_width">'+optFoot+'</select><span>ft</span></div><div style="width: 33%;display: flex;margin-left: 10px;"><select id="inch_width" >'+optInch+'</select><span>in</span></div></div><div class="heightInch"><div><div style="display: flex;"><div style="display: flex;width: 55%;"><select id="foot_height">'+optFoot+'</select><span>ft</span></div><div style="display: flex;width: 50%;margin-left: 10px;"><select id="inch_height" >'+optInch+'</select><span>in</span></div></div></div></div></div></div>').insertAfter("div.product-info-price");
}
//------------------------------------------------------------------------------------------------//
function convertUnit(val,conv){
if(conv=='cmTofoot'){
return ((val/2.54)/12).toFixed(1);
}else if(conv=='footTocm'){
var splVal = val.split('.');
var retVal=0;
if(splVal[0].length){
retVal += Math.ceil(splVal[0]*(2.54*12));
}
if(splVal[1].length){
if(parseInt(splVal[1]) > 12){
retVal += Math.ceil(parseInt((splVal[1]).toString()[0])*(2.54));
}else{
retVal += Math.ceil(parseInt(splVal[1])*(2.54));
}
}
return retVal;
}
}
function debugQtyAreas (event, id, areas) { function debugQtyAreas (event, id, areas) {
...@@ -155,8 +199,8 @@ require([ ...@@ -155,8 +199,8 @@ require([
//----------------------creating checkbox for tiles------------// //----------------------creating checkbox for tiles------------//
jQuery( jQuery(
'<div style="height: 30px;width: 100%;position: unset;padding-bottom: 35px;"><input type="checkbox" id="tile_checkbox">&nbsp;Show Tiles</div>' '<div class="field" style="margin-right:14%!important"><input type="checkbox" id="tile_checkbox">&nbsp; Show how the tiles will be supplied</div>'
).insertBefore('.product-add-form'); ).insertAfter(jQuery('span:contains("Image Position")').parent().parent());
jQuery('label:contains("Flip Image")').first().next('div.control').children('div:nth-child(1)').children().children('input').on('change',function(){ jQuery('label:contains("Flip Image")').first().next('div.control').children('div:nth-child(1)').children().children('input').on('change',function(){
if(jQuery(this).is(':checked')){ if(jQuery(this).is(':checked')){
...@@ -170,61 +214,103 @@ jQuery('label:contains("Flip Image")').first().next('div.control').children('div ...@@ -170,61 +214,103 @@ jQuery('label:contains("Flip Image")').first().next('div.control').children('div
//-------------------------------------------------------------// //-------------------------------------------------------------//
setTimeout(function(){ setTimeout(function(){
var f_tile_width = (typeof tile_width !== 'undefined')?tile_width:50; var f_tile_width = (typeof tile_width !== 'undefined')?tile_width:50;
var f_tile_height = (typeof tile_height !== 'undefined')?tile_height:50; var f_tile_height = (typeof tile_height !== 'undefined')?tile_height:50;
var f_tile_price = (typeof tile_price !== 'undefined')?tile_price:50; var f_tile_price = (typeof tile_price !== 'undefined')?tile_price:50;
jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(DefVal);
jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(DefVal);
jQuery('span:contains('+positionLabel+')').parent().next('div').children('input').attr('disabled','disabled');
if(jQuery('.gallery-placeholder').html('<div><img src="'+ jQuery('img.fotorama__img').attr('src') +'" class="fotorama__img"/></div>')){
var tt = jQuery('img.fotorama__img').selectAreas({
// minSize: [500, 500],
onChanged: debugQtyAreas,
width: DefVal,
height: DefVal,
maxAreas: 1,
areas: [
{
x: 0,
y: 0,
width: DefVal,
height: DefVal,
}
]
});
setPrice(DefVal,DefVal,f_tile_width,f_tile_height,f_tile_price,0);
} var src2 = jQuery('img.fotorama__img').attr('src');
var tmpImg2 = new Image();
tmpImg2.src=src2;
jQuery(tmpImg2).one('load',function(){
console.log('image=======wid=',tmpImg2.width,'==hei==',tmpImg2.height);
if(tmpImg2.width != DefWidVal){
var ImagePercentChange = parseInt(DefWidVal/parseInt(tmpImg2.width)*100);
DefHeiVal = parseInt(parseInt(tmpImg2.height)*(ImagePercentChange/100));
console.log('percentdiff===',ImagePercentChange,"==defHei==",DefHeiVal);
}
var widthfootVal = convertUnit(DefWidVal,'cmTofoot');
var heightfootval = convertUnit(DefHeiVal,'cmTofoot');
jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(DefWidVal);
jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(DefHeiVal);
var splWidFoot = widthfootVal.split('.');
var splHeiFoot = heightfootval.split('.');
function setChangeArea(){ jQuery('#foot_width').val(splWidFoot[0]);
jQuery('#inch_width').val(splWidFoot[1]);
jQuery('#foot_height').val(splHeiFoot[0]);
jQuery('#inch_height').val(splHeiFoot[1]);
jQuery('#foot_width,#inch_width').on('change',function(){
if(jQuery(this).val()==''){jQuery(this).val(0);}
var cmVal = parseFloat(parseInt(jQuery('#foot_width').val())+'.'+parseInt(jQuery('#inch_width').val())).toFixed(2);
jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(convertUnit(cmVal,'footTocm'));
jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').trigger('change');
});
jQuery('#foot_height,#inch_height').on('change',function(){
if(jQuery(this).val()==''){jQuery(this).val(0);}
var cmVal = parseFloat(parseInt(jQuery('#foot_height').val())+'.'+parseInt(jQuery('#inch_height').val())).toFixed(2);
jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(convertUnit(cmVal,'footTocm'));
jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').trigger('change');
});
jQuery('span:contains('+positionLabel+')').parent().next('div').children('input').attr('disabled','disabled');
var src = jQuery('img.fotorama__img').attr('src');
jQuery('img.fotorama__img').remove();
if(jQuery('.gallery-placeholder').html('<div><img src="'+src +'" class="fotorama__img"/></div>')){
var tt = jQuery('img.fotorama__img').selectAreas({
// minSize: [500, 500],
onChanged: debugQtyAreas,
width: DefWidVal,
height: DefHeiVal,
maxAreas: 1,
areas: [
{
x: 0,
y: 0,
width: DefWidVal,
height: DefHeiVal,
}
]
});
setPrice(DefWidVal,DefHeiVal,f_tile_width,f_tile_height,f_tile_price,0);
}
function setChangeArea(){
var w = jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(); var w = jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val();
var h = jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(); var h = jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val();
var xpos=0; var ypos=0; var xpos=0; var ypos=0;
if(parseInt(w) < 100 || parseInt(h) < 100){ /* if(parseInt(w) < 100 || parseInt(h) < 100){
alert("Minimum Value for Height and Width should be 100."); alert("Minimum Value for Height and Width should be 100.");
return false; return false;
} }*/
if(parseInt(w) > parseInt(h)){ console.log('come in wid greater'); if(parseInt(w) > parseInt(h)){ console.log('come in wid greater');
h = DefVal * (h/w); h = DefHeiVal * (h/w);
w = DefVal; w = DefWidVal;
ypos = (DefVal - h)/2; ypos = (DefHeiVal - h)/2;
}else if(parseInt(h) > parseInt(w)){ }else if(parseInt(h) > parseInt(w)){
w = DefVal * (w/h); w = DefWidVal * (w/h);
h = DefVal; h = DefHeiVal;
xpos = (DefVal - w)/2; xpos = (DefWidVal - w)/2;
}else{ }else{
w = DefVal; w = DefWidVal;
h = DefVal; h = DefHeiVal;
} }
console.log('h=',h,', w=',w,', xpos=',xpos,', ypos=',ypos); console.log('h=',h,', w=',w,', xpos=',xpos,', ypos=',ypos);
var areaOptions = { var areaOptions = {
...@@ -241,78 +327,75 @@ function setChangeArea(){ ...@@ -241,78 +327,75 @@ function setChangeArea(){
jQuery('#tile_checkbox').prop('checked', false); jQuery('#tile_checkbox').prop('checked', false);
setPrice(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(),jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(),f_tile_width,f_tile_height,f_tile_price,0); setPrice(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(),jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(),f_tile_width,f_tile_height,f_tile_price,0);
jQuery('.admin__control-radio').each(function(){jQuery(this).prop('checked', false)}); jQuery('.admin__control-radio').each(function(){jQuery(this).prop('checked', false)});
}; };
//--------------------------hiding price span--------------------// //--------------------------hiding price span--------------------//
jQuery('.price-notice').hide(); jQuery('.price-notice').hide();
jQuery('.price-container.tax.weee').hide(); jQuery('.price-container.tax.weee').hide();
jQuery('.fotorama__img').parent().css('left','34px'); jQuery('.fotorama__img').parent().css('left','34px');
jQuery('.fotorama__img').parent().css('top','25px'); jQuery('.fotorama__img').parent().css('top','25px');
//------------------------- hiding price span--------------------// //------------------------- hiding price span--------------------//
//----------------------appending price update on material options----------// //----------------------appending price update on material options----------//
jQuery('.admin__control-radio').each(function(){jQuery(this).change( jQuery('.admin__control-radio').each(function(){jQuery(this).change(
function(){ function(){
console.log('price==',jQuery(this).attr('price')); console.log('price==',jQuery(this).attr('price'));
setPrice(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(),jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(),f_tile_width,f_tile_height,f_tile_price,parseInt(jQuery(this).attr('price'))); setPrice(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(),jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(),f_tile_width,f_tile_height,f_tile_price,parseInt(jQuery(this).attr('price')));
}); });
}); });
//--------------------------------------------------------------------------// //--------------------------------------------------------------------------//
setTimeout(function(){
jQuery(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input')).change(function(){setChangeArea();});
setTimeout(function(){ jQuery(jQuery('span:contains('+heightLabel+')').parent().next('div').children('input')).change(function(){setChangeArea();});
jQuery(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input')).change(function(){setChangeArea();});
jQuery(jQuery('span:contains('+heightLabel+')').parent().next('div').children('input')).change(function(){setChangeArea();});
jQuery('.select-areas-resize-handler').remove(); jQuery('.select-areas-resize-handler').remove();
jQuery('.delete-area').remove(); jQuery('.delete-area').remove();
//------------------creating tiles here---------------------------// //------------------creating tiles here---------------------------//
jQuery('#tile_checkbox').on('change',function(){ jQuery('#tile_checkbox').on('change',function(){
if(jQuery(this).is(':checked')){ if(jQuery(this).is(':checked')){
var htm = '<div style="background:white;color:white;"><ul>'; var htm = '<div style="background:white;color:white;"><ul>';
var kk=0; var kk=0;
var wh = jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val(); var wh = jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val();
var hh = jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(); var hh = jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val();
var wdc = DefVal; var wdc = DefWidVal;
if(parseInt(wh) > parseInt(hh)){ if(parseInt(wh) > parseInt(hh)){
wdc = DefVal; wdc = DefWidVal;
}else if(parseInt(hh) > parseInt(wh)){ }else if(parseInt(hh) > parseInt(wh)){
wdc = DefVal * (wh/hh); wdc = DefWidVal * (wh/hh);
} }
for(i=0; i < parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()); i +=f_tile_width){ for(i=0; i < parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()); i +=f_tile_width){
var wd = f_tile_width; var wd = f_tile_width;
if((parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()) - i) < f_tile_width){ if((parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()) - i) < f_tile_width){
wd = parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()) - i; wd = parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()) - i;
} }
var wdPer = (wd/parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()))*100; var wdPer = (wd/parseInt(jQuery('span:contains('+widthLabel+')').parent().next('div').children('input').val()))*100;
htm += '<li style="left:'+kk+'px;width:'+Math.round((wdPer/100)*wdc)+'px;height:100%;position:absolute;background:grey;opacity:0.5;border:solid 1px"><div style="box-sizing:border-box;position:relative;height:100%;padding-top:5px;font-size:13px;text-align:center"><span style="transform:translateX(-50%) translateY(-50%) rotate(90deg);display:block;text-align:center;position:absolute;padding-left:'+(hh/10)*4+'px;padding-bottom:90%;">'+Math.round((wdPer/100)*wh)+'cm</span></div></li>'; htm += '<li style="left:'+kk+'px;width:'+Math.round((wdPer/100)*wdc)+'px;height:100%;position:absolute;background:grey;opacity:0.5;border:solid 1px"><div style="box-sizing:border-box;position:relative;height:100%;padding-top:5px;font-size:13px;text-align:center"><span style="transform:translateX(-50%) translateY(-50%) rotate(90deg);display:block;text-align:center;position:absolute;padding-left:'+(hh/10)*4+'px;padding-bottom:90%;">'+Math.round((wdPer/100)*wh)+'cm</span></div></li>';
kk +=Math.round((wdPer/100)*wdc); kk +=Math.round((wdPer/100)*wdc);
} }
htm += '</ul></div>'; htm += '</ul></div>';
jQuery('.select-areas-background-area').html(htm); jQuery('.select-areas-background-area').html(htm);
}else{ }else{
jQuery('.select-areas-background-area').html(' '); jQuery('.select-areas-background-area').html(' ');
} }
}); });
//----------------------------------------------------------------//
},1000);
//----------------------------------------------------------------//
},1000);
jQuery('#preloader').remove();
}, 2000);
jQuery('#preloader').remove();
});
}, 3000);
} }
}); });
</script> </script>
<?php } ?> <?php } ?>
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')): ?> <?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')): ?>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment