Skip to content

Commit 0cc2173

Browse files
poojarazorpoojarazor
committed
replicate site name on checkout
1 parent 126f4eb commit 0cc2173

File tree

2 files changed

+319
-5
lines changed

2 files changed

+319
-5
lines changed

‎public/js/modal.js

+295
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
const merchantName =
2+
preloadCheckoutData || '';
3+
const styleSnippet = `
4+
#magic-modal {
5+
font-family: Inter, lato, ubuntu, helvetica, sans-serif;
6+
font-feature-settings: "liga", 0;
7+
font-size: 14px;
8+
background: white;
9+
width: 344px;
10+
box-sizing: border-box;
11+
color: rgb(38, 58, 74);
12+
display: inline-flex;
13+
flex-direction: column;
14+
white-space: normal;
15+
z-index: 1;
16+
height: 560px;
17+
vertical-align: middle;
18+
}
19+
20+
@media (min-width: 992px) {
21+
#magic-modal {
22+
height: 600px;
23+
}
24+
}
25+
26+
#magic-wrapper {
27+
position: fixed;
28+
top: 0;
29+
width: 100%;
30+
height: 100%;
31+
max-height: 100%;
32+
bottom: 0;
33+
left: 0;
34+
right: 0;
35+
text-align: center;
36+
z-index: 2147483647;
37+
background: rgba(0, 0, 0, 0.6);
38+
39+
-webkit-transition: opacity 0.6s ease-in;
40+
-moz-transition: opacity 0.6s ease-in;
41+
-ms-transition: opacity 0.6s ease-in;
42+
-o-transition: opacity 0.6s ease-in;
43+
transition: opacity 0.6s ease-in;
44+
}
45+
46+
#magic-wrapper::after {
47+
content: '';
48+
height: 96%;
49+
display: inline-block;
50+
width: 0;
51+
vertical-align: middle;
52+
}
53+
54+
.magic-shimmer {
55+
background: #F0F0F0;
56+
}
57+
58+
.magic-shimmer::after {
59+
content: '';
60+
width: 100%;
61+
height: 100%;
62+
background-image: linear-gradient(114deg, #F0F0F0 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0) 40%, #F0F0F0 100%);
63+
background-repeat: no-repeat;
64+
background-size: 800px 104px;
65+
display: inline-block;
66+
position: relative;
67+
68+
-webkit-animation-duration: 2s;
69+
-webkit-animation-fill-mode: forwards;
70+
-webkit-animation-iteration-count: infinite;
71+
-webkit-animation-name: magicShimmer;
72+
-webkit-animation-timing-function: linear;
73+
}
74+
75+
.magic-w-100 {
76+
width: 100%;
77+
}
78+
79+
@-webkit-keyframes magicShimmer {
80+
0% {
81+
background-position: -468px 0;
82+
}
83+
84+
100% {
85+
background-position: 468px 0;
86+
}
87+
}
88+
89+
#magic-merchant-heading {
90+
padding: 8px 16px 18px;
91+
height: 76px;
92+
min-height: 76px;
93+
box-sizing: border-box;
94+
display: flex;
95+
justify-content: space-between;
96+
align-items: end;
97+
}
98+
99+
#magic-close-action {
100+
display: block;
101+
width: 60px;
102+
height: 20px;
103+
}
104+
105+
#magic-navigation-section {
106+
box-shadow: 10px 10px 30px rgb(107 108 109 / 10%);
107+
border-top: 1px solid #e1e5ea;
108+
border-bottom: 1px solid #e1e5ea;
109+
display: flex;
110+
padding: 10px 16px;
111+
gap: 7px;
112+
}
113+
114+
#magic-back-action {
115+
display: block;
116+
width: 20px;
117+
height: 22px;
118+
}
119+
120+
.magic-flex-1 {
121+
flex: 1;
122+
}
123+
124+
#magic-contact-widget {
125+
display: block;
126+
padding: 26px 16px 27px 16px;
127+
text-align: start;
128+
}
129+
130+
#magic-contact-heading {
131+
height: 29px;
132+
display: flex;
133+
gap: 7px;
134+
}
135+
136+
#magic-contact-icon {
137+
display: block;
138+
width: 29px;
139+
}
140+
141+
#magic-contact-title {
142+
display: block;
143+
width: 120px;
144+
}
145+
146+
#magic-contact-input {
147+
display: block;
148+
height: 29px;
149+
margin-top: 15px;
150+
}
151+
152+
#magic-email-input {
153+
display: block;
154+
height: 29px;
155+
margin-top: 18px;
156+
}
157+
158+
#magic-contact-extra {
159+
display: block;
160+
width: 156px;
161+
height: 29px;
162+
margin-top: 18px;
163+
}
164+
165+
div.magic-seperator {
166+
display: block;
167+
height: 10px;
168+
background-color: #f8fafd;
169+
}
170+
171+
#magic-coupons-widget {
172+
display: flex;
173+
justify-content: start;
174+
gap: 7px;
175+
padding: 20px 16px;
176+
}
177+
178+
#magic-coupon-icon {
179+
display: block;
180+
width: 29px;
181+
height: 29px;
182+
}
183+
184+
#magic-coupon-label {
185+
display: block;
186+
width: 120px;
187+
height: 29px;
188+
}
189+
190+
#magic-cta-container {
191+
padding: 14px 16px;
192+
gap: 8px;
193+
display: flex;
194+
align-items: end;
195+
box-shadow: 0 -4px 8px rgb(107 108 109 / 13%);
196+
justify-content: space-between;
197+
}
198+
199+
#magic-cta-button {
200+
display: block;
201+
width: 70%;
202+
height: 53px;
203+
}
204+
205+
div.magic-cta-line {
206+
display: block;
207+
width: 66px;
208+
height: 20px;
209+
}
210+
211+
@media screen and (max-width: 414px) {
212+
#magic-modal {
213+
width: 100%;
214+
height: 100%;
215+
}
216+
}
217+
218+
.magic-scrollable {
219+
flex: 1;
220+
overflow-y: hidden;
221+
height: 100%;
222+
}
223+
224+
#magic-merchant-name {
225+
display: block;
226+
font-size: 16px;
227+
font-weight: 600;
228+
line-height: 18px;
229+
}
230+
`;
231+
232+
const htmlSnippet = `
233+
<div id="magic-modal">
234+
<div id="magic-merchant-heading">
235+
<div id="magic-merchant-name">${merchantName}</div>
236+
<div class="magic-shimmer" id="magic-close-action"></div>
237+
</div>
238+
<div id="magic-navigation-section">
239+
<div class="magic-shimmer" id="magic-back-action"></div>
240+
<div class="magic-shimmer magic-flex-1"></div>
241+
</div>
242+
<div class="magic-scrollable">
243+
<div id="magic-contact-widget">
244+
<div id="magic-contact-heading">
245+
<div class="magic-shimmer" id="magic-contact-icon"></div>
246+
<div class="magic-shimmer" id="magic-contact-title"></div>
247+
</div>
248+
<div id="magic-contact-input" class="magic-shimmer magic-w-100"></div>
249+
<div id="magic-email-input" class="magic-shimmer magic-w-100"></div>
250+
<div id="magic-contact-extra" class="magic-shimmer magic-w-100"></div>
251+
</div>
252+
<div class="magic-seperator"></div>
253+
<div id="magic-coupons-widget">
254+
<div class="magic-shimmer" id="magic-coupon-icon"></div>
255+
<div class="magic-shimmer" id="magic-coupon-label"></div>
256+
</div>
257+
<div class="magic-seperator"></div>
258+
<div id="magic-coupons-widget">
259+
<div class="magic-shimmer" id="magic-coupon-icon"></div>
260+
<div class="magic-shimmer" id="magic-coupon-label"></div>
261+
</div>
262+
<div class="magic-seperator"></div>
263+
</div>
264+
<div id="magic-cta-container">
265+
<div style="text-align: start; display: flex; flex-direction: column; gap: 13px">
266+
<div class="magic-cta-line magic-shimmer"></div>
267+
<div class="magic-cta-line magic-shimmer"></div>
268+
</div>
269+
<div id="magic-cta-button" class="magic-shimmer"></div>
270+
</div>
271+
</div>
272+
`;
273+
274+
const styleNode = document.createElement('style');
275+
styleNode.type = 'text/css';
276+
styleNode.innerHTML = styleSnippet;
277+
278+
document.head.appendChild(styleNode);
279+
280+
window.MagicCheckout = {};
281+
282+
window.MagicCheckout.showModal = function() {
283+
const modal = document.createElement('div');
284+
modal.id = 'magic-wrapper';
285+
modal.innerHTML = htmlSnippet;
286+
287+
document.body.appendChild(modal);
288+
};
289+
290+
window.MagicCheckout.hideModal = function() {
291+
const modal = document.querySelector('#magic-wrapper');
292+
293+
modal.style.opacity = '0';
294+
setTimeout(() => document.body.removeChild(modal), 600);
295+
};

