How to write GraphQl mutation to create and integrate the magento 2 contact us form functionality – Good Day for all. Today’s article is going to cover graphQl mutation for contact-us page. The custom contact us Mutation and functionalities in magento 2.3. Why i tried this approach is, my project’s front-end is React and back-end is Magento 2.
Contact us page is a common and very important page in websites.Where website visitors interact with the website owners. In magento we have a common contact us page and email functionalities in built with.When it comes to graphQl we need to write a custom module to deal it. Currently we don’t have default magento 2.3 contact us Mutation to integrate magento contact-us functionality.
For this we want to create a custom module.What i tried with this custom module is passing the form data to resolver and use the magento default contact us functionality to deal the mailing stuff. Main part in the data provider file was arranging the data as default contact us form data in the magento contact-us module.
Apart from creating the custom module, i will explain how i wrote the
1. Shema.graphqls.
2. Resolver file.
3. Data provider file.
Shema.graphqls
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
type Mutation { contactusFormSubmit(input: ContactusInput!): ContactusOutput @resolver(class: "\\Ayakil\\ContactUs\\Model\\Resolver\\Contactus") @doc(description:"Contact us form") } input ContactusInput { fullname: String @doc(description: "The customer's full name") email: String @doc(description: "The customer's email address") telephone: String @doc(description: "The Telephone") message: String @doc(description: "The customer's message") } type ContactusOutput { success_message: String @doc(description: "Success Message") } |
In this Mutation we have ContactusInput and ContactusOutput where passing the data to resolver and return the success message to front-end.
Resolver file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<?php namespace Ayakil\ContactUs\Model\Resolver; //resolver section use Magento\Framework\Exception\NoSuchEntityException; use Magento\Framework\GraphQl\Config\Element\Field; use Magento\Framework\GraphQl\Exception\GraphQlInputException; use Magento\Framework\GraphQl\Exception\GraphQlNoSuchEntityException; use Magento\Framework\GraphQl\Query\ResolverInterface; use Magento\Framework\GraphQl\Schema\Type\ResolveInfo; class Contactus implements ResolverInterface { private $contactusDataProvider; /** * @param */ public function __construct( \Ayakil\ContactUs\Model\Resolver\DataProvider\Contactus $contactusDataProvider ) { $this->contactusDataProvider = $contactusDataProvider; } /** * @inheritdoc */ public function resolve( Field $field, $context, ResolveInfo $info, array $value = null, array $args = null ) { $fullname = $args['input']['fullname']; $email = $args['input']['email']; $telephone = $args['input']['telephone']; $message = $args['input']['message']; $success_message = $this->contactusDataProvider->contactUs( $fullname, $email, $telephone, $message ); return $success_message; } } |
Data Provider file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<?php namespace Ayakil\ContactUs\Model\Resolver\DataProvider; //contact us section use Magento\Framework\App\Action\HttpPostActionInterface as HttpPostActionInterface; use Magento\Contact\Model\ConfigInterface; use Magento\Contact\Model\MailInterface; use Magento\Framework\App\Action\Context; use Magento\Framework\App\Request\DataPersistorInterface; use Magento\Framework\Controller\Result\Redirect; use Magento\Framework\Exception\LocalizedException; use Magento\Framework\App\ObjectManager; use Magento\Framework\DataObject; class Contactus { /** * @var DataPersistorInterface */ private $dataPersistor; /** * @var MailInterface */ private $mail; private $formKey; /** * @param */ public function __construct( ConfigInterface $contactsConfig, MailInterface $mail, DataPersistorInterface $dataPersistor, \Magento\Framework\Data\Form\FormKey $formKey ) { $this->mail = $mail; $this->dataPersistor = $dataPersistor; $this->formKey = $formKey; } public function contactUs($fullname,$email,$subject,$message){ $thanks_message = []; try { $this->sendEmail($fullname,$email,$subject,$message); }catch (LocalizedException $e) { } $thanks_message['success_message']="Thanks For Contacting Us"; return $thanks_message; } /** * @param array $post Post data from contact form * @return void */ private function sendEmail($fullname,$email,$telephone,$message) { $form_data = []; $form_data['name'] = $fullname; $form_data['email'] = $email; $form_data['telephone'] = $telephone; $form_data['comment'] = $message; $form_data['hideit'] = ""; $form_data['form_key'] = $this->getFormKey(); $this->mail->send( $email, ['data' => new DataObject($form_data)] ); } /** * get form key * * @return string */ public function getFormKey() { return $this->formKey->getFormKey(); } } |
I did all my work to use the default contact-us functionality here in the data provider file. Main stuff is creating the data set as used in the default magento and use the mail function as it is. This is totally a hack by myself and please come up with any better solutions if you have.
|
1 2 3 4 5 6 7 |
$form_data = []; $form_data['name'] = $fullname; $form_data['email'] = $email; $form_data['telephone'] = $telephone; $form_data['comment'] = $message; $form_data['hideit'] = ""; $form_data['form_key'] = $this->getFormKey(); |
I created the form data as it is in the default contact-us module and simply pass it with the mail function like below.
|
1 2 3 4 |
$this->mail->send( $email, ['data' => new DataObject($form_data)] ); |
We need to pass the form key, so i used the method getFormKey which is used to create the magento default form key.
|
1 |
$thanks_message['success_message']="Thanks For Contacting Us"; |
For the thank you message return variable you want to pass the exact same name[ success_message ] as you define in your type ContactusOutput. In the mutation also use the same wording to get the mutation run.
After every thing finish you want to run the upgrade command and compile command. You want to pass the query like below in the server.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
mutation { contactusFormSubmit( input:{ fullname: "Mujahidh haseem" telephone: "+94769819118" message: "Hi i Want to order some Dress from your store" } ){ success_message } } |
For this query you want to pass the input variables as same as u used in the mutation input in the GraphQl schema. You may read What is GraphQl in magento 2.3 and how to access it get the idea to run the query.
Finally you will get the contact us email to what ever the email you configured in the magento admin panel back-end.
That’s it. Have a nice day.Enjoy coding , Learn , Experience , Teach and Help.
How to add custom field to contact us page and use in graphql mutation
As a Newbie, I am constantly exploring online for articles that can be of assistance to me. Bestow you
Thanks for reading 🙂