Как сделать загрузку формы на странице без обновления - PullRequest
Новая
       0

Как сделать загрузку формы на странице без обновления

1 голос
/ 05 мая 2020

Я новичок в кодировании и застрял. Я пытаюсь помочь создать веб-сайт, который использует BoldCommerce для продажи своих продуктов. Используя функцию build-a-box. Проблема в следующем: шаг 1: выберите размер окна. Шаг 2: частота заказа. Шаг 3: выберите варианты.

Мы хотим, чтобы контент загружался динамически, когда вы нажимаете «выбрать варианты», а не пересылать на другую страницу. Таким образом, для потенциальных клиентов будет более плавно и легко ориентироваться (в основном меньше шагов до оформления заказа).

Кнопка выбора вариантов перенесет вас на страницу в зависимости от выбранной вами частоты заказа. Например, если вы щелкали каждые две недели из раскрывающегося списка, при нажатии «выбрать варианты» вы попадете на страницу, где все продукты будут добавлены в корзину как продукт с двухнедельным интервалом.

Как это можно сделать? быть сделано? Я думаю Ajax, но не знаю, как использовать Ajax или jquery. Просто делаю это как новичок. Заранее большое спасибо

Я придумал другой маршрут, но мне нужны некоторые рекомендации. В форме, которую я скопировал как форму за 4 недели, и хотел знать, как я могу сделать какой-то частотный преобразователь, при котором я сохраню выбор блюд как? пока покупатель не выберет частоту?

