Checkout Legend Title Disappears

I'm having a bit of weird bug on the checkout page. When a section in the checkout gets completed, let's take the email field for example, the title text ("Your Email" in this case) for the field set disappears. The actual text is removed, not hidden, and the step number remains. It's completely fine until the fields are filled in. I checked removing the CSS I use targeting that (mostly size and font) and the same issue continued and the javascript I used on the page doesn't target that but I've added it below just in case.
I plan to check by restoring to the default template and seeing if the behavior persists. Any ideas what's causing this? Thanks
Tagged:
Comments
  • jitpaljitpal Member
    Obviously fine with the default template, here's the javascript I'm using on the page:
    $(document).ready(function(){
    $("input.fc-cart__item__quantity__input").prop("disabled", true);
    });


    Here's the CSS:

    #fc .fc-sidebar {
    background: #FFFFFF !important;
    /*border: 2px solid #333;
    border-radius: 3px!importatnt;*/
    }
    #fc .fc-sidebar--cart {
    border: none !important;
    }
    #fc .fc-cart__item {
    background: #FFFFFF !important;
    border-top: none !important;
    }

    [data-item-code="setup_field"] .fc-cart__item__quantity, [data-item-code="setup_field"] .fc-cart__item__options, [data-item-code="pms_field"] .fc-cart__item__quantity, [data-item-code="pms_field"] .fc-cart__item__options, p.fc-order-quantity, [data-item-code="ship"] .fc-cart__item__quantity, [data-item-code="ship"] .fc-cart__item__options {
    display:none;
    }
    ul.fc-cart__item__options {
    margin-left: 0px!important;
    }
    li.fc-cart__item__option {
    margin-bottom: 2px!important;
    }
    .fc-cart__item__quantity {
    padding-top: 6px!important;
    }
    .fc-cart__item__name, #fc legend, .fc-cart__title__header, .fc-transaction__header, .fc-subtotal__label {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    }
    .fc-cart__title__header, .fc-transaction__header {
    font-size: 1.0rem!important;
    font-weight: 900!important;
    }
    .fc-cancel-continue-shopping {
    padding-top: 10px!important
    }
    #fc .fc-cart__item.fc-cart__item--child-product {
    padding-left: 20px!important;
    }
    #fc .fc-cart__item__price small {
    display: block !important;
    }
    .fc-cart__item__total p, .fc-subtotal__label, .fc-subtotal__value {
    color: #f15d22 !important;
    }
    #fc .fc-input-group-container--active .fc-input-group-container__title--forced {
    background-color: #e1e1e1!important;
    transition: background-color 0.2s linear 0.2s;
    }
    #fc .fc-sidebar--cart .fc-transaction {
    border-bottom: none!important;
    }
  • jitpaljitpal Member
    Lastly feel free to the see the behavior yourself by getting to the checkout page on the site
  • fc_adamfc_adam FoxyCart Team
    @jitpal,

    That's definitely an interesting issue! Thanks for providing the detailed information above. The issue you're seeing there relates to the inclusion of the loader.js file within your checkout template. Specifically, it's causing the language object to be replaced with only the strings that we expect to see on the sidecart, and so all checkout specific strings are being lost. As loader.js isn't needed on any of the FoxyCart hosted templates, you can safely remove it's inclusion and just include it on your own website, and you should see things begin working as expected.

    As an aside - great job with your integration, it's looking great!
  • jitpaljitpal Member
    Awesome! That did the trick, thank you so much @fc_adam!
Sign In or Register to comment.