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


Перенос Кнопки В Корзину

Автор koloskov, 25 мая 2013 13:44

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

#1 koloskov

koloskov

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

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

Отправлено 25 Май 2013 - 13:44

Добрый день.

Заметил проблему, что покупатель выбирает товар в Корзину не отрабатывая как мин выбор модификации и как макс не внимательно прочитывая условия доставки...

Решил перенести кнопку в самый конец таблицы после той инфы, для которой она предназначена!

Переношу сюда:

    <!-- Блок описания вариантов доставки -->
    <tr>
  <td class="goodsDataMainDeliveryBlock" colspan="2">
    <h4>Условия доставки</h4>
    {% FOR goods_delivery %}
  <br /><h5 rel="{goods_delivery.ID}" class="goodsDataMainDeliveryItemHeader">Вариант {goods_delivery.index}: {goods_delivery.NAME}</h5>
  <div class="goodsDataMainDeliveryItem" >
    <p>{goods_delivery.DESC}</p>
  
    {% IF goods_delivery.rules_empty %}
  Стоимость доставки: {goods_delivery.PRICE | money_format}
    {% ELSE %}
  <div class="goodsDataMainDeliveryItemRules">
    <table>
  <thead>
    <tr>
  <td colspan="2"><h5>Стоимость доставки зависит от суммы заказа</h5></td>
    </tr>
    <tr>
  <td>Для заказов больше</td>
  <td>Стоимость доставки</td>
    </tr>
  </thead>
  <tbody class="num">
    {% FOR rules %}
  <tr>
    <td><p><span>{goods_delivery.rules.SUM_MORE_PRICE | money_format}</span></p></td>
    <td>{goods_delivery.rules.PRICE | money_format}</td>
  </tr>
    {% ENDFOR %}
  <tr>
    <td><p><span>Для заказов меньше {goods_delivery.SUM_LESS_PRICE | money_format}</span></p></td>
    <td>{goods_delivery.PRICE | money_format}</td>
  </tr>
  </tbody>
    </table>
  </div>
    {% ENDIF %}
  </div>
    {% ENDFOR %}
  </td>
    </tr>
    <!-- Ниже вставляю кнопку В корзину, вместо ее штатного местоположения -->
  <td class="goodsDataFormSubmitButton">
    <a class="readmore" onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a>
  </td>
  </table>
    </div>
  </td>
    </tr>
  </table>
    </div>
  </form>

    <!-- Блок описания товара. Показываем его есть описание товара -->
....

Возникла проблема, что таблица имеет переменную ширину в зависимости от объема инфы на конкретном товаре.  Как сделать эту таблицу фиксированной ширины штатного размера?

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

  • 13.JPG

#2 Taisia

Taisia

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

  • Модератоpы
  • 1 289 сообщений

Отправлено 25 Май 2013 - 15:29

таким образом у вас вставить кнопку не получится без изменения структуры таблицы. такая вставка некорректна по отношению к верстке

вместо вставляемой вами строки попробуйте вставить такой код 

<tr><td></td><td class="goodsDataFormSubmitButton"> <input type="submit" value="Положить в корзину" style="display:block;margin-top:1em;width:200px;" /></td></tr>

#3 koloskov

koloskov

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

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

Отправлено 25 Май 2013 - 16:06

Просмотр сообщенияTaisia (25 Май 2013 - 15:29) писал:

таким образом у вас вставить кнопку не получится без изменения структуры таблицы. такая вставка некорректна по отношению к верстке

вместо вставляемой вами строки попробуйте вставить такой код

<tr><td></td><td class="goodsDataFormSubmitButton"> <input type="submit" value="Положить в корзину" style="display:block;margin-top:1em;width:200px;" /></td></tr>

Так нужно стиль кнопки "readmore" сохранить! Тогда как эта строчка будет выглядеть?

#4 Taisia

Taisia

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

  • Модератоpы
  • 1 289 сообщений

Отправлено 25 Май 2013 - 16:42

попробуйте так

<tr><td></td><td class="goodsDataFormSubmitButton"> <a class="readmore" onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a></td></tr>

#5 koloskov

koloskov

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

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

Отправлено 25 Май 2013 - 17:27

Просмотр сообщенияTaisia (25 Май 2013 - 16:42) писал:

попробуйте так

<tr><td></td><td class="goodsDataFormSubmitButton"> <a class="readmore" onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a></td></tr>

Получилось!  Т.е. если вставлю в это место, то не нарушаю верстку кода?

<!-- Блок описания вариантов доставки -->
<tr style="display:none;">  <!-- В этой строчке убирается Блок описания вариантов доставки на товаре, чтобы вернуть ее эту строчку надо оставить просто <tr> -->
  <td class="goodsDataMainDeliveryBlock" colspan="2">
<h4>Условия доставки</h4>
{% FOR goods_delivery %}
  <br /><h5 rel="{goods_delivery.ID}" class="goodsDataMainDeliveryItemHeader">Вариант {goods_delivery.index}: {goods_delivery.NAME}</h5>
  <div class="goodsDataMainDeliveryItem" >
<p>{goods_delivery.DESC}</p>
  
{% IF goods_delivery.rules_empty %}
  Стоимость доставки: {goods_delivery.PRICE | money_format}
{% ELSE %}
  <div class="goodsDataMainDeliveryItemRules">
<table>
  <thead>
<tr>
  <td colspan="2"><h5>Стоимость доставки зависит от суммы заказа</h5></td>
</tr>
<tr>
  <td>Для заказов больше</td>
  <td>Стоимость доставки</td>
</tr>
  </thead>
  <tbody class="num">
{% FOR rules %}
  <tr>
<td><p><span>{goods_delivery.rules.SUM_MORE_PRICE | money_format}</span></p></td>
<td>{goods_delivery.rules.PRICE | money_format}</td>
  </tr>
{% ENDFOR %}
  <tr>
<td><p><span>Для заказов меньше {goods_delivery.SUM_LESS_PRICE | money_format}</span></p></td>
<td>{goods_delivery.PRICE | money_format}</td>
  </tr>
  </tbody>
</table>
  </div>
{% ENDIF %}
  </div>
{% ENDFOR %}
  </td>
</tr>
     <!-- Ниже вставляю кнопку В корзину, вместо ее штатного местоположения -->
<tr><td></td><td class="goodsDataFormSubmitButton">
<a class="readmore" onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a></td>
</tr>
  </table>
</div>
  </td>
</tr>
  </table>
</div>
  </form>


<!-- Блок описания товара. Показываем его есть описание товара -->

#6 koloskov

koloskov

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

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

Отправлено 27 Май 2013 - 16:44

Просмотр сообщенияTaisia (25 Май 2013 - 16:42) писал:

попробуйте так

<tr><td></td><td class="goodsDataFormSubmitButton"> <a class="readmore" onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a></td></tr>

Теперь мне нужно показать место, чтобы перед кнопкой В корзину (ее перенес в конец таблицы в шаблоне Товар) вставить счетчик кол-ва:
<div class="goodsDataMainModificationQuantity">
        <label for="quantity_wanted">Количество :</label>
        <input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:43px;" maxlength="12" value="1" title="Количество" class="text" />
</div>


<!-- Блок описания вариантов доставки -->
<tr style="display:none;">  <!-- В этой строчке убирается Блок описания вариантов доставки на товаре, чтобы вернуть ее эту строчку надо оставить просто <tr> -->
  <td class="goodsDataMainDeliveryBlock" colspan="2">
<h4>Условия доставки</h4>
{% FOR goods_delivery %}
  <br /><h5 rel="{goods_delivery.ID}" class="goodsDataMainDeliveryItemHeader">Вариант {goods_delivery.index}: {goods_delivery.NAME}</h5>
  <div class="goodsDataMainDeliveryItem" >
<p>{goods_delivery.DESC}</p>
  
{% IF goods_delivery.rules_empty %}
  Стоимость доставки: {goods_delivery.PRICE | money_format}
{% ELSE %}
  <div class="goodsDataMainDeliveryItemRules">
<table>
  <thead>
<tr>
  <td colspan="2"><h5>Стоимость доставки зависит от суммы заказа</h5></td>
</tr>
<tr>
  <td>Для заказов больше</td>
  <td>Стоимость доставки</td>
</tr>
  </thead>
  <tbody class="num">
{% FOR rules %}
  <tr>
<td><p><span>{goods_delivery.rules.SUM_MORE_PRICE | money_format}</span></p></td>
<td>{goods_delivery.rules.PRICE | money_format}</td>
  </tr>
{% ENDFOR %}
  <tr>
<td><p><span>Для заказов меньше {goods_delivery.SUM_LESS_PRICE | money_format}</span></p></td>
<td>{goods_delivery.PRICE | money_format}</td>
  </tr>
  </tbody>
</table>
  </div>
{% ENDIF %}
  </div>
{% ENDFOR %}
  </td>
</tr>
     <!-- Ниже вставляю кнопку В корзину, вместо ее штатного местоположения -->
<tr><td></td><td class="goodsDataFormSubmitButton">
<a class="readmore" onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a></td>
</tr>
  </table>
</div>
  </td>
</tr>
  </table>
</div>
  </form>


<!-- Блок описания товара. Показываем его есть описание товара -->

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

  • 16.JPG

#7 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 27 Май 2013 - 18:05

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

#8 koloskov

koloskov

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

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

Отправлено 27 Май 2013 - 18:25

Просмотр сообщенияKoderhan (27 Май 2013 - 18:05) писал:

Пожалуйста, не могли бы сказать адрес вашего магазина или номер аккаунта.
хочу в самый конец таблицы, которая идет перед Подробным описанием.  И кнопку переносил, чтобы покупатель вначале всю инфу прочитал ( ато модификации не выбирают зачастую), а затем клал в корзину

#9 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 28 Май 2013 - 03:34

Замените ваш вставляемый код кнопки

<!-- Ниже вставляю кнопку В корзину, вместо ее штатного местоположения -->
<tr><td></td><td class="goodsDataFormSubmitButton">
<a class="readmore" onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a></td>
</tr>

на следующий код

<!-- Ниже вставляю кнопку В корзину, вместо ее штатного местоположения -->
<tr><td class="goodsDataFormSubmitButton">
<div class="goodsDataMainModificationQuantity">
<label for="quantity_wanted">Количество :</label>
<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:43px;" maxlength="12" value="1" title="Количество" class="text" />
</div></td>
<td class="goodsDataFormSubmitButton">
<a class="readmore" onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a></td>
</tr>

#10 koloskov

koloskov

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

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

Отправлено 28 Май 2013 - 12:58

Просмотр сообщенияСake (28 Май 2013 - 03:34) писал:

Замените ваш вставляемый код кнопки

<!-- Ниже вставляю кнопку В корзину, вместо ее штатного местоположения -->
<tr><td></td><td class="goodsDataFormSubmitButton">
<a class="readmore" onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a></td>
</tr>

на следующий код

<!-- Ниже вставляю кнопку В корзину, вместо ее штатного местоположения -->
<tr><td class="goodsDataFormSubmitButton">
<div class="goodsDataMainModificationQuantity">
<label for="quantity_wanted">Количество :</label>
<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:43px;" maxlength="12" value="1" title="Количество" class="text" />
</div></td>
<td class="goodsDataFormSubmitButton">
<a class="readmore" onclick="$('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a></td>
</tr>

Здорово получилось! Спасибо! :)

Теперь помогите этот код с кол-вом вставить в Товары :

<!--   Цена сейчас: <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><br />    эту штатную строчку замеяю следующей строчкой ради ссылки Подробнее и тоже самое делаю в шаблоне Поиск -->
  <strong>Цена сейчас:</strong> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><a style="position: relative;top: 0px;left: 100px;" title="{goods.NAME}" href="{goods.URL}"><strong>Подробнее »</strong></a><br />     
  {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
    Цена без учёта скидки: <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a><br />
    <span class="listingDiscountInfo">До {goods.MAX_DISCOUNT_EXPIRED_AT | date} скидка составляет: {goods.MAX_DISCOUNT}%</span>
  {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
    Старая цена: <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
  {% ENDIF %}
    </p>


<!-- Здесь в достаточно штатном блоке добавляю кнопку В корзину в каталоге товаров и тоже самое делаю в шаблоне Поиск -->
    <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
  <p>
    <input type="hidden" name="hash" value="{HASH}" />
    <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
    <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
  <!--   <a class="readmore" href="{goods.URL}" title="Подробнее">Подробнее</a>    Я переношу эту штатную строчку выше, превращаяя ее в ссылку, так как ниже создаю кнопку В корзину в каталоге товаров -->  
{%IF goods.COUNT_MODIFICATION<2 && goods.MAX_REST_VALUE>0%}<a style="position: relative; left: 0px;" class="readmore" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Положить «{goods.NAME}» в корзину" href="#">В корзину</a>{%ENDIF%}   <!-- Условие, что если Модификаций больше чем 1 или Товара нет в наличии, то кнопка В корзину не отображается -->
  </p>
    </form>

  </div>
  <div class="clr"></div>
    </div>
   {% ENDFOR goods %}

Здесь фишка в условии {%IF goods.COUNT_MODIFICATION<2 && goods.MAX_REST_VALUE>0%}  по которому появляется кнопка В корзину, так вот и окошечко с Кол-вом должно быть в этом же условии! Т.е. Кол-во  и кнопка в корзину отображаются парой, раздельно они не видны.

#11 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 28 Май 2013 - 14:39

Количество можно обернуть в тоже самое условие. Если нет кнопки в корзину значит не выводим и количество.
Код:
<label for="quantity_wanted">Количество :</label>
<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:43px;" maxlength="12" value="1" title="Количество" class="text" />
Заменить:
{%IF COUNT_MODIFICATION<2 && MAX_REST_VALUE>0%}
<label for="quantity_wanted">Количество :</label>
<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:43px;" maxlength="12" value="1" title="Количество" class="text" />
{%ENDIF%}

#12 koloskov

koloskov

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

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

Отправлено 28 Май 2013 - 15:36

Просмотр сообщенияKoderhan (28 Май 2013 - 14:39) писал:

Количество можно обернуть в тоже самое условие. Если нет кнопки в корзину значит не выводим и количество.
Код:
<label for="quantity_wanted">Количество :</label>
<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:43px;" maxlength="12" value="1" title="Количество" class="text" />
Заменить:
{%IF COUNT_MODIFICATION<2 && MAX_REST_VALUE>0%}
<label for="quantity_wanted">Количество :</label>
<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:43px;" maxlength="12" value="1" title="Количество" class="text" />
{%ENDIF%}

Получилось!  Помогите выровнять с кнопкой!

<!-- Здесь в достаточно штатном блоке добавляю кнопку В корзину в каталоге товаров и тоже самое делаю в шаблоне Поиск -->
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
  <p>
<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
{%IF goods.COUNT_MODIFICATION<2 && goods.MAX_REST_VALUE>0%} <!-- Условие, что если Модификаций больше чем 1 или Товара нет в наличии, то Кол-во и  кнопка В корзину не отображается -
<!-- Вставляю окошечко Кол-во -->
<label for="quantity_wanted"><strong>Количество:</strong></label>
<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:43px;" maxlength="12" value="1" title="Количество" class="text" />
<!-- Вставляю Кнопку В корзину  -->
<a style="position: relative; left: 250px;" class="readmore" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Положить «{goods.NAME}» в корзину" href="#">В корзину</a>{%ENDIF%}  
  </p>
</form>
  </div>
  <div class="clr"></div>
</div>
  {% ENDFOR goods %}

отбой, выровнял так:

{%IF goods.COUNT_MODIFICATION<2 && goods.MAX_REST_VALUE>0%}  <!-- Условие, что если Модификаций больше чем 1 или Товара нет в наличии, то Кол-во и  кнопка В корзину не отображается -
    <!-- Вставляю окошечко Кол-во -->
    <br>
    <label for="quantity_wanted"><strong>Количество:</strong></label>
    <input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:43px;" maxlength="12" value="1" title="Количество" class="text" />  
    <!-- Вставляю Кнопку В корзину  -->
    <a style="position: relative; left: 150px; top: -27px;" class="readmore" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Положить «{goods.NAME}» в корзину" href="#">В корзину</a>
    {%ENDIF%}

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

  • 18.jpg

Обратно в Страница товара


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Сияние
  5. → Страница товара
  6. Privacy Policy