feat : 优惠券翻转效果

app/code/Joshine/CouponPusher/Controller/Ajax/Subscribe.php

@@ -180,8 +180,9 @@ class Subscribe extends SubscriberController implements HttpPostActionInterface
                 $message = $this->getSuccessMessage((int)$subscriber->getSubscriberStatus());
 
                 $message = [
-                    'success' => __('Success.'),
-                    'data' => $message,
+                    'success'     => __('Success.'),
+                    'data'        => $message,
+                    'coupon_code' => $this->getCouponCode()
                 ];
             } catch (LocalizedException $e) {
                 $message = ['error' => $e->getMessage()];
@@ -230,4 +231,13 @@ class Subscribe extends SubscriberController implements HttpPostActionInterface
 
         return __('Thank you for your subscription.');
     }
+
+    private function getCouponCode()
+    {
+        return $this->_objectManager->get(ScopeConfigInterface::class)
+            ->getValue(
+                'joshine_coupon_pusher/general/newsletter_coupon_code',
+                ScopeInterface::SCOPE_STORE
+            );
+    }
 }

app/code/Joshine/CouponPusher/view/frontend/templates/coupon-subscribe-alert.phtml

@@ -34,6 +34,40 @@
             width: auto;
         }
     }
+
+    .coupon-wrapper {
+        transition: all 1s;
+        perspective: 1000px;
+    }
+
+    .coupon-back {
+        position: absolute;
+    }
+
+    .coupon-wrapper .coupon-front {
+        transition: all 1s;
+        backface-visibility: hidden;
+    }
+
+    .coupon-wrapper .coupon-back {
+        transition: all 1s;
+        position: absolute;
+        top: 0;
+        transform: rotateY(180deg);
+        backface-visibility: hidden;
+    }
+
+    .coupon-wrapper.flipping .coupon-front  {
+        transition: all 1s;
+        transform: rotateY(180deg);
+    }
+
+    .coupon-wrapper.flipping .coupon-back {
+        transition: all 1s;
+        display: block;
+        transform: rotateY(0deg);
+    }
+
 </style>
 <div class="joshine-model-warp" id="coupon-subscribe-alert" style="display: none;">
     <div class="joshine-mask"></div>
@@ -45,12 +79,23 @@
                 </div>
                 <div class="j-modal-body">
                     <div class="coupon-alt joshine-text-center">
-                        <img src="<?= $block->getViewFileUrl('Joshine_CouponPusher::images/coupon_background.png');  ?>" alt="" class="">
-                        <div class="coupon-text">
-                            <!--todo:: show config coupon-->
-                            <p class="coupon-discount-amount"><?= $block->getCouponTitle() ?></p>
-                            <p class="coupon-discount-rule"><?= $block->getCouponDescription() ?></p>
+                        <div class="coupon-wrapper">
+                            <div class="coupon-front">
+                                <img src="<?= $block->getViewFileUrl('Joshine_CouponPusher::images/coupon_background.png');  ?>" alt="" class="">
+                                <div class="coupon-text">
+                                    <!--todo:: show config coupon-->
+                                    <p class="coupon-discount-amount"><?= $block->getCouponTitle() ?></p>
+                                    <p class="coupon-discount-rule"><?= $block->getCouponDescription() ?></p>
+                                </div>
+                            </div>
+                            <div class="coupon-back">
+                                <img src="<?= $block->getViewFileUrl('Joshine_CouponPusher::images/coupon_background.png');  ?>" alt="">
+                                <div class="coupon-text">
+                                    <p class="coupon-discount-amount" id="flipping-coupon-code"></p>
+                                </div>
+                            </div>
                         </div>
+
                         <div class="coupon-alt-input-title">
                             <?= __('Subscribe to get your exclusive offer.') ?>
                         </div>
@@ -106,7 +151,8 @@
                         $(".coupon-input-errorMsg").html(response.error).show();
                         return;
                     }
-                    //todo::show coupon code
+                    $("#flipping-coupon-code").html(response.coupon_code);
+                    $(".coupon-wrapper").addClass("flipping");
                 },
                 error: function () {
                     $(".coupon-input-errorMsg").html('error').show();