签出页面上的BigCommerce自定义javascript不工作
我需要隐藏结帐页上的税价div。 我在checkout.html中添加了javascript代码,但它在控制台中找不到元素并出现错误。 似乎javascript在加载元素之前运行。 若我在控制台上运行脚本,它运行得很好。 如何解决这个问题? 我添加了整个checkout.html文件。 我在html文件的末尾添加了脚本签出页面上的BigCommerce自定义javascript不工作,javascript,bigcommerce,Javascript,Bigcommerce,我需要隐藏结帐页上的税价div。 我在checkout.html中添加了javascript代码,但它在控制台中找不到元素并出现错误。 似乎javascript在加载元素之前运行。 若我在控制台上运行脚本,它运行得很好。 如何解决这个问题? 我添加了整个checkout.html文件。 我在html文件的末尾添加了脚本 {{#partial "head"}} {{{ checkout.checkout_head }}} {{{ stylesheet '/assets/css/optimized
{{#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>***
{{{#部分“头”}
{{{checkout.checkout{u head}}}
{{{stylesheet'/assets/css/optimized checkout.css'}}
{{getFontsCollection}
window.language={{{langJson'optimized_checkout'}}};
{{{head.scripts}}}
{{/部分}
{{{#部分“页面”}
{{lang'checkout.title'}
除PA、TX和WA外,所有州的销售税将在步骤2期间取消。
{{{checkout.checkout\u content}}}
{{{footer.scripts}}}
{{/部分}
{{>布局/空}
***
document.querySelector('[data test=“cart taxes”]').style.display=“none”;
***
优化的单页签出的手风琴布局分阶段加载,因此您是正确的——您的JS在目标元素存在之前运行。您可以在一定的时间间隔内运行代码,但更好的解决方案是使用类似监视DOM中的更改之类的方法
下面是一个关于使用“突变观察者”的开箱即用教程:
但您也可以查看此包装器库,它消除了使用MO的许多复杂性:
但要以稍微不同的方式回答您的问题,为什么不使用CSS隐藏cart tax行项目呢?这样,您就不必担心观看DOM:
<style>
.cart-priceItem:nth-child(5) {
display: none;
}
</style>
.购物车价格项目:第n个子项(5){
显示:无;
}
优化的单页签出的手风琴布局分阶段加载,因此您是正确的——您的JS在目标元素存在之前运行。您可以在一定的时间间隔内运行代码,但更好的解决方案是使用类似监视DOM中的更改之类的方法
下面是一个关于使用“突变观察者”的开箱即用教程:
但您也可以查看此包装器库,它消除了使用MO的许多复杂性:
但要以稍微不同的方式回答您的问题,为什么不使用CSS隐藏cart tax行项目呢?这样,您就不必担心观看DOM:
<style>
.cart-priceItem:nth-child(5) {
display: none;
}
</style>
.购物车价格项目:第n个子项(5){
显示:无;
}
最好将css与数据属性一起使用:[data test=“cart taxes”]{display:none!}
元素的顺序可能会改变,数据测试属性应该更稳定。最好将css与数据属性一起使用:[data test=“cart taxes”]{display:none!}
元素的顺序可能会改变,数据测试属性应该更稳定。