Перейти к содержимому


Делаем Кнопку "назад"


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 7

#1 miniplaneta

miniplaneta

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 140 сообщений

Отправлено 28 Февраль 2014 - 10:41

Добрый день.

Меняю штатную ссылку "Назад" на штатную Кнопку class="button" здесь:

    <div class="buttons">
  <div class="left">
    <p class="back-link">
  {% IF ORDER_STAGE_NUM=1 %}
    <a href="{CART_URL}" title="Вернуться назад в вашу корзину покупок">
  {% ELSEIF ORDER_STAGE_NUM=2 %}
    <a href="{ORDER_STAGE_CONTACTS_URL}" title="Вернуться назад на страницу контактных данных">
  {% ELSEIF ORDER_STAGE_NUM=3 %}
    <a href="{ORDER_STAGE_DELIVERY_URL}" title="Вернуться назад на страницу выбора варианта доставки">
  {% ELSEIF ORDER_STAGE_NUM=4 %}
    <a href="{ORDER_STAGE_PAYMENT_URL}" title="Вернуться назад на страницу выбора варианта оплаты заказа">
  {% ENDIF %}
<!-- <small>« </small>Назад</a> -->
  <input class="button" type="submit" name="toprev" value="<<< Назад" />
    </p>
  </div>

хочу чтобы на всех 4-х шагах была такая кнопка..., для этого вместо name="toprev" что-то должно быть другое...
помогите сделать кнопку.

Прикрепленные изображения

  • 28_02_1.png


#2 miniplaneta

miniplaneta

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 140 сообщений

Отправлено 28 Февраль 2014 - 11:48

В продолжение темы делаю кнопку "Отказаться от заказа" с очисткой корзины на последнем шаге:

<div class="buttons">
  <div class="left">
<p class="back-link">
  {% IF ORDER_STAGE_NUM=1 %}
<a href="{CART_URL}" title="Вернуться назад в вашу корзину покупок">
  {% ELSEIF ORDER_STAGE_NUM=2 %}
<a href="{ORDER_STAGE_CONTACTS_URL}" title="Вернуться назад на страницу контактных данных">
  {% ELSEIF ORDER_STAGE_NUM=3 %}
<a href="{ORDER_STAGE_DELIVERY_URL}" title="Вернуться назад на страницу выбора варианта доставки">
  {% ELSEIF ORDER_STAGE_NUM=4 %}
<a href="{ORDER_STAGE_PAYMENT_URL}" title="Вернуться назад на страницу выбора варианта оплаты заказа">
  {% ENDIF %}
  <small>« </small>Назад</a>
<!--   <input class="button" type="submit" name="toprev" value="<<< Назад" />  вставляю кнопку, но она не работает -->
</p>
  </div>
<!-- Штатный блок -->
<div class="right">
<button type="submit" class="button" title="Перейти к следующему шагу"  style="float: left">
{% IF ORDER_STAGE_NUM=4%}
<!--   Оформить заказ --> <!-- в след строчке меняю название на кнопке -->
  Отправить  заказ
{% ELSE %}
  Перейти к следующему шагу
{% ENDIF %}</button>
</div>
<!-- Добавляю ниже Кнопку отказаться от заказа с очищением Корзины на последнем шаге -->
{% IF ORDER_STAGE_NUM=4%}
<div class="left">
&nbsp;&nbsp;<a class="button" type="submit" href="{CART_TRUNCATE_URL}" onclick="return confirm('Вы действительно хотите отказаться от заказа и удалить все товары из корзины?')" style="text-align: left;">Отказаться от заказа</a>
{% ENDIF %}</button>   <!-- Конец вставки кнопки Отказа -->

</div>
  </div>
  </div>
</form>

Нужна помощь по предидущему посту, но уже с учетом сделанного в этом посте.

Прикрепленные изображения

  • 28_02_2.png


#3 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 28 Февраль 2014 - 21:57

Просмотр сообщенияminiplaneta (28 Февраль 2014 - 10:41) писал:

Добрый день.

Меняю штатную ссылку "Назад" на штатную Кнопку class="button" здесь:

<div class="buttons">
  <div class="left">
<p class="back-link">
  {% IF ORDER_STAGE_NUM=1 %}
<a href="{CART_URL}" title="Вернуться назад в вашу корзину покупок">
  {% ELSEIF ORDER_STAGE_NUM=2 %}
