Local > Hide purchase buttons when local delivery is not available

By default, Local's custom "pickup availability widgets" are just for information purposes, that is - to inform your visitors about stock availability at specific stores. The real pickup / delivery functionality needs to be set up properly within your Shopify admin, while your visitors will be able to choose a preferred delivery method (wether it's local or personal pickup) only at checkout.

With this in mind, you can still extend some of the theme's feature, like the local availability widgets, to hide the purchase buttons when an item is unavailable at a specific store. Keep in mind that users can still purchase your items if they change their preferred store because the actual purchasing (checkout process) is not happening on the theme side, but on Shopify's checkout page.

Hiding the purchase buttons however, would result into something like this:

How to hide purchase buttons

1. Go to the theme editor and open /assets/component-pickup-availability.js
2. Replace the entire contents of that file, with the following content:

if ( typeof PickupAvailabilityCompact !== 'function' ) {

  class PickupAvailabilityCompact extends HTMLElement {

    constructor(){

      super();
      this.classList.add('active');

      const widgetIntersection = (entries, observer) => {
        if (!entries[0].isIntersecting) return;
        observer.unobserve(this);
        this.fetchAvailability(this.dataset.variantId);
      }
      new IntersectionObserver(widgetIntersection.bind(this), {rootMargin: '0px 0px 50px 0px'}).observe(this);

      this.storeSelector = document.querySelector('store-selector');
      window.addEventListener('load', ()=>{
        if ( this.storeSelector ) {
          this.storeSelector.addEventListener('storechanged', e=>{
            this.fetchAvailability(this.dataset.variantId);
          })
        }
      })
      
    }

    fetchAvailability(variantId) {

      const variantSectionUrl = `${this.dataset.baseUrl}/variants/${variantId}/?section_id=helper-pickup-availability-compact`;

      fetch(variantSectionUrl)
        .then(response => response.text())
        .then(text => {
          const sectionInnerHTML = new DOMParser()
            .parseFromString(text, 'text/html')
            .querySelector('.shopify-section');
          this.renderPreview(sectionInnerHTML);
        })
        .catch(e => {
          console.log(e);
        });

    }
    
    renderPreview(sectionInnerHTML) {
      
      const selectedStore = localStorage.getItem('selected-store');
      const product = this.closest('.product-item') || this.closest('.main-product');
      if ( product ) {
        product.classList.remove('product-pickup--available');
        product.classList.remove('product-pickup--unavailable');
        product.classList.remove('product-pickup--unselected');
      }

      if ( this.storeSelector && selectedStore && this.storeSelector.storesList[selectedStore] ) {
        // search based on selected store 
        let storeFound = false;
        if ( selectedStore ) {
          sectionInnerHTML.querySelectorAll('.pickup-availability-alert').forEach(elm=>{
            if ( selectedStore == elm.dataset.store ) {
              this.innerHTML = elm.innerHTML.replace('{{ store }}', this.storeSelector.storesList[selectedStore]);
              storeFound = true;
              if ( product ) {
                if ( elm.querySelector('.alert--success') ) {
                  product.classList.add('product-pickup--available');
                } else {
                  product.classList.add('product-pickup--unavailable');
                }
              }
            }
          })
        }
        if ( !storeFound ) {
          this.innerHTML = sectionInnerHTML.querySelector('.pickup-availability-alert[data-default-unavailable]').innerHTML.replace('{{ store }}', this.storeSelector.storesList[selectedStore]);
          storeFound = true;
          if ( product ) {
            product.classList.add('product-pickup--unavailable');
          }
        }
        if ( !selectedStore || !storeFound ) {
          this.innerHTML = '';
        }
      } else {
        // search based on default store
        this.innerHTML = sectionInnerHTML.querySelector('.pickup-availability-alert[data-default-store]').innerHTML;
        if ( product ) {
          product.classList.add('product-pickup--unselected');
        }
      }

    }
    
  }

  if ( typeof customElements.get('pickup-availability-compact') == 'undefined' ) {
    customElements.define('pickup-availability-compact', PickupAvailabilityCompact);
	}

}

if ( typeof PickupAvailabilityExtended !== 'function' ) {

  class PickupAvailabilityExtended extends HTMLElement {

    constructor() {
      super();
      this.classList.add('active');
      this.fetchAvailability(this.dataset.variantId);
    }


    fetchAvailability(variantId) {

      const variantSectionUrl = `${this.dataset.baseUrl}/variants/${variantId}/?section_id=helper-pickup-availability-extended`;

      fetch(variantSectionUrl)
        .then(response => response.text())
        .then(text => {
          const sectionInnerHTML = new DOMParser()
            .parseFromString(text, 'text/html')
            .querySelector('.shopify-section');
          this.renderPreview(sectionInnerHTML);
        })
        .catch(e => {
          console.log(e);
        });

    }

    renderPreview(sectionInnerHTML) {
      const availabilityWidget = sectionInnerHTML.querySelector('#PickupAvailabilityWidget');
      if ( availabilityWidget ) {
        this.innerHTML = availabilityWidget.innerHTML;
        this.querySelectorAll('.pickup-availability-widget__location-view').forEach(elm=>{
          elm.addEventListener('click', ()=>{
            document.getElementById(`${elm.getAttribute('aria-controls')}`).classList.toggle('opened');
            elm.setAttribute('aria-selected', elm.getAttribute('aria-selected') == "true" ? "false" : "true");
          })
        })
      } else {
        console.log('error in availablity fetch');
      }

      const availabilitySidebar = sectionInnerHTML.querySelector('#PickupAvailabilitySidebar');
      if ( availabilitySidebar ) {
        if ( document.querySelector('sidebar-drawer#site-availability-sidebar') ) {
          document.querySelector('sidebar-drawer#site-availability-sidebar').remove();
        } 
        document.body.appendChild(availabilitySidebar.querySelector('#site-availability-sidebar'));
        document.querySelector('.pickup-availability-widget__more').addEventListener('click', e=>{
          e.preventDefault();
          document.getElementById('site-availability-sidebar').show();
        })
      }

    }

  }

  if ( typeof customElements.get('pickup-availability-extended') == 'undefined' ) {
    customElements.define('pickup-availability-extended', PickupAvailabilityExtended);
	}

}

1. Save, then open /assets/theme.css
2. At the very bottom of the file, paste this code snippet:

/* Hide purchase buttons when local pickup is not available */
.product-pickup--unavailable .product-item__quick-buy,
.product-pickup--unavailable .product-actions {
  display: none !important;
}

/* Hide purchase buttons when preferred store is not selected yet */
.product-pickup--unselected .product-item__quick-buy,
.product-pickup--unselected .product-actions {
  display: none !important;
}

1. Save and you're done with file editing!

2. Now, you need to make sure that you insert the compact availability block in all product pages or product grids that you have on your store

   
   

   

   

3. Disabling of purchase buttons should now be in place, but again, remember that this is just for informational purposes, as the actual checkout is still accessible and handled by Shopify.