Перейти к содержанию
sdld

Расположение опции-изображения

Рекомендуемые сообщения

Добрый день, великие умы ОС :) Помогите привести расположение опций-изображений из вида post-20777-0-11339600-1346666296_thumb.jpg

в вид post-20777-0-36530600-1346666296_thumb.jpg Убиваю таблицу в product.tpl - становится в строку и все бы ничего но все кособокое, изображение слева, тыркалка и текст справа внизу за киломентр от изображения... При любом объединении в таблицу начинается выстраивание в вертикаль.. а без таблици ровного отображения достичь не получается...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

с утра самого завис на этом моменту уже завою скоро =\ в css добавил float блоку option-image где-то выровнялось в линию, но большая часть поывадавливала соседние опции и перекосило все=\post-20777-0-32522900-1346668519_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

CSS:

.product-info .option-image {
border: 1px solid #d0e3ee;
    padding: 0px;
cursor: pointer;
}
.product-info .option-image label {
display: block;
width: 100%;
height: 100%;
margin-left: 5px;
}
.product-info .option-image img {
margin-right: 5px;
margin-bottom: -15px;
product.tpl

	    <?php if ($option['type'] == 'image') { ?>
	    <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
		  <div align="center"><?php if ($option['required']) { ?>
		  <span class="required">*</span>
		  <?php } ?>
		  <b><?php echo $option['name']; ?>:</b></div><br />
			  <?php
		  $i = 0;
		  $len = count($option['option_value']);
		  foreach ($option['option_value'] as $option_value) {
		   if ($i == 0) {?>
    <div class="option-image">
    <table>
    <tr>
    <td colspan="2" rowspan="1" align="center">
    <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
    </tr>
    <tr>
    <td>
    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" checked/></td>
    <td>
			    <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
				    <?php if ($option_value['price']) { ?>
				    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
				    <?php } ?>
				  </label></td>
	  </tr>
	  </table>
	  </div>
	  <br />
			  <?php } else { ?>
	 <div class="option-image">
    <table>
    <tr>
    <td colspan="2" rowspan="1" align="center">
    <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
    </tr>
    <tr>
    <td>
    <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
    <td>
			    <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
				    <?php if ($option_value['price']) { ?>
				    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
				    <?php } ?>
				  </label></td>
	  </tr>
	  </table>
	  </div>
	  </br>
	 <?php }
				  $i++;
		  }?>
	    </div>
	    <br />

Где копать подскажите пожалуйста

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

что то в это роде должно быть

.product-info .option-image {

border: 1px solid #d0e3ee;

padding: 0px;

cursor: pointer;

overflow: auto;

}

.product-info .option-image label {

display: block;

width: 50px;

margin-left: 5px;

float:left;

}

.product-info .option-image img {

margin-right: 5px;

margin-bottom: -15px;

лучьше дать ссылку

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ссылку киньте на эту страницу. Там скорее всего флоат нужно очистить для названий опций ну и разные верхние отступы если есть убрать.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

.product-info .options {overflow: auto;}

.product-info .option-image {

border: 1px solid #d0e3ee;

padding: 0px;

cursor: pointer;

width: 50px;

float:left;

}

так попробуй

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

что то в это роде должно быть

.product-info .option-image {

border: 1px solid #d0e3ee;

padding: 0px;

cursor: pointer;

overflow: auto;

}

.product-info .option-image label {

display: block;

width: 50px;

margin-left: 5px;

float:left;

}

.product-info .option-image img {

margin-right: 5px;

margin-bottom: -15px;

лучьше дать ссылку

непомогло,.. :(

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

.product-info .options {overflow: auto;}

.product-info .option-image {

border: 1px solid #d0e3ee;

padding: 0px;

cursor: pointer;

width: 50px;

float:left;

}

так попробуй

прикольная лесенка получилась, но нет )

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты


.product-info .option {

clear: both;

}

.product-info .option br {

display: none;

}

.product-info .option-image {

width: 100px;

float: left;

}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

балин, как-то же просто должно быть... и в див объединял и в таблицу и одинхрен через жопу все =

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

.product-info .option {
  clear: both;
}
.product-info .option br {
  display: none;
}
.product-info .option-image {
  width: 100px;
  float: left;
}
К сожалению тоже не помогло :( все в кучу собралось и съехало..

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

К сожалению тоже не помогло :( все в кучу собралось и съехало..

хотя уже лучше) только отступ дики до опций появился.. и все опции в линию выстроились)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

можно так попробовать

.product-info .option br {
  display: none;
}
.product-info .option-image {
  width: 100px;
  float: left;
}
.product-info .option-image:last-child {
  float: none;
}
+ можно вместо .product-info .option-image указать конкретные опции через айди напр. .product-info #option-361, ...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо, друг! буду копаться! Очень благодарен!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

новая потеха =\ clear: both; если не делать то все кривое, с ним получается пробел дикий сверху, если сделать очистку только в

.product-info .option-image br {

display: none;

}

а не

.product-info .option br {

display: none;

}

то все остальные опции отлично отображаются, а в имидже лесенка 1й строки..

post-20777-0-94621500-1346678221_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

+ можно вместо .product-info .option-image указать конкретные опции через айди напр. .product-info #option-361, ...

За это самое главное спасибо) это можно каждому товару свою опцию перекручивать :) Блин супер :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А не проще табличное форматирование (tr,td) убрать и присвоить блоку что то типа


<div style="display:inline-block; border: 1px solid black; margin: 5px; padding: 15px; overflow:auto; text-align: center;">

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А не проще табличное форматирование (tr,td) убрать и присвоить блоку что то типа

<div style="display:inline-block; border: 1px solid black; margin: 5px; padding: 15px; overflow:auto; text-align: center;">
этим способом получилось так post-20777-0-24044600-1346681208_thumb.jpg =(

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

этим способом получилось так post-20777-0-24044600-1346681208_thumb.jpg =(

А у меня вот так:
http://gun.opencart_ws/index.php?route=product/product&filter_name=ALFA%20model%20420%20(%D0%BD%D0%B8%D0%BA%D0%B5%D0%BB%D1%8C,%20%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D0%BE)&product_id=573
Только ссылку сайта как копировать будете, нижнее подчеркивание на точку замените, а то модеры домен, где администрирую в фильтр поставили...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

да уже скопировал глянул, да сортирует.. у себя стили также настроил и в див объединил с темиже параметрами.. в итоге как на скрине всеравно только + еще рамка =

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

да уже скопировал глянул, да сортирует.. у себя стили также настроил и в див объединил с темиже параметрами.. в итоге как на скрине всеравно только + еще рамка =

Ну... бордернул так, для эффекта большего, положите сюда архивчик с TPL-кой, щас если откатаю, код выложу...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

за;"№;№"""СЬ! СПАСИБО! С 8 УТРА ПАРЮСЬ!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От foruss
      300.00 руб
      Скачать/Купить дополнение


      Вывод опций в категориях (селектов)
      Описание:
      Данный "хак" предназначен для вывода опций(типа селект) в категории!
      Если у товара есть другие опции(не обязательно селект) и у них проставлен параметр "Необходимо: ДА" - В таком случае товар добавляться в корзину НЕ БУДЕТ!
      Тестировалось на:
      Opencart 1.5.3.1, Opencart 1.5.4.1
      На остальных версиях пока не проверял!

      Планы на будущее:
      Оптимизировать работу
      Выбор кол-ва товара при покупке

      Для установки достаточно загрузить в корень все из папки Upload
      У вас должен быть установлен Vqmod!
      Если у вас альтернативный от стандартного шаблон:
      1. Я не гарантирую красивое отображение(верстка у всех разная)
      2. В .xml файле вам надо изменить путь в одном месте:
      60 строчка: <file name="catalog/view/theme/default/template/product/category.tpl">
      на <file name="catalog/view/theme/Название_папки_вашего_шаблона/template/product/category.tpl">

      Демо Opencart 1.5.4.1!
      Добавил foruss Добавлено 19.02.2013 Категория Опции  
    • От mpn2005
      Скачать/Купить дополнение


      Вывод остатка на складе для каждой опции OC1.5 OC2
      Модуль выводит остаток на складе для каждой опции.
      Вывод количества завёрнут в тег <span> с классом option_quantity.
      Для изменения внешнего вида выводимого количества можно в css темы прописать свой стиль.
      Например:
      .option_quantity {color: #999;}  
      Поддерживаемые языки: Русский, Английский, Украинский (только для ОС 1.5).
      Количество на складе выводится только для опций, у которых в админке включено: Вычитать со склада: Да.
       
      Лицензия:
      Данное дополнение является бесплатным и распространяется по лицензии GNU GPL.
      Разрешается: модификация кода дополнения, использование с целью получения коммерческой выгоды, продажа или бесплатное размещение на других ресурсах.
       
      Список файлов:
      options_stock_quantity_v1.0.5.xml - VQMOD модуль для OpenCart, ocStore 1.5.x (NEW) options_stock_quantity_OC2_v2.0.1.ocmod.xml - OCMOD модуль для OpenCart, ocStore 2.x
      Список изменений OC2:
      v2.0.0 (13.01.2017) - Выпущена первая версия для OC2. v2.0.1 (17.01.2017) - Корректировка пути для языковых файлов.
      Список изменений:
      v1.0.0 (12.01.2013) - Первая выложенная версия. v1.0.1 (13.01.2013) - Для отсутствующих опций на складе выводится "нет на складе". Для темизации "нет на складе" завёрнуто в тег <span class="option_quantity option_no_stock">. v1.0.2 (13.01.2013) - Добавлена мультиязыковая поддержка (Языки: Русский, Английский). v1.0.3 (20.02.2013) - Добавлена поддержка украинского языка (Спасибо: Jeka1) v1.0.4 (30.01.2014) - Добавлен вывод опций с количеством 0 на складе. Опция запрещается к выбору. v1.0.5 (13.01.2017) - В модуле теперь не требуется изменение названия темы.
      При использовании нестандартной темы может понадобиться доработка модуля.
       
      Инструкция по установке vqmod (Только для ОС 1.5):
      Скачиваем vqmod http://code.google.c.../downloads/list (например vqmod-2.2.1-opencart.zip) Загружаем "vqmod" в корневую директорию вашего сайта. Устанавливаем права 777 следующим папкам: /vqmod, /vqmod/vqcache. В адресной строке браузера вписываем: http://имя-вашего-сайта/vqmod/install/
      Инструкция по установке модуля (Только для ОС 1.5):
      Закинуть файл модуля (например options_stock_quantity_v1.0.2.xml) в папку [корень сайта]/vqmod/xml Добавил mpn2005 Добавлено 12.01.2013 Категория Опции Системные требования Сайт разработчика Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.4.1 ocStore 2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х
      OcShop 1.5.6.4.х  
    • От mpn2005
      500.00 руб
      Скачать/Купить дополнение


      Автоматическое обновление цены при выборе опции, без AJAX (Благодарность)
      При выборе опций товара обновляет цену товара (в том числе в бонусных баллах).
       
      Данный модуль доступен абсолютно бесплатно здесь
       
       
      Данная тема создана для желающих отблагодарить за данный модуль.
      Модуль абсолютно идентичен бесплатной версии.
       
      Добавил mpn2005 Добавлено 12.01.2013 Категория Цены, скидки, акции, подарки Системные требования Сайт разработчика Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.4.1 ocStore 2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х
      OcShop 1.5.6.4.х  
    • От agi
      1 600.00 руб
      Скачать/Купить дополнение


      Связанные / зависимые опции Opencart 2.x
      Модуль позволяет задавать зависимости между опциями товаров (например цвет и размер). Это дает возможность учета количества товаров на складе в разрезе комбинаций опций. Цены для различных комбинаций также могут отличаться.
      Для создания взаимосвязей в административной части магазина у опции товара появляется поле “Родительская опция”, а у значений - “Значение родительской опции”.
      В публичной части магазина в карточке товара пользователь не видит зависимые опции до тех пор, пока не выберет какое-то значение главной опции. Для зависимой опции отображаются только доступные значения исходя из выбранной родительской опции. Например, доступные размеры для выбранного цвета.
      Поддерживаются все типы опций.
      Цена товара в карточке товара меняется в зависимости от выбранной опции.Налоги не поддерживаются.
      Поддерживается только наиболее распространенный формат цены: точка в качестве разделителя дробной части и без разделитель для тысяч.
      Демо: http://option20eng.erpshop.ru
      логин/пароль: demo/demo
      Совместимость с любым установленным Вами шаблоном не может гарантироваться. Также могут возникать конфликты с другими расширениями, затрагивающими редактирование товара в административной части или карточку товара в визуальной части. Может потребоваться дополнительная адаптация модуля, которая осуществляется за дополнительную плату.
      Добавил agi Добавлено 03.07.2015 Категория Опции Системные требования Сайт разработчика http://conceptlogic.ru/ Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop  
    • От satelit1
      475.00 руб · Срок продления: 100.00 руб за год
      Скачать/Купить дополнение


      Пакет опций
      Модуль создаёт отдельный вид опций .
      Это будет полезно если у вас в магазине есть товары у которых несколько вариантов, например одежда разных размеров.
      Покупатель может сразу указать сколько единиц разного размера ему необходимо, не делая заказ отдельно на каждый размер .
      Каждый вариант будет учитываться как отдельный товар , что очень удобно при обработке заказа.
      Вы можете выбирать что именно показывать : изображение , количество , дополнительную кнопку купить .
      На каких страницах показывать : категории, акции, результаты поиска.
      Модуль работает на Опенкарт с версии 1.5.3 по 1.5.6.4
      Более подробно можно посмотреть на демо сайте .
      http://oppak.8nio.com/index.php?route=product/product&path=20&product_id=50
      Админка
      http://oppak.8nio.com/admin/
      Логин: demo
      Пароль: demo
      Добавил satelit1 Добавлено 14.05.2014 Категория Опции  
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×