<a href="{ORDER_STAGE_CONTACTS_URL}" title="Вернуться назад на страницу контактных данных">
  {% ELSEIF ORDER_STAGE_NUM=3 %}
<a href="{ORDER_STAGE_DELIVERY_URL}" title="Вернуться назад на страницу выбора варианта доставки">
  {% ELSEIF ORDER_STAGE_NUM=4 %}
<a href="{ORDER_STAGE_PAYMENT_URL}" title="Вернуться назад на страницу выбора варианта оплаты заказа">
  {% ENDIF %}
<!-- <small>« </small>Назад</a> -->
  <input class="button" type="submit" name="toprev" value="<<< Назад" />
</p>
  </div>

хочу чтобы на всех 4-х шагах была такая кнопка..., для этого вместо name="toprev" что-то должно быть другое...
помогите сделать кнопку.
Здравствуйте. В данном случае кнопка "Назад" - это ссылка (тег <a>). Чтобы ее стилизовать, следует добавить ей какой-либо класс.
Здесь для каждого шага оформления заказа прописывается свой тег <a> с различными значениями атрибутов. Чтобы ко всем сразу применить один стиль, предлагаю сперва немного изменить структуру кода.
Замените
		 {% IF ORDER_STAGE_NUM=1 %}
		 <a href="{CART_URL}" title="Вернуться назад в вашу корзину покупок">
		 {% ELSEIF ORDER_STAGE_NUM=2 %}
		 <a href="{ORDER_STAGE_CONTACTS_URL}" title="Вернуться назад на страницу контактных данных">
		 {% ELSEIF ORDER_STAGE_NUM=3 %}
		 <a href="{ORDER_STAGE_DELIVERY_URL}" title="Вернуться назад на страницу выбора варианта доставки">
		 {% ELSEIF ORDER_STAGE_NUM=4 %}
		 <a href="{ORDER_STAGE_PAYMENT_URL}" title="Вернуться назад на страницу выбора варианта оплаты заказа">
		 {% ENDIF %}
на такой код
	 <a
		 {% IF ORDER_STAGE_NUM=1 %}
		 href="{CART_URL}" title="Вернуться назад в вашу корзину покупок">
		 {% ELSEIF ORDER_STAGE_NUM=2 %}
		 href="{ORDER_STAGE_CONTACTS_URL}" title="Вернуться назад на страницу контактных данных">
		 {% ELSEIF ORDER_STAGE_NUM=3 %}
		 href="{ORDER_STAGE_DELIVERY_URL}" title="Вернуться назад на страницу выбора варианта доставки">
		 {% ELSEIF ORDER_STAGE_NUM=4 %}
		 href="{ORDER_STAGE_PAYMENT_URL}" title="Вернуться назад на страницу выбора варианта оплаты заказа">
		 {% ENDIF %}
теперь добавление класса к этому тегу стилизует кнопку на всех шагах. Допустим, это будет класс "back"
	 <a class="back"
		 {% IF ORDER_STAGE_NUM=1 %}
		 href="{CART_URL}" title="Вернуться назад в вашу корзину покупок">
		 {% ELSEIF ORDER_STAGE_NUM=2 %}
		 href="{ORDER_STAGE_CONTACTS_URL}" title="Вернуться назад на страницу контактных данных">
		 {% ELSEIF ORDER_STAGE_NUM=3 %}
		 href="{ORDER_STAGE_DELIVERY_URL}" title="Вернуться назад на страницу выбора варианта доставки">
		 {% ELSEIF ORDER_STAGE_NUM=4 %}
		 href="{ORDER_STAGE_PAYMENT_URL}" title="Вернуться назад на страницу выбора варианта оплаты заказа">
		 {% ENDIF %}
Теперь можно добавить в конец main.css стили для этого класса
.back {
font-size: 12px;
text-transform: uppercase;
color: #F8F8F8;
background-color: #333333;
padding: 10px;
text-decoration: none;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.back: hover {
background-color: #ff0551;
}

Соответственно строку
<input class="button" type="submit" name="toprev" value="<<< Назад" />
нужно удалить, а строку
<small>« </small>Назад</a>
оставить.

#4 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 28 Февраль 2014 - 22:11

Просмотр сообщенияminiplaneta (28 Февраль 2014 - 11:48) писал:

В продолжение темы делаю кнопку "Отказаться от заказа" с очисткой корзины на последнем шаге:

<div class="buttons">
  <div class="left">
<p class="back-link">
  {% IF ORDER_STAGE_NUM=1 %}
<a href="{CART_URL}" title="Вернуться назад в вашу корзину покупок">
  {% ELSEIF ORDER_STAGE_NUM=2 %}
<a href="{ORDER_STAGE_CONTACTS_URL}" title="Вернуться назад на страницу контактных данных">
  {% ELSEIF ORDER_STAGE_NUM=3 %}
<a href="{ORDER_STAGE_DELIVERY_URL}" title="Вернуться назад на страницу выбора варианта доставки">
  {% ELSEIF ORDER_STAGE_NUM=4 %}
<a href="{ORDER_STAGE_PAYMENT_URL}" title="Вернуться назад на страницу выбора варианта оплаты заказа">
  {% ENDIF %}
  <small>« </small>Назад</a>
<!--   <input class="button" type="submit" name="toprev" value="<<< Назад" />  вставляю кнопку, но она не работает -->
</p>
  </div>
<!-- Штатный блок -->
<div class="right">
<button type="submit" class="button" title="Перейти к следующему шагу"  style="float: left">
{% IF ORDER_STAGE_NUM=4%}
<!--   Оформить заказ --> <!-- в след строчке меняю название на кнопке -->
  Отправить  заказ
{% ELSE %}
  Перейти к следующему шагу
{% ENDIF %}</button>
</div>
<!-- Добавляю ниже Кнопку отказаться от заказа с очищением Корзины на последнем шаге -->
{% IF ORDER_STAGE_NUM=4%}
<div class="left">
&nbsp;&nbsp;<a class="button" type="submit" href="{CART_TRUNCATE_URL}" onclick="return confirm('Вы действительно хотите отказаться от заказа и удалить все товары из корзины?')" style="text-align: left;">Отказаться от заказа</a>
{% ENDIF %}</button>   <!-- Конец вставки кнопки Отказа -->

</div>
  </div>
  </div>
</form>

Нужна помощь по предидущему посту, но уже с учетом сделанного в этом посте.
Данные изменения не повлияют на изменения кнопки "Назад". Хочу заметить, что в строке
{% ENDIF %}</button>	 <!-- Конец вставки кнопки Отказа -->
закрывающийся тег </button> ничего не закрывает, т.е. он лишний.
Также идея реализации кнопки весьма оригинальна, я пока такого не встречал среди наших магазинов наших клиентов, однако, действительно ли она нужна? Если ваш клиент передумает делать заказ на последнем шаге, то он может просто выйти, не оформляя его и это для него будет легче, нежели перед уходом делать 2 лишних клика, которые, по сути, никому выгоды не принесут. Кроме того, думаю, не стоит лишний раз давать покупателям повод поразмыслить "а стоит делать заказ", да еще и такой большой красивой кнопкой почти в центре экрана.

#5 miniplaneta

miniplaneta

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 140 сообщений

Отправлено 01 Март 2014 - 20:43

Просмотр сообщенияsengun (28 Февраль 2014 - 22:11) писал:

<a class="back"
не стал создавать новый класс, т.к. есть штатный <a class="button" , но за подсказ большое спасибо

Просмотр сообщенияsengun (28 Февраль 2014 - 22:11) писал:

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

Просмотр сообщенияsengun (28 Февраль 2014 - 22:11) писал:

лишний раз давать покупателям повод поразмыслить "а стоит делать заказ"
именно так и задумано

#6 miniplaneta

miniplaneta

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 140 сообщений

Отправлено 01 Март 2014 - 22:22

как сделать пробелы одинаковые?

Прикрепленные изображения

  • 01_03_2.PNG


#7 Alexey11

Alexey11

    Активный участник

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 03 Март 2014 - 13:35

Просмотр сообщенияminiplaneta (01 Март 2014 - 22:22) писал:

как сделать пробелы одинаковые?
Добавьте данный блок кода в конец шаблона main.css

#myform > div > div.manufacturer-list > table > tbody > tr > td.cell1 {
	width: 40px;
}


#8 miniplaneta

miniplaneta

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 140 сообщений

Отправлено 03 Март 2014 - 15:48

Не совсем решается проблема. Пробел как я понял зависит от наличия и стиля Описания. Так вот в штатном коде на шаге 3 тот же стиль описания уже не переносится на другую строчку как на шаге 2. Не надо ли где-то подправить, чтобы по стиль описания по умолчанию был одинаков для обоих шагов?

Прикрепленные изображения

  • 03_03_1.png





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных