custom/plugins/PixupWishlistSW6/src/Resources/views/storefront/layout/header/header.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/layout/header/header.html.twig' %}
  3. {% block layout_header_actions_cart %}
  4.     {% block pixup_wishlist_header_actions_cart %}
  5.         <script>
  6.             window.pixupWishlistGlobalCookie = {{ page.header.pixup.requiredCookie ? 1 : 0 }};
  7.         </script>
  8.         <div class="col-auto">
  9.             <div class="header-cart">
  10.                 <a class="btn header-cart-btn header-actions-btn PixupWishlistPageIcon"
  11.                    href="{{ path('frontend.pixup.wishlist.overview') }}"
  12.                    title="{{  "pixup-wishlist.actions.name"|trans }}">
  13.                     <div class="PixupWishlistProductCount" id="wishlistProductCount">{{ page.header.pixup.antiCacheMode || page.header.pixup.fullAjaxMode ? 0 : page.header.pixup.wishlistProductCount }}</div>
  14.                     <span class="header-cart-icon">
  15.                         {% sw_icon 'heart' %}
  16.                     </span>
  17.                     {#{  "pixup-wishlist.actions.name"|trans }#}
  18.                 </a>
  19.             </div>
  20.         </div>
  21.     {% endblock %}
  24.     {#Content for: add-to-wishlist-button.html.twig #}
  26.     <!-- Modal -->
  27.     {% block pixup_wishlist_header_actions_part_modal %}
  28.         <div class="modal fade" id="pixupWishlist_chooseWishlistModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  29.             <div class="modal-dialog" role="document">
  30.                 <div class="modal-content">
  31.                     <div class="modal-header">
  32.                         <h5 class="modal-title" style="margin-left:0.3em;"><span>{% sw_icon 'px-heart' style{"namespace":"PixupWishlistSW6","pack":"pixup","class":"PixupAddToWishlistRemoveIcon pixupBaseIcon pxOutlineWhite"} %} &thinsp;</span><span id="pixupWishlistSelect_title">{{  "pixup-wishlist.product-detail.modal.add.title"|trans }}</span></h5>
  33.                         <br>
  34.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  35.                             <span aria-hidden="true">&times;</span>
  36.                         </button>
  37.                     </div>
  38.                     <div class="modal-body" style="padding:0">
  39.                         <div class="modal-title PixupCechBoxGroupTitle" id="pixupWishlist_description">{{  "pixup-wishlist.product-detail.modal.add.description"|trans }}</div>
  41.                         <div id="pixupWishlist_chooseWishlistModal_body_select">
  43.                         </div>
  44.                     </div>
  45.                     <div class="modal-footer">
  46.                         <button type="button" class="btn btn-secondary" data-dismiss="modal">{{  "pixup-wishlist.product-detail.modal.close"|trans }}</button>
  47.                         <button id="pixupWishlist_save" type="button" class="btn btn-primary">{{  "pixup-wishlist.product-detail.modal.add.confirm"|trans }}</button>
  48.                     </div>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.         <script>
  53.             {% if page.header.pixup.antiCacheMode || page.header.pixup.fullAjaxMode %}
  54.             function loadWishlistAsync() {
  55.                 pixupWishlist_ajaxCore("{{ url('frontend.pixup.wishlist.products') }}", function (xhttp) {
  56.                     let res = JSON.parse(xhttp.responseText);
  57.                     const data = res.data;
  58.                     if (res.error.success === true) {
  59.                         let wishlists = data.wishlists;
  60.                         let productCount = 0;
  61.                         for (let wishlist of wishlists) {
  62.                             for (let productId in wishlist.products) {
  63.                                 productCount++;
  64.                                 let productElemente = document.getElementsByClassName('Pixup-Wishlist-Product-' + productId);
  66.                                 for (let i = 0; i < productElemente.length; i++) {
  67.                                     productElemente[i].dataset.remove = true;
  68.                                     let collection = productElemente[i].getElementsByClassName('add');
  69.                                     for (let i = 0; i < collection.length; i++) {
  70.                                         collection[i].style.display = 'none';
  71.                                     }
  72.                                     collection = productElemente[i].getElementsByClassName('remove');
  73.                                     for (let i = 0; i < collection.length; i++) {
  74.                                         collection[i].style.display = 'block';
  75.                                     }
  76.                                 }
  77.                             }
  78.                         }
  79.                         document.getElementById('wishlistProductCount').innerHTML = productCount;
  80.                     } else {
  81.                         console.log('fehler Pixup WistlistProdcts');
  82.                     }
  83.                 });
  84.             }
  85.             loadWishlistAsync();
  86.             {% endif %}
  88.             function substrectOneFromWLHeader(){
  89.                 wishlistCount = document.getElementById("wishlistProductCount");
  90.                 currentCount = wishlistCount.innerHTML;
  91.                 wishlistCount.innerHTML = (parseInt(currentCount,0)-1).toString();
  92.             }
  93.             function addOneFromWLHeader(){
  94.                 wishlistCount = document.getElementById("wishlistProductCount");
  95.                 currentCount = wishlistCount.innerHTML;
  96.                 wishlistCount.innerHTML = (parseInt(currentCount,0)+1).toString();
  97.             }
  98.             function pixupWishlist_changeProductWishlistStateInit(elem,remove,productID,wishlistId=null,applyStyle=true){
  99.                 if(remove === 'true' || remove === true)
  100.                     baseUrl = "{{ url('frontend.pixup.wishlist.ajax.remove_product', {'productId': '--product-id--','wishlistId': '--wishListId--'})  }}";
  101.                 else
  102.                     baseUrl = "{{ url('frontend.pixup.wishlist.ajax.add_product', {'productId': '--product-id--','wishlistId': '--wishListId--'})  }}";
  103.                 baseUrl = baseUrl.replace(/--product-id--/, productID).replace(/--wishListId--/,wishlistId);
  104.                 pixupWishlist_ajaxCore(baseUrl,pixupWishlist_changeProductWishlistStateHandler,[elem,baseUrl,productID,remove,wishlistId,applyStyle]);
  105.             }
  106.             function pixupWishlist_changeProductWishlistStateHandler(xhttp,elem,baseUrl,productID,removeProduct,wishlistId=null,applyStyle=true){
  107.                 removeProductMsg = "{{ "pixup-wishlist.product-detail.deleteProduct"|trans }}";
  108.                 addProductMsg = "{{ "pixup-wishlist.product-detail.addProduct"|trans }}";
  109.                 data = JSON.parse(xhttp.responseText).data;
  110.                 if(data.productOnWishlist === false && data.success) { // product removed
  111.                     substrectOneFromWLHeader();
  112.                     if(applyStyle) {
  113.                         elem.title = addProductMsg;
  114.                         elem.children[0].style.display = "inline-block";
  115.                         elem.children[1].style.display = "none";
  116.                         elem.dataset.remove = false;
  117.                     }
  118.                 }else if(data.success){ // product added
  119.                     addOneFromWLHeader();
  120.                     if(applyStyle) {
  121.                         elem.title = removeProductMsg;
  122.                         elem.children[0].style.display = "none";
  123.                         elem.children[1].style.display = "inline-block";
  124.                         elem.dataset.remove = true;
  125.                     }
  126.                 }else if(!data.success && data.wishListIdRequired){ // cant perform action on product because multiple wishlists exsist
  127.                     //get all wishlists
  128.                     let url = "{{ url('frontend.pixup.wishlist.ajax.get_wishlists',{'productId': '--product-id--'})  }}";
  129.                     url = url.replace(/--product-id--/, "");
  130.                     pixupWishlist_ajaxCore(url,pixupWishlists_selectWishlist,[elem,productID])
  131.                 }
  132.             }
  133.             function pixupWishlists_selectWishlist(xhttp,elem,productID){
  134.                 var safeBtn = document.getElementById('pixupWishlist_save');
  135.                 var description = document.getElementById('pixupWishlist_description');
  136.                 var title = document.getElementById("pixupWishlistSelect_title");
  137.                 var select = document.getElementById("pixupWishlist_chooseWishlistModal_body_select");
  138.                 var data = JSON.parse(xhttp.responseText).data.wishlists;
  139.                 var addDescription = "{{  "pixup-wishlist.product-detail.modal.add.description"|trans }}";
  140.                 var addConfirm = "{{  "pixup-wishlist.product-detail.modal.add.confirm"|trans }}";
  141.                 var addTitle = "{{  "pixup-wishlist.product-detail.modal.add.title"|trans }}";
  142.                 var removeDescription = "{{  "pixup-wishlist.product-detail.modal.remove.description"|trans }}";
  143.                 var removeConfirm = "{{  "pixup-wishlist.product-detail.modal.remove.confirm"|trans }}";
  144.                 var removeTitle = "{{  "pixup-wishlist.product-detail.modal.remove.title"|trans }}";
  146.                 //clear old event Listener ( so only one function can listen on it )
  147.                 safeBtnClone = safeBtn.cloneNode(true);
  148.                 //set listener
  149.                 safeBtnClone.addEventListener("click", function(){
  150.                     //get all selected checkboxes and send the value to the changeState function
  151.                     var all_checkboxes = document.querySelectorAll('input[name="pixupWishlistCheckBoxWishlistSelector[]"]');
  152.                     productOnOneWishlist = false;
  153.                     for(var x = 0, l = all_checkboxes.length; x < l;  x++) {
  154.                         if(all_checkboxes[x].checked === true)
  155.                             productOnOneWishlist = true;
  156.                         if(all_checkboxes[x].dataset.isOnWishlist === "true" && all_checkboxes[x].checked === true && all_checkboxes[x].value !== "-1" ||
  157.                             all_checkboxes[x].dataset.isOnWishlist === "false"  && all_checkboxes[x].checked === false)
  158.                             continue;
  160.                         pixupWishlist_changeProductWishlistStateInit(
  161.                             elem,
  162.                             !all_checkboxes[x].checked,
  163.                             productID,
  164.                             all_checkboxes[x].value,
  165.                             false
  166.                         );
  167.                     }
  169.                     if(productOnOneWishlist === true){
  170.                         elem.title = removeProductMsg;
  171.                         elem.children[0].style.display = "none";
  172.                         elem.children[1].style.display = "inline-block";
  173.                         elem.dataset.remove = true;
  174.                     }else{
  175.                         elem.title = addProductMsg;
  176.                         elem.children[0].style.display = "inline-block";
  177.                         elem.children[1].style.display = "none";
  178.                         elem.dataset.remove = false;
  179.                     }
  180.                     $('#pixupWishlist_chooseWishlistModal').modal('hide')
  181.                 });
  182.                 safeBtn = safeBtn.parentNode.replaceChild(safeBtnClone, safeBtn);
  184.                 //delete options
  185.                 select.innerHTML = "";
  187.                 //set proper messages
  188.                 if(elem.dataset.remove === 'true'){
  189.                     safeBtn.innerHTML = removeConfirm;
  190.                     description.innerHTML = removeDescription;
  191.                     title.innerHTML = removeTitle;
  192.                 }else{
  193.                     safeBtn.innerHTML = addConfirm;
  194.                     description.innerHTML = addDescription;
  195.                     title.innerHTML = addTitle;
  196.                 }
  198.                 //create a checkbox for every recieved wishlist ( subscribed wishlists excluded )
  199.                 ownWishlistAdded = false;
  200.                 for(i=0;i<data.length;i++){
  201.                     if(data[i].subscribed === true)
  202.                         continue;
  204.                     ownWishlistAdded = true;
  205.                     select.appendChild(createCheckbox(data[i],productID));
  206.                 }
  207.                 //if no wishlist exsist
  208.                 if(ownWishlistAdded === false){
  209.                     customData = {name:"{{ "pixup-wishlist.product-detail.modal.createNewWishlist"|trans }}",id:-1,products:[-1]};
  210.                     select.appendChild(createCheckbox(customData,-1));
  211.                 }
  213.                 //add checkboxes for subcribed wishlists
  214.                 match = 0;
  215.                 for(i=0;i<data.length;i++){
  216.                     if(data[i].subscribed === false)
  217.                         continue;
  218.                     if(data[i].editable !== true)
  219.                         continue;
  220.                     match++;
  221.                     if(match === 1) {
  222.                         var hr = document.createElement("hr");
  223.                         var div = document.createElement("div");
  224.                         div.classList = "center PixupCechBoxGroupTitle";
  225.                         div.innerHTML = "{{ "pixup-wishlist.product-detail.modal.subscribedWishlists"|trans }}";
  226.                         select.appendChild(hr);
  227.                         select.appendChild(div);
  228.                     }
  229.                     select.appendChild(createCheckbox(data[i],productID,"PixupCheckBoxRow2"));
  230.                 }
  232.                 $('#pixupWishlist_chooseWishlistModal').modal()
  233.             }
  234.             function createCheckbox(data,productId,className = ""){
  235.                 var div = document.createElement("div");
  236.                 div.className = "custom-control custom-checkbox PixupCheckBoxRow "+className;
  237.                 var input = document.createElement("input");
  238.                 input.type = "checkbox";
  239.                 input.className = "custom-control-input";
  240.                 input.id = "pixupWishlist"+i;
  241.                 input.name = "pixupWishlistCheckBoxWishlistSelector[]";
  242.                 input.value = data.id;
  243.                 input.dataset.isOnWishlist = false;
  244.                 isOnWishlist = false;
  245.                 products = Object.values(data.products);
  246.                 for(let x = 0; products.length > x;x++){
  247.                     if(products[x] === productId) {
  248.                         isOnWishlist = true;
  249.                         break;
  250.                     }
  251.                 }
  252.                 if (isOnWishlist) {
  253.                     input.checked = true;
  254.                     input.dataset.isOnWishlist = true;
  255.                 }
  256.                 var label = document.createElement("label");
  257.                 label.className = "custom-control-label";
  258.                 label.htmlFor ="pixupWishlist"+i;
  259.                 label.innerHTML = data.name;
  261.                 div.appendChild(input);
  262.                 div.appendChild(label);
  263.                 return div
  264.             }
  265.             function pixupWishlist_ajaxCore(url,callback,options=null){
  266.                 var xhttp = new XMLHttpRequest();
  267.                 xhttp.onreadystatechange = function() {
  268.                     if (this.readyState == 4 && this.status == 200) {
  269.                         if(options !== null) {
  270.                             callback(this, ...options);
  271.                         }else
  272.                             callback(this);
  273.                     }
  274.                 };
  275.                 xhttp.open("GET", url, true);
  276.                 xhttp.send();
  277.             }
  278.         </script>
  279.     {% endblock %}
  280.     {#end of content for add-to.wishlist.button.html.twig#}
  282.     {{ parent() }}
  283. {% endblock%}