0

介绍

我在我的应用程序上设置了一个 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)
    }
  }
}
4

1 回答 1

-1

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

magento 联系表单没有 API 端点,并且有几种方法可以做到这一点:

  • 创建一个 magento 插件,该插件提供 API 用于向其发送请求并将 vueSF 连接到它(对于非 magento 开发人员来说可能是最难创建的)
  • 创建一个简单的脚本(与 magento 分开),它将接受 vueSF 请求并使用 reuest 数据发送电子邮件(可能是最容易实现的,因为您甚至不必为此在任何地方安装 magento)
  • 使用像https://formspree.io/这样的外部服务(只是我在 google 上找到的第一个服务,这里没有宣传这个特定的服务)
于 2019-02-11T13:54:48.290 回答