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

Выставление опции товара в ряд — горизонтально

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

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

Далее дословно пошаговая инструкция:

Изображения опций находятся в таблице, так что ее мы и будем немного изменять. Открываем файлcatalog\view\theme\default\template\product\product.tpl и находим div с классом «option» (приблизительно 119 строка).

а). Внутри находим таблицу и ее строке (tr) придадим собственный класс (строка 126). Теперь вместо

<tr>

 будет

<tr class="tr_my_options">

б). Также придадим класс для label, который отвечает за вывод названия опции (строка 129).

Было

<td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>

стало

<td><label class="name_my_options" for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>

Что дало нам появление этих двух новых классов? Теперь мы можем задать этим элементам свои стили и отпозиционировать их как посчитаем нужным.

Если не вникать в строки кода и не изменять их по отдельности, можете заменить код (строки 126-134)

<tr> <td style="width: 1px;"><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']; ?>"><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> <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>

На этот код:

<tr class="tr_my_options"> <td style="width: 1px;"><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']; ?>"><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> <td><label class="name_my_options" 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>

в). Итак, сохраняем внесенные изменения и переходим кcatalog\view\theme\default\stylesheet\stylesheet.css. Добавим стиль нашим новым классам. Не буду подробно останавливаться на каждом пункте — для кого css знаком, код будет простым и понятным, кто же с ним не знаком, то и смысла нет вдаваться в подробности.

Код, добавленный мною, который привел к горизонтальному расположению опций, как на втором скриншоте, имеет следующий вид:

.tr_my_options {position: relative;float: left;width: 100px;margin-right: 10px;margin-bottom: 35px;}.name_my_options {position: absolute;top: 60px;left: 3px;right: 10px;text-align: center;}

546.png

post-669357-0-79118300-1382079253_thumb.png

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


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

А как с помощью этого добавления

Изменить размеры, выделенные во вложении? 

stylsheet.css - > .product-info .options - > ?

21.jpg

post-23677-0-43631400-1384270026_thumb.jpg

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


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

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

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

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

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

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

Войти

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

