To incorporate the GiftOtter App into your theme follow these steps:
g-primary-text: #000;
$g-socondary-text: #000;
$body-text-color: #fff;
$g-bg-color: #fff;
$g-button-bg: #000000;
$g-button-text: #fff;
$g-button-hover-bg: #fff;
$g-textbox-border: #c3c3c3;
$highlight-error: #f00;
$g-font: inherit;
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
*{
font-family: $g-font;
box-sizing: border-box;
}
*:focus{
outline: none;
}
.ga-popup-open{
/* overflow:hidden; */
}
p{
word-break: break-all;
}
a{
&:hover{
color:$g-primary-text;
opacity:0.4;
}
}
.container{
max-width: 1100px;
margin: 0 auto;
padding: 0 15px;
}
.clearfix{
&:after{
clear: both;
display: block;
content: "";
}
}
.hide{
display: none;
}
.ga-btn{
padding: 10px 15px;
text-transform: uppercase;
font-weight: 600;
background: $g-button-bg;
color: $g-button-text;
display: inline-block;
border: 2px solid $g-button-bg;
cursor: pointer;
margin-bottom: 10px;
&:hover{
background: transparent;
color: $g-button-bg;
opacity:1;
}
&.disabled{
opacity: 0.4;
pointer-events: none;
}
}
.ga-btn-ghost{
background: transparent;
color: $g-button-bg;
&:hover{
background: $g-button-bg;
color: $g-button-text;
}
}
.ga-gift-popup-wrapper , .ga-gift-account{
.btn-wrap{
.ga-btn{
margin: 0 5px;
}
}
.ga-next-btn{
.ga-btn{
margin-bottom:0;
}
}
.ga-pick-products{
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
.ga-proddiv{
width: 25%;
height: auto;
position: relative;
padding: 0 10px;
.ga-prod-name {
font-size: 24px;
color: $g-primary-text;
letter-spacing: 5px;
line-height: 34px;
}
form{
height: 100%;
background-color: $g-bg-color;
}
img{
max-width: 100%;
}
.ga-name-container {
height: 74px;
background-color: $g-bg-color;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
.homepage-gift-content .prod-name {
text-transform: uppercase;
}
}
}
}
[type="radio"] {
position: absolute;
display: none;
}
[type="radio"] + label {
position: relative;
padding-left: 28px;
cursor: pointer;
font-size: 16px;
line-height: 20px;
display: inline-block;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 2px solid $g-textbox-border;
border-radius: 100%;
background: transparent;
}
[type="radio"]:checked + label:after {
content: '';
width: 10px;
height: 10px;
background: $body-text-color;
position: absolute;
top: 6px;
left: 6px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]:checked + label:after {
opacity: 1;
}
.ga-prod_variant {
text-align: left;
padding: 0 0 22px;
.ga-proddiv-lower{
padding: 20px;
}
.ga-list-variant {
font-weight: 700;
color: $g-primary-text;
margin-bottom: 10px;
letter-spacing: 1px;
span{
font-size: 16px;
}
.ga-prod-price-span {
font-weight: 300;
}
}
}
.ga-half-width{
width: 50%;
}
.ga-full-width{
width: 100%;
}
.ga-one-third-width{
width: 33.33%;
}
}
.ga-center-input{
line-height: 23px;
}
.ga-proddiv-lower{
padding: 20px;
}
#ga-add-item-form .ga-c-loader, .ga-add-item-form .ga-c-loader {
position: absolute;
right: 30px;
top: 0;
bottom: 0;
margin: auto;
max-height: 25px;
display: none;
}
.ga-j_bt{
position: relative;
margin-bottom: 20px;
.ga-btn{
font-size: 17px;
color: $g-primary-text;
letter-spacing: 1px;
line-height: 1.2;
text-align: center;
border-radius: 0;
text-decoration: none;
display: block;
margin: 0;
background: red;
font-weight: 500;
width: 100%;
background-color: $g-button-bg;
text-transform: uppercase;
opacity: 0.5;
padding: 12px 20px;
}
}
.ga-information{
text-align: center;
.ga-description{
font-weight: 300;
font-size: 15px;
color: $g-primary-text;
letter-spacing: 1px;
line-height: 20px;
margin: auto;
margin: 0;
}
}
.ga-gift-popup-wrapper, .ga-claim-popup-wrapper{
.ga-modal-content{
border-radius: 0;
background-color: $g-bg-color;
padding: 35px 30px;
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
#ga-myModal, #ga-claimModal{
}
.ga-modal{
z-index: 99999;
padding: 0 !important;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.65);
&.fade.in{
opacity: 1;
}
}
.ga-modal-dialog{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) !important;
-webkit-transform: translate(-50%,-50%) !important;
-ms-transform: translate(-50%,-50%) !important;
-o-transform: translate(-50%,-50%) !important;
border-radius: 0;
border: none;
max-width: 870px;
max-height: 85vh;
overflow-y: auto;
width: 90%;
button.close {
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
-webkit-appearance: none;
}
.ga-modal-title {
color: $g-primary-text;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 0;
font-weight: 600;
font-style: normal;
margin-top: 0;
}
.ga-close {
color: $g-primary-text;
opacity: 1;
text-shadow: unset;
font-size: 36px;
font-weight: normal;
position: absolute;
right: 20px;
top: 15px;
-webkit-appearance: none;
background: transparent;
border: none;
cursor: pointer;
line-height: 1;
}
.ga-modal-header{
padding:0 10px;
.ga-process-bar {
margin-top: 0;
margin-bottom: 10px;
p {
display: inline-block;
text-transform: uppercase;
position: relative;
padding-right: 30px;
margin-right: 10px;
color: $g-textbox-border;
font-size: 16px;
margin-top:16px;
&.ga-active {
color: $g-primary-text;
}
}
span {
position: absolute;
display: block;
content: '';
width: 20px;
border-top: 2px solid $g-primary-text;
top: 8px;
right: 0;
}
}
}
.ga-modal-body{
&.ga-three-parts-wrap{
margin: 0 -15px;
display: flex;
flex-wrap: wrap;
.ga-three-parts{
width: 33.33%;
float: left;
padding: 0 15px;
display: block;
}
}
.ga-thumbnail{
text-align: center;
border: none;
border-radius: 0;
padding: 10px;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 9px 25px rgba(0,0,0,0.1);
.ga-upper-content{
margin: 15px 0 0 0;
img{
max-width:152px;
}
.ga-caption{
h4 {
text-transform: uppercase;
font-weight: 600;
font-size: 16px;
letter-spacing: 2px;
color: $g-primary-text;
}
h1{
font-size: 20px;
font-weight: 500;
color: $g-primary-text;
font-style: italic;
margin-bottom: 10px;
}
.ga-head-body {
padding:0 10px;
letter-spacing: 1.1px;
font-size: 14px;
}
}
}
}
.ga-caption-btn {
.ga-btn {
letter-spacing: 1.9px;
padding: 0px 10px;
width: 150px;
height: auto;
line-height: 43px;
margin: 0 auto;
text-decoration: none;
font-weight: 600;
&:hover{
background: transparent;
}
}
}
}
.ga-modal-footer{
margin-top:0;
padding-top: 16px;
}
}
}
.ga-cart-btn{
.ga-btn {
border-radius: 0;
text-transform: uppercase;
font-size: 14px;
padding: 0px 20px;
height: auto;
display: block;
line-height: 43px;
background-color: $g-primary-text;
margin: 0 auto;
text-decoration: none;
color: $body-text-color;
font-weight: 600;
&:hover{
background: $body-text-color;
border: 2px solid $g-primary-text;
color: $g-primary-text;
}
}
}
.ga-link-btn {
color: $g-button-bg;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.9px;
font-size: 16px;
padding: 0px 10px;
height: auto;
line-height: 43px;
text-decoration: none;
}
.ga-gift-popup-wrapper{
.ga-modal-body-2 , .ga-modal-body-3 , .ga-modal-body-4{
.ga-modal-header{
padding: 0 10px;
.ga-process-bar{
margin-bottom: 0;
}
}
}
}
.ga-gift-immediate-form .ga-input-field , .ga-gift-email-form .ga-input-field , .ga-save-address-form .ga-input-field {
padding: 0 10px;
float: left;
margin-bottom: 5px;
label{
display: block;
font-size: 14px;
text-transform: uppercase;
color: $g-primary-text;
font-weight: 600;
letter-spacing: 0.5px;
}
span{
color: $highlight-error;
font-size: 18px;
margin-left: 2px;
}
[type="text"], textarea , select, [type="email"]{
width: 100%;
background-color: $body-text-color;
font-size: 12px;
padding: 5px 8px;
border: 1px solid $g-textbox-border;
color: $g-primary-text;
font-weight: 600;
height: 34px;
-webkit-appearance: none;
margin-bottom:0;
outline: none;
text-transform: uppercase;
}
textarea{
min-height: 90px;
}
}
.ga-modal-footer{
padding: 0 10px;
margin-top: 24px;
clear: both;
display: flex;
display: -ms-flexbox;
-webkit-box-pack: justify!important;
-ms-flex-pack: justify!important;
justify-content: space-between!important;
.ga-back-btn{
cursor: pointer;
a{
color: $g-primary-text;
transition: .4s color;
font-size: 14px;
padding-left: 0;
text-decoration: none;
display: flex;
align-items: center;
text-transform: uppercase;
&:hover{
color: $g-button-bg;
}
}
i{
font-size: 25px;
margin-right: 10px;
margin-top: -2px;
}
}
}
.ga-modal-body{
.ga-product-item{
display: flex;
align-items: center;
margin:0 -10px 0;
.ga-product-img{
width: 20%;
padding: 0 10px;
float: left;
img{
max-width: 100%;
}
}
.ga-product-desc{
width: 80%;
padding: 0 10px;
float: left;
.ga-product-title{
text-transform: uppercase;
font-size: 18px;
margin-bottom: 0;
margin-top: 0;
color: $g-primary-text;
text-decoration: none;
font-weight: 600;
margin-bottom: 0;
}
.ga-product-price{
margin: 0;
color: $g-primary-text;
}
}
}
.ga-address-content, .ga-gift-message {
margin-top: 20px;
border-top: 1px solid $g-textbox-border;
padding-top: 20px;
}
.ga-address-content{
p{
text-transform: none;
color: $g-primary-text;
margin: 0 0 0;
}
.ga-customer-name{
width: 30%;
float: left;
padding: 0 0;
}
.ga-customer-address{
width: 50%;
float: left;
padding: 0 10px;
}
}
.ga-edit-item{
width: 20%;
float: left;
padding: 0;
text-align: right;
a{
text-transform: uppercase;
font-size: 16px;
font-weight: 600;
color: $g-primary-text;
opacity: 0.7;
text-decoration: none;
}
}
}
.ga-modal-body-4{
h4 {
color: $g-primary-text;
font-size: 16px;
letter-spacing: normal;
margin: 0 0 10px;
display: block;
text-transform: uppercase;
}
}
.ga-gift-message{
.ga-gift-note{
width: 80%;
float: left;
.ga-giftMessage{
margin: 0 0 10px;
color: $g-primary-text;
}
}
}
.ga-table{
tbody{
tr{
border-bottom: 1px solid $g-primary-text;
color: $g-primary-text;
}
tbody{
tr{
border-bottom: 1px solid #ccc;
}
background: rgba(225,225,225,0.05);
}
.ga-btn {
color:$body-text-color;
margin-bottom: 0;
&:hover{
background: $body-text-color;
color: $g-primary-text;
}
}
}
}
.footable-header{
background-color: #f2f2f2;
}
.ga-account-table{
color: $body-text-color;
margin-top: 0px;
margin-bottom: 20px;
&.ga-gift-claimed{
.ga-product-name{
color: $g-primary-text;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 8px;
}
.ga-product-gift{
font-style: italic;
font-size: 12px;
color: $g-primary-text;
}
}
>thead {
background-color: $g-bg-color;
border-bottom: 1px solid $g-bg-color;
>tr{
>th{
color: $g-primary-text;
border: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1.1px;
padding: 15px 15px;
text-align: left;
}
}
}
tr{
>td{
padding: 20px 7px;
border-top: none;
vertical-align: middle;
position: relative;
border:none;
}
}
p{
margin-bottom: 5px;
display: block;
margin-top: 0;
}
.ga-claim-gift{
min-width: 160px;
text-align: center;
text-transform: uppercase;
}
img{
max-width: 90px;
float: left;
}
.ga-order-image-info {
display: inline-block;
vertical-align: middle;
padding-left: 15px;
width: calc(100% - 90px);
}
}
@media only screen and (max-width: 480px){
.ga-gift-popup-wrapper .ga-pick-products .ga-proddiv{
width: 100%;
}
}
@media only screen and (min-width: 481px) and (max-width: 767px){
.ga-gift-popup-wrapper .ga-pick-products .ga-proddiv{
width: 50%;
}
}
@media only screen and (max-width: 767px) {
.ga-pick-products .ga-proddiv{
margin-bottom: 15px;
}
.ga-j_bt{
.ga-btn{
font-size: 14px;
letter-spacing: 1px;
}
}
.ga-ga-proddiv-lower {
padding: 10px;
}
.ga-gift-popup-wrapper .ga-modal-dialog, .ga-claim-popup-wrapper .ga-modal-dialog{
max-height: 85vh;
overflow-y: auto;
margin: 0;
}
.ga-modal-body.ga-three-parts-wrap .ga-three-parts {
width: 100% !important;
margin-bottom: 10px;
padding: 0;
}
.ga-gift-popup-wrapper .ga-modal-content, .ga-claim-popup-wrapper .ga-modal-content {
padding: 23px 30px;
}
.ga-gift-popup-wrapper .ga-modal-dialog .ga-modal-title, .ga-claim-popup-wrapper .ga-modal-dialog .ga-modal-title {
margin-bottom: 10px;
margin-top: 0;
text-align: center;
font-size:1.8em;
}
.ga-gift-popup-wrapper .ga-modal-dialog .ga-close, .ga-claim-popup-wrapper .ga-modal-dialog .ga-close {
right: 10px;
top: 10px;
}
.ga-gift-popup-wrapper , .ga-claim-popup-wrapper{
.ga-modal-dialog .ga-modal-header .ga-process-bar{
margin-bottom: 15px;
span {
position: absolute;
display: block;
content: '';
width: 20px;
border-top: 2px solid $g-primary-text;
top: 8px;
right: 0;
display: none;
}
p{
display: block;
margin: 0 0 10px;
font-size: 14px;
text-align: center;
}
}
}
.ga-gift-popup-wrapper .ga-half-width, .ga-gift-account .ga-half-width {
width: 100%;
}
.ga-gift-popup-wrapper .ga-one-third-width ,.ga-gift-account .ga-one-third-width {
width: 100%;
}
.ga-modal-body .ga-product-item {
align-items: center;
flex-wrap: wrap;
text-align: center;
.ga-product-img {
padding: 0 10px 10px;
float: none;
max-width: 250px;
margin: 0 auto;
}
.ga-product-desc {
width: 100%;
padding: 0 10px;
clear: both;
}
}
.ga-modal-body .ga-address-content{
text-align: center;
.ga-customer-name {
width: 100%;
padding: 0 10px 10px;
}
.ga-customer-address {
width: 100%;
padding: 0 10px 20px;
}
.ga-edit-item {
width: 100%;
padding: 0 10px;
text-align: center;
}
}
.ga-modal-body-4 h4 {
margin: 0 0 5px;
}
.ga-gift-message{
.ga-gift-note {
width: 100%;
text-align: center;
}
.ga-edit-item {
width: 100%;
padding: 0 10px 20px;
text-align: center;
}
}
.ga-account-table{
img{
display: none;
}
.ga-order-image-info {
width: calc(100% - 25px);
}
tr{
> td{
padding: 12px;
}
}
.ga-claim-gift {
min-width: 200px;
text-align: left;
}
}
}
@media only screen and (min-width: 768px) and (max-width: 991px){
.ga-account-table img {
max-width: 90px;
}
.ga-account-table .order-image-info {
width: calc(100% - 110px);
}
.ga-gift-popup-wrapper .ga-pick-products .ga-proddiv{
width: 50%;
margin-bottom: 15px;
}
}
@media only screen and (min-width: 992px) and (max-width:1199px){
.ga-proddiv-lower {
padding: 10px;
}
}
.ga-gift-popup-wrapper .ga-modal, .ga-claim-popup-wrapper .ga-modal{
left: 0
}
/********************************** Footabe css*************************************************************/
table.footable,
table.footable-details {
position: relative;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
table.footable-details {
margin-bottom: 0;
}
table.footable-hide-fouc {
display: none;
}
table > tbody > tr > td > span.footable-toggle {
margin-right: 0px;
opacity: 1;
}
table > tbody > tr > td > span.footable-toggle.last-column {
margin-left: 8px;
float: right;
}
table.table-condensed > tbody > tr > td > span.footable-toggle {
margin-right: 5px;
}
table.footable-details > tbody > tr > th:nth-child(1) {
min-width: 60px;
text-transform: capitalize;
font-size: 14px;
}
table.footable-details > tbody > tr > td:nth-child(2) {
word-break: break-all;
}
table.footable-details > thead > tr:first-child > th,
table.footable-details > thead > tr:first-child > td,
table.footable-details > tbody > tr:first-child > th,
table.footable-details > tbody > tr:first-child > td,
table.footable-details > tfoot > tr:first-child > th,
table.footable-details > tfoot > tr:first-child > td {
border-top-width: 0;
}
table.footable-details.table-bordered > thead > tr:first-child > th,
table.footable-details.table-bordered > thead > tr:first-child > td,
table.footable-details.table-bordered > tbody > tr:first-child > th,
table.footable-details.table-bordered > tbody > tr:first-child > td,
table.footable-details.table-bordered > tfoot > tr:first-child > th,
table.footable-details.table-bordered > tfoot > tr:first-child > td {
border-top-width: 1px;
}
div.footable-loader {
vertical-align: middle;
text-align: center;
height: 300px;
position: relative;
}
div.footable-loader > span.fooicon {
display: inline-block;
opacity: 0.3;
font-size: 30px;
line-height: 32px;
width: 32px;
height: 32px;
margin-top: -16px;
margin-left: -16px;
position: absolute;
top: 50%;
left: 50%;
-webkit-animation: fooicon-spin-r 2s infinite linear;
animation: fooicon-spin-r 2s infinite linear;
}
table.footable > tbody > tr.footable-empty > td {
vertical-align: middle;
text-align: center;
font-size: 30px;
}
table.footable > tbody > tr > td,
table.footable > tbody > tr > th {
display: none;
}
table.footable > tbody > tr.footable-empty > td,
table.footable > tbody > tr.footable-empty > th,
table.footable > tbody > tr.footable-detail-row > td,
table.footable > tbody > tr.footable-detail-row > th {
display: table-cell;
line-height: 1;
}
@-webkit-keyframes fooicon-spin-r {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fooicon-spin-r {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.fooicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings' !important;
font-style: normal;
font-weight: bold;
font-size:20px;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fooicon:before,
.fooicon:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fooicon-loader:before {
content: "\e030";
}
.fooicon-plus:before {
content: "\2b";
}
.fooicon-minus:before {
content: "\2212";
}
.ga-claim-head-wrap{
display: flex;
align-items: center;
margin-bottom: 15px;
margin-top: 15px;
.ga-heading{
float: left;
margin: 0 15px 0 0px;
font-style : normal;
}
a{
color: $g-primary-text;
text-transform: uppercase;
font-weight:bold;
i {
padding-left: 7px;
}
}
}
.footable-details{
th{
padding: 8px;
border:none;
}
}
.fooicon {
font-size: 20px;
}
.pac-container{
z-index:999999;
}
.ui-state-highlight{
border: 1px solid $g-primary-text !important;
background: $g-primary-text !important;
color: $body-text-color !important;
}
.errorzipcode {
color: $highlight-error;
font-size: 16px;
padding: 0 10px;
}
.alert-danger {
color: #721c24 !important;
background-color: #f8d7da !important;
border-color: #f5c6cb !important;
}
.ui-state-default{
text-align: center !important;
}
.disabled{
opacity: 0.4;
pointer-events: none;
}
{{ 'giftStyle.scss.css' | asset_url | stylesheet_tag }}
</body>
tag. View Example
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
var giftApp = {
init: function () {
this._open()
this._close()
this._nextPrev()
this._buttonStage()
this._checkoutBtns()
this._chargeInterval()
this._giftEmailClick()
this._giftImmediateClick()
this._updateCartGiftProp()
this._countryProvinceSelector()
{% if template contains 'account' %}
this._pendingGifts()
{% endif %}
},
_updateCartGiftProp: function(){
$('body').on('change', '#rc_container input[name="purchase_type"]', function(e){
let immediatelyType = document.querySelector('[data-immediately-type]');
let emailType = document.querySelector('[data-email-type]');
let selectorInput = $('#rc_container input[name="purchase_type"]:checked');
console.log(selectorInput.val());
if(selectorInput.val() == 'onetime'){
immediatelyType.value = 'gift-immediately'
emailType.value = 'gift-email'
$('[data-ga-chargeInterval]').attr('disabled', 'disabled');
} else {
immediatelyType.value = 'gift-recharge-immediately'
emailType.value = 'gift-recharge-email'
$('[data-ga-chargeInterval]').removeAttr('disabled');
}
})
},
_open: function(){
$('body').on('click', '[data-opengiftbox]', function(e) {
e.preventDefault();
$('body').addClass('gift-popup-open');
$('[data-ga-popupContainer]').show();
});
},
_close: function(){
$('body').on('click','[data-ga-closePopup], [data-ga-giftModel], [data-ga-claimgiftmodal] ',function(e){
e.preventDefault();
$('[data-ga-claimGiftModal]').removeClass('show').hide();
$('[data-ga-claimSuccess]').hide();
$('[data-ga-claim]').text('Claim gift').removeClass('disabled');
$('[data-ga-claimAll]').html('Claim All Gifts <i class="fa fa-angle-right"></i>').removeClass('disabled');
$('body').removeClass('gift-popup-open');
$('[data-ga-popupContainer], [data-ga-giftboxmodel]').hide();
$('[data-ga-claim], [data-ga-claimAll]').css('pointer-events','visible');
$('[data-ga-saveClaimShippingAddrs]').addClass('disabled').css('pointer-events','none');
$('[data-ga-claimGiftAddressForm] [data-fields], [data-ga-giftboxmodel] [data-fields], [data-ga-shippingform] input').val('');
setTimeout(function(){
$('.ga-modal-body-1').show();
},1000);
});
$('body').on('click','[data-ga-giftpopupWrapper] [data-ga-giftboxmodel], [data-ga-shippingform]',function(e){
e.stopPropagation();
});
},
_chargeInterval: function(){
$(".rc_select.rc_select__frequency" ).on('change',function(){
$('[data-ga-chargeInterval]').val($(this).val()).trigger('change');
});
let rechargeType = $('#rc_container input[name="purchase_type"]:checked');
if(rechargeType.val() == 'onetime'){
$('[data-ga-chargeInterval]').attr('disabled', 'disabled');
} else {
$('[data-ga-chargeInterval]').removeAttr('disabled');
}
},
_changeProperty: function(){
$("[name='properties[shipping_interval_frequency]']" ).attr('name','properties[gift_shipping_interval_frequency]');
$("[name='properties[charge_interval_frequency]']" ).attr('name','properties[gift_charge_interval_frequency]');
$("[name='properties[shipping_interval_unit_type]']" ).attr('name','properties[gift_shipping_interval_unit_type]');
$("[name='properties[subscription_id]']" ).attr('name','properties[gift_subscription_id]');
$("[name='properties[shipping_interval_frequency]']" ).on('change',function(){
$('[data-ga-chargeInterval]').val($(this).val()).trigger('change');
});
},
_reverseChangeProperty: function(){
$("[name='properties[gift_subscription_id]']" ).attr('name','properties[subscription_id]');
$("[name='properties[gift_shipping_interval_frequency]']" ).attr('name','properties[shipping_interval_frequency]');
$("[name='properties[gift_charge_interval_frequency]']" ).attr('name','properties[charge_interval_frequency]');
$("[name='properties[gift_shipping_interval_unit_type]']" ).attr('name','properties[shipping_interval_unit_type]');
},
_next: function(current,next){
current = current - 1;
next = next - 1;
$('[data-ga-giftBoxmodel]').eq(current).hide();
$('[data-ga-giftBoxmodel]').eq(next).show();
$('[data-ga-giftBoxmodel]').eq(next).find('input,select,textarea').prop("disabled", false);
$('[data-ga-Inputs]').prop("disabled", true);
},
_prev: function(current,prev){
current = current - 1;
prev = prev - 1;
$('[data-ga-giftBoxmodel]').eq(current).hide();
$('[data-ga-giftBoxmodel]').eq(prev).show();
$('[data-ga-giftBoxmodel]').eq(current).find('input,select,textarea').prop("disabled", true);
if(prev == 0){
giftApp._reverseChangeProperty()
$('[data-ga-Inputs]').prop("disabled", false);
}
},
_checkoutURL: function(){
var isCheckOutURl = false
jQuery.getJSON('/cart.js', function(cart) {
$.each(cart.items,function(index,value){
if( value.properties != null && value.properties != undefined){
if (value.properties.shipping_interval_unit_type != null || value.properties.shipping_interval_unit_type != undefined){
jQuery.getJSON('/cart.js', function(cart) {
$.each(cart.items,function(index,value){
if( value.properties != null && value.properties != undefined){
if (value.properties.shipping_interval_unit_type != null || value.properties.shipping_interval_unit_type != undefined){
isCheckOutURl = true;
}
}
});
if(isCheckOutURl){
function reChargeGetCookie(name) {
return (document.cookie.match('(^|; )' + name + '=([^;]*)')||0)[2];
}
var myshopify_domain = '{{ shop.permanent_domain }}';
var token = reChargeGetCookie('cart');
try {
var ga_linker = ga.getAll()[0].get('linkerParam');
} catch (e) {
var ga_linker = '';
}
var customer_param = '{% if customer %}customer_id={{ customer.id }}&customer_email={{ customer.email }}{% endif %}';
var checkout_url = 'https://checkout.rechargeapps.com/r/checkout?myshopify_domain=' + myshopify_domain + '&cart_token=' + token + '&' + ga_linker + '&' + customer_param
window.location.href = checkout_url;
}else{
window.location.href = '/checkout';
}
});
}
}
});
if(isCheckOutURl){
function reChargeGetCookie(name) {
return (document.cookie.match('(^|; )' + name + '=([^;]*)')||0)[2];
}
var myshopify_domain = '{{ shop.permanent_domain }}';
var token = reChargeGetCookie('cart');
try {
var ga_linker = ga.getAll()[0].get('linkerParam');
} catch (e) {
var ga_linker = '';
}
var customer_param = '{% if customer %}customer_id={{ customer.id }}&customer_email={{ customer.email }}{% endif %}';
var checkout_url = 'https://checkout.rechargeapp.com/r/checkout?myshopify_domain=' + myshopify_domain + '&cart_token=' + token + '&' + ga_linker + '&' + customer_param
window.location.href = checkout_url;
}else{
window.location.href = '/checkout';
}
});
},
_nextPrev: function(){
$('body').on('click','[data-ga-prevBtn]',function(){
var current = $(this).attr('data-current');
var prev = $(this).attr('data-prev');
giftApp._prev(eval(current),eval(prev));
});
$('body').on('click','[data-ga-giftMsg]',function(){
var current = $(this).attr('data-current');
var prev = $(this).attr('data-prev');
giftApp._prev(eval(current),eval(prev));
$('[data-immediate-form] [data-ga-pNote]').focus();
});
$('body').on('click','[data-ga-selectGiftImmediate]',function(e){
e.preventDefault();
giftApp._changeProperty();
giftApp._next(1,2);
});
$('body').on('click','[data-ga-selectGiftEmail]',function(e){
e.preventDefault();
giftApp._changeProperty();
giftApp._next(1,3);
});
},
_buttonStage: function(){
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
$('body').on('keyup blur change','[data-immediate-form] input, [data-immediate-form] textarea, [data-immediate-form] select',function(e) {
if(filter.test($('[data-immediate-form] #email_name').val())
&& $('[data-immediate-form] #email_name').val() != ''
&& $('[data-immediate-form] #first_name').val() != ''
&& $('[data-immediate-form] #last_name').val() != ''
&& $('[data-immediate-form] #street_number').val() != ''
&& $('[data-immediate-form] #phone').val() != ''
&& $('[data-immediate-form] #locality').val() != ''
&& $('[data-immediate-form] #postal_code').val() != ''
&& $('[data-immediate-form] #country').val() != ''
&& $('[data-immediate-form] #country').val() != '---'){
$(this).closest('form').find('[data-ga-immediateBtn]').removeClass('disabled');
}else{
$(this).closest('form').find('[data-ga-immediateBtn]').addClass('disabled');
}
});
$('body').on('keyup blur','[data-email-form] input, [data-email-form] textarea',function(e) {
if(filter.test($('[data-email-form] #email_add').val())
&& $('[data-email-form] #email_add').val() != ''
&& $('[data-email-form] #datepicker').val() != ''
&& $('[data-email-form] #first_name_add').val() != ''
&& $('[data-email-form] #last_name_add').val() != ''){
$(this).closest('form').find('[data-ga-GiftEmailbtn]').removeClass('disabled');
}else{
$(this).closest('form').find('[data-ga-GiftEmailbtn]').addClass('disabled');
}
});
$('body').on('keyup blur change','[data-ga-claimGiftAddressForm] input, [data-ga-claimGiftAddressForm] textarea, [data-ga-claimGiftAddressForm] select',function(e) {
if($('[data-ga-claimFirstName]').val() != ''
&& $('[data-ga-claimLastName]').val() != ''
&& $('[data-ga-claimAddress1]').val() != ''
&& $('[data-ga-claimCity]').val() != ''
&& $('[data-ga-claimZip]').val() != ''
&& $('[data-ga-claimPhone]').val() != ''
&& $('[data-ga-claimCountry]').val() != ''
&& $('[data-ga-claimCountry]').val() != '---'
&& $('[data-ga-claimProvince]').val() != ''){
$('[data-ga-claimSaveShipping]').removeClass('disabled');
}else{
$('[data-ga-claimSaveShipping]').addClass('disabled');
}
});
$('body').on('blur change keyup','[data-ga-shippingform] input, [data-ga-shippingform] select, [data-ga-shippingform] textarea', function(e) {
if($('#gift_FirstName').val() != ''
&& $('#gift_LastName').val() != ''
&& $('#street_number').val() != ''
&& $('#gift_phone').val() != ''
&& $('#locality').val() != ''
&& $('#administrative_area_level_1').val() != ''
&& $('#administrative_area_level_1').val() != null
&& $('#postal_code').val() != ''
&& $('#country').val() != ''
&& $('#country').val() != null){
$('[data-ga-saveclaimshippingaddrs]').removeClass('disabled').css('pointer-events','visible');
}else{
$('[data-ga-saveclaimshippingaddrs]').addClass('disabled').css('pointer-events','none');
}
});
},
_checkoutBtns: function(){
$('body').on('click','[data-ga-rechargeCheckout]',function(e){
e.preventDefault();
var $this = $(this);
var isCheckOutURl = false
$.ajax({
type: "post",
url: "/cart/add.js",
data:$($this).closest('form').serializeArray(),
dataType: 'json',
beforeSend: function() {
$($this).addClass('disabled btn').html('Please Wait...');
},
success: function(msg) {
window.location = '/cart';
},
error: function(xhr, text, error) {
console.log(error,text);
}
});
})
$('body').on('click','[data-ga-shopifyCheckout]',function(e){
var $this = $(this);
e.preventDefault();
$.ajax({
type: "post",
url: "/cart/add.js",
data:$($this).closest('form').serializeArray(),
dataType: 'json',
beforeSend: function() {
$($this).text('Please Wait...').addClass('disabled btn');
},
success: function(msg) {
window.location = '/cart';
},
error: function(xhr, text, error) {
console.log(error,text);
}
});
});
},
_giftEmailClick: function(){
$('body').on('click','[data-ga-giftemailbtn]',function(e){
e.preventDefault();
$('[data-ga-giftBoxmodel]').eq(3).find('[data-ga-prevBtn]').attr('data-prev','3');
var first_name = $('[data-email-form] #first_name_add').val();
var last_name = $('[data-email-form] #last_name_add').val();
var Addnote = $('[data-email-form] #p_note_add').val();
var email = $('[data-email-form] #email_add').val();
$.ajax({
url: "https://gifting.hulkapps.com/gifts/check_email",
headers: {
"X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
"Accept": "application/json"
},
type: 'POST',
data: {email: email},
success: function (getdata) {
if(getdata.status == 'error'){
$('[data-ga-zipErr1]').removeClass('hidden').html(getdata.message);
$('#email_add').addClass('alert-danger');
}else{
$('#email_add').removeClass('alert-danger');
$('[data-ga-zipErr1]').addClass('hidden').html('');
$('[data-ga-address]').text('Email :');
$('[data-ga-shippingAddress]').html(email);
$('[data-ga-shippingtxt]').html(first_name+' '+last_name);
$('[data-ga-giftMessage]').html(Addnote);
$('[data-ga-giftMsg]').attr('data-prev','3');
giftApp._next(3,4);
}
}
});
});
},
_giftImmediateClick: function(){
$('body').on('click','[data-ga-immediateBtn]',function(e){
e.preventDefault();
var $this = $(this);
var Loadertext = $(this).text();
var first_name = $('[data-immediate-form] #first_name').val();
var last_name = $('[data-immediate-form] #last_name').val();
var address1 = $('[data-immediate-form] #street_number').val();
var address2 = $('[data-immediate-form] #route').val();
var city = $('[data-immediate-form] #locality').val();
var country = $('[data-immediate-form] #country').val();
var province = $('[data-immediate-form] #administrative_area_level_1').val();
var pincode = $('[data-immediate-form] #postal_code').val();
var Addnote = $('[data-immediate-form] #add_p_note').val();
if(province == null || province == undefined){
province = ''
}
$.ajax({
url: "https://gifting.hulkapps.com/gifts/check_email",
headers: {
"X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
"Accept": "application/json"
},
type: 'POST',
data: {email: $('[data-immediate-form] #email_name').val()},
success: function (getdata) {
if(getdata.status == 'error'){
$('[data-ga-zipErr]').removeClass('hidden').html(getdata.message);
$('#email_name').addClass('alert-danger');
}else{
$.ajax({
url: "https://gifting.hulkapps.com/gifts/addressvalidation",
type: 'POST',
data: {"first_name": first_name,"last_name":last_name,"address1":address1,"address2":address2,"city":city,"country":country,"state":province,"zipcode":pincode},
beforeSend: function() {
$($this).html('Please Wait...');
},
success: function (errorData) {
if(errorData.status == 'errors'){
$('[data-ga-zipErr]').removeClass('hidden').html(errorData.message);
} else{
giftApp._next(2,4);
$('#email_name').removeClass('alert-danger');
$('[data-ga-zipErr]').addClass('hidden').html('');
$('[data-ga-shippingtxt]').html(first_name+' '+last_name);
if(province == ''){
$('[data-ga-shippingAddress]').html(address1+ ', '+city+', '+country+' '+pincode);
}else{
$('[data-ga-shippingAddress]').html(address1+ ', '+city+', '+province+' '+pincode);
}
$('[data-ga-address]').text('address :');
$('[data-ga-giftMessage]').html(Addnote);
$('[data-ga-giftBoxmodel]').eq(3).find('[data-ga-prevBtn]').attr('data-prev','2');
$('[data-ga-giftMsg]').attr('data-prev','2');
}
$($this).html(Loadertext);
}
});
}
}
})
});
},
_countryProvinceSelector: function(){
if( $('#ga-gift_country').length > 0 ){
new Shopify.CountryProvinceSelector('ga-gift_country', 'ga-gift_province', {
hideElement: 'ga-gift_province_ele'
});
}
if( $('#country').length > 0 ){
new Shopify.CountryProvinceSelector('country', 'administrative_area_level_1', {
hideElement: 'data-hide-ele'
});
}
},
_pendingGifts: function(){
const customerID = "{{ customer.id }}";
const email_id = "{{ customer.email }}";
$('[data-ga-giftProductsConatiner] tbody').html('');
$.ajax({
url: "https://gifting.hulkapps.com/gifts/pending_gifts",
headers: {
"X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
"Accept": "application/json"
},
type: 'POST',
data: {email: email_id},
success: function (getdata) {
if(getdata != null && getdata.unclaimed_gifts != undefined){
if(getdata.unclaimed_gifts.length < 1){
$('[data-ga-giftProductsConatiner]').hide();
}else{
for(var i=0; i < getdata.unclaimed_gifts.length; i++){
var msg;
var handle = getdata.unclaimed_gifts[i].product.handle;
if(getdata.unclaimed_gifts[i].gift_type == 'normal'){
msg = "Gift box";
}else{
msg = "Gift subscription monthly";
}
var html = '';
html +='<tr class="ga-order-item-listing ga-item-listing" data-id="'+ getdata.unclaimed_gifts[i].product_id +'">';
html +='<td class="ga-order-item-listing ga-item-listing"><img src="' + getdata.unclaimed_gifts[i].product.image.src + '"/>';
html +='<div class="ga-order-image-info"><p class="ga-product-name" data-ga-giftproductName >'+ getdata.unclaimed_gifts[i].product.title +'</p><p class="ga-product-gift" data-ga-giftproductType >'+ msg +'</p></div></td>';
html +='<td class="ga-top-td"><p><b data-ga-giftreciever>'+ getdata.unclaimed_gifts[i].sender_name; +'</b></p><p data-ga-giftmailId>' + getdata.unclaimed_gifts[i].sender_email + '</p><p data-ga-giftType>' + getdata.unclaimed_gifts[i].gift_note + '</p></td>';
html +='<td class="ga-top-td ga-claim-gift"><a data-ga-claim class="ga-btn claim_gift--btn" data-gift-id="'+ getdata.unclaimed_gifts[i].gift_id +'">Claim gift</a></td>';
html +='</tr>';
$('[data-ga-claimGiftAddressForm]').attr('data-gift',getdata.unclaimed_gifts[i].gift_id);
$("[data-ga-giftProductsConatiner] tbody").append(html);
$('[data-ga-giftProductsConatiner]').show();
$('[data-signlesuccess]').hide();
}
setTimeout(function(){
$('[data-ga-claimedGiftlisting]').footable();
giftApp._claimGift();
},1000)
}
}else{
$('[data-ga-giftProductsConatiner]').hide();
}
}
});
},
_claimGift: function(){
const shop_id = "{{shop.permanent_domain}}";
const first_name = "{{customer.first_name}}";
const last_name = "{{customer.last_name}}";
const email_id = "{{ customer.email }}";
var address1,address2,country,city,zip,phone,province;
{% for address in customer.addresses %}
address1 = "{{ address.address1 }}";
address2 = "{{ address.address2 }}";
country = "{{ address.country }}";
city = "{{ address.city }}";
zip = "{{ address.zip }}";
phone = "{{ address.phone }}";
province = "{{ address.province }}";
{% endfor %}
$('body').on('click','[data-ga-claim]',function(e){
e.preventDefault();
var gift_id = $(this).attr('data-gift-id');
$(this).text('Please Wait...').addClass('disabled');
$('[data-ga-claimAll], [data-ga-claim]').addClass('disabled');
if(address1 != undefined
&& country != undefined
&& city != undefined
&& province != undefined
&& zip != undefined){
giftApp._claimSingleGift(email_id,first_name,last_name,address1,address2,country,city,zip,phone,province,shop_id,gift_id);
}else{
$('[data-ga-overlay]').addClass('active');
$('body').addClass('gift-popup-open');
$(this).css('pointer-events','none');
$('[data-ga-claimGiftModal]').addClass('show').show();
giftApp._addressValidation('single',gift_id);
}
});
$('body').on('click','[data-ga-claimAll]',function(e){
e.preventDefault();
$('[data-ga-claimAll]').text('Please Wait...').addClass('disabled');
$('[data-ga-claim]').addClass('disabled');
if(address1 != undefined
&& country != undefined
&& city != undefined
&& province != undefined
&& zip != undefined){
giftApp._claimMultipleGift(email_id,first_name,last_name,address1,address2,country,city,zip,phone,province,shop_id);
}else{
$('[data-ga-overlay]').addClass('active');
$('body').addClass('gift-popup-open');
$(this).css('pointer-events','none');
$('[data-ga-claimGiftModal]').addClass('show').show();
giftApp._addressValidation('multiple','');
}
});
},
_addressValidation: function(callAction,gift_id){
$('body').on('click','[data-ga-saveClaimShippingAddrs]',function(e){
e.preventDefault();
$(this).text('Please Wait...').addClass('disabled');
$('[data-ga-claimgiftmodal]').css('pointer-events','none');
const customerID = "{{ customer.id }}";
const email_id = "{{ customer.email }}";
const shop_id = "{{shop.permanent_domain}}";
const $data = $('[data-ga-claimGiftAddressForm]').serializeArray();
const first_name = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimFirstName]').val();
const last_name = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimLastName]').val();
const address1 = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimAddress1]').val();
const address2 = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimAddress2]').val();
const city = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimCity]').val();
const province = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimProvince]').val();
const zip_code = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimZip]').val();
const country = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimCountry]').val();
const phone = $('[data-ga-claimGiftAddressForm]').find('[data-ga-claimPhone]').val();
$.ajax({
url: "https://gifting.hulkapps.com/gifts/address_validation",
type: 'POST',
headers: {
"X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
"Accept": "application/json"
},
data: {"first_name": first_name,"last_name":last_name,"address1":address1,"address2":address2,"city":city,"country":country,"state":province,"zipcode":zip_code,"phone":phone},
success: function (errorData) {
if(errorData.status == 'errors'){
$('[data-ga-shopifyError]').text(errorData.message).removeClass('hide');
return false;
}else{
$('[data-ga-shopifyError]').hide();
$.ajax({
url: "/account/addresses",
type: 'POST',
data: $data,
success: function (getdata) {
if(callAction == 'single'){
giftApp._claimSingleGift(email_id,first_name,last_name,address1,address2,country,city,zip_code,phone,province,shop_id,gift_id);
}else if(callAction == 'multiple'){
giftApp._claimMultipleGift(email_id,first_name,last_name,address1,address2,country,city,zip_code,phone,province,shop_id);
}
}
});
}
}
});
});
},
_claimSingleGift: function(email_id,first_name,last_name,address1,address2,country,city,zip,phone,province,shop_id,gift_id){
$.ajax({
url: "https://gifting.hulkapps.com/gifts/claim_gift",
type: 'POST',
headers: {
"X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
"Accept": "application/json"
},
data: {"email": email_id,"shipping_address[address1]":address1,"shipping_address[address2]":address2,"shipping_address[country]":country,"shipping_address[city]":city,"shipping_address[zip]":zip,"shipping_address[first_name]":first_name,"shipping_address[last_name]":last_name,"shipping_address[phone]":phone,"shipping_address[province]":province, "shop_id": shop_id, "gift_id": gift_id},
success: function (getdata) {
giftApp._afterClaim();
}
});
},
_claimMultipleGift: function(email_id,first_name,last_name,address1,address2,country,city,zip,phone,province,shop_id){
$.ajax({
url: "https://gifting.hulkapps.com/gifts/claim_gifts",
type: 'POST',
headers: {
"X-Gift-Access-Token": "YOUR-GIFT-TOKEN",
"Accept": "application/json"
},
data: {"email": email_id,"shipping_address[address1]":address1,"shipping_address[address2]":address2,"shipping_address[country]":country,"shipping_address[city]":city,"shipping_address[zip]":zip,"shipping_address[first_name]":first_name,"shipping_address[last_name]":last_name,"shipping_address[phone]":phone,"shipping_address[province]":province, "shop_id": shop_id},
success: function (getdata) {
giftApp._afterClaim();
}
});
},
_afterClaim: function(){
$('[data-ga-claimgiftmodal]').css('pointer-events','visible');
$('[data-ga-claimSuccess]').show();
$('[data-ga-shippingform]').hide();
$('[data-ga-giftProductsConatiner]').hide();
$('[data-signlesuccess]').show();
$('[data-ga-saveClaimShippingAddrs]').text('SAVE SHIPPING ADDRESS').removeClass('disabled');
$(this).css('pointer-events','visible');
$('[data-ga-claimall],[data-ga-claim]').removeClass('disabled');
setTimeout(function(){
$('[data-signlesuccess]').hide();
giftApp._pendingGifts();
},5000);
},
}
$(document).ready(function(){
giftApp.init();
});
</script>
{% include 'giftScript' %}
tag. View Example
<div style="display:none;">
{% if shipping_interval_frequency.size == 1 %}
<input type="hidden" name="properties[charge_interval_frequency]" value="{{ product.metafields.subscriptions.charge_interval_frequency }}">
{% elsif shipping_interval_frequency.size > 1 %}
<select name="properties[charge_interval_frequency]" class="rc_select__dropdown" data-ga-chargeInterval>
{% for frequency in shipping_interval_frequency %}
<option value="{{ frequency }}">
{{ frequency }}
</option>
{% endfor %}
</select>
{% endif %}
</div>
<div class="ga-popupContainer" style="display:none;" data-ga-popupContainer>
<div data-ga-giftpopupWrapper class="ga-gift-popup-wrapper" itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<!-- Modal -->
<div data-ga-giftModel class="ga-modal in fade" itemprop="offers" itemscope itemtype="http://schema.org/Offer" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="ga-modal-dialog" role="document">
<input type="hidden" data-ga-Inputs class="giftNotAvailable" id="gift_type" name="properties[type]" value="gift-box">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<!-- modal body 1 -->
<div class="ga-modal-content ga-modal-body-1" data-ga-giftBoxmodel>
<div class="ga-modal-header">
<button data-ga-closePopup type="button" class="ga-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h1 class="ga-modal-title" id="myModalLabel">Gift {{ shop.name }}</h1>
<h5 class="ga-process-bar"><p class="ga-active">Delivery<span></span></p><p>Recipient Info<span></span></p><p>Review Order</p></h5>
</div>
<div class="ga-modal-body clearfix ga-three-parts-wrap">
<div class="ga-gift-immediate-select ga-three-parts">
<div class="ga-thumbnail">
<div class="ga-upper-content">
<img src="{{ 'gift-imm.png' | asset_img_url: 'medium' }}" alt="...">
<div class="ga-caption">
<h4 class="ga-head-title">Ship Gift Immediately</h4>
<p class="ga-head-body">Ship gift box as soon as
possible to the recipient with
personalized gift note.</p>
</div>
</div>
<p class="ga-caption-btn"><a data-ga-selectGiftImmediate href="javascript:void(0);" class="ga-btn selectGiftImmediate" role="button">Select</a></p>
</div>
</div>
<div class="ga-gift-email-select ga-three-parts">
<div class="ga-thumbnail">
<div class="ga-upper-content">
<img src="{{ 'gift-email-nmew.png' | asset_img_url: 'medium' }}" alt="...">
<div class="ga-caption">
<h4 class="ga-head-title">Send Gift through email</h4>
<p class="ga-head-body">Recipient receives an email
with your personal message
and a link to claim their gift.
Email may be sent immediately
or at any future date.</p>
</div>
</div>
<p class="ga-caption-btn"><a data-ga-selectGiftEmail href="javascript:void(0);" class="ga-btn selectGiftEmail" role="button">Select</a></p>
</div>
</div>
<div class="ga-gift-self-select ga-three-parts">
<div class="ga-thumbnail">
<div class="ga-upper-content">
<img src="{{ 'gift-self.png' | asset_img_url: 'medium' }}" alt="...">
<div class="ga-caption">
<h1 class="ga-head-title">I’m buying for myself.</h1>
</div>
</div>
<p class="ga-caption-btn"><a data-ga-rechargeCheckout href="javascript:void(0);" class="ga-link-btn directonRecharge" role="button">Add to cart</a>
</div>
</div>
</div>
</div>
<!-- modal body 2 -->
<div class="ga-modal-content ga-modal-body-2" style="display:none" data-ga-giftBoxmodel>
<div class="ga-modal-header">
<button data-ga-closePopup type="button" class="ga-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h1 class="ga-modal-title" id="myModalLabel">Gift {{ shop.name }}</h1>
<h5 class="ga-process-bar"><p>Delivery<span></span></p><p class="ga-active">Recipient Info<span></span></p><p>Review Order</p></h5>
</div>
<div class="ga-modal-body">
<div class="ga-gift-immediate-form clearfix ga-modal-form" data-immediate-form id="data-immediate-form">
<h4 data-ga-zipErr class="errorzipcode error ga-text-center hidden"></h4>
{% if product.metafields.subscriptions.subscription_id != blank %}
<input required disabled class="required" id="address" type="hidden" name="properties[type]" value="gift-recharge-immediately">
{% else %}
<input required disabled class="required" id="address" type="hidden" name="properties[type]" value="gift-immediately">
{% endif %}
<div class="ga-input-field ga-half-width">
<label for="first_name" class="login">First Name<span>*</span></label>
<input required type="text" name="properties[first_name]" id="first_name" class="" disabled data-fields/>
</div>
<div class="ga-input-field ga-half-width">
<label for="last_name" class="login">Last Name<span>*</span></label>
<input required type="text" name="properties[last_name]" id="last_name" class="" disabled data-fields/>
</div>
<div class="ga-input-field ga-full-width">
<label for="email_name" class="login">email<span>*</span></label>
<input required type="email" name="properties[email]" id="email_name" class="" disabled data-fields/>
</div>
<div class="ga-input-field ga-one-third-width">
<label for="street_number">Street Address<span>*</span></label>
<input required type="text" disabled id="street_number" class="address_form" name="properties[address1]" autocapitalize="words" data-field="Address" data-fields>
</div>
<div class="ga-input-field ga-half-width" style="display:none;">
<label for="route">Address 2<span></span></label>
<input required type="text" id="route" disabled class="address_form" name="properties[address2]" autocapitalize="words" data-field="First Name" data-fields>
</div>
<div class="ga-input-field ga-one-third-width">
<label for="locality" class="login">city<span>*</span></label>
<input required type="text" name="properties[city]" id="locality" class="" disabled data-fields/>
</div>
<div class="ga-input-field ga-one-third-width country-selector">
<label for="country" class="login">country <span>*</span></label>
<select required id="country" name="properties[country]" disabled data-default="{{form.country}}">{{ country_option_tags }}</select>
</div>
<div class="ga-input-field ga-one-third-width" id="data-hide-ele">
<label for="administrative_area_level_1">state/province<span>*</span></label>
<select required id="administrative_area_level_1" name="properties[province]" disabled data-default="{{form.province}}" data-field="{{ 'customer.addresses.province' | t }}">
</select>
</div>
<div class="ga-input-field ga-one-third-width">
<label for="postal_code" class="login">postal code<span>*</span></label>
<input required type="text" name="properties[zip]" id="postal_code" class="" disabled data-fields/>
</div>
<div class="ga-input-field ga-one-third-width">
<label for="phone" class="login">Phone <span>*</span></label>
<input required type="text" name="properties[phone]" id="phone" class="" disabled data-fields/>
</div>
<div class="ga-input-field ga-full-width">
<label for="add_p_note">personalized gift note ( Optional )</label>
<textarea data-ga-pNote required id="add_p_note" class="address_form" name="properties[gift_note]" disabled autocapitalize="words" data-fields></textarea>
</div>
</div>
</div>
<div class="ga-modal-footer">
<div class="ga-back-btn"><a data-ga-prevBtn href="javascript:void(0);" data-current="2" data-prev="1" class="ga-link-btn ga-prevBtn" role="button">
<i class="fa fa-angle-left"></i>Go Back</a>
</div>
<div class="ga-next-btn" ><a data-ga-immediateBtn href="javascript:void(0);" class="ga-btn ga-action-btn action-btn nextGiftEmail disabled" role="button">Next</a>
</div>
</div>
</div>
<!-- modal body 3 -->
<div class="ga-modal-content ga-modal-body-3" style="display:none" data-ga-giftBoxmodel>
<div class="ga-modal-header">
<button data-ga-closePopup type="button" class="ga-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h1 class="ga-modal-title" id="myModalLabel">Gift {{ shop.name }}</h1>
<h5 class="ga-process-bar"><p>Delivery<span></span></p><p class="ga-active">Recipient Info<span></span></p><p>Review Order</p></h5>
</div>
<div class="ga-modal-body">
<div class="ga-gift-email-form ga-modal-form clearfix" data-email-form>
<h4 data-ga-zipErr1 class="errorzipcode error ga-text-center hidden"></h4>
{% if product.metafields.subscriptions.subscription_id != blank %}
<input required disabled class="required" id="email" type="hidden" name="properties[type]" value="gift-recharge-email">
{% else %}
<input required disabled class="required" id="email" type="hidden" name="properties[type]" value="gift-email">
{% endif %}
<div class="ga-input-field ga-one-third-width">
<label for="datepicker">SEND Gift EMAIL<span>*</span></label>
<input data-ga-datepicker id="datepicker" disabled type="text" placeholder="Select Date" name="properties[date]" required autocomplete="off" data-fields>
</div>
<div class="ga-input-field ga-one-third-width">
<label>first name<span>*</span></label>
<input id="first_name_add" type="text" name="properties[first_name]" disabled required autocomplete="off" data-fields>
</div>
<div class="ga-input-field ga-one-third-width">
<label>last name<span>*</span></label>
<input id="last_name_add" type="text" name="properties[last_name]" required disabled autocomplete="off" data-fields>
</div>
<div class="ga-input-field ga-full-width">
<label>email<span>*</span></label>
<input id="email_add" type="email" name="properties[email]" required disabled autocomplete="off" data-fields>
</div>
<div class="ga-input-field ga-full-width">
<label>personalized gift note ( Optional )</label>
<textarea id="p_note_add" maxlength="250" name="properties[gift_note]" required autocomplete="off" disabled data-fields></textarea>
</div>
</div>
</div>
<div class="ga-modal-footer">
<div class="ga-back-btn"><a data-ga-prevBtn href="javascript:void(0);" data-current="3" data-prev="1" class="ga-link-btn prevBtn" role="button">
<i class="fa fa-angle-left"></i>Go Back</a>
</div>
<div class="ga-next-btn"><a data-ga-GiftEmailbtn href="javascript:void(0);" class="ga-btn ga-action-btn nextGiftEmailbtn disabled" role="button">Next</a>
</div>
</div>
</div>
<!-- modal body 4 -->
<div class="ga-modal-content ga-modal-body-4" style="display:none" data-ga-giftBoxmodel>
<div class="ga-modal-header">
<button data-ga-closePopup type="button" class="ga-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h1 class="ga-modal-title" id="myModalLabel">Gift {{ shop.name }}</h1>
<h5 class="ga-process-bar"><p>Delivery<span></span></p><p>Recipient Info<span></span></p><p class="ga-active">Review Order</p></h5>
</div>
<div class="ga-modal-body">
<div class="clearfix ga-modal-form">
<div class="ga-product-item clearfix">
<div class="ga-product-img">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</div>
<div class="ga-product-desc">
<p class="ga-product-title">{{ product.title }}</p>
<p class="ga-product-price">{{ product.price | money }}</p>
</div>
</div>
<div class="ga-address-content clearfix">
<div class="ga-customer-name">
<h4>TO :</h4>
<p data-ga-shippingtxt class="ga-shippingName"></p>
</div>
<div class="ga-customer-address">
<h4 data-ga-address >address :</h4>
<p data-ga-shippingAddress class="ga-shippingAddress"></p>
</div>
<div class="ga-edit-item">
<a data-ga-prevBtn href="javascript:void(0);" data-current="4" data-prev="2" class="ga-prevBtn" >edit</a>
</div>
</div>
<div class="ga-gift-message clearfix">
<div class="ga-gift-note">
<h4>personalized gift note :</h4>
<p data-ga-giftMessage class="ga-giftMessage"></p>
</div>
<div class="ga-edit-item">
<a data-ga-giftMsg href="javascript:void(0);" data-current="4" data-prev="2" class="ga-giftMsg">edit</a>
</div>
</div>
</div>
</div>
<div class="ga-modal-footer">
<div class="ga-back-btn"><a data-ga-prevBtn href="javascript:void(0);" data-current="4" data-prev="2" class="ga-link-btn ga-prevBtn" role="button">
<i class="fa fa-angle-left"></i>Go Back</a>
</div>
<div class="ga-cart-btn"><a data-ga-shopifyCheckout href="javascript:void(0);" class="ga-btn ga-action-btn btn-shopifyCheckout" role="button">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% include 'giftPopup' %}
{% include 'subscription-product' %}
{% include 'giftPopup' %}
<div data-signlesuccess style="display:none;">
<p>
<center>
<h4 class="ga-paragraph">Your gift has been claimed. We are fulfilling your order and we will email you when your gift is on it’s way!</h4><h5>Thank you!</h5>
</center>
</p>
</div>
<div class="ga-gift-account" style="display:none" data-ga-giftProductsConatiner >
<hr class="hr--small">
<div class="container">
<div class="ga-claim-head-wrap">
<h2 class="ga-heading">Your gifts</h2>
<a href="#" class="claim-link clamingGift" data-ga-claimAll >Claim All Gifts<i class="fa fa-angle-right"></i></a>
</div>
<table class="ga-table footable ga-subscription-order-table ga-account-table ga-gift-claimed" data-ga-claimedGiftlisting >
<thead>
<tr>
<th>Gift item</th>
<th data-breakpoints="xs">sent by</th>
<th data-breakpoints="xs"></th>
</tr>
</thead>
<tbody data-ga-claimGiftTable >
</tbody>
</table>
</div>
</div>
<div class="ga-gift-popup-wrapper ga-claim-popup-wrapper" data-ga-claimGift>
<!-- Modal -->
<div class="ga-modal fade" id="claimModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display:none" data-ga-claimGiftModal>
<div class="ga-modal-dialog" role="document">
<div class="ga-modal-content ga-modal-body" data-ga-shippingForm>
<div class="ga-modal-header">
<button data-ga-closePopup type="button" class="ga-close shippingaddressClose" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h1 class="ga-modal-title" id="myModalLabel">Claim your gift</h1>
<h5 class="ga-sub-note">Add your shipping address below so we can send you your gift!</h5>
</div>
<div class="ga-modal-body">
<form class="ga-save-address-form" method="post" id="addAddressBilling" name="addAddressBilling" data-ga-claimGiftAddressForm>
<h4 data-ga-shopifyError class="ga-shopifyError" style="display: none;text-align: center;color: red;margin-bottom:20px;"></h4>
<div class="ga-input-field ga-half-width">
<label for="gift_FirstName" class="login">First Name<span>*</span></label>
<input data-ga-claimFirstName type="text" value="" name="address[first_name]" id="gift_FirstName" class="" />
</div>
<div class="ga-input-field ga-half-width">
<label for="gift_LastName" class="login">Last Name<span>*</span></label>
<input data-ga-claimLastName type="text" value="" name="address[last_name]" id="gift_LastName" class="" />
</div>
<div class="ga-input-field ga-half-width">
<label for="street_number">Address 1<span>*</span></label>
<input data-ga-claimAddress1 type="text" id="street_number" class="address_form" name="address[address1]" value="{{form.address1}}" autocapitalize="words" data-field="Address">
</div>
<div class="ga-input-field ga-half-width">
<label for="route">Address 2<span></span></label>
<input data-ga-claimAddress2 type="text" id="route" class="address_form" name="address[address2]" value="{{form.address2}}" autocapitalize="words" data-field="First Name">
</div>
<div class="ga-input-field ga-one-third-width">
<label for="locality" class="login">city<span>*</span></label>
<input data-ga-claimCity type="text" value="" name="address[city]" id="locality" class="" />
</div>
<div class="ga-input-field ga-one-third-width">
<label for="country">COUNTRY<span>*</span></label>
<select data-ga-claimCountry id="country" name="address[country]" data-default="{{form.country}}">
{{ country_option_tags }}</select>
</div>
<div class="ga-input-field ga-one-third-width" id="data-hide-ele">
<label for="administrative_area_level_1">state<span>*</span></label>
<select data-ga-claimProvince id="administrative_area_level_1" class="address_form add-provinceName" name="address[province]" data-default="{{form.province}}" required></select>
</div>
<div class="ga-input-field ga-half-width">
<label for="postal_code" class="login">postal code<span>*</span></label>
<input data-ga-claimZip type="text" value="" name="address[zip]" id="postal_code" class="" />
</div>
<div class="ga-input-field ga-half-width">
<label for="gift_phone">PHONE NUMBER<span>*</span></label>
<input data-ga-claimPhone type="text" id="gift_phone" class="address_form" name="address[phone]" value="{{form.phone}}" >
</div>
</form>
</div>
<div class="ga-modal-footer">
<div class="ga-back-btn"></div>
<div class="ga-save-address-btn">
<a data-ga-saveClaimShippingAddrs href="javascript:void(0);" class="ga-btn disabled" id="add_address" role="button" >SAVE SHIPPING ADDRESS</a>
</div>
</div>
</div>
<!-- modal body 2 - Gift Claimed PopUp -->
<div class="ga-modal-content ga-modal-body-6" style="display:none" data-ga-claimSuccess>
<div class="ga-modal-header">
<button type="button" class="ga-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="ga-modal-body">
<h1 class="ga-modal-title">congrats!</h1>
<p class="ga-sub-note">Your gift has been claimed. We are fulfilling your order
and we will email you when your gift is on it’s way!</p>
<div class="ga-btn-wrap clearfix">
<a href="/account" class="ga-btn ga-btn-ghost">
return to my account
</a>
<a href="/collections/all" class="ga-btn">
shop {{ shop.name }}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% include 'giftAccount' %}
<button>
class View Example
{% if p.first == 'shipping_interval_frequency' %}
{% if p.first == 'shipping_interval_frequency' or p.first == 'gift_shipping_interval_frequency' %}
{% if customer.tags contains 'Gift Receiver' %}You've Received a Gift!{% else %}Customer account activation{% endif %}
<h2>{{ email_title }}</h2>
{% if custom_message != blank %}
<p>{{ custom_message }}</p>
{% else %}
<p>{{ email_body }}</p>
{% endif %}
{% if customer.tags contains 'Gift Receiver' %}
<h2>Congratulations!</h2>
<p>You've received a Gift Box from {{ name | replace:'_',' ' }} as a Gift redeemable at <a href="{{shop.url}}">{{shop.name}}</a> Ready To claim your Gift? Click on the link below to activate your account and claim your Gift.</p>
{% else %}
<h2>{{ email_title }}</h2>
{% if custom_message != blank %}
<p>{{ custom_message }}</p>
{% else %}
<p>{{ email_body }}</p>
{% endif %}
{% endif %}
<td class="button__cell"><a href="{% if customer %}{{ customer.account_activation_url }}” class="button__text">Activate your account</a></td>
<td class="button__cell"><a href="{% if customer %}{{ customer.account_activation_url }}{% if customer.tags contains 'Gift Receiver' %}?{{ name }}{% endif %}{% else %}https://YOUR_STORE_URL/account/register{% endif %}" class="button__text">{% if customer.tags contains 'Gift Receiver' %}Claim your gift and setup your account{% else %}Activate your account{% endif %}</a></td>
<p class="h1">{{ 'customer.activate_account.subtext' | t }}</p>.
<div data-show-receiver class="mainDiv">
<p>You are one step away from claiming your gift.</p>
<p><span data-giver-name class="subDiv"></span> has bought you a gift to <a href="{{shop.url}}">{{shop.name}}</a>. To claim your gift, we need to verify you and create your account so that you can manage your gift and securely add your address where we can ship it.</p>
</div>
<style>
.mainDiv{
max-width: 555px;
margin: 0 auto;
}
.subDiv,.mainDiv a{
color: #F36546;
font-weight:bold;
text-transform: uppercase;
}
.h1{
font-size: 16px;
color: #d4a747;
}
</style>
<!-- History.js & Cookie.js -->
{{ 'history.js' | asset_url | script_tag }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"> </script>
<script>
var giver = window.location.href;
var title = $(document).attr('title');
if(giver.indexOf('?') > -1){
$.cookie("giver-name",giver.split('?')[1].replace('_',' '), { expires : 1 });
giver = giver.split('?')[0];
History.pushState({path: giver}, title , giver);
}
$('[data-show-riceiver]').show();
$('[data-giver-name]').text($.cookie("giver-name"));
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDw3XZ65IVKNH6_8WeuT29XShA9mlf2pyw&sensor=false&libraries=places" type="text/javascript"></script>
<script>
// Call the init function
google.maps.event.addDomListener(window, 'load', initAutocomplete);
var placeSearch, autocomplete;
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'long_name',
country: 'long_name',
postal_code: 'short_name'
};
setTimeout(function() {
var container = document.getElementsByClassName('pac-container')[0];
container.addEventListener('touchstart', function(e) {
e.stopImmediatePropagation();
setTimeout(function(){document.activeElement.blur();},300);
});
}, 500);
function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('street_number')),
{types: ['geocode']});
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
for (var i = 0; i < place.address_components.length; i++) {
var streetAll;
var addressType = place.address_components[i].types[0];
if(componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
$('#'+addressType).val(val);
if(addressType == 'street_number'){
streetAll = place.address_components[i][componentForm[addressType]];
}
if(addressType == 'route'){
if(streetAll == undefined || streetAll == null || streetAll == ''){
$('#street_number').val(place.address_components[i][componentForm[addressType]]);
}else{
$('#street_number').val(streetAll+', '+place.address_components[i][componentForm[addressType]]);
}
$('#route').val('');
}
}
}
new Shopify.CountryProvinceSelector('country', 'administrative_area_level_1', {
hideElement: 'data-hide-ele'
});
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if(place.address_components[i].types[0] == 'administrative_area_level_1') {
var val = place.address_components[i][componentForm[addressType]];
$('#'+addressType).val(val);
}
}
for (var component in componentForm) {
$("#"+component).each(function(e) {
if($.trim($(this).val()) == ''){
$(this).closest('form').find('.select-btn-alter').removeClass('button-fill');
}else{
var email_id = $('#add_email_add').val();
if(filter.test(email_id) && $('#add_phone').val() != '' && $('#add_email_add').val() != '' && $('#add_first_name').val() != '' && $('#add_last_name').val() != '' && $('#street_number').val() != '' && $('#locality').val() != '' && $('#postal_code').val() != '' && $('#add_p_note').val() != ''){
$(this).closest('form').find('.select-btn-alter').addClass('button-fill');
}
}
});
}
}
</script>
{% if template contains 'product' or template contains 'account' %}
{% include 'giftGoogleAutoComplete' %}
{% endif %}
</body>
tag. View Example
{% if p.first == 'shipping_interval_frequency' %}
{% assign cart_has_subscription_item = 'true' %}
{% endif %}
{% if p.first == 'shipping_interval_frequency' or p.last == 'gift-recharge-immediately' or p.last == 'gift-recharge-email' %}
{% assign cart_has_subscription_item = 'true' %}
{% endif %}
</body>
tag.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"> </script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.min.js" ></script>
<script>
var date = new Date();
date.setDate(date.getDate());
$('[data-ga-datepicker]').datepicker({
orientation: "bottom",
numberOfMonths: 1,
ignoreReadonly: true,
inline: false,
minDate: 0,
startDate: date,
dateFormat:'MM dd, yy',
autoclose: true,
todayHighlight: true
});
</script>
{% if template contains 'customers' %}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{% endif %}
Your cart is currently empty.