лэйблы полей формы внутри полей, а не рядом (placeholder) Есть решение

Здравствуйте.

пытаюсь стилизовать форму ввода контактной информации при добавлении заказа http://itrk.org/shop/checkout/

хочу полю "имя" дать placeholder (Фамилия Имя Отчество), а также лэйблы "Страна", "Город", "Улица, дом, квартира", чтобы отображались внутри полей, а не рядом с ними.

и эти три поля, чтобы не в одну строчку были, а друг под другом.

где копать? пока не нашёл.

13 ответов

  • 1
    Евгений Дубровин 12 апреля 2016 13:35 #

    вопрос "и эти три поля, чтобы не в одну строчку были, а друг под другом." снимается

  • 1

    Может быть поискать решение? Правда, не знаю, насколько оно подойдет

    • +2
      Евгений Дубровин Евгений Дубровин 12 апреля 2016 16:55 #

      Сергей, а Вы сами пробовали это решение? не похоже, чтобы оно работало.

      • +1

        Пошел на тестовой установке с темой Default попробовал. Placeholdrs появились

        • +1
          Евгений Дубровин Евгений Дубровин 12 апреля 2016 17:51 #

          здорово! а сами лэйблы убираются как-то? я тему из дефолтной верстал, ничего существенного не менял, код файла чекаут.шиппинг точно не трогал.

          тоже заменил на {$m.form->html(null,null,true)} в checkout.shipping и нет у меня плэйхолдеров, хоть тресни (( http://itrk.org/shop/checkout/

          • +1

            Их лучше с помощью css скрывать. Многие плагины, арботающие на этапе оформления заказа, добавляют js, который привязан к селекторам стандартной верстки полей.

            Пойду попробую checkout.shipping тоже поменять

            • +1

              Вот поменял


              вот что получил

              • +1
                Евгений Дубровин Евгений Дубровин 12 апреля 2016 18:09 #

                спасибо! странно, что у меня не так вот весь мой код:

                <br><div class="centered"><ul class="checkout-options">
                {$external_methods = []}
                {foreach $checkout_shipping_methods as $m}
                <li class="shipping-{$m.id}">
                {if empty($m.error)}
                <div class="rate">
                <span class="price nowrap">
                {if $m.rate !== null}
                {shop_currency($m.rate, $m.currency)}
                {elseif $m.external}
                {$external_methods[] = $m.id}
                [`Loading...`] <i class="icon16 loading"></i>
                {/if}
                </span>
                <em class="hint error comment" {if empty($m.comment)}style="display:none"{/if}>
                <br>{if !empty($m.comment)}{$m.comment}{/if}
                </em>
                <span class="hint" {if empty($m.est_delivery)}style="display:none"{/if}>
                <br>
                [`Estimated delivery`]:<br>
                <strong class="est_delivery">{if !empty($m.est_delivery)}{$m.est_delivery}{/if}</strong>
                </span>

                </div>
                {else}
                <div class="rate error">
                <span class="price nowrap" style="display:none"></span>
                <em class="hint error comment" style="display:none"></em>
                <span class="hint" style="display:none">
                <br>
                [`Estimated delivery`]:<br>
                <strong class="est_delivery"></strong>
                </span>
                <em class="shipping-error">{$m.error}</em>
                </div>
                {/if}
                <h3>
                <label>
                {if !empty($m.logo)}<img src="{$m.logo}" class="method-logo">{/if}
                <input type="radio" name="shipping_id" value="{$m.id}" {if $m.id == $shipping.id}checked{/if}>
                {$m.name|escape}
                </label>

                {if empty($m.error) && !empty($m.rates)}
                {if count($m.rates) > 1}
                <select class="shipping-rates" name="rate_id[{$m.id}]">
                {foreach $m.rates as $rate_id => $r}
                <option data-rate="{shop_currency($r.rate, $r.currency)}" data-est_delivery="{if !empty($r.est_delivery)}{$r.est_delivery}{/if}" {if !empty($r.comment)}data-comment="{$r.comment}"{/if} value="{$rate_id}"{if $rate_id == $shipping.rate_id} selected{/if}>{$r.name} ({shop_currency($r.rate, $r.currency)})</option>
                {/foreach}
                </select>
                {else}
                <input type="hidden" name="rate_id[{$m.id}]" value="{key($m.rates)}">
                {/if}
                {/if}
                </h3>
                {if $m.description}<p>{$m.description}</p>{/if}
                {if !empty($m.form)}<div class="wa-form wa-address" {if $m.id != $shipping.id}style="display:none"{/if}>{$m.form->html(null,null,true)}</div>{/if}
                {if !empty($m.custom_html)}<div class="wa-form" {if $m.id != $shipping.id}style="display:none"{/if}>{$m.custom_html}</div>{/if}
                </li>
                {foreachelse}
                <li>
                <em class="error">[`Oops! We are sorry, but <strong>we can not ship this order to your selected destination</strong>. Checkout can not be completed.`]</em>
                </li>
                {/foreach}
                </ul>
                <script type="text/javascript">
                $(function () {

                {if $external_methods}
                $.get("{$wa->getUrl('/frontend/shipping')}", { shipping_id: [{implode(',', $external_methods)}]}, function (response) {
                for (var shipping_id in response.data) {
                responseCallback(shipping_id, response.data[shipping_id]);
                }
                }, "json");
                {/if}

                function responseCallback(shipping_id, data) {
                var name = 'rate_id[' + shipping_id + ']';
                if (typeof(data) == 'string') {
                $(".shipping-" + shipping_id + ' input[name="' + name + '"]').remove();
                $(".shipping-" + shipping_id + ' select[name="' + name + '"]').remove();
                var el = $(".shipping-" + shipping_id).find('.rate');
                if (el.hasClass('error')) {
                el.find('em').html(data);
                } else {
                el.find('.price, .hint').hide();
                el.addClass('error').append($('<em class="shipping-error"></em>').html(data));
                }
                } else if (data.length > 1) {
                $(".shipping-" + shipping_id + ' input[name="' + name + '"]').remove();
                var select = $(".shipping-" + shipping_id + ' select[name="' + name + '"]');
                var html = '<select class="shipping-rates" name="' + name + '">';
                for (var i = 0; i < data.length; i++) {
                var r = data[i];
                html += '<option data-rate="' + r.rate + '" data-comment="' + (r.comment || '') + '" data-est_delivery="' + (r.est_delivery || '') + '" value="' + r.id + '">' + r.name + ' (' + r.rate + ')</option>';
                }
                html += '</select>';
                if (select.length) {
                var selected = select.val();
                select.remove();
                } else {
                var selected = false;
                }
                select = $(html);
                $(".shipping-" + shipping_id + " h3").append(select);
                if (selected) {
                select.val(selected);
                }
                select.trigger('change', 1);
                $(".shipping-" + shipping_id).find('.rate').removeClass('error').find('.price').show();
                $(".shipping-" + shipping_id).find('.rate em.shipping-error').remove();
                } else {
                $(".shipping-" + shipping_id + ' select[name="' + name + '"]').remove();
                var input = $(".shipping-" + shipping_id + ' input[name="' + name + '"]');
                if (input.length) {
                input.val(data[0].id);
                } else {
                $(".shipping-" + shipping_id + " h3").append('<input type="hidden" name="' + name + '" value="' + data[0].id + '">');
                }
                $(".shipping-" + shipping_id + " .price").html(data[0].rate);
                $(".shipping-" + shipping_id + " .est_delivery").html(data[0].est_delivery);
                $(".shipping-" + shipping_id).find('.rate').removeClass('error').find('.price').show();
                if (data[0].est_delivery) {
                $(".shipping-" + shipping_id + " .est_delivery").parent().show();
                } else {
                $(".shipping-" + shipping_id + " .est_delivery").parent().hide();
                }
                if (data[0].comment) {
                $(".shipping-" + shipping_id + " .comment").html('<br>' + data[0].comment).show();
                } else {
                $(".shipping-" + shipping_id + " .comment").hide();
                }
                $(".shipping-" + shipping_id).find('.rate em.shipping-error').remove();
                }
                }

                $(".checkout-options").on('change', "select.shipping-rates", function (e, not_check) {
                var opt = $(this).children('option:selected');
                var li = $(this).closest('li');
                li.find('.price').html(opt.data('rate'));
                if (!not_check) {
                li.find('input:radio').attr('checked', 'checked');
                }
                li.find('.est_delivery').html(opt.data('est_delivery'));
                if (opt.data('est_delivery')) {
                li.find('.est_delivery').parent().show();
                } else {
                li.find('.est_delivery').parent().hide();
                }
                if (opt.data('comment')) {
                li.find('.comment').html('<br>' + opt.data('comment')).show();
                } else {
                li.find('.comment').empty().hide();
                }
                });
                $(".checkout-options input:radio").change(function () {
                if ($(this).is(':checked')) {
                $(".checkout-options .wa-address").hide();
                $(this).closest('li').find('.wa-form').show();
                if ($(this).data('changed')) {
                $(this).closest('li').find('.wa-form').find('input,select').data('ignore', 1).change().removeData('ignore');
                $(this).removeData('changed');
                }
                }
                });
                $(".wa-address").find('input,select').change(function () {
                if ($(this).data('ignore')) {
                return true;
                }
                var shipping_id = $("input[name=shipping_id]:checked").val();
                var loaded_flag = false;
                setTimeout(function () {
                if (!loaded_flag && !$(".shipping-" + shipping_id + " .price .loading").length) {
                $(".shipping-" + shipping_id + " .price").append(' <i class="icon16 loading"></i>');
                }
                }, 300);
                var v = $(this).val();
                var name = $(this).attr('name').replace(/customer_\d+/, '');
                $(".checkout-options input:radio").each(function () {
                if ($(this).val() != shipping_id) {
                var el = $(this).closest('li').find('[name="customer_' + $(this).val() + name + '"]');
                if (el.attr('type') != 'hidden') {
                el.val(v);
                $(this).data('changed', 1);
                }
                }
                });

                $.post("{$wa->getUrl('/frontend/shipping')}", $("form").serialize(), function (response) {
                loaded_flag = true;
                responseCallback(shipping_id, response.data);
                }, "json");
                });
                });

                </script>
                </div>


                http://itrk.org/shop/checkout/

                ни в какую :(

          • +1

            Ну так если головой :-/ немного подумать, то адрес у вас спрашивается на этапе контактной информации. Там шаблон называется checkout.contactinfo например. И изменения в checkout.shipping на него никак не влияют

            • +1
              Евгений Дубровин Евгений Дубровин 13 апреля 2016 07:53 #

              Сергей, я изменил в чекаут.контактинфо:

              {if !$wa->user()->isAuth()}{$wa->authAdapters()}{/if}
              <div class="wa-form">
              {$checkout_contact_form->html(null,null,true)}
              {if !$wa->user()->isAuth()}
              <div class="wa-field">
              <div class="wa-value">

              плэйсхолдеры появились, но перестали отображаться уведомления об ошибках, если обязательные поля не заполнены. просто перезагружается страница, а ошибок не видно. убираю null,null,true и ошибки начинают снова отображаться, но плэйсхолдеров уже, соответственно нет. можно это как-то поправить, чтобы и плэйсхолдеры были, и ошибки отображались?

              • +2
                Евгений Дубровин Евгений Дубровин 13 апреля 2016 07:57 #

                разобрался! на самом деле, если вставить там null,true,true вместо null,null,true и плэйсхолдеры на месте, и ошибки отображаются.

  • 1
    Евгений Дубровин 12 апреля 2016 18:16 #

    вот спасибо! переутомился, похоже. сейчас нашёл где нужно было исправить. благодарствую за наводку!

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите