내정보

Guest 님
보유포인트
0
  • 재구매 할인
    30%
  • 컨텐츠 환불
    100%
  • 평점 포인트
    10%
  • 포인트 자동책정
    0%
콘텐츠 수 234

'관리자 메일문의 게시판' 위젯 스킨 0.1.2

최초 등록일: 2018.05.11 조회수 : 320

무료

5.0점 / 총 6명 참여
  • 구매자 31
  • 소개 '관리자 메일문의 게시판' 위젯의 스킨입니다 
  • 설치경로 /widgets/contactfree/skins 
  • 지원환경 XpressEngine,Rhymix 
  • 라이선스 XPM License (재배포 금지) 
  • 분류 스킨
  • 제작자 윤삼
  • 다운로드
    ap_contact.0.1.zip 13.68KB (잔여일 : -, 잔여횟수 : -)
    ap_contact.0.1.1.zip 13.87KB (잔여일 : -, 잔여횟수 : -)
    ap_contact.0.1.2.zip 13.9KB (잔여일 : -, 잔여횟수 : -)

 

0.1.2 업데이트

  • XE에 설정돼 있지 않은 current_lang 대신 xe.current_lang을 써서 호환성 문제 해결
  • 한 페이지 안에 위젯이 두 개 이상 있을 경우, 본 위젯에서 메시지 보내기 이후 다른 위젯에 영향을 줄 수 있는 문제도 해결
  • 메시지 내용 출력시 스크롤을 브라우저 최상단으로 이동 (이 기능이 필요없는 경우 js/main.js의 95~97행을 삭제하시면 됩니다)

 

0.1.1 업데이트

  • (페이지 이동이 없을 경우) 메시지 보내기 이후 결과값 화면을 좀 더 예쁘게 뿌려줍니다. (다만 게시판에 등록되는 문서는 원래대로 투박하게 그냥 갑니다ㅎㅎ)
  • 한국어와 영어를 완전하게 지원합니다. (스크립트에 current_lang라는 변수가 미리 할당돼 있다는 걸 이제야 알았거든요)

 

0.1 최초 배포

 

'관리자 메일문의 게시판'이라는 위젯 스킨입니다.

복잡한 기능 없이;; 이름, 이메일, 전화번호, 메시지 등으로 이뤄진 '문의 위젯'의 '스킨'이구요.

 

  1. 자료 제목이 '게시판'이어서 저도 잘 몰랐는데 contact_us 모듈과 비슷한 기능을 하는 위젯이라고 보시면 되겠습니다.
  2. 게시판을 하나 만들어 위젯에 연결시키면, 위젯페이지 등등에서 입력한 폼을 해당 게시판의 문서로 등록시켜줍니다.
  3. 게시판의 권한 설정을 잘 하셔야겠죠? 제 경우엔 모든 권한을 '관리자만'으로 해두고, '접근 권한'과 '글 작성'만 '모든 사용자'로 해놓으니 잘 되는 것 같더군요.
  4. 그리고 해당 게시판 '고급 설정'에서 '관리자 메일'을 등록해두면, 문의사항이 관리자에게로 이메일이 가는 메커니즘이에요.
  5. 해당 위젯에 대한 자세한 설명과 사용법은 https://www.xpressengine.com/index.php?mid=download&package_id=22753768 여기를 참조하시면 되겠습니다.

 

스킨의 디자인과 기능은 codyhouse에서 제공하는 템플릿을 활용했습니다.

https://codyhouse.co/gem/css-contact-form

(제가 무슨 창의성이 있겠어요ㅋ)

 

참고로, 라이믹스에서만 사용 해봐서 XE에서 되는지는 잘 모르겠습니다.

다운 받아 설치/사용할 분이 계시면, XE에서의 후기를 남겨주시면 좋겠네요.

 

아, 미리보기는 여기로ㅋ https://bit.ly/2IfEwde

 

 

1. 입력 화면

 

0.png

 

 

2. 출력 화면 (form 태그에서 onsubmit 등의 속성 제거, input 태그에 readonly 속성 부가, 보내기(Send Message) 버튼을 날려버려서 이중 등록을 방지)

 

1.png

 

profile

댓글 '38'

프로필 사진 profile
socialskyo 2018.05.11 10:44 댓글 별점
우리 멋진 윤삼님 산삼 마약같은 제품 또 가지고 오셨네요. 잘 사용하겠습니다~
프로필 사진 profile
윤삼 2018.05.11 11:59 댓글 별점
오랜만입니다! 또 하나의 마약 같이 해로운 습작이어서ㅋ 보시고 아니다 싶으시면 바로 삭제해주시면 돼요ㅎㅎ
프로필 사진 profile
웹지기 2018.05.11 11:07 댓글 별점
아주 예쁜 스킨이네요.
이렇게 작성되는 게시글도 보통의 게시글 작성과 동일한 과정을 거치나요?
푸시 알림등을 관리자가 받아야 해서요.
프로필 사진 profile
윤삼 2018.05.11 11:57 댓글 별점
초간단 위젯이어서 푸시 알림까지는 잘 모르겠어요. 푸시 알림 동작 시점이 글 등록 시점 이전인가 이후인가에 따라 다를 것 같은데요. 글 등록 이후 시점이라면 자동 연동될 것 같기도 합니다;;;
아, 그리고 퍼뜩 떠올랐는데, 위젯설정에서 글 등록 후 리다이렉트 옵션을 사용하지 않도록 하면 게시글 정보를 위젯에 바로 뿌려주도록 했거든요. 그건 디자인이 매우 미흡합니다ㅜ
프로필 사진 profile
웹지기 2018.05.11 11:59 댓글 별점
게시글 등록이 단순히 db에 삽입을 하는 방식이라면 푸시 알림 같은 동작이 연계 될 수 없어 질문을 드렸어요. 글 작성, 인서트 같은 act가 수반되어야 푸시알림 같은 서드파티가 작동을 하거든요.
프로필 사진 profile
란제리 2018.05.11 13:03 댓글 별점
잘쓰겠습니다.
프로필 사진 profile
윤삼 2018.05.12 02:04 댓글 별점
0.1.1로 버전 업데이트했어요~
프로필 사진 profile
란제리 2018.05.12 09:55 댓글 별점
감사합니다 ㅎㅎ
프로필 사진 profile
웹지기 2018.05.11 14:49 댓글 별점
구글리캡챠가 적용된 게시판에 사용을 하는라고 잘못된요청 때문에 고생을 좀 했네요.
혹시 구글리캡챠를 스킨에 적용할 수 있는 방법을 알고 계시나요?

원 게시판에 구글리캡챠애드온 자체를 풀어버리면 스팸이 너무 많이 작성될 것 입니다.
그래서 차라리 위젯 스킨에도 리캡챠를 적용할 수 있으면 좋을 것 같아서요.
프로필 사진 profile
윤삼 2018.05.11 15:14 댓글 별점
invisible 리캡차 말씀이신 거죠?
라르게덴님 제공 팁을 활용하면 될 것 같기도 하고... (타운에서 궁금증이 생겨 구글링을 했더니 다시 타운으로 왔어요ㅋ)
암튼 폼 전송시에 해당 코드도 같이 넘겨줄 수 있는지 시도와 확인을 좀 더 해봐야겠네요.

그리고 푸시알림은 제가 사용 자체를 안 해봐서 오리무중이네요;;;
프로필 사진 profile
웹지기 2018.05.11 15:27 댓글 별점
그냥 애드온에서

if((Context::get('document_srl') && $addon_info->apply_write != 'N' || in_array($this->act, $GLOBALS['_recaptcha_dacts'])) && Context::getResponseMethod() == 'HTML')


Context::get('document_srl') && 이부분만 지우고 위젯페이지에도 애드온 활성화 하면 되네요!!!
프로필 사진 profile
도리 2018.05.11 16:44 댓글 별점
윤삼님이다!!!!
오랜만입니다.

