SHX-Theme/snippets/shx-feedback-banner.liquid

{% assign content_type = content_type | default: 'body' %}

{% if content_type == 'body' %}
  <div id="SHX-feedback-modal-bg"></div>
  <div id="SHX-feedback-modal">
    <div id="SHX-feedback-modal-content">
      <div
      onclick="SHX_closeFeedbackModal()"
        style="position: absolute; top: 0; right: 0; cursor: pointer; padding: 15px; z-index: 10005;">
                <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24">
                <path
                  fill="rgb(var(--color-background))"
                  d="M18.364 5.636c-0.781-0.781-2.048-0.781-2.828 0l-4.536 4.536-4.536-4.536c-0.781-0.781-2.048-0.781-2.828 0s-0.781 2.048 0 2.828l4.536 4.536-4.536 4.536c-0.781 0.781-0.781 2.048 0 2.828s2.048 0.781 2.828 0l4.536-4.536 4.536 4.536c0.781 0.781 2.048 0.781 2.828 0s0.781-2.048 0-2.828l-4.536-4.536 4.536-4.536c0.781-0.781 0.781-2.048 0-2.828z"></path>
                </svg>
              </div>
      <div id="SHX-feedback-modal-content-banner">
        <p>Deine Meinung ist gefragt! 😁</p>
      </div>
      <div id="SHX-feedback-modal-container">
        <form id="SHX-feedback-modal-form">
          <p class="SHX-feedback-modal-question">Wie zufrieden bist du mit den Produktbildern</p>
          {% render 'shx-StarRatingForm'
            , content_type: 'html'
            , ratingFormID: '1' 
            , ratingTexts: 'Sehr unattraktiv,Unattraktiv,Neutral,Attraktiv,Sehr attraktiv'%}
          <p class="SHX-feedback-modal-question">Wie zufrieden bist du mit der Produktbeschreibung</p>
          {% render 'shx-StarRatingForm'
            , content_type: 'html'
            , ratingFormID: '2'
            , ratingTexts: 'Sehr unzufrieden,Unzufrieden,Neutral,Zufrieden,Sehr zufrieden'%}
          <p class="SHX-feedback-modal-question">Wie gefällt dir unser Auftreten</p>
          {% render 'shx-StarRatingForm'
            , content_type: 'html'
            , ratingFormID: '3'
            , ratingTexts: 'Überhaupt nicht,Wenig,Mittelmäßig,Gut,Hervorragend'%}

          <div style="text-align: left; width: 100%;">
            <label class="SHX-feedback-modal-question" for="SHX_feedbackText">Verbesserungsvorschläge
              <span style="opacity: 0.5;">(optional)</span>
            </label>
            <textarea
              name="feedbackText"
              id="SHX_feedbackText"
              rows="10"
              placeholder="Deine Verbesserungsvorschläge :)"
              style="resize: none;"
              maxlength="500"></textarea>
          </div>

          <button id="SHX-feedback-modal-submit" class="SHX-feedback-modal-buttonDisable">Abschicken</button>
          <p style="font-size: 0.8em; color: #000a; margin-bottom: 0;">
            Beim Absenden des Formulars werden deine Bewertungen und Verbesserungsvorschläge anonymisiert an uns                                               
            übermittelt. Wir freuen uns über jedes Feedback! 😊
          </p>
        </form>
      </div>
      <div id="SHX-feedback-modal-container-submit1">
        <p style="font-size: 1.5em; font-weight: 600; margin-bottom: 0;">Vielen Dank für dein Feedback! 😊</p>
        <dotlottie-player
          id="SHX-feedback-modal-lottie1"
          src="{{ 'lottie_feedback.lottie' | asset_url }}"
          background="transparent"
          speed="1"
          loop="true"
          style="width: 300px; height: 300px; margin: 0 auto;"
          direction="1"
          mode="bounce"></dotlottie-player>
      </div>
      <div id="SHX-feedback-modal-container-submit2">
        <p style="font-size: 1.5em; font-weight: 600; margin-bottom: 0;">Vielen Dank für dein Feedback! 😊</p>
        <dotlottie-player
          id="SHX-feedback-modal-lottie2"
          src="{{ 'lottie_gift.lottie' | asset_url }}"
          background="transparent"
          speed="1"
          loop="true"
          style="width: 300px; height: 300px; margin: 0 auto;"
          direction="1"
          mode="bounce"></dotlottie-player>
        <p style="font-size: 1.5em; font-weight: 500;">Als Dankeschön geben wir dir ein Gutscheincode von 10% auf den gesamten Warenwert! 🥰</p>
        <p style="font-size: 1.5em; font-weight: 500;">Code:
          <span class="SHX-FEEDBACK-CODE">FEEDBACK10</span>
        </p>
      </div>
    </div>
  </div>
{% elsif content_type == 'head' %}
  <style>

    #SHX-feedback-modal-container-submit1,
    #SHX-feedback-modal-container-submit2 {
      display: none;
      margin: auto 20px;
    }

    #SHX-feedback-modal-container-submit2 {
      margin-bottom: 40px;
    }

    #SHX-feedback-modal-bg {
      pointer-events: none;
      backdrop-filter: blur(8px);

      position: fixed;
      z-index: 10000;

      left: 0;
      top: 0;
      width: 100%;
      height: calc(100% + 200px);
      background-color: rgba(0, 0, 0, 0.4);

      opacity: 0;
      visibility: hidden;
      display: block;

      transition: opacity 0.3s ease-in-out;
    }

    #SHX-feedback-modal {
      display: none;
      position: fixed;
      z-index: 10001;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
    }

    #SHX-feedback-modal-content {
      background-color: rgb(var(--color-background));
      width: 90%;

      max-width: 600px;

      text-align: center;

      border-radius: 20px;
      overflow: hidden;

      position: relative;

      /* for better pressability */
      margin: 5% auto 25vh;

      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }

    #SHX-feedback-modal-container {
      padding: 20px;
    }

    #SHX-feedback-modal-content-banner {
      margin-bottom: 20px;
      min-height: 200px;
      width: 100%;
      background-image: url('https://shinnex.de/cdn/shop/files/IMG_1693.jpg?v=1713298065');
      background-size: cover;
      background-position: center;

      position: relative;

      display: flex;
  justify-content: center;
  align-items: center;
    }

    #SHX-feedback-modal-content-banner::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);


    }

    #SHX-feedback-modal-form {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #SHX-feedback-modal-content-banner p {
      color: white;
      font-size: 20px;
      font-weight: 600;
      margin: 0;
      padding: 20px;

      position: relative;
      z-index: 10002;
    }

    .SHX-feedback-modal-question {
      font-size: 1.25em;
      font-weight: 600;
      margin: 0 0 10px;

      line-height: 1.5em;
    }

    #SHX_feedbackText {
      width: 100%;
      padding: 10px;
      margin: 10px 0;

      border: 1px rgb(var(--color-button)) solid;
      border-radius: 5px;
    }

    #SHX-feedback-modal-container button {
      width: 100%;

      font-size: 1.5rem;
      letter-spacing: 0.1rem;

      background-color: rgb(var(--color-button));
      color: white;
      padding: 15px;
      border: none;
      border-radius: 5px;
      cursor: pointer;

      font-family: var(--font-body-family);
      transition: opacity 0.3s ease-in-out;
    }

    .SHX-feedback-modal-buttonDisable {
      cursor: not-allowed !important;

      opacity: 0.5;


    }

    .SHX-FEEDBACK-CODE {
      background-color: rgb(var(--color-background-contrast));
      color: #000;
      padding: 10px 15px;
      border-radius: 5px;
    }
  </style>
  <script type="text/javascript">


    // Close the modal when the user clicks anywhere outside of the modal
    window.onclick = function (event) {
        if (event.target == document.getElementById('SHX-feedback-modal')) {
            SHX_closeFeedbackModal();
        }
    };

    function SHX_getHTMLObjectHeight(element) {
      // Clone the element
      let clone = element.cloneNode(true);

      // Position the clone off-screen
      clone.style.visibility = 'hidden';
      clone.style.position = 'absolute';
      clone.style.height = 'auto';
      clone.style.top = '-9999px';

      // Append the clone to the body
      document.body.appendChild(clone);

      // Measure the clone
      let height = clone.offsetHeight;

      // Remove the clone
      document.body.removeChild(clone);

      return height;
    }

    function SHX_openFeedbackModal() {
        let modalBG = document.getElementById('SHX-feedback-modal-bg');
        let modal = document.getElementById('SHX-feedback-modal');
        let modalContent = document.getElementById('SHX-feedback-modal-content');

        modalBG.style.visibility = 'visible';
        modalBG.style.opacity = 1;
        modal.style.display = 'block';

        // prevent scrolling
        document.body.style.overflow = 'hidden';

        // Set height to 'auto' and calculate the resulting height
        modalContent.style.height = 'auto';
        let height = modalContent.offsetHeight;

        // Reset height to '0px' and animate to the calculated height
        modalContent.style.height = '0px';

        anime({
          targets: modalContent,
          height: height , // Use the calculated height
          duration: 1500,
          easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)',
          complete: function(anim) {
            modalContent.style.height = 'auto';
          }

        });
    }

    function SHX_closeFeedbackModal(hasVoted = false) {
        // set cookie
        if(hasVoted) {
          // expires in 30 days
          document.cookie = "SHX_feedback_modal=1; expires=" + new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000).toUTCString() + "; path=/";
        } else {
          // expires in 1 day
          document.cookie = "SHX_feedback_modal=1; expires=" + new Date(new Date().getTime() + 1 * 24 * 60 * 60 * 1000).toUTCString() + "; path=/";
        }

        let modalBG = document.getElementById('SHX-feedback-modal-bg');
        let modal = document.getElementById('SHX-feedback-modal');
        let modalContent = document.getElementById('SHX-feedback-modal-content');

        modalBG.style.opacity = 0;

        setTimeout(function () {
            modalBG.style.visibility = 'hidden';
        }, 300);

        // allow scrolling
        document.body.style.overflow = 'auto';

        anime({
          targets: modalContent,
          scale: 0.8, // Use the calculated height
          opacity: 0,
          duration: 500,
          easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)',
          complete: function(anim) {
            modal.style.display = 'none';
          }
        });



    }



    function SHX_FeedbackModal_enableSubmitButton() {
      document.getElementById('SHX-feedback-modal-submit').classList.remove('SHX-feedback-modal-buttonDisable');
    }

    function SHX_FeedbackModal_SuccessPage(rating) {
      let modalContent = document.getElementById('SHX-feedback-modal-content');
      let modalContainer = document.getElementById('SHX-feedback-modal-container');

      // current height
      let oldHeight = modalContent.offsetHeight;

      modalContent.style.height = oldHeight+'px';

      modalContainer.style.display = 'none';
     

      let ele_container_submit1 = document.getElementById('SHX-feedback-modal-container-submit1');
      let ele_container_submit2 = document.getElementById('SHX-feedback-modal-container-submit2');

      document.querySelector('#SHX-feedback-modal-content-banner p').style.display = 'none'; // hide "Deine Meinung ist gefragt! 😁"

      if(rating >= 4) {
        ele_container_submit2.style.display = 'block';
        document.getElementById('SHX-feedback-modal-lottie2').play();
      } else {
        ele_container_submit1.style.display = 'block';
        document.getElementById('SHX-feedback-modal-lottie1').play();
        setTimeout(function () {
          SHX_closeFeedbackModal();
        }, 4000);
      } 

      

      // Calculate the height of the content
    let height = SHX_getHTMLObjectHeight(modalContent);

        anime({
          targets: modalContent,
          height: height , // Use the calculated height
          duration: 1500,
          easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)',
          complete: function(anim) {
            modalContent.style.height = 'auto';
          }
        });

     
    }

    // dom ready
    document.addEventListener('DOMContentLoaded', function () {

    if(document.cookie.indexOf('SHX_feedback_warmup') === -1) {
      // expires in 1 day
      document.cookie = "SHX_feedback_warmup=1; expires=" + new Date(new Date().getTime() + 1 * 24 * 60 * 60 * 1000).toUTCString() + "; path=/";
      return;
    } else {
      // read warump cookie
      let warmup = document.cookie.match('(^|;)\\s*' + 'SHX_feedback_warmup' + '\\s*=\\s*([^;]+)');

      // increase warmup counter
      let warmupCounter = parseInt(warmup.pop()) + 1;

      if(warmupCounter < 4) {
        document.cookie = "SHX_feedback_warmup=" + warmupCounter + "; expires=" + new Date(new Date().getTime() + 1 * 24 * 60 * 60 * 1000).toUTCString() + "; path=/";
        return;
      }
    }

    // Show popup after 30 seconds
    // check if cookie is set
    if (document.cookie.indexOf('SHX_feedback_modal=1') === -1) {
      setTimeout(function () {
        SHX_openFeedbackModal(true);
      }, 5000);
    }


    let disableButtonForRequest = false;

     setTimeout(function () {
       // on rating change
       SHX_1_global_starRating.el?.addEventListener("change", function (event) {
        if(!disableButtonForRequest)
        SHX_FeedbackModal_enableSubmitButton();
      });

      SHX_2_global_starRating.el?.addEventListener("change", function (event) {
        if(!disableButtonForRequest)
        SHX_FeedbackModal_enableSubmitButton();
      });

      SHX_3_global_starRating.el?.addEventListener("change", function (event) {
        if(!disableButtonForRequest)
        SHX_FeedbackModal_enableSubmitButton();
      });
      }, 500);

        // on submit SHX-feedback-modal-form
      document.getElementById('SHX-feedback-modal-form').addEventListener('submit', function (event) {
        event.preventDefault();

        // check if button is disabled
        if (document.getElementById('SHX-feedback-modal-submit').classList.contains('SHX-feedback-modal-buttonDisable')) {
          return;
        }

        document.getElementById('SHX-feedback-modal-submit').classList.add('SHX-feedback-modal-buttonDisable');
        disableButtonForRequest = true;

          let feedbackText = document.getElementById('SHX_feedbackText').value;

            let rating1 = SHX_1_global_starRating.rating ? SHX_1_global_starRating.rating.id : undefined;
            let rating2 = SHX_2_global_starRating.rating ? SHX_2_global_starRating.rating.id : undefined;
            let rating3 = SHX_3_global_starRating.rating ? SHX_3_global_starRating.rating.id : undefined;

            let averageRating = (rating1 + rating2 + rating3) / 3;
     

            let data = {
                "Images_Quality": rating1,
                "Product_Description_Quality": rating2,
                "Our_Appearance": rating3,
                feedbackText: feedbackText === "" ? undefined : feedbackText,
            };

            console.log(data);

            fetch('https://api.shinnex.de/api/v1/customerfeedback?origin=shxshopappearbanner', {
                method: 'POST',
                headers: {
                  'X-Api-Key':  {% render 'shx-ApiKey' %},
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                "data": data
              }),
            })
                .then((data) => {

                  if (data.status !== 200) {
                    console.error('Error:', data);
                    return;
                  } else {
                    SHX_FeedbackModal_SuccessPage(averageRating);
                  }
                })
                .catch((error) => {
                    console.error('Error:', error);
                    SHX_FeedbackModal_enableSubmitButton();
                });
            });
    });
  </script>
{% endif %}