Пользовательский JavaScript BigCommerce на странице оформления заказа не работает - PullRequest
Новая
       17

Пользовательский JavaScript BigCommerce на странице оформления заказа не работает

0 голосов
/ 28 февраля 2019

Мне нужно скрыть налоговую цену на странице оформления заказа.Я добавил код JavaScript в checkout.html, но он не находит элемент и возникающую ошибку в консоли.Кажется, JavaScript запускается до загрузки элемента.Если я запускаю скрипт на консоли, он работает хорошо.Как это решить?Я добавил весь файл checkout.html.Я добавил скрипт в конце HTML-файла. 

{{#partial "head"}}

{{{ checkout.checkout_head }}}
{{{ stylesheet '/assets/css/optimized-checkout.css' }}}
{{ getFontsCollection }}

<script type="text/javascript">
    window.language = {{{langJson 'optimized_checkout'}}};
</script>

{{{head.scripts}}}

{{/partial}}

{{#partial "page"}}
<header class="checkoutHeader optimizedCheckout-header">
    <div class="checkoutHeader-content">
        <h1 class="is-srOnly">{{lang 'checkout.title'}}</h1>
        <h2 class="checkoutHeader-heading">
            <a class="checkoutHeader-link" href="{{urls.home}}">
                {{#if checkout.header_image}}
                    <img alt="{{settings.store_logo.title}}" class="checkoutHeader-logo" id="logoImage" src="{{ checkout.header_image }}"/>
                {{ else }}
                    <span class="header-logo-text">{{settings.store_logo.title}}</span>
                {{/if}}
            </a>
        </h2>
    </div>
</header>
<div style="text-align:center;padding:4px;color: #ff0000;font-size:14px;">Sales tax will be removed during step 2 for all states, except PA, TX & WA.</div>
{{{ checkout.checkout_content }}}

{{{ footer.scripts }}}

{{/partial}}

{{> layout/empty}}

***<script type="text/javascript">
       document.querySelector('[data-test="cart-taxes"]').style.display = "none"; 
</script>***

1 Ответ

0 голосов
/ 01 марта 2019

Аккордеонная раскладка Optimized One-page Checkout загружается поэтапно, так что вы правы - ваш JS работает до того, как целевой элемент существует.Вы можете запускать свой код с интервалом, но лучшим решением было бы использовать что-то вроде Mutation Observer для отслеживания изменений в DOM.

Вот руководство по использованию Mutation Observer изthe box: http://ryanmorr.com/using-mutation-observers-to-watch-for-element-availability/

Но вы также можете проверить эту библиотеку-обертку, которая устраняет большую сложность использования MO: https://github.com/uzairfarooq/arrive

Но чтобы ответить на ваш вопрос немногоиначе, почему бы просто не скрыть позицию налога на корзину с помощью CSS?Таким образом, вам не нужно беспокоиться о просмотре DOM: 

<style>
    .cart-priceItem:nth-child(5) {
    display: none;
}
</style>
...