Adding JavaScript Library/Component as Custom Field to Product Page

Adding JavaScript Library/Component as Custom Field to Product Page

justsayin
Tourist
7 0 3

I want to add a custom field for mobile phone number using the third-party JavaScript library intl-tel-input. I also want to add another custom field for a date/time picker using the third-party JavaScript library flatpickr. Both of these fields need to be added to the product page for certain products (for example, a specific collection). I have a few requirements that must be met:

 

1. Both of these custom fields must be on the product page. Please do not suggest capturing this user input later in the checkout process such as on the billing form. It must be per product added to the cart.

 

2. I need to use the intl-tel-input library (https://intl-tel-input.com) with a specific configuration that will be the same for every mobile phone number field on every product page. This config can be hard-coded. I do not need any admin functionality to create or configure the custom field. Please do not suggest using an existing Shopify app which offers similar functionality. I have to use intl-tel-input and be able to update the source code as needed when the library is updated.

 

3. Similar to above, I need to use the flatpickr library (https://flatpickr.js.org/) with a specific configuration that will be the same for every custom date/time picker field on every product page. The config can be hard-coded and I do not need any admin functionality. Please do not suggest using an existing Shopify app that provides date picker functionality. I need to be able to update my code when the flatpickr library is updated.

 

How would I go about implementing this? I am unclear if I need to develop a custom Shopify app or not. If so, it does not need to be in the Shopify App Store and can be private/internal only to my store. Any relevant documentation and/or examples would be appreciated. I found this article on Theme App Extensions but am not sure if this is the correct approach for what I need:

 

https://www.getflare.co.uk/blog/how-to-use-external-libraries-in-theme-app-extensions-for-your-shopi...

 

Do I need to create a Shopify app with 2 different Theme App Extensions, one for each of my custom fields? Will this allow me to add the custom fields to the product page or is there a better way?

Replies 2 (2)

Small_Task_Help
Shopify Partner
830 28 74

Hi,

 

Seems it can be done without app

 

After including intl-tel-input and flatpickr you need to Initialize Libraries

Create custom.js at assets

Code example

 

// Initialize intl-tel-input
document.addEventListener('DOMContentLoaded', function() {
  var phoneInput = document.querySelector("#phone-input");
  if (phoneInput) {
    intlTelInput(phoneInput, {
      initialCountry: "auto",
      geoIpLookup: function(callback) {
        fetch('https://ipinfo.io/json?token=YOUR_TOKEN')
          .then(response => response.json())
          .then(data => callback(data.country_code))
          .catch(() => callback('US'));
      },
      separateDialCode: true
    });
  }

  // Initialize flatpickr
  var dateInput = document.querySelector("#date-input");
  if (dateInput) {
    flatpickr(dateInput, {
      dateFormat: "Y-m-d",
      minDate: "today",
      enableTime: false
    });
  }
});

 

Include custom.js to theme.liquid

Add Custom Fields to Product Page

Code example

 

<div class="custom-fields">
  <!-- Phone number input -->
  <div class="form-group">
    <label for="phone-input">Mobile Phone Number:</label>
    <input type="tel" id="phone-input" name="phone_number" class="form-control">
  </div>
  
  <!-- Date/time picker -->
  <div class="form-group">
    <label for="date-input">Select Date/Time:</label>
    <input type="text" id="date-input" name="date_time" class="form-control">
  </div>
</div>

 

Use CSS for style 

To Get Shopify Experts Help, E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Expert Agency
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad
justsayin
Tourist
7 0 3

I am using a Shopify 2.0 theme such as Dawn or Spotlight so it seems like I need to create a custom section or snippet that contains the 2 fields, and then create a custom product template that includes it. (I should note that my 2 custom fields are dependent upon each other and interact together which is why I am grouping them together.)

 

@Small_Task_Help You solution seems to be the vintage approach and not suited for the current 2.0 theme architecture.

 

Does anyone have a relevant example of how to implement this in the Shopify 2.0 theme architecture?