Блог

Я работаю над проектом ClickFunnels, в котором мне пришлось создать пользовательскую страницу оформления заказа с двумя переключателями и предложением. У меня есть пользовательский jQuery, работающий правильно, но мне нужно интегрировать его в ClickFunnel.

Несколько часов исследований не дали ничего полезного (я попробовал CF Power Scripts и CF ProTools), причем большая часть того, что я нашел, была очень простой пользовательской проверкой, которая не использует никаких пользовательских jQuery.

Как мне это сделать, чтобы он работал в ClickFunnels и обрабатывал транзакцию через Stripe?

Чтобы увидеть рабочий код моего пользовательского кода, посетите https://codepen.io/BFrancoeur/pen/YzQmoOQ

Код:

HTML

 <div class="wrapper">
  <div class="col50">
    <div class="inner">
      <form>
        <div class="form-group">
          <ul class="products">
            <li class="product">
              <div id="product_1">
                <input id="ebook" type="radio" name='product' value="27.00">
                <label for="ebook">eBook Only <span>$27.00</span></label>
              </div>
            </li>
            <li class="product">
              <div id="product_2">
                <input id="audiobook" type="radio" name='product' value="36.95" checked="checked">
                <label for="audiobook">eBook   Audiobook <span>$36.95</span></label>
              </div>
            </li>
          </ul>
        </div>
      </form>
    </div>
  </div>
  <div class="col50">
    <div class="inner">
      <div id="bump-offer" class="bump-offer">
        <input type="checkbox" id="advanced-acquisition-theory" name="bump-offer" value="29.95">
        <label for="advanced-acquisition-theory">Yes, Add <em>Advanced Acquisition Theory To My Order! (you're saving 85% today)</em></label>
      </div>
      <div class="order-summary">
        <form action="">
          <ul class="purchase-summary">
            <li class="text-red big">
              Regular Price: <span><s>$97</s></span>
            </li>
            <li class="summary-item">
              Your Price Today: <span>$27.00</span>
            </li>
            <li id="li-audiobook" class="summary-item" value="audiobookAddon">
              AC Audiobook: <span>$9.95</span>
            </li>
            <li id="li-acq-theory" class="summary-item" value="acquisitionTheoryBump">
              Advanced Acquisition Theory: <span><span>$29.95</span>
            </li>
            <li id="li-subtotal" class="summary-item">
              Subtotal: <span id="subtotalValue"></span>
            </li>
            <li class="summary-item text-grey">
              Tax: <span id="taxValue"></span>
            </li>
            <li id="li-total" class="summary-item big">
              Total: <span id="totalValue"></span>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</div>
 

CSS

 body {
  height: 100vh;
  background-color: #f0f0f0;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
  font-family: "Open Sans", sans-serif;
}

.col50 {
  width: 50%;
  padding: 0 10%;
}

.col50:last-child {
  padding: 30px;
  background-color: #f0f0f0;
}

.text-red {
  color: #ff0000;
}

.text-grey {
  color: #888;
}

.big {
  font-size: 26px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

ul {
  list-style-type: none;
  padding: 15px;
}

ul li {
  width: 100%;
  font-weight: 600;
  line-height: 2;
}

li {
  text-align: left;
}

li > span {
  float: right;
}

.products div {
  width: 100%;
}

.products div label {
  width: 100%;
  text-align: left;
}

.products label span {
  float: right;
  text-align: right;
}

#li-audiobook {
  display: none;
}

#li-acq-theory {
  display: none;
}
 

jQuery

 import $ from "https://cdn.skypack.dev/jquery@3.6.0";

$("#ebook").attr("checked", "checked");

$("#li-ebook").hide();
$("#li-audiobook").hide();

function calculateTax(amount, tax) {
  return amount * tax;
}

// "validate" was a too generic name
// changed to "updateCart"
function updateCart() {
  var sum = 0;
  var tax = 0;
  var total = 0;
  var $ebookRadio = $("#ebook");
  var $audiobookRadio = $("#audiobook");
  var $checkboxOffer = $("#advanced-acquisition-theory");

  // If ebook is checked add it to the sum
  if ($ebookRadio.is(":checked")) {
    sum = parseFloat($ebookRadio.val());
  }
  // If not checked it means audiobook is checked
  else {
    sum = parseFloat($audiobookRadio.val());
  }

  //If checkbox offer checked add to the sum
  if ($checkboxOffer.is(":checked")) {
    // Store original sum in float format
    var currentSum = parseFloat(sum);
    // Store checkbox value um float format
    var value = parseFloat($checkboxOffer.val());

    // Add up floats to get final sum
    sum = currentSum   value;
  }

  // Calculate tax based on sum
  // Assuming tax is 15%
  // tax = calculateTax(sum, 0.15); // No tax to be applied

  // Calculate total
  total = sum   tax;

  // Update UI
  $("#subtotalValue").text("$"   sum.toFixed(2));
  $("#taxValue").text("$"   tax.toFixed(2));
  $("#totalValue").text("$"   total.toFixed(2));
}

// Listen to both radio and checkbox events
$("input[type=radio][name=product], #advanced-acquisition-theory").on(
  "change",
  function () {
    updateCart();
    updateOrderSummary();
  }
);

function updateOrderSummary() {
  if ($("#ebook").is(":checked")) {
    $("#li-audiobook").hide();
  }
  if ($("#audiobook").is(":checked")) {
    $("#li-audiobook").show();
  }

  if (!$("#advanced-acquisition-theory").is(":checked")) {
    $("#li-acq-theory").hide();
  }
  // Did this because using 'else' made it display no matter what
  if ($("#advanced-acquisition-theory").is(":checked")) {
    $("#li-acq-theory").show();
  }
}

// Update the cart once on page load
updateCart();

// update Order Summary on page load
updateOrderSummary();
 

Заранее спасибо за вашу помощь!