Shopify Question posted in
The Shopify help center can be found here.

Filter city cards based on select dropdown value on client side only – Shopify

$(function() {
        $('#cityselector').change(function(){
            $('.city').hide();
            $('#' + $(this).val()).show();
        });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
            <Select id="cityselector">
                <option selected value="All">All</option>
                <option value="Pune">Pune</option>
                <option value="Chennai">Chennai</option>
                <option value="Bengaluru">Bengaluru</option>
            </Select>
        </div>
        <div class="row">
            <div class="col-md-4 city" id="Pune">
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Pune- Koregaon Park</span>                    
                    </div>

                </div>
            </div>
            <div class="col-md-4 city" id="Pune">
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Pune- Vimannagar</span>                    
                    </div>

                </div>
            </div>
             <div class="col-md-4 city" id="Chennai">
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Chennai</span>                    
                    </div>

                </div>
            </div>

             <div class="col-md-4 city" id="Bengaluru">
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Bengaluru</span>                    
                    </div>

                </div>
            </div>

        </div>

I am building a new page called stores on shopify frontend. But, I am not going to use any database for that, I just wanted to filter or show/hide cards based on city selection from dropdown. I have already filter cities using jquery show hide.But it’s not working when there are multiple cards with same city name. It’s showing only one single city card using that. Also, I need to show all city cards, when user does select All option from dropdown. Kindly help me out with that.

Tags:

2

Answers


  1. 0

    You can just check for a value All to show all .city elements, just like this:

    $(function() {
     $('#cityselector').change(function(){
          if($(this).val() == 'All')
              return $('.city').show();
          $('.city').hide();
          $('#' + $(this).val()).show();
     });
 });

    EDIT:

    I just noticed that it’s not the only problem you had, to solve the same city’s names problem, I would work with classes instead of working with IDs.

    The reason this problem takes place, is because jQuery selectors by ID will always return one element, even if there are multiple elements with the same ID

    Login or Signup to reply.
  2. 0

    Insted of id, give class names:

    $(function() {
        $('#cityselector').change(function(){
            if($(this).val()=="All"){$('.city').show(); return;}else{$('.city').hide();}
            $('.' + $(this).val()).show();
        });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
            <Select id="cityselector">
                <option selected value="All">All</option>
                <option value="Pune">Pune</option>
                <option value="Chennai">Chennai</option>
                <option value="Bengaluru">Bengaluru</option>
            </Select>
        </div>
        <div class="row">
            <div class="col-md-4 city Pune" >
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Pune- Koregaon Park</span>                    
                    </div>

                </div>
            </div>
            <div class="col-md-4 city Pune" >
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Pune- Vimannagar</span>                    
                    </div>

                </div>
            </div>
             <div class="col-md-4 city Chennai" >
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Chennai</span>                    
                    </div>

                </div>
            </div>

             <div class="col-md-4 city Bengaluru" >
                <div class="card">
                    <div class="card-image">

                    </div>  
                    <div class="card-content">
                        <span class="card-title">Bengaluru</span>                    
                    </div>

                </div>
            </div>

        </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search