jQuery ui datepicker无法在特定页面上工作，Bigcommerce购物车

时间：2013-12-01 19:36:27

标签： jquery datepicker

这可能最终会使问题/解释过于含糊，但我不确定从哪里开始。我在几个不同的页面上使用jQuery ui datepicker，它在除了一个之外的所有页面上都能正常工作。这是一个BigCommerce网站，所以他们的后端发生了很多事情，我认为这与他们的一些JavaScript有冲突。

最初，datepicker根本没有填充，所以我不得不用内联onclick强制它。现在它正在填充，但没有反映我的minDate或任何其他功能，好像它没有选择任何脚本。没有其他页面的问题所以我认为这不是我的设置，但显然不知道问题是什么。

首先想知道是否有人知道购物车页面上的任何Bigcommerce javascript存在问题，这可能会使得使用日期选择器变得困难，如果有的话，可能会有什么变通方法。

我会继续发布代码，但我确信查看源代码将是了解正在发生的事情的最佳方式。对于愿意这样做的人，我设置了一个测试网站：Link to My Poor Not Working Cart Page

注意：非工作日期选择器位于模态内。唯一可以看到它的方法是去商店，将商品添加到购物车。请务必从产品页面中选择交货日期。然后在产品名称“Change”下会有一个链接，当点击它时会显示模态。

另外：对于那些不熟悉BigCommerce的人来说，%%中包含的任何内容都是Global Bigcommerce变量，它指的是文本字符串或其服务器生成的代码块。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript">
lang.InvalidQuantity = "%%LNG_InvalidQuantity%%";
lang.Calculating = "%%LNG_Calculating%%"
lang.CalculateShipping = "%%LNG_CalculateShipping%%"
lang.ChooseShippingMethod = "%%LNG_ChooseShippingMethod%%"
lang.CartRemoveConfirm = '%%LNG_CartRemoveConfirm%%';
lang.ConfirmRemoveGiftWrapping = '%%LNG_ConfirmRemoveGiftWrapping%%';
lang.SelectCountry = '%%LNG_ChooseShippingCountry%%';
lang.SelectState = '%%LNG_ChooseShippingState%%';
lang.EnterZip = '%%LNG_EnterShippingZip%%';
</script>

<script src="%%GLOBAL_ShopPath%%/javascript/jquery/plugins/imodal/imodal.js?%%GLOBAL_JSCacheToken%%" type="text/javascript"></script>  
<div class="Block Moveable Panel" id="CartContent">
    <div class="BlockContent"> 
        <!---- Datepicker Not Working --->
        <div id="CartdatepickerDiv" class="ml25">                 
            <label for="datepicker" class="name">Desired Delivery Date:</label><br />           
            <input id="datepicker" onclick="$('#datepicker').datepicker();$('#datepicker').datepicker('show');" placeholder="ex. 01/01/2013" readonly />
            <button class="btn-mini" onclick="$('#datepicker').datepicker();$('#datepicker').datepicker('show');">...</button>
        </div>
        <!--- End Datepicker --->
        <div style="display: %%GLOBAL_HideShoppingCartGrid%%">
            <form enctype="multipart/form-data" onsubmit="return Cart.ValidateQuantityForm(this);" action="cart.php" name="cartForm" id="cartForm" method="post">
            <input type="hidden" name="action" value="update" />
            <table class="CartContents Stylize General" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th colspan="2">%%LNG_CartItems%%</th>
                        <th style="text-align: center; white-space: nowrap;">%%LNG_Qty%%</th>
                        <th style="text-align: center; white-space: nowrap;">%%LNG_ItemPrice%%</th>
                        <th style="text-align: right; white-space: nowrap;">%%LNG_ItemTotal%%</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr class="SubTotal">
                        <td colspan="4">%%LNG_Subtotal%%:</td>
                        <td><em class="ProductPrice">%%GLOBAL_CartItemTotal%%</em></td>
                    </tr>
                    <tr class="SubTotal" style="%%GLOBAL_HideGiftWrappingTotal%%">
                        <td colspan="4">%%LNG_GiftWrapping%%:</td>
                        <td><em class="ProductPrice">%%GLOBAL_GiftWrappingTotal%%</em></td>
                    </tr>                    
                    <tr class="SubTotal" style="%%GLOBAL_HideDiscountAmount%%">
                        <td colspan="4">%%LNG_Discount%%:</td>
                        <td><em class="ProductPrice">%%GLOBAL_DiscountAmount%%</em></td>
                    </tr>                    
                    <tr style="display:%%GLOBAL_HideShoppingCartShippingCost%%" class="SubTotal">
                        <td colspan="4">%%LNG_Shipping%% (%%GLOBAL_ShippingProvider%%):</td>
                        <td><em class="ProductPrice">%%GLOBAL_ShippingCost%%</em></td>
                    </tr>                   
                    <tr style="display: %%GLOBAL_HideShoppingCartHandlingCost%%" class="SubTotal">
                        <td colspan="4">%%LNG_Handling%%:</td>
                         <td><em class="ProductPrice">%%GLOBAL_HandlingCost%%</em></td>
                   </tr>
                    %%GLOBAL_Taxes%%
                    %%SNIPPET_GiftCertificates%%
                    <tr class="SubTotal GrandTotal">
                        <td colspan="4">%%LNG_GrandTotal%%:</td>
                        <td><em class="ProductPrice">%%GLOBAL_CartTotal%%</em></td>
                    </tr>
                    %%GLOBAL_InclusiveTaxes%%
                </tfoot>
                <tbody>
                    %%SNIPPET_CartItems%%
                </tbody>
            </table>
            <div class="ProceedToCheckout">
                <div>
                    <span style="display: %%GLOBAL_HideCartQuantityTextBox%%" class="CartUpdateBtn">
                        <input class="btn" type="submit" value="Update Cart" title="%%LNG_Update%%" />
                    </span>
                    <span class="CheckoutButton" style="%%GLOBAL_HideCheckoutButton%%">
                        <a class="btn btn-secondary" href="%%GLOBAL_CheckoutLink%%" onclick="%%GLOBAL_OptimizerLinkFunction%%" title="%%LNG_CheckoutButtonTitle%%">Proceed To Checkout</a>
                    </span>
                </div>
                <div class="AlternativeCheckout" style="%%GLOBAL_HideMultipleAddressShipping%%">