워드프레스에서 플러그인으로 제공되던 게시판이 라이믹스에도 생겨서 좋습니다.
항상 매번 감사함을 느껴요!
프로필 사진 profile
윤삼 2018.05.11 22:07 댓글 별점
반겨주셔서 감사합니다. 뭉클하네요 :)
이거는 기능을 간소화한 스킨이어서 워드프레스쪽만큼은 아니어서 부끄럽습니다~
프로필 사진 profile
오징 2018.05.12 00:02 댓글 별점
잘 받겠습니다 (__*)
프로필 사진 profile
윤삼 2018.05.12 02:05 댓글 별점
끄아아, 잘 써주신다면 언제나 감사하죠 :) 0.1.1로 버전 업데이트 했으니 참고해주세요~
프로필 사진 profile
천년 2018.05.12 02:49 댓글 별점
아... 이것도 꼭 필요한 자료~~ 오늘은 넘 늦었고, 내일 다운받아 설치해 봐야겠습니다.
감사합니다 @윤삼님^^

그리고 한가지 위 데모창에서 오른쪽 상단 메뉴 누르면 나오는 아코디언으로 꾸며진 페이지가 너무 멋지네요. 그 부분 페이지 메인으로 사용하면 좋을것 같다는 생각이 드네요.
혹시 공개~ 공유하실 생각은 없으신지요.^^
너무 무뢰한 부탁이지요^^
프로필 사진 profile
윤삼 2018.05.12 09:12 댓글 별점
좋게봐주셔서 감사합니다. 아코디언이라면 위젯 페이지 말씀이신가요? 근데 그게 여러 꼼수를 써서 만든 거여서 공개하기에는 부담이 너무 커요ㅜ
프로필 사진 profile
천년 2018.05.12 18:17 댓글 별점
아... 그러시군요. 꼼수가 아니라 @윤삼님의 실력이겠지요^^
역시 이러저러한 실력이 있으신 분들이 뭘해도 보기 좋은거 같아요.
탐은 나지만 윤삼님 같은 고수분들이 그리 말씀하시니 ㅎㅎㅎ 전 줘도 사용하지도 못할꺼 같아요.^^

항상 좋은 자료 공유해 주셔서 감사드립니다.^^
프로필 사진 profile
윤삼 2018.05.12 20:31 댓글 별점
네 이해해주셔서 감사합니다ㅡㅜ
프로필 사진 profile
천년 2018.05.12 22:55 댓글 별점
^^ 별 말씀을요
프로필 사진 profile
웹지기 2018.05.12 13:44 댓글 별점
0.1.1 버전을 사용하니 보내기를 누른 직 후 대상 게시판 목록으로 이동해 버리네요.
구버전을 사용해야겠습니다. XE입니다. 구글리캡차는 계속 사용중이구요.
프로필 사진 profile
윤삼 2018.05.12 20:33 댓글 별점
어라.. 그러면 안 되는데ㅜㅜ 이따 집에 들어가서 확인해봐야겠네요
프로필 사진 profile
윤삼 2018.05.12 22:06 댓글 별점
XE에 없는 js 변수 current_lang을 써서 생긴 문제였네요. xe.current_lang으로 바꿔서 0.1.2부터는 xe에서도 문제 없이 작동하도록 했습니다.
프로필 사진 profile
천년 2018.05.12 18:17 댓글 별점
아주 잘 사용할게요. 감사합니다.^^
프로필 사진 profile
천년 2018.05.16 23:57 댓글 별점
아... 설치해 너무너무 잘 사용하고 있습니다.@윤삼님^^
한가지 문의 사항이 있어서요. 전화번호 칸 자체를 없샐수는 없는지요??
제가 코드에 문외한이라...ㅠㅠ;; 바쁘시겠지만 부탁드려봅니다.
프로필 사진 profile
윤삼 2018.05.17 02:34 댓글 별점
contact.html 파일 28~31행
<div class="icon">
<label class="ap_label" for="phone">{$lang->phone}</label>
<input class="phone" type="tel" name="phone" id="phone" />
</div>
을 지워주시면 될 겁니다.
프로필 사진 profile
천년 2018.05.17 15:35 댓글 별점
앗 ^^ 넘 감사요 @윤삼님~~수정해서 잘 사용하겠습니다.
프로필 사진 profile
웹지기 2018.05.17 01:03 댓글 별점
텍스트로 간단히 접수를 받는 용도이지만 작성자가 줄바꿈을 해서 작성을 한 경우 작성한 상태 그대로 읽을 수 있게 저장하는 것을 검색을 해보니 아래와 같은 방법으로 해보니 되는 것 같습니다.

