0

私は、Business Catalyst を使用してクライアントの e コマース サイトに取り組んでいます。

「メニュー」ページで、在庫切れのすべての製品の画像の上に「在庫切れ」の DIV を表示したいと考えています。

DIV は、BC 独自のコンテンツ タグ {tag_instock} によってトリガーされる必要があります。
{tag_instock} が 0 の場合、在庫切れのすべての商品に div.nostock を表示する必要があります。
現時点では、すべての商品ではなく、在庫切れの商品を 1 つ以上表示しています。

HTML:

<ul class="product-images">
        <div id="nostock" class="nostock" style="display: none;"><h2>Out of Stock</h2></div>
            <li>img_one</li>
            <li>img_two</li>
            <li>img_three</li>
        </ul>

脚本：

            $(document).ready(function() {
            var stock = "{tag_instock}";
            if (stock == 0) {
                document.getElementById('nostock').style.display = "block"

            };
        });

jquery と javascript の使用についてはよくわかりません。このソリューションに適しているのはどれですか?

詳しく説明する必要がある場合はお知らせください。どんな助けでも大歓迎です。

ありがとうございました。

4

3 に答える 3

0

3 つの画像が常に同じである場合は、それらを 1 つの画像に結合します。これを行うと、contentプロパティを使用して画像をオーバーレイする CSS クラスを作成できます。問題のにクラスを動的に追加することdivで、必要な効果を実現できます。

クラスは次のようになります。

.no-stock-image:after {
    content: url(images/out-of-stock.png);
    position: absolute;
    top: 10px;
    left: -10px;
}

当然、位置調整が必要になります。

于 2013-09-16T21:05:06.193 に答える
0

デモ目的でデータ属性を使用して株価をシミュレートします...これがうまくいくかどうか教えてください、ここにフィドルがあります

$(function() {
  $('li').each(function() {
 //  var stock = "{tag_instock}";
     var stock = $(this).data('stock');

     if (stock == 0) {
         $(this).append('<div class="nostock">Out of Stock</div>');
     }
     if (stock > 0) {
         $(this).append('<div class="instock">In Stock '+stock+'</div>');
     }
   });
});

少しやりすぎて、instock と instock の値はさておき、Fiddle を更新しました。

于 2013-09-16T22:43:26.607 に答える