0

我需要使用 Javascript 和 Css 有条件地显示我的购物车按钮。我的目标是在购物车内没有物品时隐藏按钮。

我的按钮代码是：

<span id="mycartbutton" style="float: right; clear: both;">
<a class="button"href="$(shopping_cart_url)">Mon panier</a>
</span>

当购物车中没有任何内容时，url 看起来就像这样：

/.../mode=show_cart

当存在一个或多个项目时，URL 如下所示：

/.../mode=show_cart&cart_id=10332&first_reservation_id=717

不幸的是，我不是编码员，也没有任何 javascript 知识，但我想可以根据呈现的 url 进行检查。

实际上我使用以下javascript：

<script type='text/javascript'>
function on_site_form_loaded(event) {
    if (event=='product_list')
        document.getElementById('mycartbutton').style.display='none';
    }
</script>

..这让我可以根据需要隐藏产品列表上的按钮，但即使有些物品在购物车内。

有人可以告诉我必须使用哪个条件代码来检查 url 是否包含例如文本“cart_id”？这意味着购物车内有东西，让我隐藏按钮。

4

5 回答 5

0

如果你的页面是这样设置的：

<ul id="cart">
   <li>Item 1</li>
   <li>Item 2</li>
</ul>
<span id="mycartbutton"...>...</span>

然后你可以使用这个 CSS：

#cart:empty~#mycartbutton {display:none}

但是，这仅在购物车按钮是购物车本身的兄弟（如果它们之间有元素，请使用+而不是~），并且仅当购物车的项目是购物车元素的第一级子元素时才有效。

如果这不可能，您将需要使用 JavaScript。基本上，您可以随时检查项目的数量，例如document.getElementById('cart').children.length，并使用该信息来设置display:none或display:block在您的按钮上。

于 2013-04-12T11:44:29.783 回答
0

url.indexOf()应该为你工作。尝试这个：

<script>
    function check(url){
        if(url.indexOf("cart_id")>-1){
            // cart_id present do something
        }
    }
</script>
于 2013-04-12T11:44:53.920 回答
0

如果总 URL 在字符串 Url 中，则搜索搅拌“cart_id”并将其放在布尔值中。

cartIDFound = Url.search("cart_id");

if (cartIdFound){
    // ... cart id is found. items are in cart .. do domething
    // .. first,show button by setting visibility to visible and showing display
    document.getElementById('mycartbutton').style.visibility='visible';
    document.getElementById('mycartbutton').style.display='inline';
    // ... next, continue

}
else {
      //  .. cart id wasn't found; no items in cart.. do something different
      // first, hide the cart button
      document.getElementById('mycartbutton').style.visibility='hidden';
     document.getElementById('mycartbutton').style.display='none';
     // ... next, continue
}
于 2013-04-12T11:45:41.073 回答
0

使用 jQuery hide()函数

<script type='text/javascript'>
    function on_site_form_loaded(event) {
        if (event=='product_list')
            $("#mycartbutton").hide();
    }
</script>
于 2013-04-12T11:46:14.773 回答
0

我终于找到了使用 CSS 的最佳解决方案：

#mycartbutton a.button {
    display: none; 
}

#mycartbutton a.button[href*=cart_id] { 
    display: inline-block; 
}

Iit 更容易，更可靠，因为在我的案例中使用 JavaScript 时遇到了一些冲突。

于 2013-04-12T22:41:44.520 回答