Jump to content

Could anyone help me to change from slider to drop down ?

Recommended Posts

Site URL: https://www.missr.com.au

I used the coding from previous posts, but it doesn't work with mine.

Knowing nothing about coding, and looking for brilliant people to help me

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    var urlCat = window.location.href.split(".com/")[1];
    if (urlCat == "store") {
      var catItem = $('a.nested-category-breadcrumb-link');
      var itemTag = $(catItem).html();
      var catDrop = "<select name='Categories' id='categories' class='catDrop'><option value='All'>All</option>";
      if (itemTag !== undefined) {
        catItem.each(function(i) {
          var fixLoc = $(this).html().trim().replace(/\s+/g, '-').replace(/&/g, '').replace('amp;', '').replace('--', '-').replace(/'/g,'').toLowerCase();
          catDrop = catDrop + '<option value=' + fixLoc + '>' + $(this).html() + '</option>';
          i++;
        });
        catDrop = catDrop + "</select>";
        $(catDrop).insertAfter($('.nested-category-title'));
      }
      if (urlCat !== undefined) {
        var fixCat = urlCat.replace(/\%27/g, "'")
        $(".catDrop").val("All");
      }
      $(".catDrop").change(function() {
        if ($(this).val() == "All") {
          window.location = "/store/";
        } else {
          window.location = "/store/" + $(this).val();
        }
      });
    }
  });
</script>
<style>
  .collection-5f36dfec3a07a2182b139d23 .nested-category-children {
    display: none !important;
  }

  .catDrop {
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-left: 50%;
    transform: translateX(-50%);
  }
</style>
Link to comment
  • Replies 1
  • Views 339
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Use this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    var urlCat = window.location.href.split(".au/")[1];
    if (urlCat == "shop4you") {
      var catItem = $('a.nested-category-breadcrumb-link');
      var itemTag = $(catItem).html();
      var catDrop = "<select name='Categories' id='categories' class='catDrop'><option value='All'>All</option>";
      if (itemTag !== undefined) {
        catItem.each(function(i) {
          var fixLoc = $(this).html().trim().replace(/\s+/g, '-').replace(/&/g, '').replace('amp;', '').replace('--', '-').replace(/'/g,'').toLowerCase();
          catDrop = catDrop + '<option value=' + fixLoc + '>' + $(this).html() + '</option>';
          i++;
        });
        catDrop = catDrop + "</select>";
        $(catDrop).insertAfter($('.nested-category-title'));
      }
      if (urlCat !== undefined) {
        var fixCat = urlCat.replace(/\%27/g, "'")
        $(".catDrop").val("All");
      }
      $(".catDrop").change(function() {
        if ($(this).val() == "All") {
          window.location = "/shop4you/";
        } else {
          window.location = "/shop4you/" + $(this).val();
        }
      });
    }
  });
</script>
<style>
  .nested-category-children {
    display: none !important;
  }

  .catDrop {
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-left: 50%;
    transform: translateX(-50%);
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.