PageSourceSearch

https://buttonmybuttons.com/account/login

html buttonmybuttons.com collected 2026-09-26 05:51:55 UTC 113,549 bytes, 3,185 lines download raw bytes

1<!doctype html>
2<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
4<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
5<!--[if IE 9 ]><html class="ie9 no-js"> <![endif]-->
6<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
7<head>
8
9  <!-- Basic page needs ================================================== -->
10  <meta charset="utf-8">
11  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
12
13  
14  <link rel="icon" href="https://cdn.store-assets.com/s/1357257/f/13451811.png" />
15  
16
17  <!-- Title and description ================================================== -->
18  <title>
19  Login &ndash; ButtonMyButtons
20  </title>
21
22  
23
24  <!-- Social meta ================================================== -->
25  
26
27  <meta property="og:type" content="website">
28  <meta property="og:title" content="Login">
29  <meta property="og:url" content="https://buttonmybuttons.com/account/login">
30  
31    <meta property="og:image" content="https://cdn.store-assets.com/s/1357257/f/13451811.png">
32    <meta property="og:image:secure_url" content="https://cdn.store-assets.com/s/1357257/f/13451811.png">
33  
34
35
36<meta property="og:description" content="Couture Baby Wear | Custom Designs Only
37Limited Slots | Malaysia | Ships Worldwide">
38<meta property="og:site_name" content="ButtonMyButtons">
39
40
41
42  <meta name="twitter:card" content="summary">
43
44
45
46  <meta name="twitter:site" content="@">
47
48
49
50
51
52  <!-- Helpers ================================================== -->
53  <link rel="canonical" href="https://buttonmybuttons.com/account/login">
54  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
55  <meta name="theme-color" content="#000000">
56  
57  
57<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script>
57
58  
59  <!-- Header hook for plugins ================================================== -->
60  
61<!-- ScriptTags -->
62<script>window.__st={p: "customers",cid: null,cem: null,cph: null,cfn: null,cln: null,cge: null,cdb: null,ccc: null};</script>
62<script src='/assets/events.js'></script>
62<script>(function(){function asyncLoad(){var urls=['/assets/traffic.js?v=1','https://smartarget.online/loader.js?type=int&u=f3bfbe4527fc4f8a5a0be9f0e8d39ffc2c525a53&source=easystore_rushy_deal'];for(var i=0;i<urls.length;i++){var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src=urls[i];var x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);}}window.attachEvent ? window.attachEvent('onload', asyncLoad) : window.addEventListener('load', asyncLoad, false);})();</script>
62
63<!-- /ScriptTags -->
64
65  
66  
67  
67<script src="https://store-themes.easystore.co/1357257/themes/295437/assets/global.js?t=1787472242" defer="defer"></script>
67
68
69  
70  
71    
71<script src="/assets/shop_common.js" type="text/javascript" ></script>
71
72    
72<script src="/assets/customer_area.js" type="text/javascript" ></script>
72
73  
74  
74<script>
75  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
76  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
77  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
78  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
79
80  ga('create', '', 'auto','myTracker');
81  ga('myTracker.send', 'pageview');
82
83  </script>
83
84  
85  
85<script src="/assets/storefront.js?id=1d419de2011a5572c98b" type="text/javascript" ></script>
85
86  
87
88  <!-- CSS ================================================== -->
89  <style>
90      @font-face {
91        font-family: 'Abhaya Libre';
92        font-style: normal;
93        font-weight: regular;
94        src: local('Abhaya Libre regular'), local('Abhaya Libre-regular'), url(https://fonts.gstatic.com/s/abhayalibre/v6/e3tmeuGtX-Co5MNzeAOqinEge0PWovdU4w.ttf) format('truetype');
95      }
96
97      @font-face {
98        font-family: 'Abhaya Libre';
99        font-style: normal;
100        font-weight: regular;
101        src: local('Abhaya Libre regular'), local('Abhaya Libre-regular'), url(https://fonts.gstatic.com/s/abhayalibre/v6/e3tmeuGtX-Co5MNzeAOqinEge0PWovdU4w.ttf) format('truetype');
102      }
103
104      :root {
105        --font-body-family: 'Abhaya Libre', serif;
106        --font-body-style: normal;
107        --font-body-weight: 500;
108
109        --font-heading-family: 'Abhaya Libre', serif;
110        --font-heading-style: normal;
111        --font-heading-weight: 700;
112
113        --color-heading-text: 0,0,0;
114        --color-base-text: 0,0,0;
115        --color-base-background-1: 255,255,255;
116        --color-base-background-2: 255,255,255;
117        
118        --color-base-solid-button-labels: 255,255,255;
119        --color-base-outline-button-labels: 5,28,98;
120        
121        --color-base-accent-1: 0,0,0;
122        --color-base-accent-2: 0,0,0;
123        --payment-terms-background-color: 255,255,255;
124
125        --gradient-base-background-1: 255,255,255;
126        --gradient-base-background-2: 255,255,255;
127        --gradient-base-accent-1: 0,0,0;
128        --gradient-base-accent-2: 0,0,0;
129
130        --page-width: 145rem;
131      }
132
133      *,
134      *::before,
135      *::after {
136        box-sizing: inherit;
137      }
138
139      html {
140        box-sizing: border-box;
141        font-size: 62.5%;
142        height: 100%;
143      }
144
145      body {
146        display: grid;
147        grid-template-rows: auto auto 1fr auto;
148        grid-template-columns: 100%;
149        min-height: 100%;
150        margin: 0;
151        font-size: 1.5rem;
152        letter-spacing: 0.06rem;
153        line-height: 1.8;
154        font-family: var(--font-body-family);
155        font-style: var(--font-body-style);
156        font-weight: var(--font-body-weight);
157        
158      }
159
160      @media screen and (min-width: 750px) {
161        body {
162          font-size: 1.6rem;
163        }
164      }
165   </style>
166  
167  <link href="https://store-themes.easystore.co/1357257/themes/295437/assets/base.css?t=1787472242" rel="stylesheet" type="text/css" media="screen" />
168
169  
170  
171
172  
172<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>
172
173</head>
174
175<body id="login" class="template-customers" >
176	
177  
178<!-- Snippet:global/body_start: Announcement Bar -->
179<link rel="stylesheet" href="https://apps.easystore.co/assets/css/annoucement-bar/slider.css?v1.01">
180
181<input type="hidden" id="total_announcement_left" name="total_announcement_left" value="1">
182<input type="hidden" id="locale" name="locale" value="en_US">
183
184<slider-announcement-bar-app id="announcement-bar" name="announcement-bar" style="
185    border: unset;
186    padding: 4px 0px;
187    margin: 0px;
188    z-index:2999;
189    background:rgb(99, 97, 97);
190    color:rgb(255, 255, 255);
191    
192">
193
194  <div style="
195    display: flex;
196    justify-content: space-between;
197    align-items: center;
198    padding: 0px 0px;
199    border-top: 0px;
200    border-bottom: 0px;
201    border-color: transparent;
202  ">
203    <div style="height: 24px;">
204          </div>
205
206    <ul style="flex-grow: 2; margin: 0px;">
207            <li id="announcement_bar_0" style="
208          display: flex;
209          justify-content: center;
210          align-items: center;
211          flex-wrap: wrap;
212          margin: 0px;
213          width: 100%;
214          word-wrap: break-word;
215        ">
216        Flexible payment available via Grab PayLater &amp; Atome
217                        <input type="hidden" id="expired_at_0" name="expired_at_0" value="2025-12-11 00:00">
218      </li>
219          </ul>
220
221    <div style="display: flex;">
222                </div>
223  </div>
224
225
226</slider-announcement-bar-app>
227
228<script>
229  $(function() {
230    var is_top_enabled =  0;
231
232    const loadScript = function(url, callback) {
233      const script = document.createElement("script");
234      script.type = "text/javascript";
235      // If the browser is Internet Explorer.
236      if (script.readyState) {
237        script.onreadystatechange = function() {
238          if (script.readyState == "loaded" || script.readyState == "complete") {
239            script.onreadystatechange = null;
240            callback();
241          }
242        };
243        // For any other browser.
244      } else {
245        script.onload = function() {
246          callback();
247        };
248      }
249      script.src = url;
250      document.getElementsByTagName("head")[0].appendChild(script);
251    };
252
253    const announcementBarAppJS = function($) {
254
255      $('#announcement-close-button').on('click', function() {
256        $('#announcement-bar, #announcement-bar-top').hide();
257        $('#easystore-section-header, .sticky-topbar').css('top', '');
258      });
259    }
260
261    if (typeof jQuery === 'undefined') {
262      loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function() {
263        jQuery = jQuery.noConflict(true);
264        announcementBarAppJS(jQuery);
265      });
266    } else {
267      announcementBarAppJS(jQuery);
268    }
269
270
271    
272    if(is_top_enabled){
273      // Prevent announcement bar block header
274      setTimeout(()=>{
275        $('#easystore-section-header, .sticky-topbar').css('top', $('#announcement-bar').height()+'px');
276      }, 2000);
277    }
278  });
279
280  setInterval(function() {
281    const total_announcement = "1"
282    var total_announcement_left = $("#total_announcement_left").val();
283
284    for (let i = 0; i <= total_announcement; i++) {
285      const startDate = new Date();
286      const endDateStr = $("#expired_at_" + i).val();
287      const endDate = endDateStr == undefined ? new Date() : new Date(endDateStr.replace(/-/g, "/"));
288      const seconds = (endDate.getTime() - startDate.getTime()) / 1000;
289
290      const days = parseInt(seconds / 86400);
291      const hours = parseInt((seconds % 86400) / 3600);
292      const mins = parseInt((seconds % 86400 % 3600) / 60);
293      const secs = parseInt((seconds % 86400 % 3600) % 60);
294
295      // use to translate countdown unit
296      // (translate based on the preferred language when save announcement bar setting)
297      String.prototype.translate = function() {
298        try {
299          if ($("#locale").val() == "zh_TW") {
300            if (this.toString() === 'day') {
301              return "天";
302            }
303            if (this.toString() === 'hour') {
304              return "小時";
305            }
306            if (this.toString() === 'min') {
307              return "分鐘";
308            }
309            if (this.toString() === 'sec') {
310              return "秒";
311            }
312          } else {
313            if (this.toString() === 'day') {
314              if (days > 0) {
315                return "Days";
316              } else {
317                return "Day";
318              }
319            } else if (this.toString() === 'hour') {
320              if (hours > 0) {
321                return "Hours";
322              } else {
323                return "Hour";
324              }
325            } else if (this.toString() === 'min') {
326              if (mins > 0) {
327                return "Mins";
328              } else {
329                return "Min";
330              }
331            } else if (this.toString() === 'sec') {
332              if (secs > 0) {
333                return "Secs";
334              } else {
335                return "Sec";
336              }
337            }
338          }
339        } catch (error) {
340          console.log("Some errors heres", error);
341        }
342      };
343
344      const announcementBar_countdown = document.getElementById("announcementBar_countdown_" + i);
345      if (announcementBar_countdown && seconds > 0) {
346
347        $(announcementBar_countdown).show()
348        announcementBar_countdown.innerHTML = `
349          <div>
350            ${days} <small>${'day'.translate()}</small>
351          </div>
352          <div>
353            ${hours} <small>${'hour'.translate()}</small>
354          </div>
355          <div>
356            ${mins} <small>${'min'.translate()}</small>
357          </div>
358          <div>
359            ${secs} <small>${'sec'.translate()}</small>
360          </div>
361        `;
362
363
364      } else if (announcementBar_countdown && seconds <= 0) {
365        $("#announcement_bar_" + i).remove();
366        total_announcement_left = total_announcement_left - 1;
367        $("#total_announcement_left").val(total_announcement_left);
368      }
369    }
370
371    showOrHide(total_announcement_left);
372  }, 1000);
373
374
375  function showOrHide(total_announcement_left) {
376    if (total_announcement_left <= 1) {
377      $("#previous-announcement-bar-button,#next-announcement-bar-button").hide();
378    } else {
379      $("#previous-announcement-bar-button,#next-announcement-bar-button").show();
380    }
381
382    if (total_announcement_left == 0) {
383      $("#announcement-close-button").hide();
384      $("#announcement-bar").hide();
385      $('#announcement-bar-top').hide();
386      $('#easystore-section-header, .sticky-topbar').css('top', '');
387    }
388  };
389
390  let annoucementBarAutoMoveInterval = '';
391  class AnnouncementBarAppSlider extends HTMLElement {
392    constructor() {
393      super();
394      this.slider = this.querySelector('ul');
395      this.sliderItems = this.querySelectorAll('li');
396      this.prevButton = this.querySelector('a[name="previous"]');
397      this.nextButton = this.querySelector('a[name="next"]');
398
399      if (!this.slider || !this.nextButton) return;
400
401      const resizeObserver = new ResizeObserver(entries => this.initPages());
402      resizeObserver.observe(this.slider);
403
404      this.slider.addEventListener('scroll', this.update.bind(this));
405      this.prevButton.addEventListener('click', this.onButtonClick.bind(this));
406      this.nextButton.addEventListener('click', this.onButtonClick.bind(this));
407
408
409    }
410
411    initPages() {
412      const sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
413      this.sliderLastItem = sliderItemsToShow[sliderItemsToShow.length - 1];
414      if (sliderItemsToShow.length === 0) return;
415      this.slidesPerPage = Math.floor(this.slider.clientWidth / sliderItemsToShow[0].clientWidth);
416      this.totalPages = sliderItemsToShow.length - this.slidesPerPage + 1;
417      this.update();
418      let self = this
419      var total_announcement_left = $("#total_announcement_left").val();
420      annoucementBarAutoMoveInterval = setInterval(function() {
421        if (total_announcement_left > 1) {
422          self.moveSlide('next')
423        }
424      }, 5000)
425    }
426
427    update() {
428      this.currentPage = Math.round(this.slider.scrollLeft / this.sliderLastItem.clientWidth) + 1;
429    }
430
431    onButtonClick(event) {
432      event.preventDefault();
433      let self = this;
434      self.moveSlide(event.currentTarget.name);
435    }
436
437
438    moveSlide(move_to) {
439
440      clearInterval(annoucementBarAutoMoveInterval);
441      let self = this;
442      annoucementBarAutoMoveInterval = setInterval(function() {
443        self.moveSlide('next');
444      }, 5000)
445
446      if (move_to === 'previous' && this.currentPage === 1) {
447        this.slider.scrollTo({
448          left: this.sliderLastItem.clientWidth * (this.totalPages - 1)
449        });
450      } else if (move_to === 'next' && this.currentPage === this.totalPages) {
451        this.slider.scrollTo({
452          left: 0
453        });
454      } else {
455        const slideScrollPosition = move_to === 'next' ? this.slider.scrollLeft + this.sliderLastItem
456          .clientWidth : this.slider.scrollLeft - this.sliderLastItem.clientWidth;
457        this.slider.scrollTo({
458          left: slideScrollPosition
459        });
460      }
461    }
462
463  }
464
465  customElements.define('slider-announcement-bar-app', AnnouncementBarAppSlider);
466</script>
466
467
468<!-- /Snippet -->
469
470<!-- Snippet:global/body_start: Console Extension -->
471<div id='es_console' style='display: none;'>1357257</div>
472<!-- /Snippet -->
473
474	
475 	<style>
476  header {
477    --logo-width: 170px;
478  }
479  .header-wrapper,
480  .header-wrapper .list-menu--disclosure,
481  .header-wrapper .search-modal{
482    background-color: #FFFFFF;
483  }
484  .header-wrapper .search-modal .field__input{
485    background-color: rgb(var(--color-background));
486  }
487  .header-wrapper summary .icon-caret,
488  .header-wrapper .header__menu-item a,
489  .header-wrapper .list-menu__item,
490  .header-wrapper .link--text{
491    color: #000000;
492  }
493  
494  .search-modal__form{
495    position: relative;
496  }
497  
498  .dropdown {
499    display: none;
500    position: absolute;
501    top: 100%;
502    left: 0;
503    width: 100%;
504    padding: 5px 0;
505    background-color: #fff;
506    color:#000;
507    z-index: 1000;
508    border-bottom-left-radius: 15px;
509    border-bottom-right-radius: 15px;
510    border: 1px solid rgba(var(--color-foreground), 1);
511    border-top: none;
512    overflow-x: hidden;
513    overflow-y: auto;
514    max-height: 350px;
515  }
516  
517  .dropdown-item {
518    padding: 0.4rem 2rem;
519    cursor: pointer;
520    line-height: 1.4;
521    overflow: hidden;
522    text-overflow: ellipsis;
523    white-space: nowrap;
524  }
525  
526  .dropdown-item:hover{
527    background-color: #f3f3f3;
528  }
529  
530  .search__input.is-focus{
531    border-radius: 15px;
532    border-bottom-left-radius: 0;
533    border-bottom-right-radius: 0;
534    border: 1px solid rgba(var(--color-foreground), 1);
535    border-bottom: none;
536    box-shadow: none;
537  }
538  
539  .clear-all {
540    text-align: right;
541    padding: 0 2rem 0.2rem;
542    line-height: 1;
543    font-size: 70%;
544    margin-bottom: -2px;
545  }
546  
547  .clear-all:hover{
548    background-color: #fff;
549  }
550  
551  .search-input-focus .easystore-section-header-hidden{
552    transform: none;
553  }
554  .referral-notification {
555    position: absolute;
556    top: 100%;
557    right: 0;
558    background: white;
559    border: 1px solid #e0e0e0;
560    border-radius: 8px;
561    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
562    width: 280px;
563    z-index: 1000;
564    padding: 16px;
565    margin-top: 8px;
566    font-size: 14px;
567    line-height: 1.4;
568  }
569  
570  .referral-notification::before {
571    content: '';
572    position: absolute;
573    top: -8px;
574    right: 20px;
575    width: 0;
576    height: 0;
577    border-left: 8px solid transparent;
578    border-right: 8px solid transparent;
579    border-bottom: 8px solid white;
580  }
581  
582  .referral-notification::after {
583    content: '';
584    position: absolute;
585    top: -9px;
586    right: 20px;
587    width: 0;
588    height: 0;
589    border-left: 8px solid transparent;
590    border-right: 8px solid transparent;
591    border-bottom: 8px solid #e0e0e0;
592  }
593  
594  .referral-notification h4 {
595    margin: 0 0 8px 0;
596    color: #2196F3;
597    font-size: 16px;
598    font-weight: 600;
599  }
600  
601  .referral-notification p {
602    margin: 0 0 12px 0;
603    color: #666;
604  }
605  
606  .referral-notification .referral-code {
607    background: #f5f5f5;
608    padding: 8px;
609    border-radius: 4px;
610    font-family: monospace;
611    font-size: 13px;
612    text-align: center;
613    margin: 8px 0;
614    border: 1px solid #ddd;
615  }
616  
617  .referral-notification .close-btn {
618    position: absolute;
619    top: 8px;
620    right: 8px;
621    background: none;
622    border: none;
623    font-size: 18px;
624    color: #999;
625    cursor: pointer;
626    padding: 0;
627    width: 20px;
628    height: 20px;
629    line-height: 1;
630  }
631  
632  .referral-notification .close-btn:hover {
633    color: #333;
634  }
635  
636  .referral-notification .action-btn {
637    background: #2196F3;
638    color: white;
639    border: none;
640    padding: 8px 16px;
641    border-radius: 4px;
642    cursor: pointer;
643    font-size: 12px;
644    margin-right: 8px;
645    margin-top: 8px;
646  }
647  
648  .referral-notification .action-btn:hover {
649    background: #1976D2;
650  }
651  
652  .referral-notification .dismiss-btn {
653    background: transparent;
654    color: #666;
655    border: 1px solid #ddd;
656    padding: 8px 16px;
657    border-radius: 4px;
658    cursor: pointer;
659    font-size: 12px;
660    margin-top: 8px;
661  }
662  
663  .referral-notification .dismiss-btn:hover {
664    background: #f5f5f5;
665  }
666  .referral-modal__dialog {
667    transform: translate(-50%, 0);
668    transition: transform var(--duration-default) ease, visibility 0s;
669    z-index: 10000;
670    position: fixed;
671    top: 20vh;
672    left: 50%;
673    width: 100%;
674    max-width: 350px;
675    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
676    border-radius: 12px;
677    background-color: #fff;
678    color: #000;
679    padding: 20px;
680    text-align: center;
681  }
682
683  .modal-overlay.referral-modal-overlay {
684    position: fixed;
685    top: 0;
686    left: 0;
687    width: 100%;
688    height: 100%;
689    background-color: rgba(0, 0, 0, 0.7);
690    z-index: 2001;
691    display: block;
692    opacity: 1;
693    transition: opacity var(--duration-default) ease, visibility 0s;
694  }
695</style>
696
697<link rel="preload" href="https://store-themes.easystore.co/1357257/themes/295437/assets/section-header.css?t=1787472242" as="style" onload="this.onload=null;this.rel='stylesheet'">
698<link rel="preload" href="https://store-themes.easystore.co/1357257/themes/295437/assets/component-list-menu.css?t=1787472242" as="style" onload="this.onload=null;this.rel='stylesheet'">
699<link rel="preload" href="https://store-themes.easystore.co/1357257/themes/295437/assets/component-menu-drawer.css?t=1787472242" as="style" onload="this.onload=null;this.rel='stylesheet'">
700<link rel="preload" href="https://store-themes.easystore.co/1357257/themes/295437/assets/component-cart-notification.css?v1.1?t=1787472242" as="style" onload="this.onload=null;this.rel='stylesheet'">
701
702<script src="https://store-themes.easystore.co/1357257/themes/295437/assets/cart-notification.js?t=1787472242" defer="defer"></script>
vendor: 2 bytes, line 702
702
703<script src="https://store-themes.easystore.co/1357257/themes/295437/assets/details-modal.js?t=1787472242" defer="defer"></script>
703
704
705<svg xmlns="http://www.w3.org/2000/svg" class="hidden">
706  <symbol id="icon-search" viewbox="0 0 18 19" fill="none">
707    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.03 11.68A5.784 5.784 0 112.85 3.5a5.784 5.784 0 018.18 8.18zm.26 1.12a6.78 6.78 0 11.72-.7l5.4 5.4a.5.5 0 11-.71.7l-5.41-5.4z" fill="currentColor"/>
708  </symbol>
709
710  <symbol id="icon-close" class="icon icon-close" fill="none" viewBox="0 0 18 17">
711    <path d="M.865 15.978a.5.5 0 00.707.707l7.433-7.431 7.579 7.282a.501.501 0 00.846-.37.5.5 0 00-.153-.351L9.712 8.546l7.417-7.416a.5.5 0 10-.707-.708L8.991 7.853 1.413.573a.5.5 0 10-.693.72l7.563 7.268-7.418 7.417z" fill="currentColor">
712  </symbol>
713</svg>
714
715
716<div id="easystore-section-header">
717  <sticky-header class="header-wrapper header-wrapper--border-bottom">
718    <header class="header header--middle-left page-width header--has-menu" itemscope itemtype="http://schema.org/Organization">
719      <header-drawer data-breakpoint="tablet">
720        <details class="menu-drawer-container menu-opening">
721          <summary class="header__icon header__icon--menu header__icon--summary link link--text focus-inset" aria-label="Menu" role="button" aria-expanded="true" aria-controls="menu-drawer">
722            <span>
723              
724
725
726    <svg class="icon icon-hamburger " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path d="M32.5,65h535a25,25,0,0,0,0-50H32.5a25,25,0,0,0,0,50Z" fill="currentColor"/><path d="M567.5,275H32.5a25,25,0,0,0,0,50h535a25,25,0,0,0,0-50Z" fill="currentColor"/><path d="M567.5,535H32.5a25,25,0,0,0,0,50h535a25,25,0,0,0,0-50Z" fill="currentColor"/></svg>
727
728  
729
730              
731
732
733    <svg class="icon icon-close " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path d="M335.36,300,581.87,53.48a25,25,0,0,0-35.35-35.35L300,264.64,53.48,18.13A25,25,0,0,0,18.13,53.48L264.64,300,18.13,546.52a25,25,0,0,0,35.35,35.35L300,335.36,546.52,581.87a25,25,0,0,0,35.35-35.35Z" fill="currentColor"/></svg>
734
735  
736
737            </span>
738          </summary>
739          <div id="menu-drawer" class="menu-drawer motion-reduce" tabindex="-1">
740            <div class="menu-drawer__inner-container">
741              <div class="menu-drawer__navigation-container">
742                <nav class="menu-drawer__navigation">
743                  <ul class="menu-drawer__menu list-menu" role="list">
744                    
745                    
746                      
747                        <li>
748                          <a href="/"  class="menu-drawer__menu-item list-menu__item link link--text focus-inset">
749                            HOME
750                          </a>
751                        </li>
752                      
753                    
754                    
755                      
756                        <li>
757                          <a href="/pages/begin-your-bespoke-journey"  class="menu-drawer__menu-item list-menu__item link link--text focus-inset">
758                            BESPOKE
759                          </a>
760                        </li>
761                      
762                    
763                    
764                      
765                        <li>
766                          <a href="/pages/our-story"  class="menu-drawer__menu-item list-menu__item link link--text focus-inset">
767                            OUR STORY
768                          </a>
769                        </li>
770                      
771                    
772                    
773                      
774                        
775                        <li>
776                          <details>
777                                <summary class="menu-drawer__menu-item list-menu__item link link--text focus-inset" role="button" aria-expanded="false" aria-controls="link-Bags">
778                                  <a href="/collections/all"  class="link--text list-menu__item menu-drawer__menu-item">
779                                    READY TO WEAR
780                                  </a>
781                                  
782
783
784    <svg class="icon icon-arrow " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 339.56"><path d="M31.06,196.67H504l-88.56,88.56a26.89,26.89,0,1,0,38,38L588,188.79a26.89,26.89,0,0,0,0-38L453.49,16.29a26.89,26.89,0,0,0-38,38L504,142.88H31.06a26.9,26.9,0,0,0,0,53.79Z" fill="currentColor"/></svg>
785
786  
787
788                                  
789
790
791    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret " viewBox="0 0 10 6">
792      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>
793    </svg>
794
795  
796
797                                </summary>
798                                <div class="menu-drawer__submenu motion-reduce" tabindex="-1">
799                                  <div class="menu-drawer__inner-submenu">
800                                    <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
801                                      
802
803
804    <svg class="icon icon-arrow " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 339.56"><path d="M31.06,196.67H504l-88.56,88.56a26.89,26.89,0,1,0,38,38L588,188.79a26.89,26.89,0,0,0,0-38L453.49,16.29a26.89,26.89,0,0,0-38,38L504,142.88H31.06a26.9,26.9,0,0,0,0,53.79Z" fill="currentColor"/></svg>
805
806  
807
808                                      READY TO WEAR
809                                    </button>
810                                    <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
811                                      
812                                        
813                                        
814                                          <li>
815                                            <a href="/collections/new-arrival"  class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
816                                              New arrival
817                                            </a>
818                                          </li>
819                                        
820                                      
821                                        
822                                        
823                                          <li>
824                                            <a href="/collections/baby-dress"  class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
825                                              Baby Dress
826                                            </a>
827                                          </li>
828                                        
829                                      
830                                        
831                                        
832                                          <li>
833                                            <a href="/collections/baby-romper"  class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
834                                              Baby Romper
835                                            </a>
836                                          </li>
837                                        
838                                      
839                                        
840                                        
841                                          <li>
842                                            <a href="/collections/toddler-dress"  class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
843                                              Toddler Dress
844                                            </a>
845                                          </li>
846                                        
847                                      
848                                        
849                                        
850                                          <li>
851                                            <a href="/collections/baju-kurung"  class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
852                                              Kids Baju Kurung
853                                            </a>
854                                          </li>
855                                        
856                                      
857                                        
858                                        
859                                          
860                                          <li>
861                                            <details>
862                                                  <summary class="menu-drawer__menu-item list-menu__item link link--text focus-inset" role="button" aria-expanded="false" aria-controls="link-Bags">
863                                                    <a href="/collections/nylon-headband"  class="link--text list-menu__item menu-drawer__menu-item">
864                                                      Accessories
865                                                    </a>
866                                                    
867
868
869    <svg class="icon icon-arrow " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 339.56"><path d="M31.06,196.67H504l-88.56,88.56a26.89,26.89,0,1,0,38,38L588,188.79a26.89,26.89,0,0,0,0-38L453.49,16.29a26.89,26.89,0,0,0-38,38L504,142.88H31.06a26.9,26.9,0,0,0,0,53.79Z" fill="currentColor"/></svg>
870
871  
872
873                                                    
874
875
876    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret " viewBox="0 0 10 6">
877      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>
878    </svg>
879
880  
881
882                                                  </summary>
883                                                  <div class="menu-drawer__submenu motion-reduce" tabindex="-1">
884                                                    <div class="menu-drawer__inner-submenu">
885                                                      <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
886                                                        
887
888
889    <svg class="icon icon-arrow " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 339.56"><path d="M31.06,196.67H504l-88.56,88.56a26.89,26.89,0,1,0,38,38L588,188.79a26.89,26.89,0,0,0,0-38L453.49,16.29a26.89,26.89,0,0,0-38,38L504,142.88H31.06a26.9,26.9,0,0,0,0,53.79Z" fill="currentColor"/></svg>
890
891  
892
893                                                        Accessories
894                                                      </button>
895                                                      <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
896                                                        
897                                                          
898                                                          
899                                                            <li>
900                                                              <a href="/collections/nylon-headband-1"  class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
901                                                                Nylon Headband
902                                                              </a>
903                                                            </li>
904                                                          
905                                                        
906                                                          
907                                                          
908                                                            <li>
909                                                              <a href="/collections/headband"  class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
910                                                                Headband
911                                                              </a>
912                                                            </li>
913                                                          
914                                                        
915                                                          
916                                                          
917                                                            <li>
918                                                              <a href="/collections/baby-bip"  class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
919                                                                Baby Bip
920                                                              </a>
921                                                            </li>
922                                                          
923                                                        
924                                                        
925                                                      </ul>
926                                                    </div>
927                                                  </div>
928                                            </details>
929                                          </li>
930                                        
931                                      
932                                        
933                                        
934                                          <li>
935                                            <a href="/collections/promo-designs"  class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
936                                              Promo Designs
937                                            </a>
938                                          </li>
939                                        
940                                      
941                                        
942                                        
943                                          <li>
944                                            <a href="/collections/value-buy"  class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
945                                              The BMB ARCHIVE
946                                            </a>
947                                          </li>
948                                        
949                                      
950                                      
951                                    </ul>
952                                  </div>
953                                </div>
954                          </details>
955                        </li>
956                      
957                    
958                  </ul>
959                </nav>
960
961                <div class="menu-drawer__utility-links">
962
963                  
964
965
966
967                  
968                  
969                  
970                    <a href="/account/login" class="menu-drawer__account link link--text focus-inset h5">
971                       
972
973
974    <svg class="icon icon-account " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path d="M300,296.19c-70.7,0-137.11,28.74-187,80.93-49.59,51.87-76.9,120.77-76.9,194v25H563.89v-25c0-73.22-27.31-142.12-76.9-194C437.11,324.93,370.7,296.19,300,296.19ZM87.42,546.11C99.29,433.81,190.1,346.19,300,346.19s200.71,87.62,212.58,199.92Z" fill="currentColor"/><path d="M300,285.34c77.6,0,140.73-63.13,140.73-140.73S377.6,3.89,300,3.89,159.27,67,159.27,144.61,222.4,285.34,300,285.34Zm0-231.45a90.73,90.73,0,1,1-90.73,90.72A90.82,90.82,0,0,1,300,53.89Z" fill="currentColor"/></svg>
975
976  
977 
978                      
979                      Log in
980                    </a>
981                  
982                    <a href="/account/register" class="menu-drawer__account link link--text focus-inset h5">
983                      
984                       
985
986
987    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus " fill="none" viewBox="0 0 10 10">
988      <path fill-rule="evenodd" clip-rule="evenodd" d="M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z" fill="currentColor"></path>
989    </svg>
990
991  �
991
992 
993                      Create account
994                    </a>
995                  
996                  
997                  
998                </div>
999              </div>
1000            </div>
1001          </div>
1002        </details>
1003      </header-drawer>
1004  
1005      
1006        <a href="/" class="header__heading-link link link--text focus-inset" itemprop="url">
1007          <img src="https://cdn.store-assets.com/s/1357257/f/13453211.png" class="header__heading-logo" alt="ButtonMyButtons" loading="lazy" itemprop="logo">
1008        </a>
1009      
1010
1011      
1012      <div class="header__search-input" tabindex="-1">
1013        <form action="/search" method="get" role="search" class="search search-modal__form">
1014          <div class="field">
1015            <input class="search__input field__input" 
1016              id="Search-In-Modal"
1017              type="search"
1018              name="q"
1019              value=""
1020              placeholder="Search"
1021              autocomplete="off"
1022            >
1023            <label class="field__label" for="Search-In-Modal">Search</label>
1024            <div class="dropdown" id="searchDropdown"></div>
1025            <input type="hidden" name="search_history" class="hidden_search_history">
1026            <input type="hidden" name="options[prefix]" value="last">
1027            <button class="search__button field__button" aria-label="Search">
1028              <svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation">
1029                <use href="#icon-search">
1030              </svg>
1031            </button> 
1032          </div>
1033        </form>
1034      </div>
1035      
1036
1037      <nav class="header__inline-menu">
1038        <ul class="list-menu list-menu--inline" role="list">
1039          
1040            
1041              
1042                <li>
1043                  <a href="/"  class="header__menu-item header__menu-item list-menu__item link link--text focus-inset">
1044                    HOME
1045                  </a>
1046                </li>
1047              
1048            
1049            
1050              
1051                <li>
1052                  <a href="/pages/begin-your-bespoke-journey"  class="header__menu-item header__menu-item list-menu__item link link--text focus-inset">
1053                    BESPOKE
1054                  </a>
1055                </li>
1056              
1057            
1058            
1059              
1060                <li>
1061                  <a href="/pages/our-story"  class="header__menu-item header__menu-item list-menu__item link link--text focus-inset">
1062                    OUR STORY
1063                  </a>
1064                </li>
1065              
1066            
1067            
1068              
1069                
1070                <li>
1071                  <details-disclosure>
1072                    <details>
1073                      <summary class="header__menu-item list-menu__item link focus-inset">
1074                        <a href="/collections/all"  >READY TO WEAR</a>
1075                        
1076
1077
1078    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret " viewBox="0 0 10 6">
1079      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>
1080    </svg>
1081
1082  
1083
1084                      </summary>
1085                      <ul class="header__submenu list-menu list-menu--disclosure caption-large motion-reduce" role="list" tabindex="-1">
1086                        
1087                        
1088                        
1089                          
1090                            
1091                            <li>
1092                              <a href="/collections/new-arrival"  class="header__menu-item list-menu__item link link--text focus-inset caption-large">
1093                                New arrival
1094                              </a>
1095                            </li>
1096                          
1097                        
1098                        
1099                          
1100                            
1101                            <li>
1102                              <a href="/collections/baby-dress"  class="header__menu-item list-menu__item link link--text focus-inset caption-large">
1103                                Baby Dress
1104                              </a>
1105                            </li>
1106                          
1107                        
1108                        
1109                          
1110                            
1111                            <li>
1112                              <a href="/collections/baby-romper"  class="header__menu-item list-menu__item link link--text focus-inset caption-large">
1113                                Baby Romper
1114                              </a>
1115                            </li>
1116                          
1117                        
1118                        
1119                          
1120                            
1121                            <li>
1122                              <a href="/collections/toddler-dress"  class="header__menu-item list-menu__item link link--text focus-inset caption-large">
1123                                Toddler Dress
1124                              </a>
1125                            </li>
1126                          
1127                        
1128                        
1129                          
1130                            
1131                            <li>
1132                              <a href="/collections/baju-kurung"  class="header__menu-item list-menu__item link link--text focus-inset caption-large">
1133                                Kids Baju Kurung
1134                              </a>
1135                            </li>
1136                          
1137                        
1138                        
1139                          
1140                            
1141                            <li>
1142                              <details-disclosure>
1143                                <details>
1144                                  <summary class="header__menu-item link link--text list-menu__item focus-inset caption-large">
1145                                    <a href="/collections/nylon-headband" >Accessories</a>
1146                                    
1147
1148
1149    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret rotate-90" viewBox="0 0 10 6">
1150      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>
1151    </svg>
1152
1153  
1154
1155                                  </summary>
1156                                  <ul class="header__submenu list-menu list-menu--disclosure motion-reduce">
1157                                    
1158                                      
1159                                      
1160                                        <li>
1161                                          <a href="/collections/nylon-headband-1"  class="header__menu-item list-menu__item link link--text focus-inset caption-large">Nylon Headband</a>
1162                                        </li>
1163                                      
1164                                    
1165                                      
1166                                      
1167                                        <li>
1168                                          <a href="/collections/headband"  class="header__menu-item list-menu__item link link--text focus-inset caption-large">Headband</a>
1169                                        </li>
1170                                      
1171                                    
1172                                      
1173                                      
1174                                        <li>
1175                                          <a href="/collections/baby-bip"  class="header__menu-item list-menu__item link link--text focus-inset caption-large">Baby Bip</a>
1176                                        </li>
1177                                      
1178                                    
1179                                  </ul>
1180                                </details>
1181                              </details-disclosure>
1182                            </li>
1183                            
1184                          
1185                        
1186                        
1187                          
1188                            
1189                            <li>
1190                              <a href="/collections/promo-designs"  class="header__menu-item list-menu__item link link--text focus-inset caption-large">
1191                                Promo Designs
1192                              </a>
1193                            </li>
1194                          
1195                        
1196                        
1197                          
1198                            
1199                            <li>
1200                              <a href="/collections/value-buy"  class="header__menu-item list-menu__item link link--text focus-inset caption-large">
1201                                The BMB ARCHIVE
1202                              </a>
1203                            </li>
1204                          
1205                        
1206                      </ul>
1207                    </details>
1208                  </details-disclosure>
1209                </li>
1210              
1211            
1212            
1213            
1214              
1215                
1216                  
1217                
1218                  
1219                
1220              
1221            
1222        </ul>
1223      </nav>
1224      <div class="header__icons">
1225
1226        
1227          
1228            <div class="header__icon header__icon--account link link--text focus-inset small-hide medium-hide" style="position: relative;">
1229              <a href="/account/login" class="header__icon link link--text focus-inset p-2">
1230                
1231
1232
1233    <svg class="icon icon-account " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path d="M300,296.19c-70.7,0-137.11,28.74-187,80.93-49.59,51.87-76.9,120.77-76.9,194v25H563.89v-25c0-73.22-27.31-142.12-76.9-194C437.11,324.93,370.7,296.19,300,296.19ZM87.42,546.11C99.29,433.81,190.1,346.19,300,346.19s200.71,87.62,212.58,199.92Z" fill="currentColor"/><path d="M300,285.34c77.6,0,140.73-63.13,140.73-140.73S377.6,3.89,300,3.89,159.27,67,159.27,144.61,222.4,285.34,300,285.34Zm0-231.45a90.73,90.73,0,1,1-90.73,90.72A90.82,90.82,0,0,1,300,53.89Z" fill="currentColor"/></svg>
1234
1235  
1236
1237                <span id="my-account" class="header__link-label">Login</span>
1238              </a>
1239
1240              <!-- Referral Notification Popup for Desktop -->
1241              <div id="referralNotification" class="referral-notification" style="display: none;">
1242                <button class="close-btn" onclick="dismissReferralNotification()">&times;</button>
1243                <div style="text-align: center; margin-bottom: 16px;">
1244                  <div style="width: 100px; height: 100px; margin: 0 auto;">
1245                    <img src="https://resources.easystore.co/storefront/icons/channels/vector_referral_program.svg">
1246                  </div>
1247                </div>
1248                <p id="referralSignupMessage" style="text-align: center; font-size: 14px; color: #666; margin: 0 0 20px 0;">
1249                  Your friend gifted you   credit! Sign up now to redeem.
1250                </p>
1251                <div style="text-align: center;">
1252                  <button class="btn" onclick="goToSignupPage()" style="width: 100%;">
1253                    Sign Up
1254                  </button>
1255                </div>
1256              </div>
1257            </div>
1258          
1259        
1260
1261        <a href="/cart" class="header__icon link link--text focus-inset" id="cart-icon-bubble">
1262          <span class="header__icon--cart">
1263            
1264
1265
1266    <svg class="icon icon-cart-empty " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496.56 600"><path d="M453.52,128.63a25,25,0,0,0-24.91-22.8H364.72a117.48,117.48,0,0,0-232.89,0H67.94A25,25,0,0,0,43,128.63L8.8,515.21a72.11,72.11,0,0,0,19.05,55.6,79,79,0,0,0,58.22,25.3H410.49a79,79,0,0,0,58.22-25.3,72.11,72.11,0,0,0,19.05-55.6ZM248.28,53.89a67.58,67.58,0,0,1,65.65,51.94H182.63A67.57,67.57,0,0,1,248.28,53.89ZM431.83,537.05a28.85,28.85,0,0,1-21.34,9.06H86.07a28.85,28.85,0,0,1-21.34-9.06,22.69,22.69,0,0,1-6.13-17.43L90.82,155.83h40v51.23a25,25,0,0,0,50,0V155.83h135v51.23a25,25,0,0,0,50,0V155.83h40L438,519.62A22.68,22.68,0,0,1,431.83,537.05Z" fill="currentColor"/></svg>
1267
1268  
1269
1270            <div class="cart-count-bubble hidden">
1271              <span aria-hidden="true" class="js-content-cart-count">0</span>
1272            </div>
1273          </span>
1274          <span class="header__link-label medium-hide small-hide">
1275            Cart
1276          </span>
1277        </a>
1278
1279        
1280          
1281          <!-- Referral Notification Modal for Mobile -->
1282          <details-modal class="referral-modal" id="referralMobileModal">
1283            <details>
1284              <summary class="referral-modal__toggle" aria-haspopup="dialog" aria-label="Open referral modal" style="display: none;">
1285              </summary>
1286              <div class="modal-overlay referral-modal-overlay"></div>
1287              <div class="referral-modal__dialog" role="dialog" aria-modal="true" aria-label="Referral notification">
1288                <div class="referral-modal__content">
1289                  <button type="button" class="modal__close-button" aria-label="Close" onclick="closeMobileReferralModal()" style="position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer;">
1290                    &times;
1291                  </button>
1292                  
1293                  <div style="margin-bottom: 24px;">
1294                    <div style="width: 120px; height: 120px; margin: 0 auto 20px;">
1295                      <img src="https://resources.easystore.co/storefront/icons/channels/vector_referral_program.svg" style="width: 100%; height: 100%;">
1296                    </div>
1297                  </div>
1298                  
1299                  <p id="referralSignupMessageMobile" style="font-size: 16px; color: #333; margin: 0 0 30px 0; line-height: 1.5;">
1300                    Your friend gifted you   credit! Sign up now to redeem.
1301                  </p>
1302                  
1303                  <button type="button" class="btn" onclick="goToSignupPageFromMobile()" style="width: 100%;">
1304                    Sign Up
1305                  </button>
1306                </div>
1307              </div>
1308            </details>
1309          </details-modal>
1310          
1311        
1312        
1313      </div>
1314    </header>
1315  </sticky-header>
1316  
1317<cart-notification>
1318  <div class="cart-notification-wrapper page-width color-background-1">
1319    <div id="cart-notification" class="cart-notification focus-inset" aria-modal="true" aria-label="Added to cart" role="dialog" tabindex="-1">
1320      <div class="cart-notification__header">
1321        <h2 class="cart-notification__heading caption-large">
1322
1323
1324    <svg class="icon icon-checkmark color-foreground-text " aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9" fill="none">
1325      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.35.643a.5.5 0 01.006.707l-6.77 6.886a.5.5 0 01-.719-.006L.638 4.845a.5.5 0 11.724-.69l2.872 3.011 6.41-6.517a.5.5 0 01.707-.006h-.001z" fill="currentColor"></path>
1326    </svg>
1327
1328  
1329 Added to cart</h2>
1330        <button type="button" class="cart-notification__close modal__close-button link link--text focus-inset" aria-label="accessibility.close">
1331          
1332
1333
1334    <svg class="icon icon-close " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path d="M335.36,300,581.87,53.48a25,25,0,0,0-35.35-35.35L300,264.64,53.48,18.13A25,25,0,0,0,18.13,53.48L264.64,300,18.13,546.52a25,25,0,0,0,35.35,35.35L300,335.36,546.52,581.87a25,25,0,0,0,35.35-35.35Z" fill="currentColor"/></svg>
1335
1336  
1337
1338        </button>
1339      </div>
1340      <div id="cart-notification-product" class="cart-notification-product"></div>
1341      <div class="cart-notification__links">
1342        <a href="/cart" id="cart-notification-button" class="button button--secondary button--full-width">View cart (<span class="js-content-cart-count">0</span>)</a>
1343        <form action="/cart" method="post" id="cart-notification-form">
1344          <input type="hidden" name="_token" value="6tAYDoNkM5AiSjWNrIcPlnJSjYIpzbMUmvlzrEIU">
1345          <input type="hidden" name="current_currency" value="">
1346          <button class="button button--primary button--full-width" name="checkout" value="true">Checkout</button>
1347        </form>
1348        <button type="button" class="link button-label">Continue shopping</button>
1349      </div>
1350    </div>
1351  </div>
1352</cart-notification>
1353<style>
1354  .cart-notification {
1355     display: none;
1356  }
1357</style>
1358<script>
1359document.getElementById('cart-notification-form').addEventListener('submit',(event)=>{
1360  if(event.submitter) event.submitter.classList.add('loading');
1361})
1362
1363</script>
1363
1364
1365</div>
1366
1367
1368<script>
1369
1370  class StickyHeader extends HTMLElement {
1371    constructor() {
1372      super();
1373    }
1374
1375    connectedCallback() {
1376      this.header = document.getElementById('easystore-section-header');
1377      this.headerBounds = {};
1378      this.currentScrollTop = 0;
1379      this.preventReveal = false;
1380
1381      this.onScrollHandler = this.onScroll.bind(this);
1382      this.hideHeaderOnScrollUp = () => this.preventReveal = true;
1383
1384      this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
1385      window.addEventListener('scroll', this.onScrollHandler, false);
1386
1387      this.createObserver();
1388    }
1389
1390    disconnectedCallback() {
1391      this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
1392      window.removeEventListener('scroll', this.onScrollHandler);
1393    }
1394
1395    createObserver() {
1396      let observer = new IntersectionObserver((entries, observer) => {
1397        this.headerBounds = entries[0].intersectionRect;
1398        observer.disconnect();
1399      });
1400
1401      observer.observe(this.header);
1402    }
1403
1404    onScroll() {
1405      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
1406
1407      if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
1408        requestAnimationFrame(this.hide.bind(this));
1409      } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
1410        if (!this.preventReveal) {
1411          requestAnimationFrame(this.reveal.bind(this));
1412        } else {
1413          window.clearTimeout(this.isScrolling);
1414
1415          this.isScrolling = setTimeout(() => {
1416            this.preventReveal = false;
1417          }, 66);
1418
1419          requestAnimationFrame(this.hide.bind(this));
1420        }
1421      } else if (scrollTop <= this.headerBounds.top) {
1422        requestAnimationFrame(this.reset.bind(this));
1423      }
1424
1425
1426      this.currentScrollTop = scrollTop;
1427    }
1428
1429    hide() {
1430      this.header.classList.add('easystore-section-header-hidden', 'easystore-section-header-sticky');
1431      this.closeMenuDisclosure();
1432      // this.closeSearchModal();
1433    }
1434
1435    reveal() {
1436      this.header.classList.add('easystore-section-header-sticky', 'animate');
1437      this.header.classList.remove('easystore-section-header-hidden');
1438    }
1439
1440    reset() {
1441      this.header.classList.remove('easystore-section-header-hidden', 'easystore-section-header-sticky', 'animate');
1442    }
1443
1444    closeMenuDisclosure() {
1445      this.disclosures = this.disclosures || this.header.querySelectorAll('details-disclosure');
1446      this.disclosures.forEach(disclosure => disclosure.close());
1447    }
1448
1449    // closeSearchModal() {
1450    //   this.searchModal = this.searchModal || this.header.querySelector('details-modal');
1451    //   this.searchModal.close(false);
1452    // }
1453  }
1454
1455  customElements.define('sticky-header', StickyHeader);
1456
1457  
1458  class DetailsDisclosure extends HTMLElement{
1459    constructor() {
1460      super();
1461      this.mainDetailsToggle = this.querySelector('details');
1462      // this.mainDetailsToggle.addEventListener('focusout', this.onFocusOut.bind(this));
1463      this.mainDetailsToggle.addEventListener('mouseover', this.open.bind(this));
1464      this.mainDetailsToggle.addEventListener('mouseleave', this.close.bind(this));
1465    }
1466
1467    onFocusOut() {
1468      setTimeout(() => {
1469        if (!this.contains(document.activeElement)) this.close();
1470      })
1471    }
1472
1473    open() {
1474      this.mainDetailsToggle.setAttribute('open',1)
1475    }
1476
1477    close() {
1478      this.mainDetailsToggle.removeAttribute('open')
1479    }
1480  }
1481
1482  customElements.define('details-disclosure', DetailsDisclosure);
1483
1484  function clearAll() {
1485    localStorage.removeItem('searchHistory'); 
1486    
1487    var customer = "";
1488    if(customer) {
1489      // Your logic to clear all data or call an endpoint
1490      fetch('/account/search_histories', {
1491          method: 'DELETE',
1492          headers: {
1493            "Content-Type": "application/json",
1494            "X-Requested-With": "XMLHttpRequest"
1495          },
1496          body: JSON.stringify({
1497            _token: "6tAYDoNkM5AiSjWNrIcPlnJSjYIpzbMUmvlzrEIU"
1498          }),
1499      })
1500      .then(response => response.json())
1501    }
1502  }
1503  // End - delete search history from local storage
1504  
1505  // search history dropdown  
1506  var searchInputs = document.querySelectorAll('.search__input');
1507  
1508  if(searchInputs.length > 0) {
1509    
1510    searchInputs.forEach((searchInput)=> {
1511    
1512      searchInput.addEventListener('focus', function() {
1513        var searchDropdown = searchInput.closest('form').querySelector('#searchDropdown');
1514        searchDropdown.innerHTML = ''; // Clear existing items
1515  
1516        // retrieve data from local storage
1517        var searchHistoryData = JSON.parse(localStorage.getItem('searchHistory')) || [];
1518  
1519        // Convert JSON to string
1520        var search_history_json = JSON.stringify(searchHistoryData);
1521  
1522        // Set the value of the hidden input
1523        searchInput.closest('form').querySelector(".hidden_search_history").value = search_history_json;
1524  
1525        // create dropdown items
1526        var clearAllItem = document.createElement('div');
1527        clearAllItem.className = 'dropdown-item clear-all';
1528        clearAllItem.textContent = 'Clear';
1529        clearAllItem.addEventListener('click', function() {
1530          clearAll();
1531          searchDropdown.style.display = 'none';
1532          searchInput.classList.remove('is-focus');
1533        });
1534        searchDropdown.appendChild(clearAllItem);
1535  
1536        // create dropdown items
1537        searchHistoryData.forEach(function(item) {
1538          var dropdownItem = document.createElement('div');
1539          dropdownItem.className = 'dropdown-item';
1540          dropdownItem.textContent = item.term;
1541          dropdownItem.addEventListener('click', function() {
1542            searchInput.value = item.term;
1543            searchInput.closest('form').submit();
1544            searchDropdown.style.display = 'none';
1545          });
1546          searchDropdown.appendChild(dropdownItem);
1547        });
1548  
1549        if(searchHistoryData.length > 0){
1550          // display the dropdown
1551          searchInput.classList.add('is-focus');
1552          document.body.classList.add('search-input-focus');
1553          searchDropdown.style.display = 'block';
1554        }
1555      });
1556  
1557      searchInput.addEventListener("focusout", (event) => {
1558        var searchDropdown = searchInput.closest('form').querySelector('#searchDropdown');
1559        searchInput.classList.remove('is-focus');
1560        searchDropdown.classList.add('transparent');
1561        setTimeout(()=>{
1562          searchDropdown.style.display = 'none';
1563          searchDropdown.classList.remove('transparent');
1564          document.body.classList.remove('search-input-focus');
1565        }, 400);
1566      });
1567    })
1568  }
1569  // End - search history dropdown
1570
1571  // referral notification popup
1572  const referralMessageTemplate = 'Your friend gifted you __CURRENCY_CODE__ __CREDIT_AMOUNT__ credit! Sign up now to redeem.';
1573  const shopCurrency = 'RM';
1574
1575  function getCookie(name) {
1576    const value = `; ${document.cookie}`;
1577    const parts = value.split(`; ${name}=`);
1578    if (parts.length === 2) return parts.pop().split(';').shift();
1579    return null;
1580  }
1581
1582  function removeCookie(name) {
1583    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
1584  }
1585
1586  function showReferralNotification() {
1587    const referralCode = getCookie('customer_referral_code');
1588    
1589    
1590    const customerReferralCode = null;
1591    
1592    
1593    const activeReferralCode = referralCode || customerReferralCode;
1594    const referralData = JSON.parse(localStorage.getItem('referral_notification_data')) || {};
1595    
1596    if (referralData.timestamp && referralData.expirationDays) {
1597      const expirationTime = referralData.timestamp + (referralData.expirationDays * 24 * 60 * 60 * 1000);
1598      if (Date.now() > expirationTime) {
1599        localStorage.removeItem('referral_notification_data');
1600        return;
1601      }
1602    }
1603    
1604    if (referralData.dismissed) return;
1605    
1606    if (activeReferralCode) {
1607      if (referralData.creditAmount) {
1608        displayReferralNotification(referralData.creditAmount);
1609      } else {
1610        fetchReferralCampaignData(activeReferralCode);
1611      }
1612    }
1613  }
1614    
1615  function fetchReferralCampaignData(referralCode) {
1616    fetch(`/customer/referral_program/campaigns/${referralCode}`)
1617      .then(response => {
1618        if (!response.ok) {
1619          throw new Error('Network response was not ok');
1620        }
1621        return response.json();
1622      })
1623      .then(data => {
1624        let refereeCreditAmount = null;
1625        if (data.data.campaign && data.data.campaign.referral_rules) {
1626          const refereeRule = data.data.campaign.referral_rules.find(rule => 
1627            rule.target_type === 'referee' && 
1628            rule.event_name === 'customer/create' && 
1629            rule.entitlement && 
1630            rule.entitlement.type === 'credit'
1631          );
1632          
1633          if (refereeRule) {
1634            refereeCreditAmount = refereeRule.entitlement.amount;
1635          }
1636        }
1637        
1638        const referralData = JSON.parse(localStorage.getItem('referral_notification_data')) || {};
1639        referralData.creditAmount = refereeCreditAmount;
1640        referralData.dismissed = referralData.dismissed || false;
1641        referralData.timestamp = Date.now();
1642        referralData.expirationDays = 3;
1643        localStorage.setItem('referral_notification_data', JSON.stringify(referralData));
1644        
1645        displayReferralNotification(refereeCreditAmount);
1646      })
1647      .catch(error => {
1648        removeCookie('customer_referral_code');
1649      });
1650  }
1651    
1652  function displayReferralNotification(creditAmount = null) {
1653    const isMobile = innerWidth <= 749;
1654    
1655    if (isMobile) {
1656      const mobileModal = document.querySelector('#referralMobileModal details');
1657      const mobileMessageElement = document.getElementById('referralSignupMessageMobile');
1658      
1659      if (mobileModal && mobileMessageElement) {
1660        if (creditAmount) {
1661          const finalMessage = referralMessageTemplate
1662            .replace('__CREDIT_AMOUNT__', creditAmount)
1663            .replace('__CURRENCY_CODE__', shopCurrency);
1664          
1665          mobileMessageElement.textContent = finalMessage;
1666        }
1667        
1668        mobileModal.setAttribute('open', '');
1669      }
1670    } else {
1671      const notification = document.getElementById('referralNotification');
1672      
1673      if (notification) {
1674        if (creditAmount) {
1675          const messageElement = document.getElementById('referralSignupMessage');
1676          if (messageElement) {
1677            const finalMessage = referralMessageTemplate
1678              .replace('__CREDIT_AMOUNT__', creditAmount)
1679              .replace('__CURRENCY_CODE__', shopCurrency);
1680            
1681            messageElement.textContent = finalMessage;
1682          }
1683        }
1684        
1685        notification.style.display = 'block';
1686      }
1687    }
1688  }
1689
1690  showReferralNotification();
1691
1692  addEventListener('beforeunload', function() {
1693    const referralData = JSON.parse(localStorage.getItem('referral_notification_data')) || {};
1694    
1695    if (referralData.creditAmount !== undefined) {
1696      referralData.creditAmount = null;
1697      localStorage.setItem('referral_notification_data', JSON.stringify(referralData));
1698    }
1699  });
1700
1701  function closeReferralNotification() {
1702    const notification = document.getElementById('referralNotification');
1703    if (notification) {
1704      notification.style.display = 'none';
1705    }
1706  }
1707
1708  function dismissReferralNotification() {
1709    const referralData = JSON.parse(localStorage.getItem('referral_notification_data')) || {};
1710    
1711    referralData.dismissed = true;
1712    referralData.timestamp = referralData.timestamp || Date.now();
1713    referralData.expirationDays = referralData.expirationDays || 3;
1714    
1715    localStorage.setItem('referral_notification_data', JSON.stringify(referralData));
1716    
1717    closeReferralNotification();
1718  }
1719
1720  function goToSignupPage() {
1721    location.href = '/account/register';
1722    dismissReferralNotification();
1723  }
1724
1725  function closeMobileReferralModal() {
1726    const mobileModal = document.querySelector('#referralMobileModal details');
1727    if (mobileModal) {
1728      mobileModal.removeAttribute('open');
1729    }
1730    
1731    const referralData = JSON.parse(localStorage.getItem('referral_notification_data')) || {};
1732    referralData.dismissed = true;
1733    referralData.timestamp = referralData.timestamp || Date.now();
1734    referralData.expirationDays = referralData.expirationDays || 3;
1735    localStorage.setItem('referral_notification_data', JSON.stringify(referralData));
1736  }
1737
1738  function goToSignupPageFromMobile() {
1739    location.href = '/account/register';
1740    closeMobileReferralModal();
1741  }
1742  // End - referral notification popup
1743</script>
1743
1744
1745
1746
1747  <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
vendor: 83 bytes, lines 1747-1750
1747
1748    
1749    
1750<script src="https://www.recaptcha.net/recaptcha/enterprise.js?render=
17506LdMNdIqAAAAALegJp7y4weVcCIlnwmIN8TWseEF
vendor: 12 bytes, line 1750
1750"></script>
1751<link rel="preload" href="https://store-themes.easystore.co/1357257/themes/295437/assets/customer.css?t=1787472242" as="style" onload="this.onload=null;this.rel='stylesheet'">
1752<style>
1753  main.main-content .field > label{
1754    display: none;
1755  }
1756  .h3{
1757    font-size: 18px;
1758  }
1759  .button--full-width{
1760    width: 100%;
1761  }
1762  .tab-wrapper{
1763    display: inline-flex;
1764    justify-content: center;
1765    align-items: center;
1766    margin: 10px auto 20px;
1767    background-color: #eaeaea;
1768    border-radius: 200px;
1769    padding: 5px;
1770    gap: 10px;
1771  }
1772  .tab-wrapper .tab-label {
1773    display: inline-block;
1774    min-width: 130px;
1775    padding: 8px 15px;
1776    border-radius: 100px;
1777    cursor: pointer;
1778    font-size: 17px;
1779    line-height: 1.1;
1780    user-select: none;
1781    margin: 0;
1782    color: #000;
1783  }
1784  #register-tos a {
1785    display: inline;
1786  }
1787  @media screen and (max-width: 400px){
1788    .tab-wrapper .tab-label {
1789      min-width: 110px;
1790    }
1791  }
1792  .tab-wrapper input[type='radio']:checked + .tab-label {
1793    background-color: #fff;
1794    box-shadow: 2px 2px 25px -10px #333;
1795  }
1796
1797  @media screen and (min-width: 500px){
1798    .large--five-twelfths{
1799      min-width: 420px;
1800    }
1801  }
1802</style>
1803
1804
1805
1806
1807<div class="customer login section-width-control small-width large--five-twelfths text-center wrapper">
1808  <div class="card">
1809    <h1 id="login" tabindex="-1" class="mb-0">
1810      Welcome
1811    </h1>
1812    <p class="h3 mt-0">
1813      
1814        Sign up or log in to continue
1815      
1816    </p>
1817    <div>
1818      
1819
1820      
1821
1822      
1823
1824      
1825
1826      
1827
1828      
1829
1830      
1831
1832      
1833
1834      
1835      <div class="tab-wrapper">
1836        <div>
1837          <input type="radio" name="type" id="tab-register" class="hide hidden" checked>
1838          <label for="tab-register" class="tab-label">
1839            Sign up
1840          </label>
1841        </div>
1842        <div>
1843          <input type="radio" name="type" id="tab-login" class="hide hidden">
1844          <label for="tab-login" class="tab-label">
1845            Login
1846          </label>
1847        </div>
1848      </div>
1849      
1850
1851      <form id="form-login" action="/account/auth" method="post" class="mt-2">
1852        <input type="hidden" name="_token" value="6tAYDoNkM5AiSjWNrIcPlnJSjYIpzbMUmvlzrEIU">
1853        <input type="hidden" name="location_id" value="">
1854        <input type="hidden" name="staff_id" value="">
1855        <input type="hidden" id="recaptchaResponse" name="g-recaptcha-response">
1856
1857        
1858        <div id="error-content"></div>
1859
1860        <div class="field">
1861          <input
1862            type="text"
1863            name="customer[email_or_phone]"
1864            id="CustomerDetail"
1865            autocorrect="off"
1866            autocapitalize="off"
1867            placeholder="Email"
1868            required
1869          >
1870          <label for="CustomerDetail">
1871            Email
1872          </label>
1873        </div>
1874
1875        <button
1876          type="submit"
1877          form="form-login"
1878          class="btn button--full-width g-recaptcha">
1879          Continue
1880        </button>
1881
1882        <div class="button-snippet">
1883                          
1884        </div>
1885
1886        
1887
1888        <div id="register-tos">
1889          By signing up, I agree to the ButtonMyButtons's <a target="_blank" href="/legal/terms-of-service">Terms of Service</a>, <a target="_blank" href="/legal/privacy-policy">Privacy Policy</a>, <a target="_blank" href="/legal/refund-policy">Refund Policy</a> and <a target="_blank" href="/legal/shipping-delivery">Shipping & Delivery</a>.
1890        </div>
1891
1892      </form>
1893    </div>
1894  </div>
1895
1896</div>
1897
1898
1899
1900<script>
1901  const register_tab = document.querySelector('#tab-register');
1902  const login_tab = document.querySelector('#tab-login');
1903  const register_tos = document.querySelector('#register-tos');
1904  const isRegistrationEnabled = "1";
1905
1906  if (register_tab) {
1907    register_tab.addEventListener('click', function() {
1908      if (register_tos) {
1909        register_tos.style.display = 'block';
1910      }
1911    });
1912  }
1913  if (login_tab) {
1914    login_tab.addEventListener('click', function() {
1915      if (register_tos) {
1916        register_tos.style.display = 'none';
1917      }
1918    });
1919  }
1920
1921  const methodSwitchBtn = document.getElementById('phone-login-btn');
1922  if (methodSwitchBtn) {
1923    methodSwitchBtn.onclick = function () {
1924      var type = (register_tab && register_tab.checked) ? 'register' : 'login';
1925      window.location.href = '/account/login?method=phone&type=' + type;
1926    };
1927  }
1928
1929  let lastPathSegment = window.location.pathname.split('/').filter(segment => segment.length > 0).pop();
1930  
1931  // Redirect to login if trying to access register when self registration is disabled
1932  if (!isRegistrationEnabled) {
1933    if (lastPathSegment === 'register') {
1934      window.location.href = '/account/login';
1935    } else if (lastPathSegment === 'login' || lastPathSegment === 'auth') {
1936      if (register_tos) {
1937        register_tos.style.display = 'none';
1938      }
1939    } 
1940  } else {
1941    // Only proceed with tab logic if not redirecting
1942    if(lastPathSegment === 'login') {
1943      if (login_tab) {
1944        login_tab.checked = true;
1945      }
1946      if (register_tos) {
1947        register_tos.style.display = 'none';
1948      }
1949    } else {
1950      if (register_tos) {
1951        register_tos.style.display = 'block';
1952      }
1953    }
1954  }
1955
1956  const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
1957  const phonePattern = /^(?:\+?\d{1,3}[\s-]?)?(?:\d{1,14}[\s-]?){1,5}$/;
1958
1959  let form = document.querySelector('#form-login'),
1960      input = document.querySelector('#CustomerDetail'),
1961      error_content = document.querySelector('#error-content');
1962
1963
1964  // One attempt at a time: the reCAPTCHA wait below is async, so without
1965  // this a double-click starts two continuations and posts the form twice.
1966  var submitting = false;
1967
1968  form.addEventListener('submit', async function (event) {
1969    // preventDefault FIRST: a re-entrant submit must still be cancelled, or the
1970    // browser performs a native post with no captcha token.
1971    event.preventDefault();
1972    if (submitting) return;
1973
1974    let input_value = input.value
1975    error_content.innerHTML = '';
1976    if (!input_value.match(emailPattern) && !input_value.match(phonePattern)) {
1977      error_content.innerHTML = `<div class="errors note">Invalid Email or Phone</div>`;
1978      return false;
1979    }
1980
1981    submitting = true;
1982    document.querySelector('#form-login .btn').classList.add('btn--loading','loading');
1983
1984    // reCAPTCHA is unreachable from some regions (google.com is blocked in
1985    // mainland China). Fail open the same way checkout and forgot-password do:
1986    // submit without a token rather than leave the button spinning forever.
1987    try {
1988      if (window.grecaptcha && typeof window.grecaptcha.enterprise === 'object') {
1989        // The loader defines a stub {ready} synchronously and fetches the real
1990        // implementation asynchronously, so execute() may not exist yet.
1991        // ready() queues until it does; the timeout stops a bundle that never
1992        // arrives from hanging the button.
1993        await new Promise(function (resolve) {
1994          setTimeout(resolve, 3000);
1995          try { grecaptcha.enterprise.ready(resolve); } catch (e) { resolve(); }
1996        });
1997
1998        const token = await grecaptcha.enterprise.execute('6LdMNdIqAAAAALegJp7y4weVcCIlnwmIN8TWseEF', { action: 'LOGIN' });
1999        document.getElementById('recaptchaResponse').value = token;
2000      }
2001    } catch (e) { /* fail open */ }
2002
2003    document.getElementById('form-login').submit();
2004  });
2005
2006
2007</script>
2007
2008
2009    
2010  </main>
2011 	<style>
2012  .footer{
2013    background-color: #FFFFFF;
2014    color: #000000;
2015    --color-foreground: 0,0,0;
2016  }
2017  .footer .link--text,
2018  .footer .list-menu__item--link,
2019  .footer .footer-block__details-content .list-menu__item--link{
2020    color: #000000;
2021  }
2022  .footer-block__heading{
2023    color: #000000;
2024  }
2025  .rounded{
2026    border-radius: 10px;
2027  }
2028  .shopping-app-border{
2029    border: 1px #ECECEC solid;
2030    margin-right: 3px;
2031  }
2032  .app-download-badge{
2033    display: inline-block; 
2034    margin-right: 3px;
2035  }
2036</style>
2037
2038<link rel="preload" href="https://store-themes.easystore.co/1357257/themes/295437/assets/section-footer.css?t=1787472242" as="style" onload="this.onload=null;this.rel='stylesheet'">
2039
2040<footer class="footer color-background-1">
2041  <div class="footer__content-top page-width">
2042    <div class="grid grid--1-col grid--4-col-tablet ">
2043      
2044      
2045      
2046        <div class="grid__item">
2047          
2048              <h2 class="footer-block__heading">We accept</h2>
2049              <div class="footer-block__details-content footer__payment">
2050                <ul class="list list-payment" role="list">
2051                  
2052                    <li class="list-payment__item">
2053                      
2054
2055
2056    <svg class="icon icon--full-color " viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img"
2057    width="38" height="24" aria-labelledby="pi-visa">
2058      <path opacity=".07"
2059        d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path>
2060      <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32">
2061      </path>
2062      <path
2063        d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z"
2064        fill="#142688"></path>
2065    </svg>
2066
2067  
2068
2069                    </li>
2070                  
2071                  
2072                    <li class="list-payment__item">
2073                      
2074
2075
2076    <svg class="icon icon--full-color " viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img"
2077    width="38" height="24" aria-labelledby="pi-master">
2078      <path opacity=".07"
2079        d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path>
2080      <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32">
2081      </path>
2082      <circle fill="#EB001B" cx="15" cy="12" r="7"></circle>
2083      <circle fill="#F79E1B" cx="23" cy="12" r="7"></circle>
2084      <path fill="#FF5F00"
2085        d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.3-3 3.4-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"></path>
2086    </svg>
2087
2088  
2089
2090                    </li>
2091                  
2092                  
2093                  
2094                    <li class="list-payment__item">
2095                      
2096
2097
2098    <svg class="icon icon--full-color " viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" width="38"
2099      height="24" role="img" aria-labelledby="pi-paypal">
2100      <path opacity=".07"
2101        d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path>
2102      <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32">
2103      </path>
2104      <path fill="#003087"
2105        d="M23.9 8.3c.2-1 0-1.7-.6-2.3-.6-.7-1.7-1-3.1-1h-4.1c-.3 0-.5.2-.6.5L14 15.6c0 .2.1.4.3.4H17l.4-3.4 1.8-2.2 4.7-2.1z">
2106      </path>
2107      <path fill="#3086C8"
2108        d="M23.9 8.3l-.2.2c-.5 2.8-2.2 3.8-4.6 3.8H18c-.3 0-.5.2-.6.5l-.6 3.9-.2 1c0 .2.1.4.3.4H19c.3 0 .5-.2.5-.4v-.1l.4-2.4v-.1c0-.2.3-.4.5-.4h.3c2.1 0 3.7-.8 4.1-3.2.2-1 .1-1.8-.4-2.4-.1-.5-.3-.7-.5-.8z">
2109      </path>
2110      <path fill="#012169"
2111        d="M23.3 8.1c-.1-.1-.2-.1-.3-.1-.1 0-.2 0-.3-.1-.3-.1-.7-.1-1.1-.1h-3c-.1 0-.2 0-.2.1-.2.1-.3.2-.3.4l-.7 4.4v.1c0-.3.3-.5.6-.5h1.3c2.5 0 4.1-1 4.6-3.8v-.2c-.1-.1-.3-.2-.5-.2h-.1z">
2112      </path>
2113    </svg>
2114
2115  
2116
2117                    </li>
2118                  
2119                  
2120                  
2121									
2122                    
2123                      <li class="list-payment__item">
2124                        <img src="https://s3.dualstack.ap-southeast-1.amazonaws.com/eesb.public/images/payment/payments_billplz.svg" alt="payment_billplz" loading="lazy" width="85px">
2125                      </li>
2126                    
2127                      <li class="list-payment__item">
2128                        <img src="https://s3.dualstack.ap-southeast-1.amazonaws.com/eesb.public/images/payment/payments_grabpay.svg" alt="payment_grabpay" loading="lazy" width="85px">
2129                      </li>
2130                    
2131                 
2132              </div>
2133                <br>
2134            
2135        </div>
2136      
2137      
2138      
2139        <div class="grid__item">
2140          
2141              <h2 class="footer-block__heading">
2142                Quick links
2143              </h2>
2144              <ul class="footer-block__details-content list-unstyled">
2145                
2146                <li>
2147                  <a href="/pages/contact-us"  class="link link--text list-menu__item list-menu__item--link">
2148                    Contact Us
2149                  </a>
2150                </li>
2151                
2152                <li>
2153                  <a href="/pages/location"  class="link link--text list-menu__item list-menu__item--link">
2154                    Location
2155                  </a>
2156                </li>
2157                
2158                
2159              </ul>
2160            
2161        </div>
2162      
2163      
2164      
2165        <div class="grid__item">
2166          
2167              <h2 class="footer-block__heading">Our mission</h2>
2168              <div class="footer-block__details-content">
2169                <p>To provide a deeply personal and luxurious couture experience, crafting one-of-a-kind dresses that empower you to feel utterly and magnificently yourself.</p>
2170              </div>
2171            
2172        </div>
2173      
2174      
2175      
2176        <div class="grid__item">
2177          
2178              <h2 class="footer-block__heading">Follow us</h2>
2179              <ul class="footer__list-social list-unstyled list-social footer-block__details-content" role="list">
2180                
2181                
2182                  <li class="list-social__item">
2183                    <a href="https://facebook.com/buttonmybuttons" class="link link--text list-social__link">
2184                      
2185
2186
2187    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-facebook "
2188    viewBox="0 0 18 18">
2189      <path fill="currentColor"
2190        d="M16.42.61c.27 0 .5.1.69.28.19.2.28.42.28.7v15.44c0 .27-.1.5-.28.69a.94.94 0 01-.7.28h-4.39v-6.7h2.25l.31-2.65h-2.56v-1.7c0-.4.1-.72.28-.93.18-.2.5-.32 1-.32h1.37V3.35c-.6-.06-1.27-.1-2.01-.1-1.01 0-1.83.3-2.45.9-.62.6-.93 1.44-.93 2.53v1.97H7.04v2.65h2.24V18H.98c-.28 0-.5-.1-.7-.28a.94.94 0 01-.28-.7V1.59c0-.27.1-.5.28-.69a.94.94 0 01.7-.28h15.44z">
2191      </path>
2192    </svg>
2193
2194  
2195
2196                    </a>
2197                  </li>
2198                
2199                
2200                  <li class="list-social__item">
2201                    <a href="http://instagram.com/buttonmybuttons.baby" class="link link--text list-social__link">
2202                      
2203
2204
2205    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-instagram "
2206    viewBox="0 0 18 18">
2207      <path fill="currentColor"
2208        d="M8.77 1.58c2.34 0 2.62.01 3.54.05.86.04 1.32.18 1.63.3.41.17.7.35 1.01.66.3.3.5.6.65 1 .12.32.27.78.3 1.64.05.92.06 1.2.06 3.54s-.01 2.62-.05 3.54a4.79 4.79 0 01-.3 1.63c-.17.41-.35.7-.66 1.01-.3.3-.6.5-1.01.66-.31.12-.77.26-1.63.3-.92.04-1.2.05-3.54.05s-2.62 0-3.55-.05a4.79 4.79 0 01-1.62-.3c-.42-.16-.7-.35-1.01-.66-.31-.3-.5-.6-.66-1a4.87 4.87 0 01-.3-1.64c-.04-.92-.05-1.2-.05-3.54s0-2.62.05-3.54c.04-.86.18-1.32.3-1.63.16-.41.35-.7.66-1.01.3-.3.6-.5 1-.65.32-.12.78-.27 1.63-.3.93-.05 1.2-.06 3.55-.06zm0-1.58C6.39 0 6.09.01 5.15.05c-.93.04-1.57.2-2.13.4-.57.23-1.06.54-1.55 1.02C1 1.96.7 2.45.46 3.02c-.22.56-.37 1.2-.4 2.13C0 6.1 0 6.4 0 8.77s.01 2.68.05 3.61c.04.94.2 1.57.4 2.13.23.58.54 1.07 1.02 1.56.49.48.98.78 1.55 1.01.56.22 1.2.37 2.13.4.94.05 1.24.06 3.62.06 2.39 0 2.68-.01 3.62-.05.93-.04 1.57-.2 2.13-.41a4.27 4.27 0 001.55-1.01c.49-.49.79-.98 1.01-1.56.22-.55.37-1.19.41-2.13.04-.93.05-1.23.05-3.61 0-2.39 0-2.68-.05-3.62a6.47 6.47 0 00-.4-2.13 4.27 4.27 0 00-1.02-1.55A4.35 4.35 0 0014.52.46a6.43 6.43 0 00-2.13-.41A69 69 0 008.77 0z">
2209      </path>
2210      <path fill="currentColor"
2211        d="M8.8 4a4.5 4.5 0 100 9 4.5 4.5 0 000-9zm0 7.43a2.92 2.92 0 110-5.85 2.92 2.92 0 010 5.85zM13.43 5a1.05 1.05 0 100-2.1 1.05 1.05 0 000 2.1z">
2212      </path>
2213    </svg>
2214
2215  
2216
2217                    </a>
2218                  </li>
2219                
2220                
2221                  <li class="list-social__item">
2222                    <a href="https://tiktok.com/buttonmybuttons" class="link link--text list-social__link">
2223                      
2224
2225
2226    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-tiktok " width="16"
2227    height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
2228      <path
2229        d="M8.02 0H11s-.17 3.82 4.13 4.1v2.95s-2.3.14-4.13-1.26l.03 6.1a5.52 5.52 0 11-5.51-5.52h.77V9.4a2.5 2.5 0 101.76 2.4L8.02 0z"
2230        fill="currentColor">
2231      </path>
2232    </svg>
2233
2234  
2235
2236                    </a>
2237                  </li>
2238                
2239                
2240                  <li class="list-social__item">
2241                    <a href="https://wa.me/60173135544" class="link link--text list-social__link">
2242                      
2243
2244
2245    <svg class="icon icon-whatsapp " fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 750"><path d="M703.5,195.64A371,371,0,0,0,572,56C523.89,26,471.51,8.4,415.21,2.51A370.48,370.48,0,0,0,316.5,5.42,364,364,0,0,0,215.23,37.47a369,369,0,0,0-132.68,108Q17.36,230.17,7,336.63A370.11,370.11,0,0,0,53.42,554.94a7.23,7.23,0,0,1,.61,4.9Q36.48,624.6,18.7,689.27C13.24,709.19,7.75,729.1,2.14,749.5c1.23-.26,1.93-.36,2.61-.55q95.75-25.11,191.54-50.2a8.43,8.43,0,0,1,5.19.61c12.79,5.8,25.28,12.34,38.29,17.59A370.28,370.28,0,0,0,666.09,604q69.06-86.36,80-196.47A370.36,370.36,0,0,0,743,311.86,361,361,0,0,0,703.5,195.
224564ZM684.64,388c-3.6,65.27-25.48,123.75-66.06,174.9-44.89,56.63-102.85,93.24-173.19,109.84a297.41,297.41,0,0,1-91.27,7A305.68,305.68,0,0,1,215.31,635a17.54,17.54,0,0,0-15.2-2.14c-35.5,9.58-71.1,18.74-106.66,28-.49.13-1,.21-2.14.45,1.72-6.37,3.29-12.22,4.89-18Q109,596.7,121.66,550.07a7.12,7.12,0,0,0-1-5.07c-12.37-19.32-23.31-39.25-31.6-60.64A309,309,0,0,1,70.4,410.63c-6.11-49.35-.93-97.44,16.1-144.15,57.86-160.1,234.55-243,394.65-185.11a308.31,308.31,0,0,1,120.2,79.18c34.9,37.19,59.32,80.31,72.81,129.53A304.75,304.75,0,0,1,684.64,388Z"/><path d="M556,454.42c-13.84-6.52-27.43-13.55-41.24-20.12-11.47-5.46-23-10.89-34.73-15.69-9.1-3.73-13.09-1.72-19.12,6.06-9.39,12.09-19.09,23.95-28.89,35.71-4.7,5.63-9.47,6.79-16.1,3.8-12.32-5.56-24.82-10.9-36.58-17.51-39.6-22.29-69.59-54.3-92.67-93.11-4.87-8.2-4.3-12.16,2.14-19.13,9.07-9.9,18.4-19.63,24.09-32.12a17.42,17.42,0,0,0,.47-14.67c-9.55-23-19-46-28.75-68.92a75.82,75.82,0,0,0-7-12.7c-2.56-3.82-6.6-5.49-11.28-5.36H255.78v-.56c-5.48.29-11,.11-16.39,1-8.66,1.37-15,6.75-20.95,12.94-25.46,26.48-34.58,57.89-28.66,93.83a145.64,145.64,0,0,0,20.75,53.75C220.48,377.5,231.32,393,242.65,408a435.09,435.09,0,0,0,70.53,73.19c31.48,26,67,44.54,105.56,57.58,16.1,5.44,32.08,11.08,49.36,11.42,11.52.22,23,.08,34.16-3.22a110.77,110.77,0,0,0,42.1-23.61c5.48-4.81,10.48-10.18,13.19-17a110.56,110.56,0,0,0,7.57-37.2C565.27,461.93,562.42,457.42,556,454.42Z"/></svg>
2246
2247  
2248
2249                    </a>
2250                  </li>
2251                
2252                
2253                
2254                
2255                  <li class="list-social__item">
2256                    <a href="https://www.youtube.com/" class="link link--text list-social__link">
2257                      
2258
2259
2260    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-youtube "
2261    viewBox="0 0 100 70">
2262      <path
2263        d="M98 11c2 7.7 2 24 2 24s0 16.3-2 24a12.5 12.5 0 01-9 9c-7.7 2-39 2-39 2s-31.3 0-39-2a12.5 12.5 0 01-9-9c-2-7.7-2-24-2-24s0-16.3 2-24c1.2-4.4 4.6-7.8 9-9 7.7-2 39-2 39-2s31.3 0 39 2c4.4 1.2 7.8 4.6 9 9zM40 50l26-15-26-15v30z"
2264        fill="currentColor">
2265      </path>
2266    </svg>
2267
2268  
2269
2270                    </a>
2271                  </li>
2272                
2273                
2274              </ul>
2275            
2276        </div>
2277      
2278    </div>
2279  </div>
2280  <div class="footer__content-bottom">
2281    <div class="footer__content-bottom-wrapper page-width">
2282      <div class="footer__column footer__column--info">
2283
2284        
2285
2286
2287        
2288        <div class="footer__copyright caption">
2289          <div class="copyright__content">© 2026 ButtonMyButtons. Copyright and managed BMB CREATIVE IDEAS EMPIRE (CA0333935-K). All rights reserved.</div>
2290        </div>
2291
2292        <div class="footer__copyright caption">
2293          
2294            <div>
2295            
2296            
2297              
2298                <a href="/legal/terms-of-service">Terms of Service</a>
2299              
2300              
2301            
2302              
2303                | <a href="/legal/privacy-policy">Privacy Policy</a>
2304              
2305              
2306            
2307              
2308                | <a href="/legal/refund-policy">Refund Policy</a>
2309              
2310              
2311            
2312              
2313                | <a href="/legal/shipping-delivery">Shipping &amp; Delivery</a>
2314              
2315              
2316            
2317            </div>
2318         
2319        </div>
2320        
2321      </div>
2322    </div>
2323  </div>
2324</footer>
2325
2326
2327
2328
2329  
2330
2331  
2331<script>
2332  EasyStore.Currencies.init([{"name":"Malaysian Ringgit","code":"MYR","rate":"1.0","format_prefix":"RM","format_suffix":null,"format_decimals":2,"thousand_separator":",","is_primary":true}], 1)
2333</script>
2333
2334
2335
2336
2337  
2337<script>
2338    let page_template = 'customers';
2339
2340    if(document.querySelector('.currency-picker')) {
2341      EasyStore.Currencies.change(document.querySelector('.currency-picker').value)
2342      EasyStore.Currencies.convertAll() 
2343    }
2344
2345    document.querySelectorAll('.currency-picker').forEach((el)=>{
2346      el.addEventListener('change',(event)=>{
2347        EasyStore.Currencies.change(event.target.value)
2348
2349        
2350          if (page_template == 'cart') {
2351            const params = new URLSearchParams(window.location.search);
2352            params.set('delete_cache', 1);
2353            window.location.search = params;
2354          } else {
2355            window.location.reload();
2356          }
2357
2358          return
2359        
2360
2361        document.querySelectorAll('[name=currencies],[name=current_currency]').forEach((el)=>{
2362          el.value = event.target.value
2363        })
2364
2365        if(page_template == 'cart') location.reload();
2366      })
2367    })
2368  </script>
2368
2369
2370
2371
2372
2373  
2373<script>
2374
2375    window.variantStrings = {
2376      addToCart: `Add to Cart`,
2377      updateCart: `Update Cart`,
2378      soldOut: `Sold Out`,
2379      unavailable: `Unavailable`,
2380    }
2381
2382    window.accessibilityStrings = {
2383      shareSuccess: `Link copied to clipboard`,
2384    }
2385    
2386    window.promotionStrings = {
2387      title: `Promotions`,
2388    }
2389    
2390    window.productSettings = {
2391      variantOptionsDisplay: `radio`,
2392    }
2393  </script>
2393
2394
2395  <link href="https://store-themes.easystore.co/1357257/themes/295437/assets/section-main-product.css?t=1787472242" rel="stylesheet" type="text/css" media="screen" />
2396<link href="https://store-themes.easystore.co/1357257/themes/295437/assets/component-loading-overlay.css?t=1787472242" rel="stylesheet" type="text/css" media="screen" />
2397<link href="https://store-themes.easystore.co/1357257/themes/295437/assets/product-quickview.css?t=1787472242" rel="stylesheet" type="text/css" media="screen" />
2398
2399<product-quickview-modal>
2400  <div id="product-quickview-modal" class="product-quickview-modal-wrapper focus-inset" aria-modal="true" role="dialog" tabindex="-1">
2401    <button type="button" class="product-quickview-modal__close modal__close-button link link--text focus-inset" aria-label="accessibility.close">
2402      
2403
2404
2405    <svg class="icon icon-close " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><path d="M335.36,300,581.87,53.48a25,25,0,0,0-35.35-35.35L300,264.64,53.48,18.13A25,25,0,0,0,18.13,53.48L264.64,300,18.13,546.52a25,25,0,0,0,35.35,35.35L300,335.36,546.52,581.87a25,25,0,0,0,35.35-35.35Z" fill="currentColor"/></svg>
2406
2407  
2408
2409    </button>
2410
2411    <div class="loading-overlay">	
2412      <div class="loading-overlay__spinner">	
2413        <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">	
2414            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>	
2415        </svg>	
2416      </div>	
2417    </div>	
2418
2419    <div class="product-quickview-modal__body" style="display: none;"></div>
2420  </div>
2421  <div class="product-quickview-modal-backdrop"></div>
2422</product-quickview-modal>
2423
2424<script src="https://store-themes.easystore.co/1357257/themes/295437/assets/product-form.js?t=1787472242" type="text/javascript" ></script>
vendor: 1 bytes, line 2424
2424
2425<script src="https://store-themes.easystore.co/1357257/themes/295437/assets/product-quickview.js?t=1787472242" type="text/javascript" ></script>
2425
2426  
2426<script>
2427
2428  /*
2429
2430    ------
2431    Events
2432    ------
2433
2434    pages/viewed
2435
2436    customers/signup
2437
2438    customers/login
2439
2440    products/searched
2441
2442    collections/viewed
2443
2444    products/viewed
2445
2446    products/shared
2447
2448    wishlists/item_added
2449
2450    carts/items_added
2451
2452    carts/viewed
2453
2454    carts/item_removed
2455
2456    checkouts/initiated
2457
2458    checkouts/shipping_info_added
2459
2460    checkouts/payment_info_added
2461
2462    checkouts/completed
2463
2464    orders/placed
2465
2466    orders/purchased
2467
2468    payments/captured
2469
2470    payments/failed
2471
2472  */
2473
2474  window.__latest_cart = window.__latest_cart || null;
2475
2476  const _selector = document.querySelector.bind(document),
2477        _selectorAll = document.querySelectorAll.bind(document)
2478
2479  document.addEventListener('DOMContentLoaded', (event) => {
2480
2481    const default_currency = getCookie("currency")
2482    const customer_id = window.__st.cid
2483    const template    = window.__st.p
2484
2485    onPageView()
2486
2487    //-----------------------//
2488    //        Configs        //
2489    //-----------------------//
2490
2491    window.dataLayer = window.dataLayer || []
2492
2493    Array.prototype.last = Array.prototype.last || function() {
2494      return this[this.length - 1] || null
2495    }
2496
2497    Array.prototype.first = Array.prototype.first || function() {
2498      return this[0] || null
2499    }
2500
2501    //----------------------//
2502    //       Triggers       //
2503    //----------------------//
2504
2505    const XHR = window.XMLHttpRequest
2506
2507    function xhr() {
2508
2509      const xhr = new XHR()
2510
2511      xhr.addEventListener("readystatechange", function() {
2512
2513        if(xhr.readyState != 4) return
2514
2515        try {
2516
2517          const response_url = xhr.responseURL
2518
2519          if (response_url.includes("cart/add")) {
2520
2521            window.__latest_cart = JSON.parse(xhr.response)
2522
2523            onCartItemsAdded() // ok
2524
2525          }
2526
2527          if (response_url.includes("cart/remove_item_quantity")) {
2528
2529            window.__latest_cart = JSON.parse(xhr.response)
2530
2531            onCartItemRemoved() // ok
2532
2533          }
2534
2535          if (response_url.includes("new_cart?retrieve=true")) {
2536
2537            result = JSON.parse(xhr.response)
2538
2539            if (result.cart) {
2540              window.__latest_cart = result.cart
2541            }
2542
2543          }
2544
2545        } catch(e) {
2546
2547          console.error(e)
2548
2549        }
2550
2551      }, false);
2552
2553      return xhr
2554
2555    }
2556
2557    window.XMLHttpRequest = xhr
2558
2559    switch(template) {
2560
2561      case 'cart': onCartView() // ok
2562      break
2563      case 'product': onProductView() // ok
2564      break
2565      case 'collection': onCollectionView() // ok
2566      break
2567      case 'blog': onBlogView()
2568      break
2569      case 'article': onArticleView()
2570      break
2571      case 'payment_completed': onOrderPlace()
2572      break
2573      case 'payment_fail': onPaymentFail()
2574      break
2575
2576    }
2577
2578    // _selector('form[action="/checkout/payments"]').addEventListener("submit", onPaymentInfoAdded(_selector('form[action="/checkout/payments"]')))
2579    if (_selector('form[action="/checkout/detail"]'))                            _selector('form[action="/checkout/detail"]').addEventListener("submit", ()=>{onShippingInfoAdded(_selector('form[action="/checkout/detail"]'))})  // ok
2580    if (_selector('form[action="/checkout/shipping"]'))                          _selector('form[action="/checkout/shipping"]').addEventListener("submit", ()=>{onShippingInfoAdded(_selector('form[action="/checkout/shipping"]'))})  // ok
2581    if (_selector('form[action="/account/register"]'))                           _selector('form[action="/account/register"]').addEventListener("submit", onSignUp)  // ok
2582    if (_selector('form[action="/account/login"]'))                              _selector('form[action="/account/login"]').addEventListener("submit", onLogin)  // ok
2583    if (_selector('form[action="/search"]'))                                     _selector('form[action="/search"]').addEventListener("submit", onProductSearch()) // ok
2584    if (_selector('#line-login-btn'))                                            _selector('#line-login-btn').addEventListener('click', onLineLogin) // ok
2585    if (_selector('#PlaceOrder'))                                                _selector('#PlaceOrder').addEventListener("click", ()=>{onCheckoutComplete(_selector('form[action="/checkout/payments"]'))});  // ok
2586    if (_selector('#add_wishlist'))                                              _selector('#add_wishlist').addEventListener("click", onWishlistItemAdded) // ok
2587    if (_selectorAll('a[href="/account/logout"]'))                               _selectorAll('a[href="/account/logout"]').forEach(logoutButton => logoutButton.addEventListener("click", onLogout)) // ok
2588    if (_selector('.CartDrawerTrigger.cart-page-link'))                          _selector('.CartDrawerTrigger.cart-page-link').addEventListener("click", onCartView) // ok
2589    if (_selector('.CartDrawerTrigger.cart-page-link.mobile-cart-page-link'))    _selector('.CartDrawerTrigger.cart-page-link.mobile-cart-page-link').addEventListener("click", onCartView) // ok
2590    if (_selectorAll('a[class^="share-"]'))                                      _selectorAll('a[class^="share-"]').forEach(shareButton => shareButton.addEventListener("click", ()=>{onProductShare(shareButton)}) ) // ok
2591    if (_selectorAll('[name$="checkout"]'))                                      _selectorAll('[name$="checkout"]').forEach(checkoutButton => checkoutButton.addEventListener("click", onCheckoutInitiate))
2592
2593    // For append elements
2594    const bodyMutationObserver = new MutationObserver(() => {
2595      if (_selector('#form__spc #PlaceOrder'))             _selector('#form__spc #PlaceOrder').addEventListener("click", onSinglePageCheckout) // ok
2596      if (_selectorAll('[name$="checkout"]'))              _selectorAll('[name$="checkout"]').forEach(checkoutButton => checkoutButton.addEventListener("click", onCheckoutInitiate))
2597    });
2598    bodyMutationObserver.observe(_selector("body"), {subtree: true, childList: true});
2599
2600    //------------------------------//
2601    //        Event handlers        //
2602    //------------------------------//
2603
2604    function onPageView() {
2605
2606      EasyStore.Event.dispatch('pages/viewed', {
2607        page: {
2608          type: template,
2609          title: document.title,
2610          description: _selector('meta[name=description]') ? _selector('meta[name=description]').getAttribute('content') : null,
2611          url: location.href,
2612        }
2613      })
2614
2615    }
2616
2617    function onSignUp() {
2618
2619      const email_regex = new RegExp(/^[a-zA-Z0-9.!#$%&"*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
2620      const phone_regex = new RegExp(/^(\+?6?01)[0-46-9]-*[0-9]{7,8}$/)
2621
2622      const email_or_phone = _selector(`input[name="customer[email_or_phone]"]`).value.replace("+", "").replace(/\s+/, "")
2623
2624      let data = {}
2625
2626      if (email_regex.test(email_or_phone)) {
2627        data.method = 'email'
2628        data.email = email_or_phone
2629      }
2630
2631      if (phone_regex.test(email_or_phone)) {
2632        data.method = "phone"
2633        data.phone = email_or_phone
2634      }
2635
2636      if (!data.method) return
2637
2638      EasyStore.Event.dispatch('customers/signup', data)
2639
2640    }
2641
2642    function onLogin() {
2643
2644      const email_regex = new RegExp(/^[a-zA-Z0-9.!#$%&"*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
2645      const phone_regex = new RegExp(/^(\+?6?01)[0-46-9]-*[0-9]{7,8}$/)
2646
2647      const email_or_phone = _selector(`input[name="customer[email_or_phone]"]`).value.replace("+", "").replace(/\s+/, "")
2648
2649      let data = {}
2650
2651      if (email_regex.test(email_or_phone)) {
2652        data.method = 'email'
2653        data.email = email_or_phone
2654      }
2655
2656      if (phone_regex.test(email_or_phone)) {
2657        data.method = "phone"
2658        data.phone = email_or_phone
2659      }
2660
2661      if (!data.method) return
2662
2663      EasyStore.Event.dispatch('customers/login', data)
2664
2665    }
2666
2667    function onLineLogin() {
2668
2669      EasyStore.Event.dispatch('customers/login', { method: 'line' })
2670
2671    }
2672
2673    function onLogout() {
2674
2675      EasyStore.Event.dispatch('customers/logout', { customer_id })
2676
2677    }
2678
2679    function onBlogView() {
2680
2681      const blog = ""
2682
2683      EasyStore.Event.dispatch('blogs/viewed', { blog })
2684
2685    }
2686
2687    function onArticleView() {
2688
2689      const article = ""
2690
2691      EasyStore.Event.dispatch('articles/viewed', { article })
2692
2693    }
2694
2695    function onProductSearch() {
2696
2697      const query = _selector('input[name=q]').value
2698
2699      if (!query) return
2700
2701      EasyStore.Event.dispatch('products/searched', { query })
2702
2703    }
2704
2705    function onCollectionView() {
2706
2707      const collection = ""
2708
2709      EasyStore.Event.dispatch('collections/viewed', { collection })
2710
2711    }
2712
2713    function onProductView() {
2714
2715      const product = ""
2716
2717      EasyStore.Event.dispatch("products/viewed", { product })
2718
2719    }
2720
2721    function onProductShare(el) {
2722
2723      const product = ""
2724
2725      const channel = el.getAttribute("class").split("-").last()
2726
2727      EasyStore.Event.dispatch('products/shared', { product, channel })
2728
2729    }
2730
2731    function onWishlistItemAdded() {
2732
2733      let product  = ""
2734      const quantity = _selector("#Quantity").value
2735
2736      EasyStore.Event.dispatch('wishlists/item_added', { product })
2737
2738    }
2739
2740    async function onCartItemsAdded() {
2741
2742      const cart = await getCart()
2743
2744      if(cart && cart.items != undefined && cart.items.length > 0) {
2745
2746        EasyStore.Event.dispatch('carts/item_added', { cart })
2747
2748      }
2749
2750    }
2751
2752    async function onCartView() {
2753
2754      const cart = await getCart()
2755
2756      EasyStore.Event.dispatch('carts/viewed', { cart })
2757
2758    }
2759
2760    async function onCartItemRemoved() {
2761
2762      const cart = await getCart()
2763
2764      cart.items = []
2765
2766      if(cart) {
2767
2768        EasyStore.Event.dispatch('carts/item_removed', { cart })
2769
2770      }
2771
2772    }
2773
2774    async function onCheckoutInitiate() {
2775
2776      const cart = await getCart()
2777
2778      EasyStore.Event.dispatch('checkouts/initiated', { cart })
2779
2780    }
2781
2782    async function onShippingInfoAdded(form) {
2783      let checkout = getCheckout()
2784
2785      let form_data = {}
2786      new FormData(form).forEach((value, key) => form_data[key] = value)
2787
2788      let shipping_tier = null
2789
2790      if (form_data.type && form_data.type.startsWith("r_pickup")) {
2791        shipping_tier = `Pickup - ${form_data.pick_location}`
2792      }
2793
2794      if (form_data.s_id) {
2795        shipping_tier = _selector(`input[id='`+form_data.s_id+`']`).getAttribute("data-shipping-name")
2796      }
2797
2798      if (!shipping_tier) return
2799
2800      EasyStore.Event.dispatch('checkouts/shipping_info_added', { checkout, shipping_tier })
2801
2802    }
2803
2804    async function onPaymentInfoAdded(form) {
2805
2806      let checkout = getCheckout()
2807
2808      let payment_type = new FormData(form).get('payment_method')
2809
2810      EasyStore.Event.dispatch("checkouts/payment_info_added", { checkout, payment_type })
2811
2812    }
2813
2814    async function onOrderPlace() {
2815
2816      let cart_token  = getCookie("cart_js")
2817      let previous_cart_token = getCookie("previous_cart_ga4_js")
2818
2819      if (previous_cart_token && previous_cart_token == cart_token) {
2820        // Prevent duplicate purchase tracking
2821        return
2822      }
2823
2824      let order = getOrder()
2825
2826      EasyStore.Event.dispatch('orders/placed', { order })
2827
2828      if(order.is_manual_payment) {
2829
2830        EasyStore.Event.dispatch('orders/purchased', { order })
2831
2832      }
2833
2834      const last_transaction = order.transactions.last()
2835
2836      if (last_transaction.status) {
2837
2838        EasyStore.Event.dispatch('orders/purchased', { order })
2839        EasyStore.Event.dispatch('payments/captured', { order })
2840
2841      }
2842
2843    }
2844
2845    async function onPaymentFail() {
2846
2847      const order = getOrder()
2848
2849      EasyStore.Event.dispatch('payments/failed', { order })
2850
2851    }
2852
2853    async function onCheckoutComplete(form) {
2854
2855      onPaymentInfoAdded(form)
2856
2857      const checkout = getCheckout()
2858
2859      EasyStore.Event.dispatch('checkouts/completed', { checkout })
2860
2861    }
2862
2863    async function onSinglePageCheckout() {
2864
2865      // let checkout = $("[data-app-checkout]").data("app-checkout")
2866
2867      let checkout = getCheckout()
2868
2869      // const payment_type = _selector("#app_spc_payment_method").find(`[class*="label-content"]`).first().find("b").first().text()
2870      const payment_type = _selector("#app_spc_payment_method").getElementsByClassName('label-content')[0].getElementsByTagName('b')[0].innerHTML
2871
2872      const shipping_method = _selector("#delivery_method").value
2873
2874      let shipping_tier = null
2875      let app_spc_customer_info_label = _selector("#app_spc_customer_info").getElementsByClassName('label-content')
2876      if (shipping_method == "shipping") {
2877        shipping_tier = app_spc_customer_info_label[app_spc_customer_info_label.length - 1].getElementsByTagName('b')[0].innerHTML
2878      }
2879
2880      if (shipping_method == "pickup") {
2881        shipping_tier = app_spc_customer_info_label[0].innerHTML
2882      }
2883
2884      if (shipping_tier) {
2885
2886        EasyStore.Event.dispatch('checkouts/shipping_info_added', {
2887          checkout,
2888          shipping_tier,
2889        })
2890
2891      }
2892
2893      if (payment_type) {
2894
2895        EasyStore.Event.dispatch('checkouts/payment_info_added', {
2896          checkout,
2897          payment_type,
2898        })
2899
2900      }
2901
2902      EasyStore.Event.dispatch('checkouts/completed', { checkout })
2903
2904    }
2905
2906  })
2907
2908
2909  //-----------------------//
2910  //       Functions       //
2911  //-----------------------//
2912
2913  function getCookie(name) {
2914
2915    name += "="
2916
2917    decodedCookie = decodeURIComponent(document.cookie)
2918
2919    ca = decodedCookie.split(";")
2920
2921    for(i = 0; i < ca.length; i++) {
2922      c = ca[i]
2923      while (c.charAt(0) == " ") {
2924        c = c.substring(1)
2925      }
2926      if (c.indexOf(name) == 0) {
2927        return c.substring(name.length, c.length)
2928      }
2929    }
2930
2931    return ""
2932
2933  }
2934
2935  const parsePrice = price => {
2936    if(typeof price === 'string') {
2937      return parseFloat(price.split(',').join(''))
2938    }
2939
2940    return price
2941  }
2942
2943  const requestCart = async (method, data) => {
2944
2945  let response = await fetch('/cart.json', {method: 'GET',headers: {'Content-Type': 'application/json'}})
2946    result = await response.json()
2947
2948    return result.cart
2949
2950  }
2951  const getCart = async (latest = false) => {
2952
2953    let cart = window.__latest_cart
2954
2955    const cart_invalid = !cart || !cart.items || (cart.total_price > 0 && !cart.items.length)
2956
2957    if(latest || cart_invalid) {
2958      cart = await requestCart()
2959    }
2960
2961    cart.items = cart.items || []
2962
2963    return mapCart(cart)
2964
2965  }
2966
2967  const getCheckout = async () => {
2968    mapCheckout(window.__latest_cart || await requestCart())
2969  }
2970
2971  const getOrder = async () => {
2972    mapOrder(window.__latest_cart || await requestCart())
2973  }
2974
2975  //-----------------------//
2976  //        Mappers        //
2977  //-----------------------//
2978
2979  const fallbackAttribute = (object, attribute) => {
2980
2981    if(!Array.isArray(attribute)) {
2982      attribute = [attribute]
2983    }
2984
2985    let final_value = null
2986
2987    do {
2988
2989      final_value = object[attribute.shift()]
2990
2991    } while(!final_value && attribute.length)
2992
2993    return final_value
2994
2995  }
2996
2997  const map = (object, mapper) => {
2998
2999    const newObject = {}
3000
3001    for(const key in mapper) {
3002
3003      // Handle different keys between new and old format
3004      newObject[key] = fallbackAttribute(object, mapper[key])
3005
3006      // Cast price to float
3007      if(newObject[key] && ['price', 'amount', 'discount', 'discounts'].some(x => key.endsWith(x))) {
3008        newObject[key] = parsePrice(newObject[key])
3009      }
3010
3011      if(newObject[key] === undefined) {
3012        delete newObject[key]
3013      }
3014
3015    }
3016
3017    return newObject
3018
3019  }
3020
3021  const mapCart = cart => {
3022
3023    const oldCart = cart
3024
3025    const mapper = {
3026      id: 'id',
3027      currency: 'currency',
3028      item_count: 'item_count',
3029      items: 'items',
3030      total_price: 'total_price',
3031      latest_items: 'latest_items'
3032    }
3033
3034    cart = map(cart, mapper)
3035
3036    const discounts = (oldCart.storewide_discounts || []).concat((oldCart.voucher_discounts || []))
3037
3038    cart.discount_applications = discounts.map(discount => ({
3039      title: discount.voucher_code || null,
3040      value: parsePrice(discount.amount),
3041    }))
3042
3043    cart.original_total_price = cart.items.length
3044    ? cart.items
3045      .map(item => item.original_price)
3046      .reduce((sum, price) => sum + price)
3047    : 0
3048
3049    cart.total_discount = cart.discount_applications.length
3050    ? cart.discount_applications
3051      .map(discount => parsePrice(discount.value))
3052      .reduce((sum, value) => sum + value)
3053    : 0
3054
3055    cart.items = cart.items.map(item => mapLineItem(item))
3056
3057    return cart
3058
3059  }
3060
3061  const mapCheckout = checkout => {
3062
3063    const mapper = {
3064      note: 'note',
3065      attributes: 'note_attributes',
3066      billing_address: 'billing_address',
3067      currency: 'currency',
3068      customer_id: 'customer_id',
3069      discounts_amount: 'total_discount',
3070      id: 'id',
3071      line_items: 'order_item',
3072      order_number: 'order_number',
3073      shipping_address: 'shipping_address',
3074      shipping_price: 'shipping_tax',
3075      shipping_method: 'shipping_method_name',
3076      tax_price: 'total_tax',
3077    }
3078
3079    checkout = map(checkout, mapper)
3080
3081    checkout.requires_shipping = checkout.line_items.some(item => item.shipping_required)
3082
3083    checkout.line_items = checkout.line_items.map(item => mapLineItem(item))
3084
3085    return checkout
3086
3087  }
3088
3089  const mapOrder = order => {
3090
3091    const mapper = {
3092      attributes: 'note_attributes',
3093      billing_address: 'billing_address',
3094      cancelled: 'is_cancelled',
3095      cancelled_at: 'cancelled_at',
3096      created_at: 'created_at',
3097      customer_id: 'customer_id',
3098      // discount_applications: 'discount_applications',
3099      email: 'email',
3100      financial_status: 'financial_status',
3101      fulfillment_status: 'fulfillment_status',
3102      line_items: 'order_item',
3103      note: 'note',
3104      order_number: 'order_number',
3105      phone: 'phone',
3106      shipping_address: 'shipping_address',
3107      shipping_methods: 'shipping_methods',
3108      shipping_price: 'total_shipping',
3109      subtotal_price: 'subtotal_price',
3110      // tax_lines: 'tax_lines',
3111      tax_price: 'total_tax',
3112      total_discounts: 'total_discount',
3113      total_net_amount: 'total_amount_include_transaction',
3114      total_price: 'total_price',
3115      transactions: 'transaction_records',
3116      is_manual_payment: 'is_manual_payment',
3117    }
3118
3119    order.email = order.billing_address.email
3120    order.phone = order.billing_address.phone
3121    order.shipping_method = order.shipping_method_name
3122
3123    order = map(order, mapper)
3124
3125    order.line_items = order.line_items.map(item => mapLineItem(item))
3126    order.transactions = order.transactions.map(transaction => mapTransaction(transaction))
3127
3128    return order
3129
3130  }
3131
3132  const mapLineItem = line_item => {
3133
3134    const old_line_item = line_item
3135
3136    const mapper = {
3137      final_price: 'price',
3138      image: 'img_url',
3139      message: 'message',
3140      original_line_price: 'original_line_price',
3141      original_price: 'original_price',
3142      properties: 'properties',
3143      quantity: 'quantity',
3144      requires_shipping: 'shipping_required',
3145      sku: 'sku',
3146      taxable: 'taxable',
3147      title: 'product_name',
3148      product_name: 'product_name',
3149      url: 'url',
3150      product_id: 'product_id',
3151      variant_id: 'variant_id',
3152      id: ['id', 'i_id'],
3153    }
3154
3155    line_item = map(line_item, mapper)
3156
3157    line_item.product_id = line_item.product_id || (old_line_item.product && old_line_item.product.id) || null
3158    line_item.variant_id = line_item.variant_id || (old_line_item.variant && old_line_item.variant.id) || null
3159    line_item.image      = line_item.image || (old_line_item.image && old_line_item.image.url) || null
3160
3161    return line_item
3162
3163  }
3164
3165  const mapTransaction = transaction => {
3166
3167    const mapper = {
3168      amount: 'amount',
3169      created_at: 'created_at',
3170      gateway: 'gateway_type',
3171      id: 'id',
3172      status: 'status',
3173    }
3174
3175    transaction = map(transaction, mapper)
3176
3177    return transaction
3178
3179  }
3180
3181
3182</script>
3182
3183
3184</body>
3185</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.