Show or hide the sections or collections based on selected city

[nrj211121]

On my website, products are displayed to users based on their respective cities. However, there is an issue where if a particular city does not have product availability in a specific category or collection, the user still sees the collection title on the homepage. This is because we have listed all collections on the homepage, and users also see collections on the collections page. I want to ensure that when users select a city, the contents on the homepage are displayed according to that specific city, rather than showing a blank title. To achieve this, we can create specific collections for each city. However, the concern is how to ensure visibility for city-wise users. 

For reference here is my website link -  https://suchalisartisanbakehouse.com

and my website city selector codes are as follows- 

{% if settings.enable-citypopup == true %}
<div class="city-popup-main">
  <div class="city-popup-wrap">
    <div class="city-popup-content">
      <span class="close-city-popyp">close</span>
      {% if settings.cityp-heading != blank %}
      <h2 class="cp-title">{{ settings.cityp-heading }}</h2>
      {% endif %}
      {% if settings.cityp-text != blank %}
      <div class="cp-subtitle">
        <p>{{ settings.cityp-text }}</p>
      </div>
      {% endif %}
    <div class="select-city-wrap">
      <select class="city-name">
        <option value="">Select your city</option>
        {% if settings.cityname1 != blank %}
        <option value="{{ settings.cityname1 | downcase }}">{{ settings.cityname1 }}</option>
        {% endif %}
        {% if settings.cityname2 != blank %}
        <option value="{{ settings.cityname2 | downcase }}">{{ settings.cityname2 }}</option>
        {% endif %}
        {% if settings.cityname3 != blank %}
        <option value="{{ settings.cityname3 | downcase }}">{{ settings.cityname3 }}</option>
        {% endif %}
         {% if settings.cityname4 != blank %}
        <option value="{{ settings.cityname4 | downcase }}">{{ settings.cityname4 }}</option>
        {% endif %}
      </select>
      <button type="button" class="submit-city-name Button Button--primary">Submit</button>
    </div>
    </div>
  </div>
</div>
{% endif %}

And here my script-

var citySelector = document.querySelector('.submit-city-name');
citySelector.addEventListener("click", function(){
  var selectedCity = document.querySelector('.city-popup-content .select-city-wrap select.city-name').value;;
  if(selectedCity != ''){
  //localStorage.setItem('selectedCity', selectedCity);
    setCookie("selectedCity",selectedCity,15);
  }
if (selectedCity === 'other-cities') {
      var city4URL = 'https://newteststore143.myshopify.com/pages/hampers'; // Replace with the actual URL for city4
      window.location.href = city4URL;
    }
  $.ajax({
      type: "POST",
      url: '/cart/clear.js',
      data: '',
      dataType: 'json',
      success: function() { 
        window.location.reload()
      },
      error: function(XMLHttpRequest, textStatus) {
        window.location.reload()
      }
    });
  
  console.log('changed city');
});

const cityName = getCookie("selectedCity");
console.log('cityName '+cityName);
if(cityName == null || cityName == ''){
  document.querySelector('.city-popup-main').style.display = 'block';
}else{
  if(cityName == 'delhi-ncr') {
  document.querySelector('.cityname-qrrow-wrpa span.cityname').innerHTML = 'delhi-NCR';
  }else{
    document.querySelector('.cityname-qrrow-wrpa span.cityname').innerHTML = cityName;
  }
}


const ProductGridItem = document.querySelectorAll('.ProductList .Grid__Cell');
ProductGridItem.forEach(gridcell =>{
    gridcell.style.display = 'none'
    if(gridcell.classList.contains(cityName)){
        gridcell.style.display = 'inline-block'
    }
});

  setTimeout(function(){
    const ProductCarouselItem = document.querySelectorAll('.ProductList--carousel .Carousel__Cell');
    console.log('ProductCarouselItem ',ProductCarouselItem.length);
    let left = 0;
    ProductCarouselItem.forEach(gridcell =>{
      gridcell.style.display = 'none'
      if(gridcell.classList.contains(cityName)){
        gridcell.style.display = 'inline-block';
        gridcell.style.left = left+'%';
        left += 25;
      }
    });
  },2000);

const currectPageUrl = window.location.href; 
if(currectPageUrl.includes('/cart')){
  console.log('cart page', cityName);
  setTimeout(function(){
    document.querySelector('footer.Cart__Footer input.city-selected').value = cityName;
  },4000);
}

setTimeout(function(){
  document.querySelector('#sidebar-cart input.city-selected').value = cityName;
},4000);




document.querySelector('.city-popup-content .close-city-popyp').addEventListener('click', function(){
  window.location.reload();
});

document.querySelector('a.change-city-icon').addEventListener('click', function(){
  document.querySelector('.city-popup-content .select-city-wrap select.city-name').value = cityName;
  document.querySelector('.city-popup-main').style.display = 'block';
});

function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}