How to Embed the Wholesale Signup Form to another page?

Follow these steps to embed the Wholesale Pricing Discounts (WPD) Wholesale Signup Form on a different page in your Shopify store.

Step 1: Duplicate Your Theme

1. Navigate to Online Store > Themes in your Shopify admin.

2. Duplicate your current theme to ensure any changes do not affect your live store.

3. Click Edit Code on the duplicated theme.

Step 2: Create a Custom Section

1. In the Edit Code section, open the Sections directory.

2. Click Add a new section and name it wpd-signup-form-custom.liquid

3. Paste the following code into the new section file:

{% if section.settings.wpd_form_toggle %}
<div id='custom_wpdMainContainer'></div>
<script>
 async function loadContent(url) {
  let formContainer = document.getElementById("custom_wpdMainContainer");
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error("Failed to fetch content");
    const html = await response.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, "text/html");
    const mainContent = doc.querySelector("#MainContent");
    if (!mainContent) throw new Error("#MainContent not found");
    formContainer.innerHTML = mainContent.innerHTML;
    formContainer.querySelectorAll('script').forEach((script) => {
      if (script.textContent.includes('window.signUpValidationArray')) {
        let newScript = document.createElement('script');
        newScript.innerHTML = script.innerHTML;
        script.replaceWith(newScript);
      }
    });
    if (typeof grecaptcha == 'undefined') {
      let captchaScript = document.createElement('script');
      captchaScript.src = "https://www.google.com/recaptcha/api.js";
      formContainer.parentElement.appendChild(captchaScript);
    }
  } catch (error) {
    console.error("Error:", error);
  }
 }
 loadContent(window.WPDAppProxy);
</script>
{% endif %}
{% schema %}
  {
    "name": "WPD Signup Form",
    "settings": [
      {
        "type": "checkbox",
        "id": "wpd_form_toggle",
        "label": "Enable Wholesale Signup Form?"
      }
    ],
    "presets": [
      {
        "name": "WPD Signup Form",
        "category": "Custom"
      }
    ]
  }
{% endschema %}

Step 3: Add the WPD Signup Form to a Page

1. Go back to Themes and click Customize on the duplicated theme.

2. Navigate to the page where you want to embed the WPD Signup Form.

3. Click Add Section and select WPD Signup Form from the section menu.

4. Enable the form by checking the Enable Wholesale Signup Form box.

Step 4: Save and Review

1. Save your changes.

2. Preview your theme to ensure the signup form is displayed correctly.

3. Once confirmed, publish the theme to make it live on your store.

That's it! Your Wholesale Signup Form is now embedded on the desired page.

Edge case:

If your page template does not load the Shopify object constructor, the country or province selector in the signup form might not work. In that case, add the following code between the loadContent(window.WPDAppProxy)line and closing </script> tag:

if (typeof window.Shopify == 'undefined') {
  window.Shopify = {};
}
Shopify.bind = function (fn, scope) {
  return function () {
    return fn.apply(scope, arguments);
  };
};
Shopify.setSelectorByValue = function (selector, value) {
  for (var i = 0, count = selector.options.length; i < count; i++) {
    var option = selector.options[i];
    if (value == option.value || value == option.innerHTML) {
      selector.selectedIndex = i;
      return i;
    }
  }
};
Shopify.addListener = function (target, eventName, callback) {
  target.addEventListener
  ? target.addEventListener(eventName, callback, false)
  : target.attachEvent('on' + eventName, callback);
};
Shopify.postLink = function (path, options) {
  options = options || {};
  var method = options['method'] || 'post';
  var params = options['parameters'] || {};
  var form = document.createElement('form');
  form.setAttribute('method', method);
  form.setAttribute('action', path);
  for (var key in params) {
    var hiddenField = document.createElement('input');
    hiddenField.setAttribute('type', 'hidden');
    hiddenField.setAttribute('name', key);
    hiddenField.setAttribute('value', params[key]);
    form.appendChild(hiddenField);
  }
  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
};
Shopify.CountryProvinceSelector = function (country_domid, province_domid, options) {
  this.countryEl = document.getElementById(country_domid);
  this.provinceEl = document.getElementById(province_domid);
  this.provinceContainer = document.getElementById(options['hideElement'] || province_domid);
  Shopify.addListener(this.countryEl, 'change', Shopify.bind(this.countryHandler, this));
  this.initCountry();
  this.initProvince();
};
Shopify.CountryProvinceSelector.prototype = {
  initCountry: function () {
    var value = this.countryEl.getAttribute('data-default');
    Shopify.setSelectorByValue(this.countryEl, value);
    this.countryHandler();
  },
  initProvince: function () {
    var value = this.provinceEl.getAttribute('data-default');
    if (value && this.provinceEl.options.length > 0) {
      Shopify.setSelectorByValue(this.provinceEl, value);
    }
  },
  countryHandler: function (e) {
    var opt = this.countryEl.options[this.countryEl.selectedIndex];
    var raw = opt.getAttribute('data-provinces');
    var provinces = JSON.parse(raw);
    this.clearOptions(this.provinceEl);
    if (provinces && provinces.length == 0) {
      this.provinceContainer.style.display = 'none';
    } else {
      for (var i = 0; i < provinces.length; i++) {
        var opt = document.createElement('option');
        opt.value = provinces[i][0];
        opt.innerHTML = provinces[i][1];
        this.provinceEl.appendChild(opt);
      }
    this.provinceContainer.style.display = '';
   }
  },
  clearOptions: function (selector) {
    while (selector.firstChild) {
      selector.removeChild(selector.firstChild);
    }
  },
  setOptions: function (selector, values) {
    for (var i = 0, count = values.length; i < values.length; i++) {
      var opt = document.createElement('option');
      opt.value = values[i];
      opt.innerHTML = values[i];
      selector.appendChild(opt);
   }
  },
};