Jump to content
Sign in to follow this  
cooper321

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

Recommended Posts

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

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

Изображения опций находятся в таблице, так что ее мы и будем немного изменять. Открываем файл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

Share this post


Link to post
Share on other sites

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

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

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

21.jpg

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By Leingard
      Модуль добавляет Preloader для Вашего магазина.
      Покупатели будут видеть анимационное изображение во время загрузки Вашего сайта. Повышает доверие и качество магазина.
       
      DEMO: http://oc30.gameshara.ru/
       
       
       
       
      10 видов самых популярных анимаций 2019 года 8 анимаций в SVG-формате (изображения состоят из кода и не нагружают Ваш сайт), 2 варианта сложных анимации в GIF Возможность установки любого цвета фона  
      Лицензия:
      Модуль продается с лицензией на сайт. Одна покупка = Один домен Покупая копию модуля вы получаете право на использование. Распространения модуль платно или бесплатно нарушает лицензию и грозит обнулением покупки, а так же уголовной ответственность предусмотренной статей 146 УК РФ (Нарушение авторских и смежных прав)  Автор оставляет за собой право изменят условия предоставления лицензии, изменения цены и стоков продления лицензии. Все доработки, переработки и изменения функционала не входят в стоимость модуля и оплачиваются отдельно по письменной договоренности с автором.  
      Тип распространения:
      Как есть
    • By Leingard
      300.00 руб
      Скачать/Купить дополнение


      Preloader Pro - красивая загрузка Вашего магазина
      Модуль добавляет Preloader для Вашего магазина.
      Покупатели будут видеть анимационное изображение во время загрузки Вашего сайта. Повышает доверие и качество магазина.
       
      DEMO: http://oc30.gameshara.ru/
       
       
       
       
      10 видов самых популярных анимаций 2019 года 8 анимаций в SVG-формате (изображения состоят из кода и не нагружают Ваш сайт), 2 варианта сложных анимации в GIF Возможность установки любого цвета фона  
      Лицензия:
      Модуль продается с лицензией на сайт. Одна покупка = Один домен Покупая копию модуля вы получаете право на использование. Распространения модуль платно или бесплатно нарушает лицензию и грозит обнулением покупки, а так же уголовной ответственность предусмотренной статей 146 УК РФ (Нарушение авторских и смежных прав)  Автор оставляет за собой право изменят условия предоставления лицензии, изменения цены и стоков продления лицензии. Все доработки, переработки и изменения функционала не входят в стоимость модуля и оплачиваются отдельно по письменной договоренности с автором.  
      Тип распространения:
      Как есть Добавил Leingard Добавлено 17.04.2019 Категория Меню, дизайн, внешний вид Системные требования Сайт разработчика Старая цена Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 3.0
      2.3
      2.1 ocStore 3.0
      2.3
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х Обращение к серверу разработчика Нет  
    • By Sha
      1 000.00 руб · Срок продления: 300.00 руб за 12 месяцев
      Скачать/Купить дополнение


      Цены постуют!!! TONIC - Универсальный адаптивный шаблон
      Tonic - адаптивный и универсальный OpenCart шаблон. Данный шаблон это готовый инструмент для начала продаж в интернете. Современный и дружественный дизайн шаблона подойдет для магазинов различных тематик. Благодаря простой и логичной структуре кода, шаблон имеет высокую скорость работы, а модули присутствующие в комплекте шаблона расширят функционал и внешний вид интернет магазина. 
       
      Шаблон тестировался и работает на OpenCart и Ocstore 2.3.х
      При покупке шаблона каждый клиент при необходимости получает бесплатную помощь по настройке и установке! 
       
      DEMO
       

       
      Особенности шаблона
      Адаптивный дизайн Кроссбраузерная совместимость Модуль Расширенные баннеры             Модуль Ajax быстрый поиск            Модуль Витрина      Модуль Главное меню      Модуль Местоположение атрибутов      Модуль Социальные сети           Модуль Цветной статус товара      Модуль Стикеры Мини меню в шапке сайта Дополнительные позиции в макетах схем Пять цветовых схем Вывод кол-ва продуктов в категориях Упрощенная форма заказа Вывод дополнительных атрибутов для продуктов Iframe карта  Изображение в футере Отображение в продукте детальной информации Сокращение имени товаров  
      Технологии и библиотеки:
      html 5; css 3;  Bootstrap 3.3.5;  JQuery 2.1.1; не используется ionecube.  
      Техническая поддержка
      Техническая поддержка доступна пользователям из списка покупателей.
      Обращаясь с просьбой разобраться в проблеме, предоставьте:
      Адрес сайта; Доступ в админ-панель; Доступ на FTP-сервер. По вопросам технической поддержки обращайтесь через:
      Личные сообщения на форуме; Электронный адрес roma78sha@gmail.com Режим работы с 10-00 до 18-00 по киевскому времени за исключением выходных и праздничных дней. 
       
       
       
      Добавил Sha Добавлено 24.10.2017 Категория Платные шаблоны Системные требования php 5.4 и выше Сайт разработчика zekit.pro Старая цена 1900 Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 2.3 ocStore 2.3 OpenCart.Pro, ocShop Opencart.pro 2.3
      OcShop 2.0.3.х Обращение к серверу разработчика Нет  
    • By Sha
      Tonic - адаптивный и универсальный OpenCart шаблон. Данный шаблон это готовый инструмент для начала продаж в интернете. Современный и дружественный дизайн шаблона подойдет для магазинов различных тематик. Благодаря простой и логичной структуре кода, шаблон имеет высокую скорость работы, а модули присутствующие в комплекте шаблона расширят функционал и внешний вид интернет магазина. 
       
      Шаблон тестировался и работает на OpenCart и Ocstore 2.3.х
      При покупке шаблона каждый клиент при необходимости получает бесплатную помощь по настройке и установке! 
       
      DEMO
       

       
      Особенности шаблона
      Адаптивный дизайн Кроссбраузерная совместимость Модуль Расширенные баннеры             Модуль Ajax быстрый поиск            Модуль Витрина      Модуль Главное меню      Модуль Местоположение атрибутов      Модуль Социальные сети           Модуль Цветной статус товара      Модуль Стикеры Мини меню в шапке сайта Дополнительные позиции в макетах схем Пять цветовых схем Вывод кол-ва продуктов в категориях Упрощенная форма заказа Вывод дополнительных атрибутов для продуктов Iframe карта  Изображение в футере Отображение в продукте детальной информации Сокращение имени товаров  
      Технологии и библиотеки:
      html 5; css 3;  Bootstrap 3.3.5;  JQuery 2.1.1; не используется ionecube.  
      Техническая поддержка
      Техническая поддержка доступна пользователям из списка покупателей.
      Обращаясь с просьбой разобраться в проблеме, предоставьте:
      Адрес сайта; Доступ в админ-панель; Доступ на FTP-сервер. По вопросам технической поддержки обращайтесь через:
      Личные сообщения на форуме; Электронный адрес roma78sha@gmail.com Режим работы с 10-00 до 18-00 по киевскому времени за исключением выходных и праздничных дней. 
       
       
       
    • By travkovs
      Доброго дня!
      .
      - Выбрал шаблон UniShop его необходимо было доработать. Часть доработали остались ещё работы
       
      Задачи подробно описать тут сложно! Могу по скайпу (travkovsn) показать, рассказать всё транслируя, а там уже примите решение. Если кратко, то:
      - доработать вид по макетам, установка модулей
      - есть моменты по верстке и оптимизации HTML  и CSS. 
      - тестирование и оптимизация в плане отсутствия ошибок, дублей и прочего
      - перенос с тестового на рабочий
      .
      Сайт находится тут: http://test.stellazh.ru
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.