Please note this feature is still in "early access" which means you may run into issues. If you experience any problems please contact [email protected] immediately for assistance. 

How to activate the delivery validator widget

Within the Store Pickup + Delivery  app click Settings  and then Local Delivery 

Scroll down until you see the Delivery validator widget section and click Enable 

Finally click Save  at the top of the screen

Now visit your store front and you should see the delivery validator widget appear at the top of the screen

When a customer enters a valid postal code they will see the following:

When a customer enters a none eligible postal code they will see this:

Customise the wording

You can customise all the text via the apps Design  settings page. Just look for the Local Delivery  section and scroll towards the bottom of the page. 

Customising the colours 

The delivery validator widget is built using HTML, CSS and a little JavaScript. This means you can easily modify the colours of all the elements via CSS.  

How to change the primary button color
Your can easily change the color of the "Go" button by adding the following code to your themes snippets/storepickup.scss.liquid  file.

.zapiet-delivery-validator__submit {
  background: #FFC107 !important;
  color: #383838 !important;
}

The above code will make the background of the button yellow and the font color dark grey.

How to change the top bar background color

Following the same principles as above add the following code to the bottom of your snippets/storepickup.scss.liquid file.

#zapiet-delivery-validator__topbar {
  background: white !important;  
}

How to change the close button color

.zapiet-delivery-validator__close svg {
  fill: #888 !important;
}

How to change the prelude color

#zapiet-delivery-validator__label {
  color: #333 !important;
}

By combing the above three rules you can easily create a light version of the widget as shown below. 

Customising the delivery validator 

We recognise that our widget is not going to be suitable for all use cases and so we have provided a number of functions you can call upon to write your own delivery validator.

Example Custom Validation widget
Below is an example of how you can use the API to create your own custom validation widget. 

<form onsubmit="validateZipCode(); return false;">
   <input type="text" id="zipcode" placeholder="Enter zipcode here ..." />
   <input type="submit" value="Go" />
</form>
   
<script type="text/javascript">
function validateZipCode(e) {        
   const zipcode = document.getElementById('zipcode').value;
 
   // Checks to ensure Store Pickup + Delivery is installed correctly.
   if (typeof window.Zapiet === 'undefined' || typeof window.ZapietCachedSettings === 'undefined' ||
       typeof window.Zapiet.DeliveryValidator === 'undefined' || window.ZapietCachedSettings.cached_config === 'undefined' ||
       window.ZapietCachedSettings.cached_config.delivery_validator === 'undefined') {
     console.warn('Zapiet - Custom delivery validator error. Please ensure you have Store Pickup + Delivery correctly installed. Contact [email protected] for assistance.');
     return false;
   }
       
   Zapiet.DeliveryValidator.checkEligiblity(zipcode, function(response) {
      // Eligible callback
      Zapiet.DeliveryValidator.eligibleForDelivery(response);
   }, function() {
      // Not eligible callback
      Zapiet.DeliveryValidator.notEligibleForDelivery();
   }, function() {
      // Error callback
      Zapiet.DeliveryValidator.error();
   });
       
   return false;
}
</script>

Gist available here: https://gist.github.com/cargix1/fdecb654aaf21118ce4e08e30c6a0952

Delivery Validator API

Zapiet.DeliveryValidator.checkEligiblity(postal_code, eligible_callback, not_eligible_callback, error_callback);

Zapiet.DeliveryValidator.updateModalContent(heading, content, button_label);

Zapiet.DeliveryValidator.showTopBar();

Zapiet.DeliveryValidator.hideTopBar();

Zapiet.DeliveryValidator.showModal();

Zapiet.DeliveryValidator.hideModal();

JavaScript Events

delivery.validator_widget.top_bar.opened
delivery.validator_widget.top_bar.closed
delivery.validator_widget.modal.opened
delivery.validator_widget.modal.closed
delivery.validator_widget.modal.content_updated
delivery.validator_widget.eligible
delivery.validator_widget.not_eligible
delivery.validator_widget.error
Did this answer your question?