Introduction

A custom vue-component has been implemented on the application, serving as a contact form. This component is imported into the header component and enclosed within a modal container.

The primary function of this contact form is to trigger an acknowledgment message and event upon submission, indicating that the provided information will be sent via email to [email protected].

Question 1

Query: How can an event be triggered in vuejs so that when a specific button is clicked, a new HTML block containing acknowledgment information is displayed? Our team has experimented with Jquery here, and we are seeking similar functionality in Vuejs: https://codepen.io/anon/pen/WLJwxo?editors=1010

We have integrated with Vue Storefront for practical reasons (as we specialize in developing webshops for clients, we aim to delve deeper and achieve innovative outcomes).

You can access the "Get your App!" button located at the top right corner of the navigation bar.

Question 2

What is the recommended approach or best practice for connecting the Vue Storefront contact form with the Magento contact form using APIs?

Considering that Vue Storefront acts as a shell for Magento through its API, it should theoretically be feasible to set up a form on Magento, configure the API, and establish a bridge between the Vue application and Magento, eliminating the need to directly configure SMTP or other components for the storefront instance.

To clarify further:

The user completes a contact form on logima.io > The API interfaces with the email form on Magento > The Magento form is completed > An email is then dispatched to the specified recipient address.

This mechanism already functions seamlessly for products and orders. We have deployed several stores on Vue Storefront utilizing Magento's external checkout feature, and the API integration works flawlessly. My inquiry revolves around the modification or creation of new code segments to enable the storefront's contact form to populate the Magento form through the existing API.

HTML

<div id="app">

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

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

    <fieldset>

        <legend>
          <b>We will develop a fast PWA for you, simply provide us with 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>

Script

export default {
  data() {
    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() {
      this.submitted = true
    },
    // validate by type and value
    validate(type, value) {
      if (type === 'email') {
      }
    },
    // check for valid email address
    isEmail(value) {
    },
    // check or uncheck all
    checkAll(event) {
      this.selection.features = event.target.checked ? this.features : []
    }
  },
  watch: {
    // watching nested property
    'email.value'(value) {
      this.validate('email', value)
    }
  }
}