section-product-quiz.liquid

{% comment %} product-quiz.liquid {% endcomment %}
{{ 'product-quiz.css' | asset_url | stylesheet_tag }}
<script defer src="{{ 'product-quiz.js' | asset_url }}"></script>

<div class="wrapper">
  {% comment %} The background position value = the width of the image {% endcomment %}
  <section
    class="product-quiz-section"
    style="
      background:
      {% if section.settings.background_image != blank %}
        url({{ section.settings.background_image | image_url }})
      {% else %}
        url({{ 'bgw-quiz-bg_345e94ff-b5be-4538-97f2-d399d7bf96da.png' | file_img_url:'master'  }})
      {% endif %},
      linear-gradient(131deg, {{ section.settings.background_gradient_start }} 25.01%, {{ section.settings.background_gradient_end }} 124.72%);
      background-position: {{ section.settings.background_image_width }}px center, center center;
      background-repeat: no-repeat;
      background-size: contain, auto;
    "
  >
    <div class="product-quiz-container">
      <img
        class="product-quiz-background-title"
        {% if section.settings.background_title_image != blank %}
          src="{{ section.settings.background_title_image | image_url }}"
        {% else %}
          src="{{ 'bgw-product-quiz-bg-title.svg' | file_url }}"
        {% endif %}
        alt=""
        width=""
        height=""
      >
      <div class="wrapper-callout">
        <h2>{{ section.settings.headline | escape }}</h2>
        <p class="description">{{ section.settings.description | escape }}</p>
        <button class="quiz-link popup-toggle" data-target="product-quiz-popup">
          {{- section.settings.link_text | escape -}}
        </button>
      </div>
    </div>

    <div id="product-quiz-popup" class="popup-hide">
      <div id="product-quiz-root"></div>
    </div>
  </section>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Event delegation to capture clicks on any element with the class 'popup-toggle'
    document.addEventListener('click', function(event) {
      // Check if the clicked element has the class 'toggle'
      if (event.target.classList.contains('popup-toggle')) {
        // Prevent the default action of the event (e.g., following a link)
        event.preventDefault();

        // Get the 'data-target' attribute of the clicked element
        var target = event.target.getAttribute('data-target');
        if (target) {
          // Select the target element by ID and toggle the 'hide' class
          var targetElement = document.getElementById(target);
          if (targetElement) {
            targetElement.classList.toggle('popup-hide');

            // If the modal is open, add the 'modal-open' class to the body
            if (!targetElement.classList.contains('popup-hide')) {
              document.body.classList.add('modal-open');
            } else {
              // If the modal is closed, remove the 'modal-open' class from the body
              document.body.classList.remove('modal-open');
            }
          }
        }
      }
    });
  });
</script>

<style>
  .product-quiz-section {
    color: #FFF;
    font-family: var(--FONT-STACK-HEADING);
    border-radius: 8px;
    padding: 45px 68px;
    color: #ffffff;
  }
  .product-quiz-container {
    position: relative;
    max-width: 558px;
    text-align: start;
    padding-block: 69px 87px;
  }
  .product-quiz-background-title {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
  }
  .wrapper-callout {
    position: relative;
    z-index: 1;
  }
  .product-quiz-container h2 {
    color: #FFF;
    font-size: 62px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 62px */
    margin-block: 0 30px;
  }
  .product-quiz-container .description {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
    margin-block: 0 20px;
  }
  .product-quiz-container .quiz-link {
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 133.333% */
    letter-spacing: 0.32px;
    text-transform: uppercase;
    border-block-end: 1px solid;
  }
  #product-quiz-popup {
    overflow: hidden auto;
    position: fixed;
    /* .5 x header height */
    top: calc(50% + 25px);
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 10px;
    width: 90vw;
    max-width: calc(var(--site-width) - 110px);
    max-height: 90vh;
    box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.09),
      0px 11px 12px 7px rgba(0, 0, 0, 0.02);
    -moz-transition: all 120ms;
    -webkit-transition: all 120ms;
    -o-transition: all 120ms;
    transition: all 120ms;
    z-index: 99;
    background-color: #6578ec;
  }
  .popup-hide {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0.8) !important;
  }
  body.modal-open::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(3px);
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 10;
  }

  body.modal-open {
    overflow: hidden; /* Prevent scrolling when the modal is open */
  }
</style>

{% schema %}
{
  "name": "Product Quiz",
  "class": "product-quiz",
  "settings": [
    {
      "type": "text",
      "id": "headline",
      "label": "Headline",
      "default": "Get paired with the perfect product"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description",
      "default": "Finding the right product that fits your needs is tough. Our quiz helps narrow the choices."
    },
    {
      "type": "text",
      "id": "link_text",
      "label": "Link Text",
      "default": "Take the Quiz"
    },
    {
      "type": "image_picker",
      "id": "background_title_image",
      "label": "Background Title Image",
      "info": "Set by default"
    },
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image",
      "info": "Set by default"
    },
    {
      "type": "text",
      "id": "background_image_width",
      "label": "Background Image Width",
      "default": "672",
      "info": "Specify the width of the background image in pixels (.5x width if 2x image)"
  },
    {
      "type": "color",
      "id": "background_gradient_start",
      "label": "Background Gradient Start",
      "default": "#F37053"
    },
    {
      "type": "color",
      "id": "background_gradient_end",
      "label": "Background Gradient End",
      "default": "#7A67F1"
    }
  ],
  "presets": [
    {
      "name": "Product Quiz",
      "category": "Custom"
    }
  ]
}
{% endschema %}