content += '<p> </p><p><b>' + f.find('label[for="message"]').text() + '</b> : </p><p> </p><p style="margin-left:32px;">' + f.find('#message').val().replace(/\n/g, "<br>") + '</p>';
프로필 사진 profile
웹지기 2018.05.17 01:08 댓글 별점
한가지 특이점이 있습니다. 큰 문제는 아니긴 하지만요.
PC에서 작성하면
아무게님으로부터의메시지 라고 제목이 작성이 되구요.
모바일에서 작성된 경우는
Message From 아무게 라고 작성이 됩니다.

그리고 저희는 마지막에 "등록되었습니다.' 가 아닌
success 라고 뜨네요.
프로필 사진 profile
윤삼 2018.05.17 02:41 댓글 별점
오오, 팁 감사합니다~!
근데, 모바일에서는 혹시 영어모드로 돼 있어서 그런 거 아닐까 싶네요.
프로필 사진 profile
웹지기 2018.05.17 08:09 댓글 별점
영어모드가 뭘까요? 모바일에서 영어모드가 설정이 가능한가요?
프로필 사진 profile
웹지기 2018.05.17 08:12 댓글 별점
글 등록 후 success 라고 뜨는건 PC 모바일 모두 그래요.
프로필 사진 profile
윤삼 2018.05.17 11:30 댓글 별점
언어 모드가 한국어일 경우(ko) 한국어가 출력이 되고 그렇지 않을 경우엔 영어가 출력되도록 해놨거든요.
어쩌면 웹지기님 모바일 환경이나 XE 모바일 환경에서는 xe.current_lang 변수가 안 잡히는 건지도 모르겠습니다.
현재 상황으로는 스크립트 설정에서 RX는 PC, 모바일 모두 다국어 모드가 감지되고, XE에서는 PC에서만 다국어가 감지되는 걸 수도 있겠구요. 이 부분은 시간 날 때 좀 더 체크해봐야겠어요.
그리고 success 메시지는 filter/insert.xml 첫 행 끝부분의 confirm_request를 confirm_submit로 바꿔보면 어떨까 싶습니다. contactfree 위젯 기본 스킨에 있던 xml를 그대로 가져와 쓰고 있었는데 확실친 않지만 이게 문제였을 수 있겠단 생각이 듭니다.
프로필 사진 profile
웹지기 2018.05.17 11:32 댓글 별점
다국어 관련만 먼저 제가 확인한 정보를 드리면
글 작성 단계에서 표시되는 문자가 한글로 표시되는 것을 보면 이부분 다국어 기능은 문제가 없어 보입니다.
프로필 사진 profile
웹지기 2018.05.17 11:38 댓글 별점
confirm_submit 으로 바꿔도 마지막 성공 메시지는 success 로 뜨네요. 운영하시는 곳에서 확인했을때는 한글로 나왔습니다.
프로필 사진 profile
윤삼 2018.05.17 11:48 댓글 별점
php와 스크립트에서 다국어 설정 가져오는 방식이 조금 다를 수 있어서요(물론 서로 연동은 되겠지만요).
js/main.js에서 일단 xe.current_lang === 'ko'(두 군데일 거예요)을 찾아 jQuery('html').attr('lang') == 'ko'로 바꿔보면 어떨까요?

에잉.. 성공 메시지는 XE랑 RX랑 코어에서 설정된 콜백함수가 다른 모양이네요.
alert(ret_obj['message']);를 찾아서
alert('등록했습니다'); 정도로 바꾸시는 게 좋겠습니다.
프로필 사진 profile
웹지기 2018.05.17 11:54 댓글 별점
말씀하신대로 했더니 잘 되네요~ 감사합니다.
프로필 사진 profile
민우 2018.05.19 20:42 댓글 별점
받아갑니다.^^ 감사합니다.
서버에 요청 중입니다. 잠시만 기다려 주십시오...