Код для этого выглядит следующим образом: data = {"form_type": "product", "utf8": "\ u2713", "id": "32144866377813", " bold-ro__selector_radio_button ":" 3 "," frequency_num ":" 4 "," frequency_type ":" 2 "," frequency_type_text ":" Week (s) "," group_id ":" 137396 "," Discount_price ":" \ u00a349.95 "," _ ro_discount_percentage ":" 0 "," _ ro_unformatted_price ":" 4995 "," csrf_bold_token ":" de9c7d13738ffca80fd74b489f06b3be "," количества ": [" 1 "243], "product" option_id ": [" 32144866377813 "]," note ":" "," shopify_customer_id ":" "," email ":" "," address1 ":" "," address2 ":" "," city ":" " , "company": "", "country": "", "first_name": "", "last_name": "", "phone": "", "Province": "", "zip": "", "design_theme_id": "81617551445", "frame_token": "O4tfHwu6Wg6nauT6jXJ7PMF0agsTod2rOi4TVT2kiFKPLEAdtVQ-dHjLVcviMaof4QT2LSDpnqRrlDz8byXdZz1VQT_YJgsa8W7ulYrrLOh-un20FZ2jVRFswQMvfAexpXNuwGsgGjCB11iPxDcpCw =="}; данные ['свойства'] = (! данные ['свойства'])? {}: данные ['свойства']; данные ['атрибуты'] = (! данные ['атрибуты'])? {}: данные ['атрибуты']; данные ['свойства'] ['_ ro_subscription_box_choices'] = []; jQuery ('. Bold-product__quantity-val'). Each (function (index) {var slot = jQuery (this) .data ('slot-id'); var количества = parseInt (jQuery (this ) .val ()); data ['properties'] ['_ ro_subscription_box_choices']. pu sh ({«slot»: слот, «amount»: количество,});});

код, о котором идет речь, выглядит следующим образом: ДЛЯ МЕНЮ ЧАСТОТЫ ВЫПАДЕНИЯ: 

<div class="bold-ro__radio-div bold-ro__recurring-div bold-ro__bold-active bold-ro__sub">
<label class="bold-ro__recurring-lbl">
<input type="hidden" value="3" name="bold-ro__selector_radio_button" class="bold-ro__sub-box-radio-btn" checked="">
<span class="bold-ro__recurring-text bold-ro__subscription-only"></span>
</label>
<span class="bold-ro__see-details"><a href="javascript:;" class="bold-ro__detail-tooltip needsclick" aria-describedby="tooltip_2cbv5ccyi2">See details</a><div class="bold-ro__tooltip" role="tooltip" id="tooltip_2cbv5ccyi2" aria-hidden="true" x-placement="bottom" style="position: absolute; transform: translate3d(5px, 537px, 0px); top: 0px; left: 0px; will-change: transform; display: none;"><div class="tooltip-arrow" style="left: 55px;"></div><div class="tooltip-inner"><div align="left">
<div><strong>Subscription Details</strong></div>
<div>
<ul>
<li>Set it and forget it!</li>
<li>Pause, edit or cancel anytime.</li>
</ul>
</div>
</div></div></div></span>
<div class="bold-ro__frequency-div">
<div class="bold-ro__frequency-label">
<div class="bold-ro__order-interval-container">
<span class="bold-ro__order-interval-lbl">Select your order interval</span>
<select class="bold-ro__order-interval">
<option data-frequency-type="2" data-frequency-num="1" data-frequency-type-text="Week(s)" value="2-1">Deliver every 1 Week(s)</option>
<option data-frequency-type="2" data-frequency-num="2" data-frequency-type-text="Week(s)" value="2-2">Deliver every 2 Week(s)</option>
<option data-frequency-type="2" data-frequency-num="3" data-frequency-type-text="Week(s)" value="2-3">Deliver every 3 Week(s)</option>
<option data-frequency-type="2" data-frequency-num="4" data-frequency-type-text="Week(s)" value="2-4">Deliver every 4 Week(s)</option>
<option data-frequency-type="2" data-frequency-num="5" data-frequency-type-text="Week(s)" value="2-5">Deliver every 5 Week(s)</option>
<option data-frequency-type="2" data-frequency-num="6" data-frequency-type-text="Week(s)" value="2-6">Deliver every 6 Week(s)</option>
</select>

</div>
<input type="hidden" name="frequency_num" class="bold-ro__frequency-num" value="1">
<input type="hidden" name="frequency_type" class="bold-ro__frequency-type" value="2">
<input name="frequency_type_text" class="bold-ro__frequency-type-text" type="hidden" value="Week(s)">

<input type="hidden" class="bold-ro__group-id" name="group_id" value="137396">
<input type="hidden" class="bold-ro__discounted-price" value="£49.95" name="discounted_price">
<input type="hidden" class="bold-ro__discount-percentage" value="0" name="_ro_discount_percentage">
<input type="hidden" class="bold-ro__unformatted-price" value="4995" name="_ro_unformatted_price">
<input type="hidden" name="csrf_bold_token" value="de9c7d13738ffca80fd74b489f06b3be">
<input type="hidden" name="quantities[]" value="">
<input type="hidden" name="product_id[]" value="4624953606229">
<input type="hidden" name="variant_id[]" value="32144866377813">
<input type="hidden" name="note" value="">



</div>
</div>
</div>

ДЛЯ КНОПКИ «ВЫБРАТЬ ВЫБОР»: 

<button class="btn button bold-ro__custombutton-4624953606229">Select Choices</button>

И: 

<button type="submit" name="add" aria-label="Add to cart" class="btn product-form__cart-submit btn--secondary-accent cartbutton" data-add-to-cart="" style="display: none;">
<span data-add-to-cart-text="">

Add to cart

</span>
<span class="hide" data-loader="">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"></path></svg>
</span>
</button>

Вот JS, относящийся к кнопке 

<button class="btn button bold-ro__custombutton-4624953606229">Select Choices</button><button type="submit" name="add" aria-label="Add to cart" class="btn product-form__cart-submit btn--secondary-accent cartbutton" data-add-to-cart="" style="display: none;">
<span data-add-to-cart-text="">

Add to cart

</span>
<span class="hide" data-loader="">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"></path></svg>
</span>
</button>

<div data-shopify="payment-button" class="shopify-payment-button"><button class="shopify-payment-button__button shopify-payment-button__button--unbranded shopify-payment-button__button--hidden" disabled="disabled" aria-hidden="true">&nbsp;</button><button class="shopify-payment-button__more-options shopify-payment-button__button--hidden" disabled="disabled" aria-hidden="true">&nbsp;</button></div>

</div>
</div>
<div class="page-container drawer-page-content" id="PageContainer">

<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
<link href="https://ro.boldapps.net/app_assets/css/bold.modal.css" rel="stylesheet">
<link href="https://ro.boldapps.net/app_assets/css/bold.grid.css" rel="stylesheet">
<link href="https://ro.boldapps.net/app_assets/css/bold.product.css" rel="stylesheet">
<link href="https://ro.boldapps.net/app_assets/css/bold.ro.css" rel="stylesheet">
<script>
window.BOLD = window.BOLD || {};
window.BOLD.recurring_orders = window.BOLD.recurring_orders || {};
window.BOLD.recurring_orders.subscription_box window.BOLD.recurring_orders.subscription_box || {};
window.BOLD.recurring_orders.subscription_box.product_id = 4624953606229;
window.BOLD.recurring_orders.subscription_box.variant_id = 32144866377813;
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...