‎woo-razorpay.php

+24-5
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
require_once __DIR__.'/includes/api/api.php';
2424
require_once __DIR__.'/includes/utils.php';
2525
require_once __DIR__.'/includes/state-map.php';
26+
require_once __DIR__.'/includes/support/cartbounty.php';
2627

2728
use Razorpay\Api\Api;
2829
use Razorpay\Api\Errors;
@@ -1065,7 +1066,7 @@ function process_payment($order_id)
10651066
rzpLogInfo("Set transient with key " . self::SESSION_KEY . " params order_id $order_id");
10661067

10671068
$orderKey = $this->getOrderKey($order);
1068-
1069+
10691070
if (version_compare(WOOCOMMERCE_VERSION, '2.1', '>='))
10701071
{
10711072
return array(
@@ -1298,7 +1299,7 @@ protected function getErrorMessage($orderId)
12981299
{
12991300
$message = 'An error occured. Please contact administrator for assistance';
13001301
}
1301-
rzpLogInfo("returning $getErrorMessage");
1302+
rzpLogInfo("returning $message");
13021303
return $message;
13031304
}
13041305

@@ -1313,7 +1314,7 @@ public function updateOrder(& $order, $success, $errorMessage, $razorpayPaymentI
13131314

13141315
$orderId = $order->get_order_number();
13151316

1316-
rzpLogInfo("updateOrder orderId: $orderId , errorMessage: $errorMessage, razorpayPaymentId: $razorpayPaymentId , success: $success");
1317+
rzpLogInfo("updateOrder orderId: $orderId , razorpayPaymentId: $razorpayPaymentId , success: $success");
13171318

13181319
if (($success === true) and ($order->needs_payment() === true))
13191320
{
@@ -1354,6 +1355,10 @@ public function updateOrder(& $order, $success, $errorMessage, $razorpayPaymentI
13541355
{
13551356
$order->payment_complete($razorpayPaymentId);
13561357
}
1358+
1359+
if(is_plugin_active('woo-save-abandoned-carts/cartbounty-abandoned-carts.php')){
1360+
handleCBRecoveredOrder($orderId);
1361+
}
13571362

13581363
$order->add_order_note("Razorpay payment successful <br/>Razorpay Id: $razorpayPaymentId");
13591364

@@ -1514,7 +1519,7 @@ public function update1ccOrderWC(& $order, $wcOrderId, $razorpayPaymentId)
15141519
}
15151520
else
15161521
{
1517-
$item->set_method_title($shippingData[0]['name']);
1522+
$item->set_method_title($shippingData??[0]['name']);
15181523
}
15191524

15201525
// set an non existing Shipping method rate ID will mark the order as completed instead of processing status
@@ -1823,10 +1828,14 @@ function enqueueScriptsFor1cc()
18231828

18241829
wp_register_script('1cc_razorpay_checkout', RZP_CHECKOUTJS_URL, null, null);
18251830
wp_enqueue_script('1cc_razorpay_checkout');
1826-
18271831
wp_register_style(RZP_1CC_CSS_SCRIPT, plugin_dir_url(__FILE__) . 'public/css/1cc-product-checkout.css', null, null);
18281832
wp_enqueue_style(RZP_1CC_CSS_SCRIPT);
18291833

1834+
// preload shimmer checkout data
1835+
wp_register_script('modal', plugin_dir_url(__FILE__) . 'public/js/modal.js', null, null);
1836+
wp_localize_script('modal', 'preloadCheckoutData', get_bloginfo('name') );
1837+
wp_enqueue_script('modal');
1838+
18301839
wp_register_script('btn_1cc_checkout', plugin_dir_url(__FILE__) . 'btn-1cc-checkout.js', null, null);
18311840
wp_localize_script('btn_1cc_checkout', 'rzp1ccCheckoutData', array(
18321841
'nonce' => wp_create_nonce("wp_rest"),
@@ -1962,3 +1971,13 @@ function disable_coupon_field_on_cart($enabled)
19621971
add_action('woocommerce_cart_updated', 'enqueueScriptsFor1cc', 10);
19631972
add_filter('woocommerce_order_needs_shipping_address', '__return_true');
19641973
}
1974+
1975+
//Changes Recovery link URL to Magic cart URL to avoid redirection to checkout page
1976+
function cartbounty_alter_automation_button( $button ){
1977+
return str_replace("cartbounty=","cartbounty=magic_",$button);
1978+
}
1979+
1980+
if(is_plugin_active('woo-save-abandoned-carts/cartbounty-abandoned-carts.php')){
1981+
add_filter( 'cartbounty_automation_button_html', 'cartbounty_alter_automation_button' );
1982+
}
1983+

0 commit comments

Comments
 (0)