php - 在 Woocommerce 结帐中添加弹出窗口和基于国家/地区的自定义消息

Question

我使用下面的代码，当客户选择国家/地区时，该代码可以很好地向 woocommerce 结账添加一条消息。但我也想使用这个短代码添加一个弹出窗口

echo do_shortcode('[sg_popup id=3839] ');

但是当我将其添加到短信下方时，弹出窗口始终会显示，即如果我添加以下内容

`echo '<div class="shipping-notice woocommerce-info"   style="display:none">Please allow 5-10 business days for delivery after order processing.'; echo do_shortcode('[sg_popup id=3839] '); echo '</div>'

我想这是因为它只是隐藏代码所以它实际上正在运行短代码？但我还有什么其他选择呢？

感谢任何帮助。

add_action( 'woocommerce_before_checkout_billing_form', 'display_shipping_notice' );
function display_shipping_notice() {
    echo '<div class="shipping-notice woocommerce-info" style="display:none">Please allow 5-10 business days for delivery after order processing.</div>';
}

add_action( 'woocommerce_after_checkout_form', 'show_hide_shipping_notice' );
function show_hide_shipping_notice(){
    ?>
    <script>
        jQuery(document).ready(function($){
            // Set the country code (That will display the message)
            var countryCode = 'FR';

            $('select#billing_country').change(function(){
                selectedCountry = $('select#billing_country').val();

                if( selectedCountry == countryCode ){
                    $('.shipping-notice').hide();
                }
                else {
                    $('.shipping-notice').show();
                }
            });
        });
    </script>
    <?php
}

Answer 1

以下代码将根据所选国家/地区显示或隐藏自定义送货通知(该代码处理帐单国家/地区和送货国家/地区)...

要替换您的短代码，您可以使用弹出窗口，例如使用 Sweet Alert 2 (灯箱):

// Displaying a custom shipping notice
add_action( 'woocommerce_checkout_before_customer_details',  'checkout_country_shipping_notice' );
function checkout_country_shipping_notice() {
    ?>
    <style>.shipping-notice.hidden{display:none;}</style>
    <?php
    $country = WC()->customer->get_shipping_country();
    $country = empty($country) ? WC()->customer->get_billing_country() : $country;

    $text  = __("Please allow 5-10 business days for delivery after order processing.", "woocommerce" );
    $class = 'woocommerce-info shipping-notice';

    // Hidden if France or empty
    if( empty($country) || $country == 'FR' )
        $class .= ' hidden';

    echo '<div class="'.$class.'">'.$text.'</div>';
}

// The jQuery code to show / hide the custom shipping notice
add_action( 'wp_footer', 'checkout_country_script' );
function checkout_country_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):
    ?>
    <script src="https://unpkg.com/sweetalert2@8.8.1/dist/sweetalert2.all.min.js"></script>
    <script src="https://unpkg.com/promise-polyfill@8.1.0/dist/polyfill.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
        var fc  = 'form.checkout',              sn = '.shipping-notice',
            bc  = 'select#billing_country',     sc = 'select#shipping_country',
            sda = 'input#ship-to-different-address-checkbox';

        // Function that show hide the shipping notice
        function showHideNotice(t){
            if( $(t).val() == 'FR' || $(t).val() == undefined ){
                $(sn).hide( function(){
                    $(this).removeClass('hidden');
                });
            } else {
                $(sn).hide( 'fast', function(){
                    if( ! $(this).hasClass('hidden') )
                        $(this).addClass('hidden');
                    $(sn).show();

                    // Add a Sweet alert 2 popup
                    swal({
                        title:  '<?php _e("Custom popup title", "woocommerce"); ?>',
                        text:   '<?php _e("This is the text for my popup", "woocommerce"); ?>',
                        type:   'info' // can be: warning, error, success, info or question
                    });
                });
            }
        }

        // Billing and shipping country change
        $(bc+','+sc).change(function(){
            if($(sda).prop('checked'))
                showHideNotice(sc);
            else
                showHideNotice(bc);
        });
    });
    </script>
    <?php
    endif;
}

代码位于事件子主题(或事件主题)的 function.php 文件中。经过测试并有效。