319 lines
15 KiB
Smarty
319 lines
15 KiB
Smarty
<div class="add">
|
|
<button
|
|
class="btn btn-primary open-product-config-modal"
|
|
type="button"
|
|
{if !$product.add_to_cart_url}
|
|
disabled
|
|
{/if}
|
|
>
|
|
<i class="material-icons edit">edit</i>
|
|
{l s='Personalizuj' d='Shop.Theme.Actions'}
|
|
</button>
|
|
</div>
|
|
|
|
<div id="configurator-content-img-html">
|
|
<div id="configurator-content-img" style="display: none;">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
{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']}; 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>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="configurator-content-settings-html" style="margin-top: 1rem;">
|
|
<input type="hidden"
|
|
id="configurator_current_page"
|
|
name="configurator_current_page"
|
|
value="0"
|
|
/>
|
|
<input type="hidden"
|
|
id="configurator_fields_ids"
|
|
name="configurator_fields_ids"
|
|
value="{$configurator_fields_ids}"
|
|
/>
|
|
<div id="configurator-content-settings" style="display: none;">
|
|
<div class="row">
|
|
<div class="col-md-12" id="pagesList" style="margin-bottom: 15px;">
|
|
{foreach $configurator_fields as $id_page => $configurator_page}
|
|
<button class="btn btn-primary configurator_page" style="margin-bottom: 1rem;" page-id="{$id_page}" type="button">{$configurator_page['name']}</button>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
{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 style="position: relative;">
|
|
{if $configurator_field['type'] == 1}
|
|
<textarea type="text"
|
|
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']}"
|
|
style="display: inline-block;"
|
|
attr-default-value="{$configurator_field['text']}"
|
|
attr-characters-limit="{$configurator_field['characters_limit']}"
|
|
value="{$configurator_field['text']}"
|
|
>{$configurator_field['text']}</textarea>
|
|
<label for="configurator_field_checkbox_{$configurator_field['id_config_field']}">Chcę personalizować to pole</label>
|
|
<input type="checkbox"
|
|
id="configurator_field_checkbox_{$configurator_field['id_config_field']}"
|
|
name="configurator_field_checkbox_{$configurator_field['id_config_field']}"
|
|
field-id="{$configurator_field['id_config_field']}"
|
|
class="configurator_field_checkbox"
|
|
style="display: inline-block;"
|
|
checked="checked"
|
|
/>
|
|
{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']}"
|
|
style="display: inline-block;"
|
|
attr-default-value=""
|
|
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="{$configurator_field['text']}"
|
|
/>
|
|
<label for="configurator_field_checkbox_{$configurator_field['id_config_field']}">Chcę personalizować to pole</label>
|
|
<input type="checkbox"
|
|
id="configurator_field_checkbox_{$configurator_field['id_config_field']}"
|
|
name="configurator_field_checkbox_{$configurator_field['id_config_field']}"
|
|
field-id="{$configurator_field['id_config_field']}"
|
|
class="configurator_field_checkbox"
|
|
style="display: inline-block;"
|
|
checked="checked"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
document.addEventListener('DOMContentLoaded', function (event) {
|
|
var current_width = 0;
|
|
var current_height = 0;
|
|
var configurator_content_img_html = '';
|
|
var configurator_fields_ids = JSON.parse($("#configurator_fields_ids").val());
|
|
var img_id = 0;
|
|
var field_id = 0;
|
|
$(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());
|
|
refreshAddToCartButton();
|
|
});
|
|
function refreshAddToCartButton() {
|
|
var canAddToCart = true;
|
|
var page = parseInt($("#configurator_current_page").val());
|
|
for(var i = 0; i < configurator_fields_ids.length; i++) {
|
|
if(page == i) {
|
|
for(var j = 0; j < configurator_fields_ids[i].length; j++) {
|
|
var value = $('#configurator_field_input_'+configurator_fields_ids[i][j]).val();
|
|
var default_value = $('#configurator_field_input_'+configurator_fields_ids[i][j]).attr('attr-default-value');
|
|
if($('#configurator_field_checkbox_'+configurator_fields_ids[i][j]).prop('checked') && value === default_value) {
|
|
canAddToCart = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if(canAddToCart) {
|
|
$("button.add-to-cart").prop('disabled', false);
|
|
}
|
|
else {
|
|
$("button.add-to-cart").prop('disabled', true);
|
|
}
|
|
}
|
|
$(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_0").css("display", "inline-block");
|
|
$(".configurator_panel_field_0").css("display", "inline-block");
|
|
configurator_content_img_html = $("#configurator-content-img-html").html();
|
|
$(".images-container").append(configurator_content_img_html);
|
|
$("#configurator-content-img-html").remove();
|
|
$(document).on('click', ".open-product-config-modal", function (){
|
|
$(".product-cover").hide();
|
|
$("#quantity_wanted").val("1");
|
|
$("#quantity_wanted").parent().parent().hide();
|
|
$("#thumb-gallery").remove();
|
|
$("#configurator-content-img").show();
|
|
$("#configurator-content-settings").show();
|
|
$(this).parent().hide();
|
|
$("button.add-to-cart").prop('disabled', true);
|
|
scaleConfigurator();
|
|
});
|
|
if (typeof prestashop !== 'undefined') {
|
|
prestashop.on(
|
|
'updateCart',
|
|
function (event) {
|
|
var eventDatas = {};
|
|
if (event && event.reason) {
|
|
location.reload();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
if (typeof prestashop !== 'undefined') {
|
|
prestashop.on(
|
|
'updatedProduct',
|
|
function (event) {
|
|
var eventDatas = {};
|
|
if (event) {
|
|
$(".product-cover").show();
|
|
$("#quantity_wanted").val("1");
|
|
$("#quantity_wanted").parent().parent().show();
|
|
$("#configurator-content-img").hide();
|
|
$("#configurator-content-settings").hide();
|
|
$(".open-product-config-modal").parent().show();
|
|
$("button.add-to-cart").prop('disabled', false);
|
|
$(".images-container").append(configurator_content_img_html);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
$(document).on('click', ".configurator_field_checkbox", function (){
|
|
var field_id = $(this).attr("field-id");
|
|
if($(this).prop('checked')) {
|
|
$(".configurator_field_"+field_id).show();
|
|
}
|
|
else {
|
|
$(".configurator_field_"+field_id).hide();
|
|
}
|
|
refreshAddToCartButton();
|
|
});
|
|
$(document).on('change', ".configurator_field_input_img", function (event){
|
|
img_id = $(this).attr('img-id');
|
|
field_id = $(this).attr('field-id');
|
|
if(typeof $image_crop !== 'undefined') {
|
|
$image_crop.croppie('destroy');
|
|
}
|
|
$image_crop = $('#image_demo').croppie({
|
|
viewport: {
|
|
width: $(".configurator_field_"+field_id).width(),
|
|
height: $(".configurator_field_"+field_id).height(),
|
|
type:'square' //circle
|
|
},
|
|
boundary:{
|
|
width: $(".configurator_field_"+field_id).width() + 20,
|
|
height: $(".configurator_field_"+field_id).height() + 20
|
|
}
|
|
});
|
|
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);
|
|
}
|
|
}
|
|
});
|
|
})
|
|
});
|
|
|
|
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");
|
|
});
|
|
}
|
|
});
|
|
</script> |