248 lines
12 KiB
Smarty
248 lines
12 KiB
Smarty
{extends file='page.tpl'}
|
|
|
|
{block name="page_content"}
|
|
<form action="{$configureproductlink}" method="post">
|
|
<div class="row">
|
|
<div class="col-md-3"></div>
|
|
<div class="col-md-6">
|
|
{foreach $configurator_fields as $id_page => $configurator_page}
|
|
<div id="configurator_main_image_container" class="configurator_main_image_container configurator_main_image_container_{$id_page}" style="display: none; position: relative; max-width: 100%;">
|
|
<img id="configurator_main_image" style="object-fit: cover; width: {$configurator_page['width']}px; height: {$configurator_page['height']}px; max-width: 100%;" attr-width="{$configurator_page['width']}" attr-height="{$configurator_page['height']}" src="{$configurator_page['image']}"/>
|
|
{foreach $configurator_page['fields'] as $configurator_field}
|
|
{if $configurator_field['type'] == 1}
|
|
<div class="configurator_field configurator_field_{$configurator_field['id_config_field']}" attr-fontsize="{$configurator_field['fontsize']}" field-id="{$configurator_field['id_config_field']}" style="white-space: pre-wrap;line-height: normal;transform: rotate({$configurator_field['rotation']}deg);{if isset($configurator_field['textalign']) && $configurator_field['textalign']} text-align: {$configurator_field['textalign']};{/if} color: {$configurator_field['color']}; overflow: hidden; position: absolute; font-family: '{$configurator_field['font']}'; font-size: {$configurator_field['fontsize']}px; left: {$configurator_field['x']}%; top: {$configurator_field['y']}%; width: {$configurator_field['width']}%; height: {$configurator_field['height']}%;">{$configurator_field['text']}</div>
|
|
{else}
|
|
<div class="configurator_field configurator_field_{$configurator_field['id_config_field']}" field-id="{$configurator_field['id_config_field']}" style="background-image: url('{$configurator_field['text']}');background-size: 100% 100%;background-position: center;background-repeat: no-repeat;line-height: normal;transform: rotate({$configurator_field['rotation']}deg); color: {$configurator_field['color']}; overflow: hidden; position: absolute; font-family: '{$configurator_field['font']}'; font-size: {$configurator_field['fontsize']}px; left: {$configurator_field['x']}%; top: {$configurator_field['y']}%; width: {$configurator_field['width']}%; height: {$configurator_field['height']}%;"></div>
|
|
{/if}
|
|
{/foreach}
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="row">
|
|
<div class="col-md-12" id="pagesList">
|
|
{foreach $configurator_fields as $id_page => $configurator_page}
|
|
{if isset($configurator_page['fields']) && $configurator_page['fields'] && count($configurator_page['fields']) > 0}
|
|
<button class="btn btn-primary configurator_page configurator_page_button_{$id_page}" style="margin-bottom: 1rem;" page-id="{$id_page}" type="button">{$configurator_page['name']}</button>
|
|
{/if}
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
<input type="hidden"
|
|
id="configurator_current_page"
|
|
name="configurator_current_page"
|
|
value="0"
|
|
/>
|
|
{foreach $configurator_fields as $id_page => $configurator_page}
|
|
<div id="configurator_panel_field" class="configurator_panel_field configurator_panel_field_{$id_page}" style="width: 100%; display: none; position: relative;">
|
|
{foreach $configurator_page['fields'] as $configurator_field}
|
|
<div class="col-md-12 px-0 py-1">
|
|
<div>
|
|
{if $configurator_field['type'] == 1}
|
|
<textarea
|
|
id="configurator_field_input_{$configurator_field['id_config_field']}"
|
|
name="configurator_field_input_{$configurator_field['id_config_field']}"
|
|
class="form-control configurator_field_input"
|
|
field-id="{$configurator_field['id_config_field']}"
|
|
attr-characters-limit="{$configurator_field['characters_limit']}"
|
|
value="{$configurator_field['text']}">{$configurator_field['text']}
|
|
</textarea>
|
|
{else}
|
|
<input type="file"
|
|
id="configurator_field_input_{$configurator_field['id_config_field']}"
|
|
name="configurator_field_input_{$configurator_field['id_config_field']}"
|
|
class="form-control configurator_field_input_img"
|
|
field-id="{$configurator_field['id_config_field']}"
|
|
img-id="configurator_field_img_{$configurator_field['id_config_field']}"
|
|
/>
|
|
<label style="width: 100%; display: inline-block; position: relative; margin-bottom: 0px; font-size: 1rem; text-align: left;">
|
|
{l s='Pamiętaj, użyj zdjęcia o możliwie najwyższej rozdzielczości! Zdjęcia kiepskiej jakości obniżą jakość produktu!' mod='configurator'}
|
|
</label>
|
|
<input type="hidden"
|
|
id="configurator_field_img_{$configurator_field['id_config_field']}"
|
|
name="configurator_field_img_{$configurator_field['id_config_field']}"
|
|
value="0"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
{/foreach}
|
|
<div class="row">
|
|
<div class="col-md-12" style="margin-top: 15px;">
|
|
{if isset($cart_redirect) && $cart_redirect == 1}
|
|
<input type="hidden"
|
|
id="edit"
|
|
name="edit"
|
|
value="1"
|
|
/>
|
|
{/if}
|
|
<div class="add">
|
|
<button
|
|
class="btn btn-primary"
|
|
id="saveConfiguration"
|
|
name="saveConfiguration"
|
|
type="submit"
|
|
>
|
|
{l s='Save' d='Shop.Theme.Actions'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<style>
|
|
#module-configurator-configureproduct #wrapper .container {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<div id="uploadimageModal" class="modal" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h4 class="modal-title">Wykadruj zdjęcie</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-8 text-center">
|
|
<div id="image_demo" style="width:350px; margin-top:30px; max-width: 100%;"></div>
|
|
</div>
|
|
<div class="col-md-4" style="padding-top:30px;">
|
|
<br />
|
|
<br />
|
|
<br/>
|
|
<button type="button" class="btn btn-primary crop_image">Zapisz zdjęcie</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
{literal}
|
|
document.addEventListener('DOMContentLoaded', function (event) {
|
|
var current_width = 0;
|
|
var current_height = 0;
|
|
var img_id = 0;
|
|
var field_id = 0;
|
|
$image_crop = $('#image_demo').croppie({
|
|
enableExif: true,
|
|
viewport: {
|
|
width:200,
|
|
height:200,
|
|
type:'square' //circle
|
|
},
|
|
boundary:{
|
|
width:300,
|
|
height:300
|
|
}
|
|
});
|
|
$(document).on('keyup touchend', ".configurator_field_input", function (){
|
|
var characters_limit = parseInt($(this).attr("attr-characters-limit"));
|
|
if(typeof characters_limit !== 'undefined' && characters_limit && characters_limit > 0 && $(this).val().length > characters_limit) {
|
|
$(this).val($(this).val().substring(0, characters_limit));
|
|
}
|
|
$(".configurator_field_"+$(this).attr("field-id")).html($(this).val());
|
|
});
|
|
$(document).on('click', ".configurator_page", function (){
|
|
$(".configurator_main_image_container").css("display", "none");
|
|
$(".configurator_panel_field").css("display", "none");
|
|
$(".configurator_main_image_container_"+$(this).attr("page-id")).css("display", "inline-block");
|
|
$(".configurator_panel_field_"+$(this).attr("page-id")).css("display", "inline-block");
|
|
$("#configurator_current_page").val($(this).attr("page-id"));
|
|
current_width = 0;
|
|
current_height = 0;
|
|
scaleConfigurator();
|
|
});
|
|
$(".configurator_main_image_container_{/literal}{$config_page}{literal}").css("display", "inline-block");
|
|
$(".configurator_panel_field_{/literal}{$config_page}{literal}").css("display", "inline-block");
|
|
$(".images-container.js-images-container").append($("#configurator-content-img-html").html());
|
|
$("#configurator-content-img-html").remove();
|
|
$(document).on('click', ".open-product-config-modal", function (){
|
|
$(".product-cover").hide();
|
|
$(".js-qv-mask.mask").hide();
|
|
$("#configurator-content-img").show();
|
|
$("#configurator-content-settings").show();
|
|
scaleConfigurator();
|
|
});
|
|
$(document).on('change', ".configurator_field_input_img", function (event){
|
|
img_id = $(this).attr('img-id');
|
|
field_id = $(this).attr('field-id');
|
|
$image_crop.croppie('destroy');
|
|
$image_crop = $('#image_demo').croppie({
|
|
enableExif: true,
|
|
viewport: {
|
|
width: $(".configurator_field_"+field_id).width(),
|
|
height: $(".configurator_field_"+field_id).height(),
|
|
type:'square' //circle
|
|
},
|
|
boundary:{
|
|
width:300,
|
|
height:300
|
|
}
|
|
});
|
|
var reader = new FileReader();
|
|
reader.onload = function (event) {
|
|
$image_crop.croppie('bind', {
|
|
url: event.target.result
|
|
}).then(function(){
|
|
console.log('jQuery bind complete');
|
|
});
|
|
}
|
|
reader.readAsDataURL(this.files[0]);
|
|
$('#uploadimageModal').modal('show');
|
|
});
|
|
|
|
$('.crop_image').click(function(event){
|
|
$image_crop.croppie('result', {
|
|
type: 'canvas',
|
|
size: 'viewport'
|
|
}).then(function(response){
|
|
var formData = new FormData();
|
|
formData.append('img', response);
|
|
formData.append('prev', '');
|
|
formData.append('type', 'customer');
|
|
$.ajax({
|
|
url : 'https://wyczarujprezent.pl/modules/configurator/uploadFieldImg.php',
|
|
type : 'POST',
|
|
data : formData,
|
|
processData: false, // tell jQuery not to process the data
|
|
contentType: false, // tell jQuery not to set contentType
|
|
success : function(data) {
|
|
if(typeof data !== 'undefined') {
|
|
$('#'+img_id).val(data);
|
|
$(".configurator_field_"+field_id).css('background-image', 'url("'+data+'")');
|
|
refreshAddToCartButton();
|
|
$('#uploadimageModal').modal('hide');
|
|
$('#uploaded_image').html(data);
|
|
}
|
|
}
|
|
});
|
|
})
|
|
});
|
|
$(".configurator_page_button_{/literal}{$config_page}{literal}").click();
|
|
function scaleConfigurator() {
|
|
var configurator_current_page = parseInt($("#configurator_current_page").val());
|
|
var original_width = parseInt($(".configurator_main_image_container_"+configurator_current_page+" > #configurator_main_image").attr("attr-width"));
|
|
var original_height = parseInt($(".configurator_main_image_container_"+configurator_current_page+" > #configurator_main_image").attr("attr-height"));
|
|
if(current_width == 0 || original_width == current_width) {
|
|
current_width = parseInt($(".configurator_main_image_container_"+configurator_current_page+" > #configurator_main_image").width());
|
|
current_height = parseInt($(".configurator_main_image_container_"+configurator_current_page+" > #configurator_main_image").height());
|
|
}
|
|
var ratio = parseInt((current_width*100)/original_width);
|
|
$(".configurator_main_image_container_"+configurator_current_page+" > #configurator_main_image").height(original_height*(ratio/100));
|
|
$(".configurator_main_image_container_"+configurator_current_page+" .configurator_field").each(function() {
|
|
var font_size = parseInt($(this).attr("attr-fontsize"));
|
|
$(this).css("font-size", (font_size*(ratio/100))+"px");
|
|
});
|
|
}
|
|
});
|
|
{/literal}
|
|
</script>
|
|
{/block} |