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

1 つ以上のアイテムが存在する場合、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}

ただし、これが機能するのは、カート ボタンがカート自体の兄弟であり (その間に 要素がある場合は、+代わりに を使用~)、カートのアイテムが cart 要素の第 1 レベルの子である場合に限られます。

これが不可能な場合は、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

CSSを使用して最終的に最適なソリューションを見つけました：

#mycartbutton a.button {
    display: none; 
}

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

私の場合、JavaScript を使用していくつかの競合が発生したため、より簡単で信頼性が高くなります。

于 2013-04-12T22:41:44.520 に答える
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 に答える