# Uniqlo VN - Guideline to implement Mailchimp API via Ematicjs

| Revision | Date | PIC | Comment|
| -------- | -------- | -------- |---|
| Version 1| | Kelly ||
| Version 2| 12/18/2020 | Kelly| Updated in part 2-a |
| Version 3| 10/03/2021 | Peter| Updated in part 2-b |

## 1. Ematicjs - Init code

We need to include the Ematic init script on every page of the website. If we only want to collect user information on some specific pages, we can include the script on these pages only.

Copy and paste the following JavaScript snippet into your **Subscribe Successfully** page so that it appears before the closing `</head>` tag

<script>
    (function(i,s,o,g,r,a,m){i['EmaticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//api.ematicsolutions.com/v1/ematic.min.js','ematics');
var ematicApikey = "c27fd3a9ee9511eabba10242ac110002-sg7";

var opt = {
    email: "",
    country_iso: "vietnam",
    currency_iso: "vnd",
    language_iso: "vietnam"
  };
    
    //initialize
    ematics("create", ematicApikey, opt);
</script>

## 2. Collect new users from Sign up form

### a. Store user fields after they have filled in the form

On the Sign up form, embed the following code before `</body>` tag to save user fields when they have filled in the information and click "Đăng ký ngay"

<script>
$("#signup").on("submit",function(e) {
    e.preventDefault(); // cancel default submission
    var data = {
               "email": document.getElementsByName("email")[0].value,
               "fname": document.getElementsByName("firstname")[0].value,
               "lname": document.getElementsByName("lastname")[0].value,
               "city": document.getElementById("state").value,
               "phone": (document.getElementById("phone").value.slice(0,6) == '(+84)0')? document.getElementById("phone").value.replace('(+84)0','0') : document.getElementById("phone").value.replace('(+84)','0'),
               "men": (document.getElementById("chk_mens").checked)? "Men":null,
               "women": (document.getElementById("chk_womens").checked)? "Women":null,
               "kids": (document.getElementById("chk_kids").checked)? "Kids":null,
               "privacyPolicy": (document.getElementById("agree_privacy").checked)? "Privacy policy":null,
               "marketingPolicy": (document.getElementById("agree_SPI").checked)? "Marketing policy":null
            }
    sessionStorage.setItem('data', JSON.stringify(data));
    window.location.replace("<Url to Sucessfully page>");
});
</script>

### b. Send user info to Mailchimp

On the successful page, embed the follow code before `</body>` to push the information to Mailchimp.

**Important Updates**
> **Version 3**: We added some logic to group city location.

<script>
    var data = JSON.parse(sessionStorage.getItem("data"));
    var preference_group = [data.men, data.women, data.kids];
    var policy_group = [data.privacyPolicy, data.marketingPolicy];
    var preference_group_fil = preference_group.filter(function (a) {
        return a != null;
    });
    var policy_group_fil = policy_group.filter(function (b) {
        return b != null;
    });

    function groupingCityLocation(city) {

        var locationMienNam = new Set(["Thành phố Hồ Chí Minh", "Bà Rịa - Vũng Tàu", "Bình Định", "Bình Dương", "Đồng Nai", "Đắk Lắk", "Đồng Nai", "Kiên Giang", "Kon Tum", "Lâm Đồng", "Long An", "Sóc Trăng", "Thành phố Cần Thơ", "Thành phố Đà Nẵng", "Thừa Thiên Huế", "Tiền Giang", "Khánh Hòa", "Gia Lai", "Bình Dương", "Thừa Thiên Huế", "Phú Yên", "Ninh Thuận", "Bình Thuận", "Đắk Nông", "Bình Phước", "Tây Ninh", "Bến Tre"]);
        var locationMienBac = new Set(["Thành phố Hà Nội", "Bắc Giang", "Bắc Ninh", "Hà Tĩnh", "Ninh Bình", "Quảng Ninh", "Thanh Hóa", "Thành phố Hải Phòng", "Tuyên Quang", "Vĩnh Phúc", "Nghệ An", "Hà Giang", "Cao Bằng", "Lào Cai", "Bắc Kạn", "Điện Biên", "Lai Châu", "Sơn La", "Yên Bái", "Hoà Bình", "Thái Nguyên", "Lạng Sơn", "Phú Thọ", "Hải Dương", "Hưng Yên", "Thái Bình", "Hà Nam", "Nam Định"]);
        var groupingName = ['Location - Miền Nam', 'Location - Miền Bắc'];

        if (locationMienNam.has(city)) {
            return {
                'name': groupingName[0],
                'groups': city
            }
        } else if (locationMienBac.has(city)) {
            return {
                'name': groupingName[1],
                'groups': city
            }
        } else {
            return -1; // no group
        }
    }

    var mergeVars = {
        "LASTNAME": data.lname,
        "FIRSTNAME": data.fname,
        "PHONENUM": data.phone,
        "CITY": data.city,
        "groupings": [
            {
                name: "Policy",
                groups: policy_group_fil
            },
            {
                name: "Preferences",
                groups: preference_group_fil
            },

        ]
    };

    var cityGroup = groupingCityLocation(mergeVars.CITY);

    if (cityGroup != -1) {
        mergeVars.groupings.push(groupingCityLocation(mergeVars.CITY))
    }

    ematics("subscribe", "", data.email, mergeVars, function (e) {
        if (e["error"] == 0) {
            // Success
            console.log("success");
            sessionStorage.removeItem("data"); //Remove all session data once done
        } else {
            // Error
            console.log(e["errorMessage"])
        }
    });
</script>