<p style="%%GLOBAL_HideMultipleAddressShippingOr%%" class="AlternativeCheckoutOr">%%LNG_or%%</p>
<a href="%%GLOBAL_ShopPath%%/checkout.php?action=multiple">%%LNG_CheckoutWithMultipleAddresses%%</a>
                </div>
            </div>
            </form>            
        </div>        
        <div style="display: %%GLOBAL_HideShoppingCartEmptyMessage%%">
            <p class="InfoMessage Message">
                 <strong>%%LNG_NoItemsInCart%%</strong>
            </p>
            %%LNG_EmptyCartInfo%%
            <br /><br />
            <a href="%%GLOBAL_ShopPath%%/">%%LNG_ContinueShopping%%</a> %%LNG_OnThe%% %%GLOBAL_StoreName%% %%LNG_EmptyHomePage%%
        </div>
    </div>
</div>

模态页面：

<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery/plugins/validate/jquery.validate.js?%%GLOBAL_JSCacheToken%%"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/cart.js?%%GLOBAL_JSCacheToken%%"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery/plugins/jquery.form.js?%%GLOBAL_JSCacheToken%%">    </script>

<link rel="stylesheet" type="text/css" media="screen" href="%%GLOBAL_ShopPath%%/templates/__master/Styles/product.attributes.css?%%GLOBAL_JSCacheToken%%" />

<div id="ModalTitle">%%GLOBAL_CustomizeProductTitle%%</div>
<form id="CartEditProductFieldsForm"method="post" action="cart.php" onsubmit="return Cart.saveItemCustomizations();"  enctype="multipart/form-data">
    <input type="hidden" name="action" value="EditProductFieldsInCart" />
    <input type="hidden" name="item_id" value="%%GLOBAL_ItemId%%" />

    <div id="ModalContent" class="ml-m" style="overflow: auto;">
        <dl class="HorizontalFormContainer ProductFields"></dl>
        <div class="productAttributeList ml-m">
            %%SNIPPET_ProductFieldsList%%           
            %%GLOBAL_ProductAttributeList%%
        </div>
        <div id="CartdatepickerDiv" class="ml25">                 
            <label for="datepicker2" class="name">Desired Delivery Date:</label><br />           
            <input id="datepicker2" class="Field validation productAttributeFluidWidth" onclick="$('#datepicker2').datepicker();$('#datepicker2').datepicker('show');" placeholder="ex. 01/01/2013" readonly />   
            <div class="cf"></div>                     
            <hr />
        </div>
    </div>    
    <div id="ModalButtonRow">
        <div class="FloatLeft"><a href="#" onclick="$.modal.close();">%%LNG_Cancel%%</a></div>
        <input class="Submit" class="Submit" type="submit" value="%%LNG_Save%%" />
    </div>
</form>

datepicker脚本

