search

mivaecommerce / readytheme-shadows

Shadows is the development framework and methodology used for creating our ReadyThemes as well as custom websites.
https://shadows.mivareadythemes.com/
MIT License
4 stars 3 forks source link

OSEL: Shipping method radio buttons become misaligned on long shipping method names. #88

Closed influxweb closed 3 years ago

influxweb commented 3 years ago

Current Behavior

During checkout, if you have a shipping method name that is long enough to wrap to a second line the radio button, and the selection dot will, become misaligned when the option is selected.

Correcting the Issue

To make the update, without applying the latest release, you will need to update the code in User Interface -> Templates -> Pages -> OSEL:

<mvt:item name="html_profile" />
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="&mvt:global:basehref;">
    <mvt:if expr="NOT ISNULL l.settings:page:title">
        <title>&mvt:page:title;</title>
    <mvt:else>
        <title>&mvt:store:name;: &mvt:page:name;</title>
    </mvt:if>
    <mvt:item name="head" param="css_list" />
    <mvt:item name="head" param="head_tag" />
</head>
<body id="js-&mvte:page:code;" class="o-site-wrapper t-page-&mvte:global:pageClass;">
    <mvt:item name="hdft" param="global_header" />

    <section class="o-layout">
        <div class="o-layout__item">
            <mvt:item name="hdft" param="header" />
            <mvt:item name="customfields" param="Write_Basket('basket', g.basket)" />
        </div>
    </section>

    <section class="o-layout o-layout--wide">
        <div class="o-layout__item u-width-12 u-width-8--l u-width-5--w u-offset-2--w">
            <mvt:item name="readytheme" param="contentsection( 'checkout_steps' )" />
            <mvt:item name="readytheme" param="contentsection( 'messages' )" />
            <mvt:item name="readytheme" param="contentsection( 'paypalcp_configuration' )" />

            <form method="post" action="&mvte:urls:OPAY:secure;">
                <fieldset>
                    <legend>&mvt:page:name;</legend>
                    <mvt:item name="tax" />
                    <input type="hidden" name="Action" value="SHIP,PSHP,CTAX" />
                    <p class="c-heading-echo u-text-bold u-text-uppercase">Choose A Shipping Method</p>
                    <div class="c-form-list u-text-constrain">
                        <mvt:if expr="ISNULL l.settings:shippingmethods">
                            <div class="c-form-list__item c-form-list__item--full">
                                <p class="x-messages x-messages--info">No valid shipping methods are available for your order. You will be contacted regarding shipping when your order is processed.</p>
                            </div>
                        </mvt:if>
                        <mvt:if expr="ISNULL l.settings:shippingmethods">
                            <div class="c-form-list__item c-form-list__item--full u-font-small t-shipping-method">
                                <mvt:if expr="ISNULL l.settings:fallbackshippingmethod">
                                    <label class="c-form-checkbox c-form-checkbox--radio">
                                        <input class="c-form-checkbox__input" type="radio" name="ShippingMethod" value="" checked>
                                        <span class="c-form-checkbox__caption">Unable to Calculate Shipping Costs</span>
                                    </label>
                                <mvt:else>
                                    <label class="c-form-checkbox c-form-checkbox--radio">
                                        <input class="c-form-checkbox__input" type="radio" name="ShippingMethod" value="" checked>
                                        <span class="c-form-checkbox__caption o-layout o-list-inline o-layout--align-baseline u-flex">
                                            <span class="o-list-inline__item t-shipping-method-name">&mvt:fallbackshippingmethod:name;</span>
                                            <span class="o-list-inline__item o-layout--grow">
                                                <span class="c-keyline c-keyline--small u-block"></span>
                                            </span>
                                            <span class="o-list-inline__item">&mvt:fallbackshippingmethod:formatted_price;</span>
                                        </span>
                                    </label>
                                </mvt:if>
                            </div>
                        <mvt:else>
                            <mvt:foreach array="shippingmethods" iterator="method">
                                <div class="c-form-list__item c-form-list__item--full u-font-small t-shipping-method">
                                    <mvt:if expr="pos1 EQ 1">
                                        <label class="c-form-checkbox c-form-checkbox--radio">
                                            <input class="c-form-checkbox__input" type="radio" name="ShippingMethod" value="&mvte:method:module;:&mvte:method:code" checked>
                                            <span class="c-form-checkbox__caption o-layout o-list-inline o-layout--align-baseline u-flex">
                                                <span class="o-list-inline__item t-shipping-method-name">&mvt:method:name;</span>
                                                <mvt:if expr="NOT ISNULL l.settings:method:price">
                                                    <span class="o-list-inline__item o-layout--grow">
                                                        <span class="c-keyline c-keyline--small u-block"></span>
                                                    </span>
                                                    <span class="o-list-inline__item">&mvt:method:formatted_price;</span>
                                                </mvt:if>
                                            </span>
                                        </label>
                                    <mvt:else>
                                        <label class="c-form-checkbox c-form-checkbox--radio">
                                            <input class="c-form-checkbox__input" type="radio" name="ShippingMethod" value="&mvte:method:module;:&mvte:method:code">
                                            <span class="c-form-checkbox__caption o-layout o-list-inline o-layout--align-baseline u-flex">
                                                <span class="o-list-inline__item t-shipping-method-name">&mvt:method:name;</span>
                                                <mvt:if expr="NOT ISNULL l.settings:method:price">
                                                    <span class="o-list-inline__item o-layout--grow">
                                                        <span class="c-keyline c-keyline--small u-block"></span>
                                                    </span>
                                                    <span class="o-list-inline__item">&mvt:method:formatted_price;</span>
                                                </mvt:if>
                                            </span>
                                        </label>
                                    </mvt:if>
                                </div>
                            </mvt:foreach>
                        </mvt:if>
                    </div>
                    <br>
                    <div class="c-form-list">
                        <div class="c-form-list__item c-form-list__item--full">
                            <mvt:item name="customfields" param="Read_Basket('order_instructions', g.order_instructions)" />
                            <label class="c-form-label c-heading-echo u-text-bold u-text-uppercase" for="order_instructions" title="Delivery Notes">Delivery Notes <span class="c-heading--subheading">(Optional)</span></label>
                            <textarea id="order_instructions" class="c-form-input c-form-input--long" name="order_instructions">&mvte:global:order_instructions;</textarea>
                        </div>
                    </div>
                    <hr class="c-keyline">
                    <p class="c-heading-echo u-text-bold u-text-uppercase">Select Your Payment Method</p>
                    <div class="c-form-list">
                        <mvt:foreach array="paymentmethods" iterator="method">
                            <mvt:if expr="l.settings:method:module NE 'customercredit'">
                                <div class="c-form-list__item c-form-list__item--full u-font-small">
                                    <mvt:if expr="pos1 EQ 1">
                                        <label class="c-form-checkbox c-form-checkbox--radio">
                                            <mvt:if expr="l.settings:method:paymentcard:id">
                                                <input class="c-form-checkbox__input" type="radio" name="PaymentMethod" value="paymentcard:&mvte:method:paymentcard:id;" checked>
                                            <mvt:elseif expr="l.settings:method:paymentcardtype:id">
                                                <input class="c-form-checkbox__input" type="radio" name="PaymentMethod" value="paymentcardtype:&mvte:method:paymentcardtype:id;" checked>
                                            <mvt:else>
                                                <input class="c-form-checkbox__input" type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;" checked>
                                            </mvt:if>
                                            <span class="c-form-checkbox__caption">&mvt:method:name;</span>
                                        </label>
                                    <mvt:else>
                                        <label class="c-form-checkbox c-form-checkbox--radio">
                                            <mvt:if expr="l.settings:method:paymentcard:id">
                                                <input class="c-form-checkbox__input" type="radio" name="PaymentMethod" value="paymentcard:&mvte:method:paymentcard:id;">
                                            <mvt:elseif expr="l.settings:method:paymentcardtype:id">
                                                <input class="c-form-checkbox__input" type="radio" name="PaymentMethod" value="paymentcardtype:&mvte:method:paymentcardtype:id;">
                                            <mvt:else>
                                                <input class="c-form-checkbox__input" type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;">
                                            </mvt:if>
                                            <span class="c-form-checkbox__caption">&mvt:method:name;</span>
                                        </label>
                                    </mvt:if>
                                </div>
                            </mvt:if>
                        </mvt:foreach>
                        <mvt:foreach array="paymentmethods" iterator="method">
                            <mvt:if expr="l.settings:method:module EQ 'customercredit'">
                                <div class="c-form-list__item c-form-list__item--full u-font-small">
                                    <span class="o-layout o-layout--align-baseline">
                                        <strong class="o-layout__item o-layout--no-grow">Or</strong>
                                        <span class="o-layout__item">
                                            <span class="c-keyline c-keyline--small u-block"></span>
                                        </span>
                                    </span>
                                </div>
                                <div class="c-form-list__item c-form-list__item--full u-font-small">
                                    <label class="c-form-checkbox c-form-checkbox--radio">
                                        <mvt:if expr="l.settings:method:paymentcard:id">
                                            <input class="c-form-checkbox__input" type="radio" name="PaymentMethod" value="paymentcard:&mvte:method:paymentcard:id;">
                                        <mvt:elseif expr="l.settings:method:paymentcardtype:id">
                                            <input class="c-form-checkbox__input" type="radio" name="PaymentMethod" value="paymentcardtype:&mvte:method:paymentcardtype:id;">
                                        <mvt:else>
                                            <input class="c-form-checkbox__input" type="radio" name="PaymentMethod" value="&mvte:method:module;:&mvte:method:code;">
                                        </mvt:if>
                                        <span class="c-form-checkbox__caption">&mvt:method:name;</span>
                                    </label>
                                </div>
                                <mvt:foreachstop />
                            </mvt:if>
                        </mvt:foreach>
                    </div>
                    <div class="c-form-list">
                        <div class="c-form-list__item c-form-list__item--full u-text-right">
                            <input class="c-button c-button--huge u-bg-gray-50 u-font-small u-text-medium u-text-uppercase" type="submit" value="Continue to Payment">
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <aside class="o-layout__item u-width-12 u-width-4--l u-width-5--w">
            <mvt:item name="basket" />
        </aside>
    </section>

    <section class="o-layout">
        <div class="o-layout__item">
            <mvt:item name="hdft" param="footer" />
        </div>
    </section>

    <mvt:item name="hdft" param="global_footer" />
</body>
</html>

Additionally, you will need to add the following to User Interface -> CSS/JavaScript Resources -> CSS Resources -> theme:

.t-shipping-method .c-form-checkbox__caption::before {
    position: absolute;
}

.t-shipping-method-name {
    max-width: 45ch;
}

.t-shipping-method .c-keyline {
    margin-bottom: 0;
}