如何通过API > Magento在Vue应用程序上填写表单？

Question

引言

我已经在我的应用程序上设置了一个vue组件，这个vue组件是一个联系人表单，它被导入到标头组件中，并封装在一个模式中。

此联系表格必须提交确认信息和事件，该信息将发送电子邮件到receiving@email.com的最后。

问题1

问题:如何触发vuejs中的事件，当这个按钮被触发时，一个新的HTML块显示了确认信息？我的合作伙伴和我在这里体验过Jquery，我希望在Vuejs：https://codepen.io/anon/pen/WLJwxo?editors=1010中获得相同的结果。

出于实用性的考虑，我们在Vue店面上建立了https://logima.io (因为我们从事为客户建立网络商店的业务，我们希望获得更深入的信息，并创造更多突破性的结果)

你可以点击“获取你的应用程序！”导航器右上角的一个按钮。

问题2

通过API使Vue-storefront前台联系人表单与Magento联系人表单连接的最佳方法/实践是什么？

由于Vue - so前台通过其API作为Magento的shell工作，理论上应该可以在Magento上设置一个表单、配置API并在Vue应用程序和Magento之间架设一个桥梁，这样您就不需要为您的店面打开的实例直接设置SMTP或其他东西。

更清楚的是：

用户填写logima.io上的联系人表单> API连接到邮件表单上的Magento > Magento表单被填写>发送一个电子邮件到接收地址。

这已经适用于产品和订单。我们已经使用Magento外部签出在Vue商店前建立了几家商店，API工作得很好。我只是想知道如何实际修改或创建新的代码字符串，以便shell联系人表单可以通过现有的API填写Magento表单。

HTML

    <div id="app">

  <form class="vue-form" @submit.prevent="submit">

    <div class="error-message">
      <p v-show="!email.valid">Oh, please enter a valid email address.</p>
    </div>

    <fieldset>

        <legend>
          <b>
            We will build you a fast PWA, just let us know your details
          </b>
        </legend>
   <GetBackToYou/>
      <div>
        <label class="label" for="name">Name</label>
        <input type="text" name="name" id="name" required="" v-model="name">
      </div>
      <div>
        <label class="label" for="email">Email</label>
        <input type="email" name="email" id="email" required=""
               :class="{ email , error: !email.valid }"
               v-model="email.value">
      </div>
      <div>
        <h4>Your budget</h4>
        <p class="select">
          <select class="budget" v-model="selection.member">
                        <option value="0">$1500 > $4500</option>
                        <option value="0">$4500 > $10.000</option>
                        <option value="0">$10.000 > $20.000</option>
                        <option value="0">$20.000 > $50.000</option>
                    </select>
        </p>
      </div>

      <div>
        <h4>Select your package</h4>

        <ul class="vue-form-list">
          <li>
            <input type="radio" name="radio-1" id="radio-1" value="angular" 
                   v-model="selection.framework">
            <label for="radio-1">PWA for Proprietor</label>
          </li>
          <li>
            <input type="radio" name="radio-2" id="radio-2" value="react" 
                   v-model="selection.framework">
            <label for="radio-2">PWA for Business</label>
          </li>
          <li>
            <input type="radio" name="radio-3" id="radio-3" value="vue" 
                   v-model="selection.framework">
            <label for="radio-3">PWA for LLC</label>
          </li>
          <li>
            <input type="radio" name="radio-3" id="radio-3" value="vue" 
                   v-model="selection.framework">
            <label for="radio-3">PWA for INC</label>
          </li>
        </ul>
      </div>

      <div>
        <h4>Features</h4>
        <ul class="vue-form-list">
          <li v-for="(feature, index) in features">
            <input type="checkbox" 
                   :value="feature" 
                   :id="'cb-feature-'+index" 
                   v-model="selection.features">
            <label :for="'cb-feature-'+index">{{feature}}</label>
          </li>
          <li>
            <input type="checkbox" id="checkbox-all" @click="checkAll">
            <label for="checkbox-all">Check All</label>
          </li>
        </ul>
      </div>
      <div>
        <label class="label" for="textarea">Message with Counter</label>
        <textarea class="message" name="textarea" id="textarea" required="" 
                  v-model="message.text" 
                  :maxlength="message.maxlength"></textarea>
        <span class="counter">{{ message.text.length }} / {{ message.maxlength }}</span>
      </div>
      <div>
        <input type="submit" value="Send Form">
      </div>
    </fieldset>
  </form>

  <div class="debug">
    <pre><code>{{ $data }}</code></pre>
  </div>

</div>
</template>

脚本

    export default {
  data: function () {
    return {
      name: '',
      email: {
        value: '',
        valid: true
      },
      features: ['Payment Gateway', 'Magento External Checkout', 'Logima Cloud Hosting', 'Google tracking', 'CSM extension', 'Other (Please specify in message)'],
      selection: {
        member: '0',
        framework: 'vue',
        features: []
      },
      message: {
        text: ``,
        maxlength: 1000
      },
      submitted: false
    }
  },
  methods: {
    // submit form handler
    submit: function () {
      this.submitted = true
    },
    // validate by type and value
    validate: function (type, value) {
      if (type === 'email') {
      }
    },
    // check for valid email adress
    isEmail: function (value) {
    },
    // check or uncheck all
    checkAll: function (event) {
      this.selection.features = event.target.checked ? this.features : []
    }
  },
  watch: {
    // watching nested property
    'email.value': function (value) {
      this.validate('email', value)
    }
  }
}

Answer 1

这应该是两个问题，而不是一个问题。但是，由于我了解Magento以及VueSF如何使用它，所以我可以帮助解决第2点：

magento contact表单没有API端点，也没有几种方法可以这样做：

• 创建一个magento插件，它提供了用于向其发送请求并将vueSF连接到它的API (可能是非magento最难创建的)
• 创建一个简单的脚本(独立于magento)，它将接受vueSF请求，并使用最丰富的数据发送电子邮件(可能是最容易实现的，因为您甚至不需要在任何地方安装magento )。
• 使用像https://formspree.io/这样的外部服务(这只是我在谷歌上找到的第一个服务，而不是在这里做广告)