CODEWITHSUNDEEP
jqueryhtmlbigcommerce
Brently
Brently

Reputation: 25

eCommerce/Fee Box tabs out of place

I can't figure out why this is not working on my site. This is supposed to create a box with text and fees information. The fees are grabbed from custom product fields. For some reason, the tabs are missing and the tab content is layed out at the bottom of the page. Weird.

Here is a link to my store: http://inflatableboats.net/ab-alumina-alx-15-alx-with-yamaha-f50lb-four-stroke/

Here is the css for the box:

#shippingInfo {margin: 20px auto 20px;padding: 10px;border: 1px dashed #ccc;background: #eee;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/">
%%Panel.HTMLHead%%
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <div id="Container">
    %%Panel.Header%%

    <div id="Wrapper">
        %%Panel.WrapperBanner%%
        <div class="Left" id="LayoutColumn1">
            %%Panel.SideCategoryList%%
            %%Panel.SideNewProducts%%
            %%Panel.SideNewsletterBox%%
            %%Panel.SideLiveChatServices%%
        </div>
        <div class="Content" id="LayoutColumn2">
            %%Panel.ProductBreadcrumb%%
            %%Panel.ProductDetails%%
            %%Panel.ProductTabs%%
            %%Panel.ProductDescription%%
            %%Panel.ProductVideos%%
            %%Panel.ProductWarranty%%
            %%Panel.ProductOtherDetails%%
            %%Panel.SimilarProductsByTag%%
            %%Panel.ProductByCategory%%
            %%Panel.ProductVendorsOtherProducts%%
            %%Panel.SimilarProductsByCustomerViews%%
        </div>
        <div class="Right" id="LayoutColumn3">
            %%Panel.SideCurrencySelector%%
            %%Panel.SideProductAddToWishList%%
            %%Panel.SideProductRelated%%
            %%Panel.SideProductRecentlyViewed%%
        </div>
        <br class="Clear" />
    </div>
    %%Panel.Footer%%
</div>
<!-- productotherdetailsinformation -->

    <script>
        $(document).ready(function(){
            var otherDetails = $('#ProductTabs #ProductOtherDetails_Tab');
            if ( otherDetails .length){
                $('#ProductOtherDetails .ProductDetailsGrid .DetailRow').each(function() {
                  var shipsTruck = $('#ProductOtherDetails .ProductDetailsGrid .Value').html();
                  if ("shipsTruck:contains('truck')") {
                      var checkEstimate = 'true';
                    $('.productAddToCartRight').append('<p style="margin-left:140px;"><strong><em>This product ships by truck only. <a href="#shippingInfo">See shipping notes</a> below for more information.</em></strong></p>');
                    $('.ProductDescription, .ProductOtherDetails').append('<div id="shippingInfo">' <p><strong>NOTE:</strong>THIS PRODUCT CANNOT SHIP STANDARD GROUND. It must be shipped via a boat hauler, hand delivered by company personnel, or through a professional freight company and requires special handling and prepping to ship. Please e-mail <a href="mailto:[email protected]">[email protected]</a> for a valid shipping and handling cost estimate.</p>
    <p><strong>PLEASE NOTE:</strong></p>
    <p>The price displayed above is the base selling price for the boat and Motor ONLY.</p>
    <p class="pdifee"><strong>PDI (Dealer Prep and Testing) includes the following: Validates all warranties, fill fluids in outboard, complete system check, install AGM Marine battery, electrical check, test run, sea trial:</strong></p>
    <p class="dffee"><strong>Destination Fee (Freight in to Inflatable Boat Specialists Warehouse): </strong></p></div>');
                    return false;
                  }
                });
 for(var index = 0; index < $('#ProductOtherDetails .ProductDetailsGrid .DetailRow').length; index++){
                    var thisOther = $('#ProductOtherDetails .ProductDetailsGrid .DetailRow .Label').eq(index).html();                    
                    if (thisOther == 'PDI') {
                        var estimateCost = $('#ProductOtherDetails .ProductDetailsGrid .DetailRow .Value').eq(index).html();
                        if (estimateCost) {
                            $('.pdifee').append(estimateCost);
                        } else {
                            $('.pdifee').append('call');
                        }
                    }
                }
for(var index = 0; index < $('#ProductOtherDetails .ProductDetailsGrid .DetailRow').length; index++){
                    var thisOther = $('#ProductOtherDetails .ProductDetailsGrid .DetailRow .Label').eq(index).html();                    
                    if (thisOther == 'DF') {
                        var estimateCost = $('#ProductOtherDetails .ProductDetailsGrid .DetailRow .Value').eq(index).html();
                        if (estimateCost) {
                            $('.dffee').append(estimateCost);
                        } else {
                            $('.dffee').append('call');
                        }
                        return false;
                    }
                }

            }


        });
</script>

</body>
</html>

Upvotes: 0

Views: 155

Answers (1)

creativetim
creativetim

Reputation: 1138

The first glaring thing I see is that you're attempting to include a folder via your script tag instead of an actual JS file.

<script type="text/javascript" src="http://inflatableboats.net/js/"></script>

In addition, given the code you pasted you will get an error when the following line gets processed:

if ( otherDetails .length){

It should read:

if ( otherDetails.length){

Hopefully this helps!

Upvotes: 2

Related Questions