Found a glitch in the code

  • Profile Image
    ekkgear
    Asked on May 31, 2012 at 12:49 PM

    Hi,

    I have been having issues with the display of my ecommerce ordering form. The pictures and option boxes were covering each other up. Everything looked jumbled together. I noticed that the very first item in my form was setup right, but each item following was not laying out correctly. So I compared the first item's code to the other items' code and found some inconsistencies. Once I made all the code consistent across all item, the layout was correct. Here are the two inconsistencies I found:

    - you'll notice that the first piece of code in red doesn't appear in the second item below.

    - the class of the first item is set as "form-product-image", but all following items are set as "form-product-image-with-options"

    Once I fixed these two things, everything worked.

     

     

    <div id="cid_13" class="form-input-wide"><span class="form-product-item"><img src="//farm8.staticflickr.com/7024/6571523867_8ee0ef65c7_s.jpg" class="form-product-image" height="50" width="50" align="absmiddle" />

                <input class="form-checkbox" type="checkbox" id="input_13_1059" name="q13_products[][id]" value="1059" />

                <label for="input_13_1059">

                  15" EKK Pattern Laptop/Gun Case<span class="form-product-details"><b>

                      $<span id="">35.00</span>

                      USD

                    </b></span>

                </label>

                <br />

                <br />

    <span class="form-sub-label-container"><select class="form-dropdown" name="q13_products[special_1059][item_0]" id="input_13_quantity_1059_0">

                    <option value="1"> 1 </option>

                    <option value="2"> 2 </option>

                  </select>

                  <label class="form-sub-label" for="input_13_quantity_1059_0"> Quantity </label></span></span>

              <br />

    <span class="form-product-item"><img src="//farm8.staticflickr.com/7030/6571523875_614d397885_s.jpg" class="form-product-image-with-options" height="50" width="50" align="absmiddle" />

                <input class="form-checkbox" type="checkbox" id="input_13_1060" name="q13_products[][id]" value="1060" />

                <label for="input_13_1060">

                  15" Stencil Laptop/Gun Case<span class="form-product-details"><b>

                      $<span id="">35.00</span>

                      USD

                    </b></span>

                </label></span>

              <br />

     

     

    You can see your code here: http://form.jotform.com/form/10290620501

    And the revised code here: www.ekkgear.com/pages/elites

     

    Thanks,

    Jarrett

    mccraja@yahoo.com

  • Profile Image
    abajan
    Answered on May 31, 2012 at 01:49 PM

    Thanks but our developers were notified of this error a few days ago and are working to correct it. However, I think the images in your form should all be classed as .form-product-image-with-options instead of .form-product-image. My colleague Jonathan illustrated a quick and effective fix for the class name discrepency in this thread. If you would like help with getting the images and their accompanying pull down selectors better aligned, we'll be glad to help.

  • Profile Image
    abajan
    Answered on May 31, 2012 at 02:02 PM

    Oops! Sorry, that's a private thread and as such, you won't be able to view it. Anyway, here's Jonathan's fix in his own words (well, almost in his own words because I had to make an adjustment to the ID for it to work in your form)

    1. In the the payment field, first add a free item/product (as your 1st product). Then add all succeeding products as normal

    2. Since the default behaviour of the 1st item/product is not to aligned similar to 2nd and onward products -- inject a css code to hide the 1st item/product. Inject this code

    #input_13_1059 {
    display: none;
    }
    [for="input_13_1059"] {
    display: none;
    }

    *** Please note,  input_13_1059 is the #ID of the 1st item. 

    3. The dummy 1st item/product should not affect the sum/total of the payments.