{% sw_extends '@Storefront/storefront/utilities/offcanvas.html.twig' %}
{% block utilities_offcanvas %}
<div class="wishlist-offcanvas-container" data-wishlist-content="true">
{{ parent() }}
</div>
{% endblock %}
{% block utilities_offcanvas_close %}
{% endblock %}
{% block utilities_offcanvas_close_text %}{% endblock %}
{% block utilities_offcanvas_content %}
{% block page_wishlist_container %}
<div class="wishlist-header">
{% block wishlist_offcanvas_header %}
<h2 id="wishlist-offcanvas-title">{{ "wishlist.offcanvas.headline.new"|trans|sw_sanitize }}</h2>
{% sw_icon 'close_m' style { 'pack' : 'globus_icons' } %}
{% endblock %}
</div>
<div class="wishlist-content">
<div class="d-none csrf-wrapper">
<div id="create-wishlist-csrf">
{{ sw_csrf('frontend.pixup.wishlist.ajax.create_wishlist') }}
</div>
<div id="delete-wishlist-csrf">
{{ sw_csrf('frontend.pixup.wishlist.ajax.delete_wishlist') }}
</div>
<div id="edit-wishlist-csrf">
{{ sw_csrf('frontend.pixup.wishlist.ajax.edit_wishlist') }}
</div>
<div id="change-add-product-csrf">
{{ sw_csrf('frontend.pixup.wishlist.ajax.add_product') }}
</div>
<div id="change-remove-product-csrf">
{{ sw_csrf('frontend.pixup.wishlist.ajax.remove_product') }}
</div>
</div>
{% block wishlist_offcanvas_content %}
<div class="header-search header-search-col col-12 my-4">
</div>
<div class="wrapper">
<div class="wishlist-edit wishlist-toggle d-none">
<div class="form-group w-100">
<label for="wishlist_edit_Name" class="col-sm-12 col-form-label px-0">
{{ "wishlist.offcanvas.label.editInput"|trans|sw_sanitize }}
</label>
<div class="col-sm-12 px-0">
<input class="form-control" value="" maxlength="40" id="wishlist_edit_Name" placeholder="{{ "pixup-wishlist.wishlist-page.editWishlist.form.placeholder.name"|trans }}">
</div>
</div>
</div>
<div class="wishlist-new wishlist-toggle d-none">
<div class="form-group w-100">
<label for="wishlistName" class="col-sm-12 col-form-label px-0">
{{ "wishlist.offcanvas.label.newInput"|trans|sw_sanitize }}
</label>
<div class="col-sm-12 px-0">
<input class="form-control" value="" maxlength="40" id="wishlistName" placeholder="{{ "pixup-wishlist.wishlist-page.createModal.form.placeholder.name"|trans }}">
</div>
</div>
</div>
<div class="wishlist-new-and-add wishlist-toggle d-none">
<div class="form-group w-100">
<label for="wishlistName" class="col-sm-12 col-form-label px-0">
{{ "wishlist.offcanvas.label.newInput"|trans|sw_sanitize }}
</label>
<div class="col-sm-12 px-0">
<input class="form-control" value="" maxlength="40" id="wishlistName" placeholder="{{ "pixup-wishlist.wishlist-page.createModal.form.placeholder.name"|trans }}">
</div>
</div>
</div>
<div class="wishlist-add wishlist-toggle d-none">
</div>
<div class="wishlist-add wishlist-toggle d-none">
<button class="btn btn-secondary new-wishlist"
data-wishlist-offcanvas="true"
data-wishlist-offcanvas-headline="Neue Einkaufsliste"
data-wishlist-offcanvas-type="newAndAdd"
disabled>
NEUE EINKAUFSLISTE ANLEGEN
</button>
<script type="text/javascript">
function pixupWishlist_createWishlistInit(url){
name = document.querySelector(".wishlist-offcanvas .d-flex #wishlistName").value;
if(!document.querySelector(".wishlist-offcanvas .d-flex #wishlistName").value) {
document.querySelector(".wishlist-offcanvas .d-flex #wishlistName").style.border = "1px solid red";
return;
}else
document.querySelector(".wishlist-offcanvas .d-flex #wishlistName").style.border = "1px solid #bcc1c7";
products = JSON.stringify({});
{% if wishlistCanBePublic %}
privateState = document.getElementById("wishlistPrivate").checked;
editable = document.getElementById("wishlistEditable").checked;
{% if wishlistBirthday %}
birthday = document.getElementById('wishlistBirthday').checked;
{% else %}
birthday = false;
{% endif %}
password = document.getElementById("wishlistPassword").value;
password = (password == "")?null:password;
{% else %}
privateState = true;
editable = false;
password = null;
birthday = false;
{% endif %}
wishlistId = null;
name = escape(name);
name = name.replace(/%FC/g, "ü");
name = name.replace(/%DC/g, "Ü");
name = name.replace(/%F6/g, "ö");
name = name.replace(/%D6/g, "Ö");
name = name.replace(/%E4/g, "ä");
name = name.replace(/%C4/g, "Ä");
name = name.replace(/%DF/g, "ß");
csrfToken = document.querySelector('#create-wishlist-csrf input').value
url = url.replace(/--name--/, name).replace(/--products--/,escape(products))
.replace(/--private--/,privateState).replace(/--editable--/,editable).replace(/--birthday--/,birthday)
.replace(/--password--/,escape(password)).replace(/--wishlistId--/,wishlistId);
pixupWishlist_ajaxCore("POST",url, csrfToken, function(xhttp,name,editable,privateState,birthday){
data = JSON.parse(xhttp.responseText);
if(data.data.success === false){
displayMessage(data.error.codes[0].label,false,6000);
}else{
pixupWIshlist_createMenuEntry(data.data.wishlistId,name,privateState,editable,birthday);
pixupWishlist_switchWishlist(data.data.wishlistId)
}
},[name,editable,privateState,birthday])
}
function pixupWishlist_createAndAddWishlistInit(event, url){
name = document.querySelector(".wishlist-offcanvas .d-flex #wishlistName").value;
if(!document.querySelector(".wishlist-offcanvas .d-flex #wishlistName").value) {
document.querySelector(".wishlist-offcanvas .d-flex #wishlistName").style.border = "1px solid red";
return;
}else
document.querySelector(".wishlist-offcanvas .d-flex #wishlistName").style.border = "1px solid #bcc1c7";
products = JSON.stringify({});
{% if wishlistCanBePublic %}
privateState = document.getElementById("wishlistPrivate").checked;
editable = document.getElementById("wishlistEditable").checked;
{% if wishlistBirthday %}
birthday = document.getElementById('wishlistBirthday').checked;
{% else %}
birthday = false;
{% endif %}
password = document.getElementById("wishlistPassword").value;
password = (password == "")?null:password;
{% else %}
privateState = true;
editable = false;
password = null;
birthday = false;
{% endif %}
wishlistId = null;
name = escape(name);
name = name.replace(/%FC/g, "ü");
name = name.replace(/%DC/g, "Ü");
name = name.replace(/%F6/g, "ö");
name = name.replace(/%D6/g, "Ö");
name = name.replace(/%E4/g, "ä");
name = name.replace(/%C4/g, "Ä");
name = name.replace(/%DF/g, "ß");
csrfToken = document.querySelector('#create-wishlist-csrf input').value
url = url.replace(/--name--/, name).replace(/--products--/,escape(products))
.replace(/--private--/,privateState).replace(/--editable--/,editable).replace(/--birthday--/,birthday)
.replace(/--password--/,escape(password)).replace(/--wishlistId--/,wishlistId);
pixupWishlist_ajaxCore("POST",url, csrfToken, function(xhttp,name,editable,privateState,birthday){
data = JSON.parse(xhttp.responseText);
if(data.data.success === false){
displayMessage(data.error.codes[0].label,false,6000);
}else{
// todo: check on wl view
// pixupWIshlist_createMenuEntry(data.data.wishlistId,name,privateState,editable,birthday);
// pixupWishlist_switchWishlist(data.data.wishlistId)
//custom add after creating new wl before
if(document.querySelector('body.is-ctl-pixupwishlist') !== null) {
pixupWIshlist_createMenuEntry(data.data.wishlistId, name)
setTimeout(function(){
let badgeCountElem = document.getElementById("menu"+data.data.wishlistId+"-count");
badgeCountElem.innerHTML = '1';
},0);
}
let productId = event.target.dataset.productId
let newWishlistId = data.data.wishlistId
let elem = document.querySelector('[data-product-id="' + productId + '"]')
if(document.querySelector('.product-id') !== null) {
productId = document.querySelector('.product-id').innerHTML.trim()
} else {
//todo: fdsg
productId = window.currentProductId
}
pixupWishlist_changeProductWishlistStateInit(
elem,
'custom',
productId,
newWishlistId
)
if(this._acidRemove) {
this.el.parentNode.querySelector('.cart-item-remove-button').click();
}
}
},[name,editable,privateState,birthday])
}
</script>
</div>
</div>
{% endblock %}
</div>
<div class="wishlist-footer">
{% block wishlist_offcanvas_footer %}
<div class="wishlist-edit wishlist-toggle w-100 d-none">
<button class="btn btn-secondary abort">{{ "general.storeLocatorOffcanvas.cancelButton"|trans|sw_sanitize }}</button>
<button type="submit" class="btn btn-primary apply"
onclick="pixupWishlist_editeWishlistInit(
'{{ url("frontend.pixup.wishlist.ajax.edit_wishlist", {
'name': "--name--",
'wishListId':'--wishlistId--',
'private':'--private--',
'editable':'--editable--',
'birthday':'--birthday--',
'password':'--password--'
}) }}',
)">
{{ "general.storeLocatorOffcanvas.confirmButton"|trans|sw_sanitize }}
</button>
</div>
<div class="wishlist-new wishlist-toggle w-100 d-none">
<button class="btn btn-secondary abort">{{ "general.storeLocatorOffcanvas.cancelButton"|trans|sw_sanitize }}</button>
<button type="submit" class="btn btn-primary apply"
onclick="pixupWishlist_createWishlistInit(
'{{ url("frontend.pixup.wishlist.ajax.create_wishlist", {
'name': "--name--",
'products':'--products--',
'private':'--private--',
'editable':'--editable--',
'birthday':'--birthday--',
'password':'--password--',
'wishListId':'--wishlistId--'
}) }}',
)">
{{ "general.storeLocatorOffcanvas.confirmButton"|trans|sw_sanitize }}
</button>
</div>
<div class="wishlist-new-and-add wishlist-toggle w-100 d-none">
<button class="btn btn-secondary abort">{{ "general.storeLocatorOffcanvas.cancelButton"|trans|sw_sanitize }}</button>
<button type="submit" class="btn btn-primary apply"
onclick="pixupWishlist_createAndAddWishlistInit(
event, '{{ url("frontend.pixup.wishlist.ajax.create_wishlist", {
'name': "--name--",
'products':'--products--',
'private':'--private--',
'editable':'--editable--',
'birthday':'--birthday--',
'password':'--password--',
'wishListId':'--wishlistId--'
}) }}',
)">
{{ "general.storeLocatorOffcanvas.confirmButton"|trans|sw_sanitize }}
</button>
</div>
<div class="wishlist-add wishlist-toggle w-100 d-none">
<button class="btn btn-secondary abort">{{ "general.storeLocatorOffcanvas.cancelButton"|trans|sw_sanitize }}</button>
<button type="submit" class="btn btn-primary apply" disabled
{# onclick="pixupWishlist_changeProductWishlistStateInit(#}
{# this,#}
{# this.dataset.remove,#}
{# '{{productId}}'#}
{# )"#}
>
{{ "general.storeLocatorOffcanvas.confirmButton"|trans|sw_sanitize }}
</button>
</div>
{% endblock %}
</div>
{% endblock %}
{% endblock %}