Блог

Главная - Вопросы по программированию - Как правильно настроить модальный магазин с помощью FastSpring?

Как правильно настроить модальный магазин с помощью FastSpring?

#javascript #html #modal-dialog

#javascript #HTML #модальный диалог

Вопрос:

В настоящее время я изучаю FastSpring, но их примеры очень плохо документированы, поэтому я с трудом понимаю даже самые простые примеры того, как создать модальный диалог для моих продуктов. По ссылке ниже у них есть пример для «Купить Photo.io Приложение», но их соответствующий код JavaScript завершается с ошибкой на моей тестовой веб-странице.

https://fastspringexamples.com/full-cart/modal-carts/

В частности, в строке # 176:

 var fsb_modal = document.getElementById('fsb-modal');

После копирования частей на мою тестовую веб-страницу, именно здесь сценарий прерывается. Откуда fsb-modal берется? Где это создано? Нет объяснения, как код «JavaScript» встроен в HTML. Любая помощь приветствуется!

PS Моя тестовая веб-страница содержит script директиву из моей тестовой учетной записи:

 <script
    id="fsc-api"
    src="https://1234567890.cloudfront.net/sbl/0.8.3/fastspring-builder.min.js"
    type="text/javascript"
    data-storefront="x-y-z.test.onfastspring.com/popup-x-y-z">
</script>

Комментарии:

1. что вы подразумеваете под fsb-modal тем, откуда идет? Это часть HTML.

2. В этом суть. Это не так. Откройте ссылку, где она?

3. Не уверен, что вы имеете в виду. В прикрепленной ссылке перейдите на вкладку HTML и посмотрите строку 76.

4. Что в мире … мой chrome ничего не нашел, когда я открываю «Найти на странице …». Я бы принял это как ответ

5. Обязательно добавлю это в качестве ответа.

Ответ №1:

div with id fsb-modal является частью HTML и описывает содержимое модальной корзины покупок. По ссылке, которую вы упомянули, она находится на вкладке HTML в строке 76:

 <!--
    This is the modal shopping cart.  The contents of the below will be populated by the handlebars script defined below.
-->
<div id="fsb-modal" class="fsb-modal">
    <div class="fsb-modal-content" id="fsb-modal-content">
        <div class="fsb-modal-header" style="background: #28a745; color: #ffffff;">
            <span id="fsb-close" class="fsb-close">amp;times;</span>
            <span class="fsb-cart_title">Shopping Cart</span>
        </div>
        <div class="fsb-modal-body">
            <div id="fsb_error" class="fsb-alert fsb-alert-danger" role="alert">
                <p class="fsb-alert-heading"><strong>I'm sorry, there was an issue.</strong></p>
                <p id="fsb_error_msg"></p>
            </div>
            <div id="fsb" data-fsc-selections-smartdisplay>
                <div data-fsc-selections-smartdisplay data-fsc-items-container='fastspring_shopping_cart' data-fsc-filter="selected=true" class="fsb-container-fluid px-5 py5">
                </div>
            </div>
            <div data-fsc-selections-smartdisplay-inverse>
                <p class="fsb-emptyCart">Your cart is empty.</p>
            </div>
        </div>
    </div>
</div>