מחירון עם מתג

המחיר השנתי מוצג כמחיר לחודש בחיוב שנתי ולא כסכום שנתי מלא. זו הגנה ולא בחירה עיצובית: מעבר מ-39 ל-468 נראה כמו קפיצת מחיר, והמבקר עוזב לפני שהוא מבין שזו הנחה. המתג הוא role="switch" ולכן קורא מסך מכריז אם הוא דלוק. מחירון עם מתג הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים במכירה, מחירון ונגישות. באותה סדרה יש גם שאלות נפוצות, דירוג כוכבים והודעות צצות.

רכיב · מכירה · מחירון · נגישות

<!-- מחירון חודשי/שנתי: המחיר השנתי יושב ב-data-yearly -->
<style>
  .klix-pricing-switch { display: flex; align-items: center; justify-content: center;
    gap: .75rem; margin-bottom: 1.25rem }
  .klix-pricing-switch button { width: 3rem; height: 1.75rem; padding: .25rem; border: 0;
    border-radius: 999px; background: #475569; cursor: pointer; transition: background .2s ease }
  .klix-pricing-switch button[aria-checked="true"] { background: #6366f1 }
  .klix-pricing-switch button span { display: block; width: 1.25rem; height: 1.25rem;
    border-radius: 999px; background: #fff; transition: transform .2s ease }
  .klix-pricing-switch button[aria-checked="true"] span { transform: translateX(-1.25rem) }
  .klix-pricing-plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit,minmax(11rem,1fr)) }
  .klix-plan { padding: 1.25rem; border-radius: 1rem; background: #1e293b }
  .klix-plan h3 { margin: 0; font-size: 1.05rem }
  .klix-plan p { margin: .75rem 0; font-size: 1.75rem; font-weight: 900;
    font-variant-numeric: tabular-nums }
  .klix-plan p small { font-size: .8rem; font-weight: 400; color: #94a3b8 }
  .klix-plan ul { margin: 0; padding: 0; list-style: none; color: #cbd5e1; font-size: .9rem }
  html[data-motion="off"] .klix-pricing-switch button,
  html[data-motion="off"] .klix-pricing-switch button span { transition: none }
</style>

<div class="klix-pricing">
  <div class="klix-pricing-switch">
    <span>חודשי</span>
    <button type="button" role="switch" aria-checked="false" aria-label="חיוב שנתי"><span></span></button>
    <span>שנתי <small style="color:#34d399">2 חודשים מתנה</small></span>
  </div>

  <div class="klix-pricing-plans">
    <div class="klix-plan">
      <h3>בונה</h3>
      <p>₪<b class="klix-price" data-monthly="39" data-yearly="33">39</b><small> לחודש</small></p>
      <ul><li>✓ כל הכלים</li><li>✓ ללא סימן מים</li></ul>
    </div>
    <div class="klix-plan">
      <h3>מקצוען</h3>
      <p>₪<b class="klix-price" data-monthly="69" data-yearly="58">69</b><small> לחודש</small></p>
      <ul><li>✓ הכול בבונה</li><li>✓ כלי AI</li></ul>
    </div>
    <div class="klix-plan">
      <h3>סטודיו</h3>
      <p>₪<b class="klix-price" data-monthly="99" data-yearly="83">99</b><small> לחודש</small></p>
      <ul><li>✓ הכול במקצוען</li><li>✓ מספר לקוחות</li></ul>
    </div>
  </div>
</div>

<script>
(function () {
  var box = document.querySelector('.klix-pricing');
  if (!box) return;

  var sw = box.querySelector('.klix-pricing-switch button');
  var prices = box.querySelectorAll('.klix-price');

  sw.addEventListener('click', function () {
    var yearly = sw.getAttribute('aria-checked') !== 'true';
    sw.setAttribute('aria-checked', yearly ? 'true' : 'false');
    prices.forEach(function (el) {
      // תמיד מחיר לחודש. סכום שנתי מלא נראה כמו קפיצת מחיר
      el.textContent = el.getAttribute(yearly ? 'data-yearly' : 'data-monthly');
    });
  });
})();
</script>