Skip to content

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

wall mural done

parent 3b8e7747
Show 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,28 +115,72 @@ $customtab_content = $_config->getProductDetail('customtab_content'); ...@@ -115,28 +115,72 @@ $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) {
jQuery.each(areas, function (id, area) { jQuery.each(areas, function (id, area) {
...@@ -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); var src2 = jQuery('img.fotorama__img').attr('src');
jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val(DefVal); var tmpImg2 = new Image();
jQuery('span:contains('+positionLabel+')').parent().next('div').children('input').attr('disabled','disabled'); 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);
}
if(jQuery('.gallery-placeholder').html('<div><img src="'+ jQuery('img.fotorama__img').attr('src') +'" class="fotorama__img"/></div>')){ var widthfootVal = convertUnit(DefWidVal,'cmTofoot');
var heightfootval = convertUnit(DefHeiVal,'cmTofoot');
var tt = jQuery('img.fotorama__img').selectAreas({ 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('.');
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], // minSize: [500, 500],
onChanged: debugQtyAreas, onChanged: debugQtyAreas,
width: DefVal, width: DefWidVal,
height: DefVal, height: DefHeiVal,
maxAreas: 1, maxAreas: 1,
areas: [ areas: [
{ {
x: 0, x: 0,
y: 0, y: 0,
width: DefVal, width: DefWidVal,
height: DefVal, height: DefHeiVal,
} }
] ]
}); });
setPrice(DefVal,DefVal,f_tile_width,f_tile_height,f_tile_price,0); setPrice(DefWidVal,DefHeiVal,f_tile_width,f_tile_height,f_tile_price,0);
} }
function setChangeArea(){ 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 = {
...@@ -256,18 +342,16 @@ function setChangeArea(){ ...@@ -256,18 +342,16 @@ function setChangeArea(){
}); });
}); });
//--------------------------------------------------------------------------// //--------------------------------------------------------------------------//
setTimeout(function(){
setTimeout(function(){
jQuery(jQuery('span:contains('+widthLabel+')').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(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;
...@@ -275,11 +359,11 @@ jQuery('#tile_checkbox').on('change',function(){ ...@@ -275,11 +359,11 @@ jQuery('#tile_checkbox').on('change',function(){
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;
...@@ -297,22 +381,21 @@ jQuery('#tile_checkbox').on('change',function(){ ...@@ -297,22 +381,21 @@ jQuery('#tile_checkbox').on('change',function(){
}else{ }else{
jQuery('.select-areas-background-area').html(' '); jQuery('.select-areas-background-area').html(' ');
} }
}); });
//----------------------------------------------------------------//
},1000);
jQuery('#preloader').remove(); //----------------------------------------------------------------//
}, 2000); },1000);
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