Войти

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

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


      HYPER Positions +70 позиций модулей - oc2.0 - 2.1 - 2.2x
      70 модульных позиций в 24х блоках  - Оформление, лендинг, дизайн.
      эта версия для opencart 2.0 - 2.1 - 2.2
      для  версии 2.3x >>   ТУТ
       
      В модуле никогда не было стучалок и прочей лапши - всем, кто скачал где то - где модуль неофициально представлен - мои поздравления с вирусами и свободным доступом к вашей базе данных 
       
      Забудьте об однообразном расположении позиций вывода модулей как инкубационные яйца))
      Позаботьтесь о презентабельной подаче вашего сайта - это не только лицо вашей компании но и ваше лицо!
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль не затирает а заменяет ваши стандартные схемы на свои! если что то не так - то достаточно его выключить в модификаторах!
      описание
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль добавляет к уже имеющимся блокам ещё 24 блочных позиций и 70 колонок вывода модулей в 5 секциях!
      Внедрены четыре вида блоков общее количество которых 24 штуки каждый из которых так же можно растянуть на всю ширину экрана
      Восемь блоков четырех колоночных позиций = 32 модульных позиций Шесть блоков трех колоночных позиций = 18 модульных позиций Пять блоков трех колоночных позиций по типу стандарта = 15 модульных позиций Пять блоков с одно модульной позицией = 5 модульных позиций Возможность перетаскивать модули по сортировке Переход к редактированию модуля ДЕМО  с оформлением
      ДЕМО   без оформления
      АДМИНКА  demo\demo
           все модульные позиции              один из вариантов             чем ни лендинг?))

             

      Схемы настройки блоков
               
      + Вывод виджетов SEO CMS TOP от markimax
       
      Вывести можно хоть все позиции но! лучше только те, что вам нужны!
       
      Установка:
      В административной части во вкладке *Установка дополнений* загрузить архив. В административной части во вкладке *Менеджер дополнений* нажать кнопку обновления. ВНИМАНИЕ!
      Ни какие файлы не затираются
      --------------
      Возможно будет нужна адаптация под ваш шаблон  нужно смотреть походу..
      в любом случае если, что то не так пишите в тему поддержки - попробуем сделать
      ВНИМАНИЕ!
      Не подходит для использования под дебильные шаблоны по типу Jornal, Fastor и им подобных!
      Поддержка и адаптация под прочие шаблоны возможна только на ветке 2.3x!
      Прежде чем приобрести модуль уточняйте все моменты в теме поддержки!
       
      Если вы купили модуль и он у вас не корректно установился, не заработал и т.д. и вы мне отказываете в доступах для поддержки - значит поддержка вам ненужна
       
      Благодарность ваша это оставить отзыв к файлу. Это мотивирует нас на развитие модуля.
      Спасибо вам за спасибо!)
      Пользуйтесь на здоровье)
      Лицензия
      Это программное обеспечение не свободно!
      Условия использования лицензии - "одна покупка модуля > на один домен".
      Это означает, что Вы можете использовать одну лицензию для одного домена и его под доменов.
      Для дополнительных доменов требуется дополнительная покупка модуля!
      Запрещена передача данного ПО третьим лицам, распространение от своего имени, изменение исходных файлов модуля без получения разрешения на то автора модуля.
       
      Прежде чем купить читайте описание!
      Если не смотря на это вы всё же приобрели то знайте Модуль возврату или обмену не подлежит! Учтите этот момент!
       
      Добавил AWARO Добавлено 11.04.2017 Категория Меню, дизайн, внешний вид Системные требования Сайт разработчика http://awaro.ru Старая цена 999 Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 2.2
      2.1
      2.0 ocStore 2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.1
      OcShop 2.0.3.х  
    • От AWARO
      70 модульных позиций в 24х блоках  - Оформление, лендинг, дизайн.
      эта версия для opencart 2.0 - 2.1 - 2.2
      для  версии 2.3x >>   ТУТ
       
      В модуле никогда не было стучалок и прочей лапши - всем, кто скачал где то - где модуль неофициально представлен - мои поздравления с вирусами и свободным доступом к вашей базе данных 
       
      Забудьте об однообразном расположении позиций вывода модулей как инкубационные яйца))
      Позаботьтесь о презентабельной подаче вашего сайта - это не только лицо вашей компании но и ваше лицо!
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль не затирает а заменяет ваши стандартные схемы на свои! если что то не так - то достаточно его выключить в модификаторах!
      описание
      Модуль HYPER Positions позволяет увеличить количество позиции и вывести любой модульный контент как пожелает ваша фантазия, позволяя более презентабельно и эффективно оформить любую страницу вашего сайта!
      Модуль добавляет к уже имеющимся блокам ещё 24 блочных позиций и 70 колонок вывода модулей в 5 секциях!
      Внедрены четыре вида блоков общее количество которых 24 штуки каждый из которых так же можно растянуть на всю ширину экрана
      Восемь блоков четырех колоночных позиций = 32 модульных позиций Шесть блоков трех колоночных позиций = 18 модульных позиций Пять блоков трех колоночных позиций по типу стандарта = 15 модульных позиций Пять блоков с одно модульной позицией = 5 модульных позиций Возможность перетаскивать модули по сортировке Переход к редактированию модуля ДЕМО  с оформлением
      ДЕМО   без оформления
      АДМИНКА  demo\demo
           все модульные позиции              один из вариантов             чем ни лендинг?))

             

      Схемы настройки блоков
               
      + Вывод виджетов SEO CMS TOP от markimax
       
      Вывести можно хоть все позиции но! лучше только те, что вам нужны!
       
      Установка:
      В административной части во вкладке *Установка дополнений* загрузить архив. В административной части во вкладке *Менеджер дополнений* нажать кнопку обновления. ВНИМАНИЕ!
      Ни какие файлы не затираются
      --------------
      Возможно будет нужна адаптация под ваш шаблон  нужно смотреть походу..
      в любом случае если, что то не так пишите в тему поддержки - попробуем сделать
      ВНИМАНИЕ!
      Не подходит для использования под дебильные шаблоны по типу Jornal, Fastor и им подобных!
      Поддержка и адаптация под прочие шаблоны возможна только на ветке 2.3x!
      Прежде чем приобрести модуль уточняйте все моменты в теме поддержки!
       
      Если вы купили модуль и он у вас не корректно установился, не заработал и т.д. и вы мне отказываете в доступах для поддержки - значит поддержка вам ненужна
       
      Благодарность ваша это оставить отзыв к файлу. Это мотивирует нас на развитие модуля.
      Спасибо вам за спасибо!)
      Пользуйтесь на здоровье)
      Лицензия
      Это программное обеспечение не свободно!
      Условия использования лицензии - "одна покупка модуля > на один домен".
      Это означает, что Вы можете использовать одну лицензию для одного домена и его под доменов.
      Для дополнительных доменов требуется дополнительная покупка модуля!
      Запрещена передача данного ПО третьим лицам, распространение от своего имени, изменение исходных файлов модуля без получения разрешения на то автора модуля.
       
      Прежде чем купить читайте описание!
      Если не смотря на это вы всё же приобрели то знайте Модуль возврату или обмену не подлежит! Учтите этот момент!
       
    • От eduard174
      Всем доброго дня!
      Просьба поделиться опытом как настроить рекламу своего магазина на Опенкарт 3.0. Магазин создан в июле этого года и до сих пор ни одного заказа....
    • От Iskander16
      Привет. Нужны небольшие правки в дизайне сайта на OpenCart: 

      1) Добавить отображение нескольких фото для товара (исправить, сейчас так – ribachok24.ru/index.php?r... 
      Добавить остальные фото под основное фото – ibb.co/z7KbJrX 
      2) Исправить фильтры. Например, по моделям. Сейчас выглядит так – ibb.co/M8KYVzy 
      Их добавить в рядом с сортировкой "По цене"
      Цена 800р, по времени - пару часов.
    • От apushkin
      Русская сборка OpenCart Version 3.0.2.0
      Есть модуль АОП и SupplerMailLink

      Нам требуется:

      1. Автоматически обновлять ассортимент товаров с их характеристиками и фотографиями из файла с сайта донора CSV-файл с описаниями товаров и ссылками на изображения (Т.е. если появился новый товар у поставщика он должен появится и у нас, если поставщик перестал продавать какие-то товары, то у нас он автоматически отключается)

      2. Обновлять цену (с нашим коэффициентом) и остатки товара из другого файла с сайта донора CSV-файл с ценами и наличием

      Задача срочная.
      Жду предложений.
      Мой WhatsApp/Telegram +79313084110
      Александр
  • Последние посетители   0 пользователей онлайн

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

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.