Help / IOS/iPhone screen issue!

[dededus]

Hi,
I want to show the following fixed sticky bar on product pages: price + Reward price + installment table at the bottom of the page.

When I use the following code at the end of the section/main-product.liquid file, the code works as I want on PC and Android phones. However, on iPhone phones, the product page is locked and cannot be opened! I ask you how can I fix this problem. Thank you very much for your help.

<style>
  /* Sabit alttaki panel */
  #payment-info {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    border-top: 1px solid #ddd;
    z-index: 1000;
    font-family: Arial, sans-serif;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

@supports (-webkit-touch-callout: none) {
  /* iOS için özel CSS */
  #payment-info {
    position: sticky; /* Fixed yerine deneyebilirsiniz */
  }
}

  /* Masaüstü */
  @media (min-width: 768px) {
    #payment-info {
      flex-wrap: nowrap;
      gap: 5px;
    }

    #payment-info span:not(:last-child)::after {
      content: "|";
      margin-left: 5px;
      margin-right: 5px;
      color: #888;
    }
  }

  /* Mobil */
  @media (max-width: 767px) {
    #payment-info {
      flex-direction: column;
      align-items: flex-start;
    }

    #payment-info span {
      width: 100%;
      text-align: left;
    }

    #payment-info button {
      margin-left: 10px;
    }
  }

  /* Taksit Tablosu Butonu */
  #openModalBtn {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
  }

  #openModalBtn:hover {
    background-color: #333;
  }

  .taksit-tablosu-wrapper {
    margin: 5px;
    width: 280px;
    padding: 12px;
    cursor: default;
    text-align: center;
    display: inline-block;
    border: 1px solid #e1e1e1;
  }

  .taksit-tutari-text {
    float: left;
    width: 126px;
    color: #a2a2a2;
    margin-bottom: 5px;
  }

  .taksit-tutar-wrapper {
    display: inline-block;
    background-color: #f7f7f7;
  }

  .taksit-tutar-wrapper:hover {
    background-color: #e8e8e8;
  }

  .taksit-tutari {
    float: left;
    width: 126px;
    padding: 6px 0;
    color: #474747;
    border: 2px solid #ffffff;
  }

  .taksit-tutari-bold {
    font-weight: bold;
  }


  /* Modal */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-height: 80vh;
    overflow-y: auto;
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
</style>

<!-- Sabit Alt Panel -->
<div id="payment-info">
  <span><strong>Toplam Fiyatı:</strong> <span id="tek-cekim-fiyati">Fiyat hesaplanıyor...</span></span>
  <span>
    <strong>Havale Fiyatı:</strong> <span id="eft-fiyati">Fiyat hesaplanıyor...</span>
    <button id="openModalBtn">Taksit Tablosu 👁️</button>
  </span>
</div>

<!-- Modal -->
<div id="paytrModal" class="modal">
  <div class="modal-content">
    <span class="close" id="closeModalBtn">&times;</span>
    <div id="paytr_taksit_tablosu">
      <!-- Taksit Tablosu Buraya Yüklenecek -->
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    let lastPrice = 0;

    // Base fiyatı almak için genel bir yöntem
    function getBasePrice() {
      const priceElements = document.querySelectorAll('.price-item');
      let basePrice = 0;

      priceElements.forEach((priceElement) => {
        const priceText = priceElement.textContent.trim();
        const parsedPrice = parseFloat(priceText.replace(/[^\d.-]/g, ''));
        if (!isNaN(parsedPrice) && parsedPrice > 0) {
          basePrice = parsedPrice; // Fiyatı güncelle
        }
      });

      return basePrice;
    }

    // Fiyatı biçimlendirmek için bir fonksiyon
    function formatPrice(price) {
      return new Intl.NumberFormat('tr-TR', { style: 'currency', currency: 'TRY' }).format(price);
    }

    // EFT fiyatını ve taksit tablosunu güncelle
    function updateEFTPrice() {
      const basePrice = getBasePrice();
      if (basePrice > 0) {
        document.getElementById('tek-cekim-fiyati').textContent = formatPrice(basePrice);
        document.getElementById('eft-fiyati').textContent = formatPrice(basePrice * 0.9);

        // Taksit tablosunu güncelle
        updateTaksitTablosu(basePrice);
      }
    }

    // Taksit tablosunu güncelleme
    function updateTaksitTablosu(basePrice) {
      if (basePrice > 0 && basePrice !== lastPrice) {
        lastPrice = basePrice;
        const scriptsrc="https://www.paytr.com/odeme/taksit-tablosu/v2?token=xxx&merchant_id=xxx&amount=" +
          basePrice +
          "&taksit=12&tumu=1";
        const script = document.createElement('script');
        script.src=scriptSrc;

        const tableContainer = document.getElementById('paytr_taksit_tablosu');
        tableContainer.innerHTML = ''; // Eski tabloyu temizle
        document.body.appendChild(script);
      }
    }

    // Modal açma/kapama işlemleri
    const modal = document.getElementById('paytrModal');
    const openModalBtn = document.getElementById('openModalBtn');
    const closeModalBtn = document.getElementById('closeModalBtn');

    openModalBtn.onclick = function () {
      modal.style.display = 'block';
    };

    closeModalBtn.onclick = function () {
      modal.style.display = 'none';
    };

    window.onclick = function (event) {
      if (event.target === modal) {
        modal.style.display = 'none';
      }
    };

    // DOM değişikliklerini dinle
    const observer = new MutationObserver(() => {
      updateEFTPrice();
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Başlangıçta fiyatı güncelle
    updateEFTPrice();
  });
</script>

Shopify theme: Dawn 15.2.0

My site: https://dededus.net/

Note: This code is not active right now because it causes problems on iPhones!