结算页底部弹框

app/code/Magento/Checkout/view/frontend/web/js/view/checkout-footer.js

@@ -6,13 +6,42 @@
 define([
     'jquery',
     'uiComponent',
-    'mage/mage'
-], function ($, Component) {
+    'Magento_Ui/js/modal/alert',
+    'mage/mage',
+
+], function ($, Component, modalAlert) {
     'use strict';
 
     return Component.extend({
         defaults: {
             template: 'Magento_Checkout/checkout-index-footer'
+        },
+        initialize: function () {
+            this.initStep();
+            this._super();
+            return this;
+        },
+        initStep: function () {
+            $(document).on('click','.cf-link',function(){
+                var dataKey = $(this).attr('data-key');
+                if(!dataKey)
+                {
+                    return false;
+                }
+                $.ajax({
+                    url: '/cms/index/getPage',
+                    type: 'POST',
+                    data: {'identifier':dataKey},
+                    dataType: 'json',
+                    success: function (result) {
+                        modalAlert({
+                            title: result.title,
+                            content: result.content,
+                            button:[]
+                        });
+                    }
+                });
+            });
         }
     });
 });

app/code/Magento/Checkout/view/frontend/web/template/checkout-index-footer.html

@@ -5,16 +5,16 @@
         <footer id="policy-description" class="checkout_policy_description" trade-btn-event-name="trade:showPolicyModal" data-testid="checkout-dtv5i">
             <ul>
                 <li>
-                    <a class="custom-link-color" href="/return-exchange-policy" target="_blank">Refund Policy</a>
+                    <a class="custom-link-color cf-link" href="javascript:;" data-key="return-exchange-policy">Refund Policy</a>
                 </li>
                 <li>
-                    <a class="custom-link-color" href="/shipping-policy" target="_blank">Shipping policy</a>
+                    <a class="custom-link-color cf-link" href="javascript:;" data-key="shipping-policy">Shipping policy</a>
                 </li>
                 <li>
-                    <a class="custom-link-color" href="/security-privacy-policy" target="_blank">Privacy Policy</a>
+                    <a class="custom-link-color cf-link" href="javascript:;" data-key="security-privacy-policy">Privacy Policy</a>
                 </li>
                 <li>
-                    <a class="custom-link-color" href="/terms-of-use" target="_blank">Terms of service</a>
+                    <a class="custom-link-color cf-link" href="javascript:;" data-key="terms-of-use">Terms of service</a>
                 </li>
             </ul>
         </footer>

app/code/Magento/Cms/Controller/Index/GetPage.php

+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+namespace Magento\Cms\Controller\Index;
+use Magento\Framework\App\ObjectManager;
+use Magento\Framework\Controller\Result\JsonFactory;
+
+class GetPage extends \Magento\Framework\App\Action\Action
+{
+    protected $resultJsonFactory;
+    /**
+     * @param \Magento\Framework\App\Action\Context $context
+     */
+    public function __construct(
+        \Magento\Framework\App\Action\Context $context,
+        JsonFactory $resultJsonFactory
+    ) {
+        $this->resultJsonFactory    = $resultJsonFactory;
+        parent::__construct($context);
+    }
+    public function execute()
+    {
+        $identifier = $this->getRequest()->getParam('identifier');
+        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
+        $CmsPage = $objectManager->get(\Magento\Cms\Model\Page::class);
+        $CmsPage->load($identifier, 'identifier');
+        $data = [];
+        $data['title'] = $CmsPage->getTitle();
+        $data['content'] = $CmsPage->getContent();
+        $resultPage = $this->resultJsonFactory->create();
+        $resultPage->setHttpResponseCode(200);
+        $resultPage->setData($data);
+        return $resultPage;
+    }
+}

app/design/frontend/Joshine/breeze/Magento_Checkout/templates/onepage.phtml

@@ -81,7 +81,7 @@ $isMobile = $mobileDetect->isMobile();
     .header.content .secure-wrapper .icon-safepay:before {
         content: "\e644";
     }
-    .checkout-index-index footer.modal-footer{margin-top: unset;}
+    .checkout-index-index footer.modal-footer{margin-top: unset;padding:5px;}
     .header.content{height:60px;padding-top: 10px;padding-bottom: 10px;}
     @media(min-width: 640px){
         .header.content{padding-top: 15px !important;margin-bottom: 0px !important;}
@@ -1088,9 +1088,31 @@ $isMobile = $mobileDetect->isMobile();
         .checkout-index-index .authentication-wrapper .action.action-auth-toggle{
             color:#0000ff!important;
         }
+        .modal-inner-wrap{
+            max-width: 100%;
+            width:766px;
+            border-radius: 8px;
+            max-height: 80%;
+            height: auto;
+        }
+    }
+    .checkout-index-index .modal-footer .action-primary.action-accept{
+        display: none;
+    }
+    .checkout-index-index .modal-header {
+        border-bottom: 1px solid #ddddd8;
+        padding:20px;
+    }
+    .checkout-index-index .modal-title{
+        margin:0 auto;
+    }
+    .checkout-index-index .modal-content{
+        padding-top:1rem;
+    }
+    .checkout-index-index .authentication-wrapper .modal-header{
+        border-bottom: none;
+        padding:0;
     }
-
-
     .checkout-index-index #shipping .field.street,.checkout-index-index .billing-address-form .field.street {
         min-height:7rem;
     }
@@ -1741,6 +1763,7 @@ script;
     <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
 </div>
 <script>
+
     require(['jquery'], function ($) {
         var isMobile = window.matchMedia("(pointer:coarse)").matches;
         /*
@@ -1873,4 +1896,5 @@ script;
 
 
     });
+
 </script>
\ No newline at end of file