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');
transform: rotateY(180deg);
}
</style>
<script>
var DefVal = 350;
var DefWidVal = 350;
var DefHeiVal = 350;
var widthLabel = 'Width For Wall Mural';
var heightLabel = 'Height For Wall Mural';
var positionLabel = 'Image Position';
//jQuery('span:contains("Image Width")').parent().next('div').children('input').val();
require([
'jquery',
'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) {
//jQuery('img.fotorama__img').hide();
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) {
//jQuery('body').loader('show');
jQuery('label:contains("Flip Image")').first().hide();
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) {
jQuery.each(areas, function (id, area) {
......@@ -155,8 +199,8 @@ require([
//----------------------creating checkbox for tiles------------//
jQuery(
'<div style="height: 30px;width: 100%;position: unset;padding-bottom: 35px;"><input type="checkbox" id="tile_checkbox">&nbsp;Show Tiles</div>'
).insertBefore('.product-add-form');
'<div class="field" style="margin-right:14%!important"><input type="checkbox" id="tile_checkbox">&nbsp; Show how the tiles will be supplied</div>'
).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(){
if(jQuery(this).is(':checked')){
......@@ -170,61 +214,103 @@ jQuery('label:contains("Flip Image")').first().next('div.control').children('div
//-------------------------------------------------------------//
setTimeout(function(){
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_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');
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);
}
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],
onChanged: debugQtyAreas,
width: DefVal,
height: DefVal,
width: DefWidVal,
height: DefHeiVal,
maxAreas: 1,
areas: [
{
x: 0,
y: 0,
width: DefVal,
height: DefVal,
width: DefWidVal,
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 h = jQuery('span:contains('+heightLabel+')').parent().next('div').children('input').val();
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.");
return false;
}
}*/
if(parseInt(w) > parseInt(h)){ console.log('come in wid greater');
h = DefVal * (h/w);
w = DefVal;
ypos = (DefVal - h)/2;
h = DefHeiVal * (h/w);
w = DefWidVal;
ypos = (DefHeiVal - h)/2;
}else if(parseInt(h) > parseInt(w)){
w = DefVal * (w/h);
h = DefVal;
xpos = (DefVal - w)/2;
w = DefWidVal * (w/h);
h = DefHeiVal;
xpos = (DefWidVal - w)/2;
}else{
w = DefVal;
h = DefVal;
w = DefWidVal;
h = DefHeiVal;
}
console.log('h=',h,', w=',w,', xpos=',xpos,', ypos=',ypos);
var areaOptions = {
......@@ -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('+heightLabel+')').parent().next('div').children('input')).change(function(){setChangeArea();});
jQuery('.select-areas-resize-handler').remove();
jQuery('.delete-area').remove();
//------------------creating tiles here---------------------------//
jQuery('.select-areas-resize-handler').remove();
jQuery('.delete-area').remove();
//------------------creating tiles here---------------------------//
jQuery('#tile_checkbox').on('change',function(){
jQuery('#tile_checkbox').on('change',function(){
if(jQuery(this).is(':checked')){
var htm = '<div style="background:white;color:white;"><ul>';
var kk=0;
......@@ -275,11 +359,11 @@ jQuery('#tile_checkbox').on('change',function(){
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 wdc = DefVal;
var wdc = DefWidVal;
if(parseInt(wh) > parseInt(hh)){
wdc = DefVal;
wdc = DefWidVal;
}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){
var wd = f_tile_width;
......@@ -297,22 +381,21 @@ jQuery('#tile_checkbox').on('change',function(){
}else{
jQuery('.select-areas-background-area').html(' ');
}
});
//----------------------------------------------------------------//
},1000);
});
jQuery('#preloader').remove();
}, 2000);
//----------------------------------------------------------------//
},1000);
jQuery('#preloader').remove();
});
}, 3000);
}
});
});
</script>
<?php } ?>
<?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