0

We’re currently working on http://goo.gl/Cxk5Aw and the client would like to add a price min / max filter on the sidebar, but we’re having an issue with keeping the segments of the url clean. I was curious if it was possible to add the min / max into our drop-down menu and have the data stored in segment_3 like we have for the pagination entry display value & sort by?

Current Code:

Drop Down List

{exp:dynamo:form return="products/specials" search_id="{segment_3}" id="options_form"}
                                <p>Show <select class="form_option" name="limit">
                                <option value="9" {if limit == 9} selected="selected"{/if}> 9 </option> 
                                <option value="18" {if limit == 18} selected="selected"{/if}> 18 </option> 
                                <option value="27" {if limit == 27} selected="selected"{/if}> 27 </option>
                                </select> 
                                per page</p>
                                <p>Sort by <select class="form_option" name="orderby"> 
                                <option value="title" {if orderby == 'title'} selected="selected"{/if}> Name </option> 
                                <option value="price" {if orderby == 'price'} selected="selected"{/if}> Price </option>
                                </select></p>
{/exp:dynamo:form}

JavaScript:

<script type="text/javascript">
$(document).ready(function() {   
    $('.form_option').change(function(e){
        console.log('Change');
        $('#options_form').submit();
    });
});
</script>

Store Code:

{exp:store:search channel="products" limit="9" dynamic="yes" orderby="date" sort="desc" dynamic_parameters="limit|orderby" search_id="{segment_3}" paginate="both" search:on_sale="yes"}
                    {exp:store:product entry_id="{entry_id}" form_class="form-horizontal" return="store/shopping-cart"}
0
{exp:dynamo:form return="products/specials/" search_id="{segment_3}" id="options_form"}
                            <p>Show <select class="form_option" name="limit">
                            <option value="9" {if limit == 9} selected="selected"{/if}> 9 </option> 
                            <option value="18" {if limit == 18} selected="selected"{/if}> 18 </option> 
                            <option value="27" {if limit == 27} selected="selected"{/if}> 27 </option>
                            </select> 
                            per page</p>
                            <p>Sort by <select class="form_option" name="orderby"> 
                            <option value="title" {if orderby == 'title'} selected="selected"{/if}> Name </option> 
                            <option value="price" {if orderby == 'price'} selected="selected"{/if}> Price </option>
                            </select> </p>
                            <p>Min: <select class="form_option" name="search:price:min"> 
                            <option value="0" {if search:price:min == '0'} selected="selected"{/if}> 0 </option> 
                            <option value="100" {if search:price:min == '100'} selected="selected"{/if}> 100 </option>
                            <option value="200" {if search:price:min == '200'} selected="selected"{/if}> 200 </option>
                            <option value="300" {if search:price:min == '300'} selected="selected"{/if}> 300 </option>
                            <option value="400" {if search:price:min == '400'} selected="selected"{/if}> 400 </option>
                            <option value="400" {if search:price:min == '500'} selected="selected"{/if}> 500 </option>
                            </select></p>
                            <p>Max: <select class="form_option" name="search:price:max"> 
                            <option value="1000" {if search:price:max == '1000'} selected="selected"{/if}> 1,000 </option> 
                            <option value="500" {if search:price:max == '500'} selected="selected"{/if}> 500 </option>
                            <option value="400" {if search:price:max == '400'} selected="selected"{/if}> 400 </option>
                            <option value="300" {if search:price:max == '300'} selected="selected"{/if}> 300 </option>
                            <option value="200" {if search:price:max == '200'} selected="selected"{/if}> 200 </option>
                            <option value="100" {if search:price:max == '100'} selected="selected"{/if}> 100 </option>
                            </select>
                            </p> 
{/exp:dynamo:form}

Product Display Set-Up:

{if segment_3 ==''}
                    {exp:store:search channel="products" limit="9" dynamic="yes" orderby="date" sort="desc" dynamic_parameters="limit|orderby" search_id="{segment_3}" paginate="both" search:on_sale="yes" search:price:min="0" search:price:max="100000"}
                    {exp:store:product entry_id="{entry_id}" form_class="form-horizontal" return="store/shopping-cart"}
                    {if:else}
                    {exp:store:search channel="products" limit="9" dynamic="yes" orderby="date" sort="desc" dynamic_parameters="limit|orderby" search_id="{segment_3}" paginate="both" search:on_sale="yes" search:price:min="{segment_3}" search:price:max="{segment_3}"}
                    {exp:store:product entry_id="{entry_id}" form_class="form-horizontal" return="store/shopping-cart"}
                    {/if}


                        <input type="text" value="1" size="3" name="item_qty" style="visibility:hidden; display:none;">
                        <div class="product">
                            {exp:channel_images:images entry_id="{entry_id}" limit="1"}
                            {product_gallery limit="1"}
                            <img src="{image:url:listing}" alt="{title}"  />
                            {/product_gallery}
                            {/exp:channel_images:images}
                            <h3><a href="{path="products/item/"}{categories show_group="1"}/{category_url_title}{/categories}/{url_title}"}">{title}</a></h3>
                            <p class="product-description">
                            {exp:trunchtml chars="60" ending="..."}{product_description}{/exp:trunchtml}  
                            </p>
                            <p class="product-price">{if on_sale}{price}{if:else}{regular_price}{/if}</p>
                            <a href="{path="products/item/"}{categories show_group="1"}/{category_url_title}{/categories}/{url_title}"}">
                            <div class="glass"></div>
                            </a>

                            <button class="add-to-cart" type="submit" value="Add to Cart"></button>
                            {!--<a href="#"><div class="add-to-cart"></div></a>--}    
                        </div>
                        {/exp:store:product}
                        {/exp:store:search}

We set it up use a version of exp:store:search or the other dependent on if segment_3 was empty or not. This allowed us to store the min / max values in the search_id which also assists in making the url cleaner and helps with the sites category filter (we don't have to account for two additional segments - min / max)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.