网站主页增加订阅模块

app/design/frontend/Joshine/breeze/Magento_Newsletter/requirejs-config.js

+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+var config = {
+    map: {
+        '*': {
+            subscriptionStatusResolver: 'Magento_Newsletter/js/subscription-status-resolver',
+            newsletterSignUp:  'Magento_Newsletter/js/newsletter-sign-up'
+        }
+    }
+};

app/design/frontend/Joshine/breeze/Magento_Newsletter/templates/subscribe.phtml

+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/** @var \Magento\Newsletter\Block\Subscribe $block */
+?>
+<div class="block newsletter">
+    <div class="newsletter-list">
+        <span>SIGN UP FOR JOSHINE NEWS & DEALS</span>
+    </div>
+    <div class="content newsletter-list sub">
+        <form class="form subscribe"
+            novalidate
+            action="<?= $block->escapeUrl($block->getFormActionUrl()) ?>"
+            method="post"
+            data-mage-init='{"validation": {"errorClass": "mage-error"}}'
+            id="newsletter-validate-detail">
+            <div class="field newsletter" >
+                <div class="control">
+                    <label for="newsletter">
+                        <input name="email" type="email" id="newsletter"
+                               placeholder="<?= $block->escapeHtml(__('Enter your email address')) ?>"
+                               data-mage-init='{"mage/trim-input":{}}'
+                               data-validate="{required:true, 'validate-email':true}"
+                        />
+                    </label>
+                </div>
+            </div>
+            <div class="actions">
+                <button class="action subscribe primary"
+                        title="<?= $block->escapeHtmlAttr(__('Subscribe')) ?>"
+                        type="submit"
+                        aria-label="Subscribe">
+                    <span><?= $block->escapeHtml(__('Subscribe')) ?></span>
+                </button>
+            </div>
+        </form>
+    </div>
+    <div class="newsletter-list ins">
+        <ul>
+            <li><a title="Tiktok" href="https://www.tiktok.com/@joshineofficial">
+
+                        <img src="/media/wysiwyg/1-tiktok.png" alt="">
+
+                </a></li>
+            <li><a title="Instagram" href="https://www.instagram.com/JoshineOfficial/">
+
+                        <img src="/media/wysiwyg/2-instagram.png" alt="">
+
+                </a></li>
+            <li><a title="Facebook" href="https://www.facebook.com/JoshineOfficial/">
+
+                        <img src="/media/wysiwyg/3-facebook.png" alt="">
+
+                </a></li>
+            <li><a title="Pinterest" href="https://www.pinterest.com/Joshinesupport/">
+
+                        <img src="/media/wysiwyg/4-pinterest.png" alt="">
+
+                </a></li>
+            <li><a title="Twitter" href="https://twitter.com/JoshineSupport">
+
+                        <img src="/media/wysiwyg/5-twitter.png" alt="">
+
+                </a></li>
+        </ul>
+    </div>
+</div>
+<style>
+    .block.newsletter{
+        width: 80%;
+        margin-left: 10%;
+        height: 100px;
+        background: #a46659;
+        max-width: 80%;
+        margin: 0 auto;
+        position: relative;
+        z-index: 1;
+
+        margin-top: 10px;
+    }
+    .field.newsletter{
+        width: 65%;
+        float: left;
+    }
+    .newsletter-list {
+        width: 30%;
+        float: left;
+        text-align: center;
+    }
+    .newsletter-list.sub  {
+        width: 35%;
+        float: left;
+        text-align: center;
+        margin-top: 2%;
+    }
+    .actions .subscribe {
+        background: #000;
+    }
+    .newsletter-list > span {
+        color: #fff;
+        text-transform: uppercase;
+        line-height: 80px;
+        font-size: smaller;
+        font-weight: 600;
+    }
+    .newsletter-list.ins  {
+        width: 35%;
+        float: left;
+        text-align: center;
+        margin-top: 2%;
+    }
+    .newsletter-list ul{
+
+    }
+    .newsletter-list ul >li{
+        float: left;
+    }
+    .newsletter-list ul >li >a > img{
+        max-width: 70%;
+        margin-left: 2px;
+    }
+    @media(max-width:789px) {
+        .newsletter-list {
+            width: 100%;
+            float: left;
+            text-align: center;
+        }
+        .block.newsletter{
+            height: 200px;
+        }
+        .newsletter-list.sub  {
+            width: 105%;
+        }
+        .newsletter-list.ins  {
+            width: 100%;
+
+        }
+    }
+</style>
+<script type="text/x-magento-init">
+    {
+        "*": {
+            "Magento_Customer/js/block-submit-on-send": {
+                "formId": "newsletter-validate-detail"
+            }
+        }
+    }
+</script>

