堆栈内存溢出
  繁体   English   中英

WooCommerce 产品中的动态预计交货日期小部件

[英]Dynamic estimated delivery date widget in WooCommerce products

 原文  2023-06-07 18:05:09  3   1    javascript/ php/ jquery/ woocommerce/ widget

问题描述

我使用代码片段添加了一个预计交货日期小部件。 我希望它显示不同产品的不同运输和交货日期。 我可以在 woocommerce 产品编辑器上添加一个自定义字段，以便我可以选择天数吗？

这是代码：

add_action( 'woocommerce_after_add_to_cart_form', 
'delivery_status_widget', 40 );
function delivery_status_widget() {
?>
<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<style>
    .delivery-status-widget {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        font-size: 13px; 
        margin-bottom: 10px;
        line-height: 15px;
        padding: 14px 10px;
        color: #121212;
        background-color: white;
        border: 1px dotted black;
        color: #121212;
        border-radius: 6px;
    }
    .delivery-status-widget .status {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 15px;
    }
    .delivery-status-widget .status-icon {
        font-size: 24px;
        margin-bottom: 5px;
        color: #121212!important;
    }
    .delivery-status-widget .status-text {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .delivery-status-widget .status-date {
        font-size: 12px;
        color: gray;
    }
   </style>

<div class="delivery-status-widget">
    <div class="status">
        <i class="fas fa-shopping-bag status-icon" style="color: 
   gray;"></i>
        <div class="status-text">Ordered</div>
        <div class="status-date" id="order-date"></div>
    </div>
    <div class="status">
        <i class="fas fa-angle-double-right"></i>
    </div>
    <div class="status">
        <i class="fas fa-shipping-fast status-icon" style="color: 
grey;"></i>
        <div class="status-text">Shipped</div>
        <div class="status-date" id="ship-date"></div>
    </div>
    <div class="status">
        <i class="fas fa-angle-double-right"></i>
    </div>
    <div class="status">
        <i class="fas fa-box-open status-icon" style="color: 
grey;"></i>
        <div class="status-text">Delivered</div>
        <div class="status-date" id="delivery-date"></div>
    </div>
</div>

<script>
    jQuery(document).ready(function($) {
        var today = new Date();

        // Ordered
        var orderedDate = today.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        document.getElementById("order-date").innerHTML = orderedDate;

        // Shipped
        var shipDate = new Date(today);
        shipDate.setDate(today.getDate() + 2);
        shipDate = shipDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        document.getElementById("ship-date").innerHTML = shipDate;

        // Delivered
        var deliveryDate = new Date(today);
        deliveryDate.setDate(today.getDate() + 6);
        deliveryDate = deliveryDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        document.getElementById("delivery-date").innerHTML = deliveryDate;
    });
</script>
<?php
}

我尝试使用此代码添加自定义字段并添加了字段：

function add_custom_fields() {
woocommerce_wp_text_input(
    array(
        'id'          => '_shipping_days',
        'label'       => 'Shipping Days',
        'desc_tip'    => true,
        'description' => 'Enter the number of days required for 
shipping',
        'wrapper_class' => 'form-row form-row-first',
    )
);

woocommerce_wp_text_input(
    array(
        'id'          => '_delivery_days',
        'label'       => 'Delivery Days',
        'desc_tip'    => true,
        'description' => 'Enter the number of days required for 
delivery',
        'wrapper_class' => 'form-row form-row-last',
    )
);
}
add_action( 'woocommerce_product_options_general_product_data', 
'add_custom_fields' );


function save_custom_fields( $post_id ) {
$shipping_days = isset( $_POST['_shipping_days'] ) ? 
sanitize_text_field( $_POST['_shipping_days'] ) : '';
$delivery_days = isset( $_POST['_delivery_days'] ) ? 
sanitize_text_field( $_POST['_delivery_days'] ) : '';

update_post_meta( $post_id, '_shipping_days', $shipping_days );
update_post_meta( $post_id, '_delivery_days', $delivery_days );
}
add_action( 'woocommerce_process_product_meta', 'save_custom_fields' );

并为上述自定义字段尝试了这个 javascript（但它根本没有显示运输和交货日期，它是空的）：

jQuery(document).ready(function($) {
var today = new Date();

// Ordered
var orderedDate = today.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
document.getElementById("order-date").innerHTML = orderedDate;

// Shipped
var shipDate = new Date(today);
shipDate.setDate(today.getDate() + parseInt(woocommerce_admin_meta_boxes.get_meta_value('_shipping_days')));
shipDate = shipDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
document.getElementById("ship-date").innerHTML = shipDate;

// Delivered
var deliveryDate = new Date(today);
deliveryDate.setDate(today.getDate() + parseInt(woocommerce_admin_meta_boxes.get_meta_value('_delivery_days')));
deliveryDate = deliveryDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
document.getElementById("delivery-date").innerHTML = deliveryDate;
});

1 个解决方案

解决方案1
 0  2023-06-07 20:22:03

我已经重新访问了您的所有代码并删除了不必要的最后一个 function。在第一个 function 中，您现在将获得两个产品的自定义字段值，以动态自动填充您的运输小部件：

add_action( 'woocommerce_after_add_to_cart_form', 'delivery_status_widget', 40 );
function delivery_status_widget() {
    global $product;
    ?>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
    <style>
    .delivery-status-widget {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        font-size: 13px; 
        margin-bottom: 10px;
        line-height: 15px;
        padding: 14px 10px;
        color: #121212;
        background-color: white;
        border: 1px dotted black;
        color: #121212;
        border-radius: 6px;
    }
    .delivery-status-widget .status {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 15px;
    }
    .delivery-status-widget .status-icon {
        font-size: 24px;
        margin-bottom: 5px;
        color: #121212!important;
    }
    .delivery-status-widget .status-text {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .delivery-status-widget .status-date {
        font-size: 12px;
        color: gray;
    }
    </style>
    <div class="delivery-status-widget">
        <div class="status">
            <i class="fas fa-shopping-bag status-icon" style="color: 
    gray;"></i>
            <div class="status-text">Ordered</div>
            <div class="status-date" id="order-date"></div>
        </div>
        <div class="status">
            <i class="fas fa-angle-double-right"></i>
        </div>
        <div class="status">
            <i class="fas fa-shipping-fast status-icon" style="color: 
    grey;"></i>
            <div class="status-text">Shipped</div>
            <div class="status-date" id="ship-date"></div>
        </div>
        <div class="status">
            <i class="fas fa-angle-double-right"></i>
        </div>
        <div class="status">
            <i class="fas fa-box-open status-icon" style="color: 
    grey;"></i>
            <div class="status-text">Delivered</div>
            <div class="status-date" id="delivery-date"></div>
        </div>
    </div>
    <?php
        // Get the product "shipping""custom fields values"
        $shipval = $product->get_meta('_shipping_days');
        $delival = $product->get_meta('_delivery_days'); 
    ?>
    <script>
    jQuery(document).ready(function($) {
        var today       = new Date(),
            shipVal     = <?php echo $shipval ? intval( $shipval ) : 2; ?>, // (Default value is "2")
            deliVal     = <?php echo $delival ? intval( $delival ) : 6; ?>; // (Default value is "6")

        // Ordered
        var orderedDate = today.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        $("#order-date").text(orderedDate);

        // Shipped
        var shipDate = new Date(today);
        shipDate.setDate(today.getDate() + shipVal);
        shipDate = shipDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        $("#ship-date").text(shipDate);

        // Delivered
        var deliveryDate = new Date(today);
        deliveryDate.setDate(today.getDate() + deliVal);
        deliveryDate = deliveryDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        $("#delivery-date").text(deliveryDate);
    });
    </script>
    <?php
}

add_action( 'woocommerce_product_options_general_product_data', 'add_shipping_custom_fields' );
function add_shipping_custom_fields() {
    
    echo '<div class="options_group product_shipping_custom_fields">';
    
    woocommerce_wp_text_input(
        array(
            'id'          => '_shipping_days',
            'label'       => 'Shipping Days',
            'desc_tip'    => true,
            'description' => 'Enter the number of days required for shipping',
        )
    );

    woocommerce_wp_text_input(
        array(
            'id'          => '_delivery_days',
            'label'       => 'Delivery Days',
            'desc_tip'    => true,
            'description' => 'Enter the number of days required for delivery',
        )
    );
    
    echo '</div>';
}

add_action( 'woocommerce_admin_process_product_object', 'save_shipping_custom_fields' );
function save_shipping_custom_fields( $product ) {
    if ( isset($_POST['_shipping_days']) ) {
        $product->update_meta_data( '_shipping_days', sanitize_text_field( $_POST['_shipping_days'] ) );
    }
    if ( isset($_POST['_delivery_days']) ) {
        $product->update_meta_data( '_delivery_days', sanitize_text_field( $_POST['_delivery_days'] ) );
    }
}

代码进入活动子主题（或活动主题）的 functions.php 文件。 测试和工作。

在此处输入图像描述

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Shopify预计送货时间 WooCommerce 的动态交货时间计数器作为简码 Javascript 计算交货期 CafePress小部件未显示产品 Woocommerce：交付方法更改事件处理程序未触发 Woocommerce其他产品现在显示 Object.estimated（日期之类的对象）未处理为Date（）类型 侧边栏定制中的Woocommerce产品小部件 砌筑Woocommerce购物车小部件有冲突吗？ 交货日期 Javascript 适应排除周末
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM