www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Fairly Simple Request - jQuery/Javascript Noob Here

Hybrid View

  1. #1
    Join Date
    May 2014
    Location
    Ventura, CA
    Posts
    5

    resolved [RESOLVED] Fairly Simple Request - jQuery/Javascript Noob Here

    I am the web and tech manager at a boat dealership. Each product page of our website has several tabs. The main tab is the description. One of the important tabs has our PDI (Dealer Prep) and DF (Destination Fee) on it. These are very important fees that need to be displayed on the Description tab, also. Our previous/original developer created a box on the Description tab and using jQuery to "append" the fees/text into the box. The code is messy and instead of creating the fee box in html and using javascript to just add in the numbers, much of the boxes other text is baked into the javascript code. Like I said in the title, I understand what javascript is used for, but I don't really know how to use it outside of things like Lightbox and an Image Carousel.

    Background of my site: we use BigCommerce's platform, which uses PHP.

    What I want to do, is create my box with my text information about the fees in html outside of any javascript and just have javascript add in basically two numbers (ex PDI: $400 DF: $750)

    Here is a link to a product page on my site: Click here

    The fees are located in the "More Details" tab.

    Here is the code from my product page's layout: (I have the script turned off right now because it doesn't work, as you can see)

    Code:
    <!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 type="text/javascript" src="%%GLOBAL_AppPath%%/javascript/jquery/plugins/validate/jquery.validate.js?%%GLOBAL_JSCacheToken%%"></script>
        <script type="text/javascript" src="%%GLOBAL_AppPath%%/javascript/product.functions.js?%%GLOBAL_JSCacheToken%%"></script>
        <script type="text/javascript" src="%%GLOBAL_AppPath%%/javascript/product.js?%%GLOBAL_JSCacheToken%%"></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">            
                <div id="quote">
                <a href="/request-a-quote/" onmouseover="document.quotebutton.src='https://store-5a502.mybigcommerce.com/product_images/uploaded_images/request-a-quote-button-down-.png';" onmouseout="document.quotebutton.src='https://store-5a502.mybigcommerce.com/product_images/uploaded_images/request-a-quote-button-up-.png';"><img style="float:right;padding-top:5px;margin-bottom:5px;margin-right:-10px;" src="https://store-5a502.mybigcommerce.com/product_images/uploaded_images/request-a-quote-button-up-.png" name="quotebutton" /></a>
            </div>
                %%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>   
    <!---Here is my problem below---> 
    <!---<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:ibs@inflatableboats.net">ibs@inflatableboats.net</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>
    Thanks guys. Sorry for the huge post. I know I am rather new to this forum for such a large post. I found it very hard to search for an answer to my problem.

  2. #2
    Join Date
    May 2014
    Location
    Ventura, CA
    Posts
    5
    I realize I didn't make it clear what I need help with. I'm not asking for someone to create the html box or anything like that. I just need to know or be pointed in the right direction regarding a simple jQuery solution or other solution to get the fee data onto another place on my site. Any help would really be appreciated.

  3. #3
    Join Date
    May 2014
    Location
    Ventura, CA
    Posts
    5
    Its me again guys. LOL.

    I made my html box and thought maybe if I showed you the box, someone might be able to help get the fees in there or at least point me to something to help me. The 'p' elements that will contain the fees have ids because I thought that would be necessary in order to place the fees correctly.

    Code:
    <style>
    #feebox {
    		width:740px;
    		height:180px;
    		border:1px dashed #000;
    		font-size:12px;
    		font-family:'Trebuchet MS', san-serif;
    		color:white;
    		background: -webkit-linear-gradient(left top, #004C00, #66C266); /* For Safari 5.1 to 6.0 */
    		background: -o-linear-gradient(bottom right, #004C00, #66C266); /* For Opera 11.1 to 12.0 */
    		background: -moz-linear-gradient(bottom right, #004C00, #66C266); /* For Firefox 3.6 to 15 */
    		background: linear-gradient(to bottom right, #004C00, #66C266); /* Standard syntax (must be last) */
    		}
    #feebox p {
    		padding:0 10px 0 10px;
    		}
    </style>
    
    <div id=feebox> 
    	<p><strong>PLEASE NOTE:</strong> The price displayed above is the base selling price for the boat and Motor ONLY.  Please read the fees below.</p>
    	<p>Pre-Delivery Inspection (PDI) or Dealer Prep, is a fee to get the boat set-up, fully rigged, and tested.  This validates all warranties.  We complete a full system check on the motor, fill it with oil, fill up adequate fuel, install AGM Marine battery, complete eletrical check, full outboard test run, and lastly a sea trial to make sure everything is working on the water.</p>
    	<p id=pdi><strong>PDI FOR THIS PACKAGE: </strong></p>
    	<p>Destination Fee (DF) is a fee equal to the cost to get the boat and/or motor from the manufacturer's facility to ours. 
    	<p id=df><strong>DF FOR THIS PACKAGE: </strong></p>
    </div>

  4. #4
    Join Date
    May 2014
    Location
    Ventura, CA
    Posts
    5
    This is getting more complicated. Maybe I need to post somewhere else. Maybe I need to hire someone online to assist me.

    The fees listed in the "More Details" tab lack an id. They have a generic class of 'Value.' So, I believe I would need some kind of IF argument to say, if the 'Label' to the 'Value' is PDI, then grab that Value. If the Label is DF, then grab that Value. I also realized that I don't always want the fee box to show on every product page because not every product has these fees. So, if the fees exist, then the box exists, which I guess would be another IF argument of some kind.

  5. #5
    Join Date
    May 2014
    Location
    Ventura, CA
    Posts
    5
    Well, I'm going to go ahead and mark this as resolved, even though it isn't. 208 views and 24 hours and no help. This was my last resort. I'm just going to make the box for each product and apply the html through the small WSIWYG editor I have. It allows for posting html code. Just will take time to create one for each product vs using something more automated. I've spent too much time trying to get JS to work right. I guess people on this forum only have time to read. Maybe it is my noobiness. To the grindstone...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles