javascript - 如何 - 通过 API > Magento 在 Vue APP 上填写联系表格？

问题描述

介绍

我在我的应用程序上设置了一个 vue-component，这个 vue-component 是一个联系表单，它被导入到 header 组件中，并包装在一个 modal 中。

此联系表格必须提交确认消息和事件，该信息将在最后发送电子邮件至接收@email.com。

问题 1

问题：如何在 vuejs 中触发一个事件，当触发此按钮时，会显示一个带有确认信息的新 HTML 块？我和我的伙伴在这里体验了 Jquery，我正在 Vuejs 中寻找相同的结果：https ://codepen.io/anon/pen/WLJwxo?editors=1010

出于实用性的原因，我们在 Vue Storefront 上设置了https://logima.io（由于我们从事为客户建立网上商店的业务，我们希望更深入并创造更多开创性的成果）

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

问题2

使 Vue 店面联系表通过 API 与 Magento 联系表连接的最佳方法/实践是什么？

由于 Vue-storefront 通过其 API 充当 Magento 的外壳，因此理论上应该可以在 Magento 上设置表单、配置 API 并在 Vue APP 和 Magento 之间架起一座桥梁，这样您就不需要直接为您的 Storefront 所在的实例设置 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)
    }
  }
}

标签： javascriptvue.jsvuejs2vue-directivesvue-storefront

javascript - 如何 - 通过 API > Magento 在 Vue APP 上填写联系表格？

问题描述

介绍

问题 1

问题2

HTML

脚本

解决方案

推荐阅读