Введение
Я установил vue-компонент в своем приложении, этот vue-компонент является формой контакта, он импортируется в компонент заголовка и помещается в модальное пространство.
Эта контактная форма должна отправить сообщение о подтверждении и событие, что эта информация отправит электронное письмо по адресу Получение@email.com в конце.
Вопрос 1
Вопрос: Как вызвать событие в vuejs, чтобы при нажатии этой кнопки отображался новый блок HTML с информацией подтверждения? Мой партнер и я испытали Jquery прямо здесь, и я ищу те же результаты в Vuejs: https://codepen.io/anon/pen/WLJwxo?editors=1010
Мы настроили https://logima.io на Vue Storefront по соображениям практичности (поскольку мы занимаемся созданием интернет-магазинов для клиентов, мы хотим получить более подробные сведения и создать более революционные результаты)
Вы можете нажать на кнопку «Получить приложение!» Кнопка в правом верхнем углу навигационной панели.
Вопрос 2
Каков наилучший подход / практика для связи контактной формы Vue-storefront с контактной формой Magento через API?
Поскольку Vue-storefront работает как оболочка для Magento через его API, теоретически должна быть возможность настроить форму в Magento, настроить API и создать мост между Vue APP и Magento, чтобы вы не могли Не нужно настраивать SMTP или другие вещи напрямую для экземпляра, на котором работает ваш Storefront.
Чтобы быть более понятным:
Пользователь заполняет контактную форму на logima.io> API соединяется с формой электронной почты на Magento> Форма Magento заполняется> Отправляет электронное письмо на адрес получателя.
Это уже работает с продуктами и заказами. Мы создали несколько магазинов на Vue-storefront, используя внешний контроль Magento, и API работает отлично. Мне просто интересно, как на самом деле изменить или создать новые строки кода, чтобы форма контакта оболочки могла заполнять форму Magento через существующий API.
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 }}
Сценарий
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)
}
}
}