//holidays
var natDays = [
    [1, 1, 'New Year'], //2014
    [1, 20, 'Martin Luther King'], //2014
    [2, 17, 'Washingtons Birthday'], //2014       
    [5, 26, 'Memorial Day'], //2014
    [7, 4, 'Independence Day'], //2014
    [9, 1, 'Labour Day'], //2014
    [10, 14, 'Columbus Day'], //2013
    [11, 11, 'Veterans Day'], //2013
    [11, 28, 'Thanks Giving Day'], //2013 
    [12, 25, 'Christmas'] //2013     
    ];

// dateMin is the minimum delivery date
var dateMin = new Date();

// test dateMin delivery date by selecting a static date like this
// var dateMin = new Date("10/15/2013");

dateMin.setDate(dateMin.getDate() + (dateMin.getHours() >= 14 ? 1 : 0));
AddBusinessDays(dateMin, 4);

function AddBusinessDays(curdate, weekDaysToAdd) {
    while (weekDaysToAdd > 0) {
        curdate.setDate(curdate.getDate() + 1);
        //check if current day is business day
        if (noWeekendsOrHolidays(curdate)[0]) {
            weekDaysToAdd--;
        }
    }
}

function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
        return nationalDays(date);
    } else {
        return noWeekend;
    }
}

function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
        if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][2]) {
            return [false, natDays[i][3] + '_day'];
        }
    }
    return [true, ''];
}

function setDeliveryDate(datestring) {
    var deliverdate = new Date(datestring);
    var day = deliverdate.getDate();
    var month = deliverdate.getMonth() + 1; // January starts at zero
    var year = deliverdate.getFullYear();

    $("#delivery-date").text(month + "/" + day + "/" + year);

}

setDeliveryDate(dateMin);


// use datepicker to choose a different delivery date
$('#datepicker').datepicker({
    inline: true,
    beforeShowDay: noWeekendsOrHolidays,
    showOn: "both",
    firstDay: 0,
    dateformat: "dd/mm/yy",
    changeFirstDay: false,
    showButtonPanel: true,
    minDate: dateMin,

    onSelect: function (datestring) {
        setDeliveryDate(datestring);
    }

});
});



的更新：

我发现问题不在整个页面中。现在认为datepicker与jQuery imodal或者可能还有一些Bigcommerce生成的脚本冲突。下面的第一个截图是此页面上的工作日期选择器。第二个截图是iModal上的日期选择器，它无法正常工作。同样，模态上的那个是填充，但只有强制内联onclick并且没有拿起我的任何datepicker脚本（不包括假期，周末等），而另一个没有麻烦。另外，请注意两个日期选择器的颜色差异...一个是拿起我的链接到jQuery ui CDN样式表（添加用于测试）而另一个不是。根本不知道该怎么做。

再次，非常感谢。

Working Datepicker

Datepicker Not Working

另一个更新：

我已经实现了这一点，只有这样才能通过在模板页面上的<form>和</form>标签之间添加表单中的所有datepicker脚本。担心这种方法虽然......看起来像是一场等待发生的灾难。想知道为什么我不能像往常一样调用datepicker，并且真的希望看到它与典型设置一起工作。我担心这种做法不正确并导致冲突。

修订模态页面：

<div id="ModalTitle">%%GLOBAL_CustomizeProductTitle%%</div>
<form id="CartEditProductFieldsForm"method="post" action="cart.php" onsubmit="return Cart.saveItemCustomizations();"  enctype="multipart/form-data">
<input type="hidden" name="action" value="EditProductFieldsInCart" />
<input type="hidden" name="item_id" value="%%GLOBAL_ItemId%%" />

<div id="ModalContent" class="ml-m" style="overflow: auto;">
    <dl class="HorizontalFormContainer ProductFields"></dl>
    <div class="productAttributeList ml-m">
        %%SNIPPET_ProductFieldsList%%           
        %%GLOBAL_ProductAttributeList%%
    </div>
    <div id="CartdatepickerDiv" class="ml25">                 
        <label for="datepicker2" class="name">Desired Delivery Date:</label><br />           
        <input id="datepicker2" class="Field validation productAttributeFluidWidth" onclick="$('#datepicker2').datepicker();$('#datepicker2').datepicker('show');" placeholder="ex. 01/01/2013" readonly />   
        <div class="cf"></div>                     
        <hr />
    </div>
</div>    <div id="ModalButtonRow">
    <div class="FloatLeft"><a href="#" onclick="$.modal.close();">%%LNG_Cancel%%</a></div>
    <input class="Submit" class="Submit" type="submit" value="%%LNG_Save%%" />
</div>    
Datepicker script here
</form>

0 个答案:

没有答案
相关问题
最新问题