app/design/frontend/Joshine/breeze/Magento_Newsletter/web/js/newsletter-sign-up.js

+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'uiElement',
+    'mage/url',
+    'subscriptionStatusResolver',
+    'mage/validation'
+], function ($, Component, urlBuilder, subscriptionStatusResolver) {
+    'use strict';
+
+    return Component.extend({
+
+        defaults: {
+            signUpElement: '',
+            submitButton: '',
+            element: null
+        },
+
+        /** @inheritdoc */
+        initialize: function (config, element) {
+            this._super();
+            this.element = element;
+            $(element).on('change', $.proxy(this.updateSignUpStatus, this));
+            this.updateSignUpStatus();
+        },
+
+        /**
+         * Send status request and update subscription element according to result.
+         */
+        updateSignUpStatus: function () {
+            var element = $(this.element),
+                email = element.val(),
+                self = this,
+                newsletterSubscription;
+
+            if ($(self.signUpElement).is(':checked')) {
+                return;
+            }
+
+            if (!email || !$.validator.methods['validate-email'].call(this, email, element)) {
+                return;
+            }
+
+            newsletterSubscription = $.Deferred();
+
+            $(self.submitButton).prop('disabled', true);
+
+            subscriptionStatusResolver(email, newsletterSubscription);
+
+            $.when(newsletterSubscription).done(function (isSubscribed) {
+                if (isSubscribed) {
+                    $(self.signUpElement).prop('checked', true);
+                }
+            }).always(function () {
+                $(self.submitButton).prop('disabled', false);
+            });
+        }
+    });
+});

app/design/frontend/Joshine/breeze/Magento_Newsletter/web/js/subscription-status-resolver.js

+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'mage/url'
+], function ($, urlBuilder) {
+    'use strict';
+
+    return function (email, deferred) {
+        return $.getJSON(
+            urlBuilder.build('newsletter/ajax/status'),
+            {
+                email: email
+            }
+        ).done(function (response) {
+            if (response.errors) {
+                deferred.reject();
+            } else {
+                deferred.resolve(response.subscribed);
+            }
+        }).fail(function () {
+            deferred.reject();
+        });
+    };
+});

app/design/frontend/Joshine/breeze/Magento_Theme/layout/default.xml

@@ -76,6 +76,7 @@
         <!-- Before Footer -->
         <referenceContainer name="page.bottom.container">
             <container name="before-footer.top-wrapper" htmlTag="div">
+                <block class="Magento\Newsletter\Block\Subscribe" name="form.subscribe" as="subscribe"  before="footer" template="Magento_Newsletter::subscribe.phtml" ifconfig="newsletter/general/active"/>
                 <container name="before-footer.top" htmlTag="div" htmlClass="container"/>
             </container>
             <container name="before-footer.middle-wrapper" htmlTag="div">

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -753,7 +753,7 @@ p.shopbycate-title {
   .cms-index-index .box-blog{padding-bottom:0;}
   .baozhang_before_footer{width: 33.333%;float: left;}
 
-  .select-element.section-before-footer.clearfix{ background: #f2f2f2;padding: 20px 10px;}
+  .select-element.section-before-footer.clearfix{ padding: 20px 10px;}
   .select-element.section-before-footer.clearfix p{height:60px;font-size: 14px;text-transform: lowercase;}
 
   .select-element.section-before-footer.clearfix span {height:25px;}