Question

我正在学习shopify，我试图根据下拉菜单中的价格范围过滤我的产品，我有一个下拉列表

{% assign chooseprice = "100,1000,10000,100000" %}
<select id="choosePriceSelected">
    <option value=""{% if select == "" %} selected{% endif %}>Select maximum price</option>
    {% assign pricearray = chooseprice | split: ',' %}
    {% for chooseprice in pricearray %}
        {% assign price = chooseprice | strip %}
        <option value="{{ price }}">{{ price }}</option>
    {% endfor %}
</select>

<p>price: {{ filterprice  }}</p>

我想根据所选值过滤产品价格范围。液体视图如下：

{% if item.object_type == 'product' %}
      {% assign product = item %}

       {% if product.price < 10000 %} 
           //instead of 10000 i want to use filterprice
           {% include 'product-grid-item' %}
       {% else %}
            <p>No results below chosen price range</p>
       {% endif %}
{% else %}

我用https://themes.shopify.com/themes/brooklyn/styles/classic - 购买布鲁克林主题渲染的html在下面给出

<select id="choosePriceSelected">
    <option value="">Select maximum price</option>
        <option value="100">100</option>
        <option value="1000">1000</option>
        <option value="10000">10000</option>
        <option value="100000">100000</option>
</select>

<div class="grid__item grid-product large--one-third medium--one-half">
    <div class="grid-product__wrapper">
        <div class="grid-product__image-wrapper">
            <a class="grid-product__image-link" href="/products/asian-shoes-wonder-13-grey-firozi-mens-sports-shoes">
                <style>
                    @media screen and (min-width: 591px) {
                        .ProductImage-1000425029662 {
                            max-width: 415.0px;
                            max-height: 415px;
                        }
                        #ProductImageWrapper-1000425029662 {
                            max-width: 415.0px;
                        }
                    }
                    @media screen and (max-width: 590px) {
                        .ProductImage-1000425029662 {
                            max-width: 295.0px;
                        }
                        #ProductImageWrapper-1000425029662 {
                            max-width: 295.0px;
                        }
                    }
                </style>
                <div id="ProductImageWrapper-1000425029662" class="product--wrapper">
                    <div style="padding-top:100.0%;">
                        <img class="product--image lazyload ProductImage-1000425029662"
                             src="//cdn.shopify.com/s/files/1/2484/8758/products/61hDBTa6urL._UL1500_150x150.jpg?v=1508924423"
                             data-src="//cdn.shopify.com/s/files/1/2484/8758/products/61hDBTa6urL._UL1500_{width}x.jpg?v=1508924423"
                             data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                             data-aspectratio="1.0"
                             data-sizes="auto"
                             alt="Asian Shoes Wonder 13 Grey Firozi Men&#39;s Sports Shoes">
                    </div>
                </div>
                <noscript>
                    <img class="grid-product__image" src="//cdn.shopify.com/s/files/1/2484/8758/products/61hDBTa6urL._UL1500_1024x.jpg?v=1508924423" alt="Asian Shoes Wonder 13 Grey Firozi Men&#39;s Sports Shoes">
                </noscript>
            </a>
        </div>
        <a href="/products/asian-shoes-wonder-13-grey-firozi-mens-sports-shoes" class="grid-product__meta">
            <span class="grid-product__title">Asian Shoes Wonder 13 Grey Firozi Men's Sports Shoes</span>
            <span class="grid-product__price-wrap">
        <span class="long-dash">—</span>
        <span class="grid-product__price">
             <span class="visually-hidden">Regular price</span>$499</span>
      </span>
        </a>
    </div>
</div>

<div class="grid__item grid-product large--one-third medium--one-half">
    <div class="grid-product__wrapper">
        <div class="grid-product__image-wrapper">
            <a class="grid-product__image-link" href="/products/lee-cooper-mens-leather-boots">
                <style>
                    @media screen and (min-width: 591px) {
                        .ProductImage-1000523235358 {
                            max-width: 310px;
                            max-height: 188.27333333333334px;
                        }
                        #ProductImageWrapper-1000523235358 {
                            max-width: 310px;
                        }
                    }
                    @media screen and (max-width: 590px) {
                        .ProductImage-1000523235358 {
                            max-width: 590px;
                        }
                        #ProductImageWrapper-1000523235358 {
                            max-width: 590px;
                        }
                    }
                </style>
                <div id="ProductImageWrapper-1000523235358" class="product--wrapper">
                    <div style="padding-top:60.73333333333334%;">
                        <img class="product--image lazyload ProductImage-1000523235358"
                             src="//cdn.shopify.com/s/files/1/2484/8758/products/81Z-CbrJ9sL._UL1500_150x150.jpg?v=1508924887"
                             data-src="//cdn.shopify.com/s/files/1/2484/8758/products/81Z-CbrJ9sL._UL1500_{width}x.jpg?v=1508924887"
                             data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                             data-aspectratio="1.646542261251372"
                             data-sizes="auto"
                             alt="Lee Cooper Men&#39;s Leather Boots">
                    </div>
                </div>
                <noscript>
                    <img class="grid-product__image" src="//cdn.shopify.com/s/files/1/2484/8758/products/81Z-CbrJ9sL._UL1500_1024x.jpg?v=1508924887" alt="Lee Cooper Men&#39;s Leather Boots">
                </noscript>
            </a>
        </div>
        <a href="/products/lee-cooper-mens-leather-boots" class="grid-product__meta">
            <span class="grid-product__title">Lee Cooper Men's Leather Boots</span>
            <span class="grid-product__price-wrap">
        <span class="long-dash">—</span>
        <span class="grid-product__price">
             <span class="visually-hidden">Regular price</span>$2,799</span>
      </span>
        </a>
    </div>
</div>

使用jquery在shopify中更改用户定义的变量

0 个答案: