FieldsRaven developer docs
  • Welcome!
  • Quick Start
  • App embeds
    • Sitemap manager
    • Customer Birthday Popup
  • FAQ
  • Code examples
    • Create a single_line_text_field metafield
    • Delete a metafield
    • Create a product_reference metafield
    • Create a list.product_reference metafield
    • Create a json metafield
    • Create multiple metafields (aka flock)
  • Example features
    • Customer Birthday Popup (WIP)
    • Sitemap Manager (WIP)
    • Page SEO Editor (TBD)
    • Product FOMO (TBD)
    • Show off live traffic (TBD)
    • Collect custom customer attributes
    • Wish List
    • Customer registration with custom attributes
    • Customer Product Registration
  • Troubleshooting
  • Klaviyo
  • Airtable
Powered by GitBook
On this page
  1. Example features

Customer Product Registration

<script src="https://cdn.jsdelivr.net/npm/@caneara/iodine@8.3.0/dist/iodine.min.umd.min.js"></script>

{% liquid
  assign product_registrations = customer.metafields.fields_raven.product_registration.value
  assign product_registrations_json = product_registrations | json
%}

<script type="text/javascript">
  window.EuCountries = [
    'Select country',
    'Austria',
    'Belgium',
    'Bulgaria',
    'Cyprus',
    'Czech Republic',
    'Germany',
    'Denmark',
    'Estonia',
    'Spain',
    'Finland',
    'France',
    'United Kingdom',
    'Greece',
    'Hungary',
    'Croatia',
    'Republic of Ireland',
    'Italy',
    'Lithuania',
    'Luxembourg',
    'Latvia',
    'Malta',
    'Netherlands',
    'Poland',
    'Portugal',
    'Romania',
    'Sweden',
    'Slovenia',
    'Slovakia',
  ];

  {% if product_registrations != blank %}
    window.customerProductRegistrations = {{ product_registrations_json }};
  {% else %}
    window.customerProductRegistrations = [];
  {% endif %}

  console.log('🚧 customerProductRegistrations', window.customerProductRegistrations)
  console.log('🚧 product_registrations json ', {{ product_registrations | json }})
  console.log('🚧 product_registrations', '{{ product_registrations }}')
</script>
{% comment %}
<br>
  <h2>JSON metafield</h2>
  <code>
    {% for registration in product_registrations %}
     {{ registration["Serial Number"] }}<br>
     {{ registration["Country of Residence"] }}<br>
     {{ registration["Where did you purchase your meter?"] }}<br>
     ---<br>
    {% endfor %}
  </code>
  <br>
{% endcomment %}
  <h2>Individual metafields</h2>
  <code>
    api_secret: {{ shop.metafields.fields_raven.api_secret }}<br>
    customer.id: {{ customer.id }}<br>
    {% if customer.metafields.custom.serial_number != blank %}
     {{ customer.metafields.custom.serial_number }}<br>
    {% endif %}

    {% if customer.metafields.custom.country_of_residence != blank %}
      {{ customer.metafields.custom.country_of_residence }}<br>
    {% endif %}

    {% if customer.metafields.custom.where_did_you_purchase_your_meter != blank %}
      {{ customer.metafields.custom.where_did_you_purchase_your_meter }}<br>
    {% endif %}
  </code>
  <br>

<div
  x-data="{
    done: false,
    productRegistrations: window.customerProductRegistrations,
    countries: window.EuCountries,
    placesOfPurchase: ['Select an option','Keto-Mojo Website', 'Amazon', 'eBay', 'Other'],
    serialNumber: null,
    countryOfResidence: null,
    purchaseLocation: null,
    productRegistrationObj: {
      'Serial Number': this.serialNumber,
      'Country of Residence': this.countryOfResidence,
      'Where did you purchase your meter?': this.purchaseLocation
    },
    newRegistrationString() {
      this.productRegistrations.push(this.productRegistrationObj);
      return JSON.stringify(this.productRegistrations);
    },
    isValid() {
      const validation = (Iodine.assertMinLength(this.serialNumber, 20) &&  Iodine.assertMaxLength(this.serialNumber, 22)) &&
      Iodine.assertRequired(this.countryOfResidence) &&
      Iodine.assertRequired(this.purchaseLocation);

      return validation;
    },
    {% comment %}
    sendNewRegistration() {
      if (this.isValid()) {
        const ravenObj = {%- render 'raven-mac-gen', resource_id: customer.id, raven_id: 'hMSfuhk' -%};
        const valueObj = { value: this.newRegistrationString() };
        const requestParams = Object.assign({}, ravenObj, valueObj);
        console.log('🚧 requestParams 👉 ', requestParams)

        const response = FieldsRaven.send(requestParams);
        response.then(res => {
          if (res.status === 200) {
            console.log('🎉', res.json)
          } else {
            console.error('😞', res)
          }
        })
        .catch(e => console.error(e));
      } else {
        alert('serial_number length should be between 20 and 22')
      }

    },
    {% endcomment %}
    sendNewRegistrationFlock() {
      {% comment %} serial_number {% endcomment%}
      const ravenObjOne = {%- render 'raven-mac-gen', resource_id: customer.id, raven_id: 'Zbp_Hr8' -%};
      const valueObjOne = { value: this.serialNumber };
      const requestParamsOne = Object.assign({}, ravenObjOne, valueObjOne);

      console.log('🚧 requestParamsOne: ', requestParamsOne)

      {% comment %} country_of_residence {% endcomment%}
      const ravenObjTwo = {%- render 'raven-mac-gen', resource_id: customer.id, raven_id: 'V4XGS8I' -%};
      const valueObjTwo = { value: this.countryOfResidence };
      const requestParamsTwo = Object.assign({}, ravenObjTwo, valueObjTwo);

      console.log('🚧 requestParamsTwo: ', requestParamsTwo)

      {% comment %} where_did_you_purchase_your_meter {% endcomment%}
      const ravenObjThree = {%- render 'raven-mac-gen', resource_id: customer.id, raven_id: 'Euw03I4' -%};
      const valueObjThree = { value: this.purchaseLocation };
      const requestParamsThree = Object.assign({}, ravenObjThree, valueObjThree);

      console.log('🚧 requestParamsThree: ', requestParamsThree)

      const response = FieldsRaven.sendMultiple([requestParamsOne, requestParamsTwo, requestParamsThree]);
      {% comment %}
        const response = FieldsRaven.send(requestParamsOne);
        const response = FieldsRaven.send(requestParamsThree);
        const response = FieldsRaven.send(requestParamsTwo);
      {% endcomment %}

      response.then(res => {
        if (res.status === 200) {
          console.log('🎉', res.json)
          this.done = true;
        } else {
          alert('Error! Please contact store owner.')
          console.error('😞', res)
        }
      })
      .catch(e => console.error(e));
    }
  }"
  x-init="console.log('🚧 productRegistrations: ', productRegistrations)"
>
  <template x-if="done">
    <p>Thank you!</p>
  </template>
  <template x-if="!done">
    <div class="contact__fields">
      <div class="field">
        <input
          class="field__input"
          autocomplete="off"
          type="text"
          id="ProductRegistrationForm-serialNumber"
          name="ProductRegistrationForm[serialNumber]"
          placeholder="Please add your serial_number"
          x-model="serialNumber"
        >
        <label class="field__label" for="ProductRegistrationForm-serialNumber">Serial Number</label>
      </div>

      <div class="field">
        <div class="select">
          <select
            id="ProductRegistrationForm-countryOfResidence"
            name="ProductRegistrationForm[countryOfResidence]"
            class="select__select"
            x-model="countryOfResidence"
          >
            <template x-for="(country, index) in countries">
              <option :value="country" x-text="country" :disabled="index === 0"></option>
            </template>
          </select>
        </div>
      </div>

      <div class="field">
        <div class="select">
          <select
            id="ProductRegistrationForm-purchaseLocation"
            name="ProductRegistrationForm[purchaseLocation]"
            class="select__select"
            x-model="purchaseLocation"
          >
            <template x-for="(placeOfPurchase, index) in placesOfPurchase">
              <option :value="placeOfPurchase" x-text="placeOfPurchase" :disabled="index === 0"></option>
            </template>
          </select>
        </div>
      </div>
      <div class="submit__button">
        <button
          type="submit"
          class="button"
          @click="sendNewRegistrationFlock()"
          :disabled="!isValid()"
        >
          Register my product
        </button>
      </div>
    </div>
  </template>
</div>
PreviousCustomer registration with custom attributesNextTroubleshooting

Last updated 2 years ago