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

时间:2018-10-16 10:38:17

标签: php jquery wordpress woocommerce checkout

我正在使用以下代码,当客户选择国家/地区时,该代码很好地将消息添加到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
}

1 个答案:

答案 0 :(得分:0)

以下代码将根据所选国家/地区显示或隐藏自定义装运通知(该代码同时处理开票和装运国家/地区)…

要替换您的简码,您可以改用弹出式窗口,例如使用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文件中。经过测试,可以正常工作。

enter image description here