윅스 (Wix) 코딩 예제 - 사이트 회원들에게 트리거된 이메일 보내기 (Wix Code Tutorial: Sending a Triggered Email to Members)

윅스 (Wix) 코딩 예제 - 사이트 회원들에게 트리거된 이메일 보내기 (Wix Code Tutorial: Sending a Triggered Email to Members)

 

 

 

설명)

 

트리거된 전자 메일을 사용하면 코드를 사용하여 현재 로그인한 사이트 멤버에게 보낼 수 있는 전자 메일용 템플릿을 만들 수 있습니다. 전자 메일을 보내기 전에 코드에서 정보를 템플릿에 삽입하여 페이지 코드에서 사용할 수 있는 모든 데이터로 정보를 사용자 지정할 수 있습니다. 이 기사에서는 트리거된 전자 메일에서 생성된 코드 스니펫을 사용하여 양식 제출시 현재 로그인한 사이트 멤버에게 전자 메일을 보내는 방법을 보여줍니다.

 

이 글에서는 데모용으로 양식 제출을 사용하지만 코드의 어느 곳에서나 전자 메일을 보낼 수 있습니다. 일반적인 아이디어는 이메일을 보내려는 코드에 생성된 스니펫을 붙여 넣는 것입니다. 그런 다음 스니펫을 편집하여 현재 로그인한 멤버의 ID와 변수 자리 표시자에 삽입할 값을 사용합니다.

 

 

노트 :

제 3자 전자 메일 서비스를 사용하여 전자 메일을 보내는 방법보다 일반적인 목적의 글은 양식 제출시 전자 메일을 보내는 방법을 참조합니다.

 

 

 

전제 조건 (Prerequisites)

이 글은 사용자가 입력 양식 작성에 익숙하다고 가정합니다. 이 예제에서는 다음과 같은 트리거 이메일을 작성하여 게시했다고 가정합니다. 또한 사용자가 사이트에 로그인 할 수 있는 방법이 필요합니다.

 

 

 

전자 메일 서식 파일에는 다음 변수가 들어 있습니다.

- 이름 (name)

- 스포츠 (sport)

- 주석 (comments)

 

 

이메일 템플릿에 의미있는 이름을 지정하는 것이 좋습니다. 이렇게하면 코드로 작업하기가 더 쉬워집니다. 이 예제에서는 이메일 sportMail을 호출합니다.

 

 

 

연락처에 대해 트리거된 전자 메일을 만들려면 전자 메일 사이트 구성원 탭을 선택합니다.

 

 

이메일에서 생성된 코드 스니펫은 다음과 같습니다.

 

 

 

트리거된 이메일 ("sportMail")의 ID와 여기에 포함된 모든 변수의 이름 (name, sport, comments)이 코드 스니펫에 반영됩니다.

 

 

 

 

양식 (Form)

그런 다음 제출 버튼을 사용하여 입력 양식을 작성합니다. 기존 양식을 사용하거나 새 양식을 만들 수 있습니다. 어느 쪽이든 특별한 설치가 필요없는 일반 입력 양식입니다. 각 입력 요소는 데이터세트의 입력란(필드)에 연결되고 버튼은 제출 작업과 함께 동일한 데이터세트에 연결됩니다.

 

이 예제에서는 다음 입력 요소가 있는 간단한 양식을 사용합니다.

 

 

 

 

유형 (Type)	ID	사용 (Usage)
입력 (Input)	nameInput	이름 입력
드롭다운 (Dropdown)	sportDropdow	선호하는 스포츠 입력
텍스트 상자 (Text Box)	commentsInput	설명 입력
버튼 (Button)	submitButton	데이터 제출
데이터세트 (Dataset)	sportDataset	요소 연결

 

 

 

코드 (Code)

마지막으로, 양식이 성공적으로 제출되었을 때 위에서 설명한 트리거 이메일을 전송하는 코드를 작성합니다. 이 코드는 전자 메일 서식 파일의 변수 대신 사용할 양식의 값을 보냅니다.

 

 

노트 :

귀하의 사이트를 미리볼 때 트리거된 이메일이 제대로 작동하지 않을 수 있습니다. 사이트를 게시하여 아래 코드를 테스트합니다.

 

 

 

그렇게하기 위해 우리는 새로운 아이템이 성공적으로 제출될 때마다 실행되는 onAfterSave( ) 이벤트 핸들러를 등록합니다. 핸들러 함수 내에서 트리거된 이메일을 만들 때 생성된 코드 스니펫을 붙여 넣습니다.

 

또한 emailUser( ) 함수가 포함되어 있으므로 wixUsers 모듈을 가져와야합니다.

 

이 시점에서 코드는 다음과 같습니다.

 

import wixUsers from 'wix-users';

$w.onReady(function () {
  $w("#sportDataset").onAfterSave( () => {
    wixUsers.emailUser("sportMail", <enter-user-id-here>, {
      variables: {
        "name": <enter-value-here>,
        "sport": <enter-value-here>,
        "comments": <enter-value-here>
      }
    } );
  } );
} );

 

 

그러나 의도한대로 작동하지 않습니다.

 

스니펫을 다음과 같이 편집해야합니다.

- 사용자가 로그인했는지 확인합니다.

- 현재 로그인한 구성원의 ID를 사용합니다

- 제출된 양식의 값을 사용합니다.

 

import wixUsers from 'wix-users';

$w.onReady(function () {  
  $w("#sportDataset").onAfterSave( () => {
    if(wixUsers.currentUser.loggedIn) {    
      const userId = wixUsers.currentUser.id;
    
      wixUsers.emailUser("sportMail", userId, {
        variables: {
          "name": $w("#nameInput").value,
          "sport": $w("#sportDropdown").value,
          "comments": $w("#commentsInput").value
        }
      } );
    }
  } );
} );

 

 

 

 

 

사용자가 로그인했는지 확인합니다.

 

if(wixUsers.currentUser.loggedIn) {

 

  

사용자가 로그인하면 우리는 사용자의 ID를 얻습니다.

 

const userId = wixUsers.currentUser.id;

 

 

emailUser( ) 함수 호출에서 userId 변수를 사용합니다.

 

wixUsers.emailUser("sportMail", userId, {

 

 

variables 객체의 값을 입력 요소의 값으로 대체했습니다.

 

"name": $w("#nameInput").value,
"sport": $w("#sportDropdown").value,
"comments": $w("#commentsInput").value

 

 

전자 메일이 전송되었는지 확인하고 오류가 발생한 경우를 처리하는 코드를 추가할 수도 있습니다. emailUser( ) 함수는 프로미스(Promise)를 반환하기 때문에 프로미스(Promise)가 성공적으로 해결되거나 오류로 인해 거부될 때 수행할 작업을 정의할 수 있습니다.

 

 

import wixUsers from 'wix-users';

$w.onReady(function () {  
  $w("#sportDataset").onAfterSave( () => {
    if(wixUsers.currentUser.loggedIn) {    
      const userId = wixUsers.currentUser.id;
    
      wixUsers.emailUser("sportMail", userId, {
          variables: {
            "name": $w("#nameInput").value,
            "sport": $w("#sportDropdown").value,
            "comments": $w("#commentsInput").value
          }
        } )
        .then( () => {
          // do something after the email was sent successfully
        } )
        .catch( (err) => {
          // handle error that prevented the email from being sent
        } );
    }
  } );
} );

 

 

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-sending-a-triggered-email-to-members