Jump to content
Sign in to follow this  
helen2014

Выбор опции цвет в картинках

Recommended Posts

Здравствуйте!

 

Нужна помощь, сделал вывод опций картинок горизонтально в ряд. Сам код нашел на просторах интернета, так вроде бы все нормально, но при выборе цвета изображение не становиться активным. Сам выбор срабатывает! Подскажите, как сделать, чтобы при выборе картинка становилась активной.

 

Вот часть кода связанная с картинками:

 <b>Выберите цвет:</b><br />
          <table class="option-image">
             <?php foreach ($option['option_value'] as $option_value) { ?>
              <tr class="tr_my_options">
             <td style="width: 1px; display: none;"><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 } ?>

CSS:

.product-info .option-image {
 margin-top: 3px;
 margin-bottom: 10px;
}
.product-info .option-image .tr_my_options {
    float: left;
    margin-bottom: 0;
    margin-right: 10px;
    position: relative;
    width: 50px;
}
.product-info .option-image .tr_my_options label {
    border: 0.5px solid #f9e5d2;
    display: block;
    height: 71px;
    width: 50px;
    -webkit-border-radius: 0px 0px 0px 0px;
 -moz-border-radius: 0px 0px 0px 0px;
 -khtml-border-radius: 0px 0px 0px 0px;
 border-radius: 0px 0px 0px 0px;
 
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.product-info .option-image .tr_my_options label:hover {
    border: 0.5px solid #990000;
}

.product-info .option-image .tr_my_options img {
    border: none;
    cursor: pointer;
    margin-right: 5px;
}
.product-info .option-image .name_my_options {
    left: 3px;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 3px;
}
.product-info .option-image label {
 display: block;
 width: 100%;
 height: 100%;
}
.product-info .option-image img {
 margin-right: 5px;
 border: 1px solid #CCCCCC;
 cursor: pointer;
}

Share this post


Link to post
Share on other sites

У меня))))

Share this post


Link to post
Share on other sites

У меня))))

 

Хорошо, сейчас договоримся! И еще вопрос по опциям цвета и размера (как у Вас на демке), изменения цены при выборе цвета и размера связаны в этом модуле? или это что-то другое?

Share this post


Link to post
Share on other sites

Всё вместе.Как шампунь-кондиционер с эффектом отвыкания от курения))))

Share this post


Link to post
Share on other sites

Всё вместе.Как шампунь-кондиционер с эффектом отвыкания от курения))))

 

Хорошо, тогда пишите в личку, что, сколько и куда?

Share this post


Link to post
Share on other sites

Давно уже стою в личке с сачком.

Share this post


Link to post
Share on other sites

Всё вместе.Как шампунь-кондиционер с эффектом отвыкания от курения))))

Опции экстра (в стиле Aliexpress)

Об этом речь?

Приобрести на той же странице можно?

Share this post


Link to post
Share on other sites

Нет.Там демка о которой я давным давно уже и забыл.

Share this post


Link to post
Share on other sites

Вот так всегда, как только найдёшь что нибудь новое, так сразу  это новое уже давно забытое старое ))

Share this post


Link to post
Share on other sites

а как бы этот модуль приобрести для версии Ocstore 15512 ?

Share this post


Link to post
Share on other sites

Так же как и написано выше .У меня в личке....

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 cmd
      View File


      Модуль изменения цены товара при выборе опции
      Модуль обновляет цену товара, когда пользователь выбирает в карточке товара опцию имеющую модификатор цены. Обновляется как основная цена так и акционная. 
      Модуль разрабатывался и тестировался на 3.0.3.6 и предположительно поддерживает все версии ОС 3.х
       
      vQmod не нужен.
       
      GitHub ссылка
      Submitter cmd Submitted 09/08/2020 Category Product Options Системные требования Метод активации Без активации Ioncube Loader Нет OpenCart 3.0 ocStore 3.0 OpenCart.Pro, ocShop Get request to server of developer Нет Старая цена 0  
    • By Seriusis
      Стандартый вывод цены в opencart мягко говоря очень неудобен, он выводит только значение для прибавления/убавления основной цены.
      Данный модификатор считает итоговую цену опции и выводит ее.
      Т.е если цена товара 90.00р , а в опции выбрано "+", и значение 10р, то вместо (+10) возле значения опции будет выведено 100р
      Совместимость 2.x -  3.x
       
      1.01 - улучшена совместимость с шаблонами (проблема +-)
       
      Работа на всех шаблонах не гарантирована. Если установлены модификаторы для работы с опциями, обновления цены при выборе опции и тд - они могут перетирать изменения, тогда убирайте +- вручную в product.twig (product.tpl)
       
      Также смотрите модули:
      Accordion & Tabs & Steps, Faq & HowTo Microdata, any place & content
       
    • By Seriusis
      Скачать/Купить дополнение


      Итоговая цена опции в карточке вместо вывода (+сумма), (-сумма)
      Стандартый вывод цены в opencart мягко говоря очень неудобен, он выводит только значение для прибавления/убавления основной цены.
      Данный модификатор считает итоговую цену опции и выводит ее.
      Т.е если цена товара 90.00р , а в опции выбрано "+", и значение 10р, то вместо (+10) возле значения опции будет выведено 100р
      Совместимость 2.x -  3.x
       
      1.01 - улучшена совместимость с шаблонами (проблема +-)
       
      Работа на всех шаблонах не гарантирована. Если установлены модификаторы для работы с опциями, обновления цены при выборе опции и тд - они могут перетирать изменения, тогда убирайте +- вручную в product.twig (product.tpl)
       
      Также смотрите модули:
      Accordion & Tabs & Steps, Faq & HowTo Microdata, any place & content
       
      Добавил Seriusis Добавлено 15.05.2020 Категория Модули Системные требования Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1 ocStore 3.0
      2.3
      2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1 Обращение к серверу разработчика Нет Старая цена 0  
    • By cmd
      Модуль обновляет цену товара, когда пользователь выбирает в карточке товара опцию имеющую модификатор цены. Обновляется как основная цена так и акционная. 
      Модуль разрабатывался и тестировался на 3.0.3.6 и предположительно поддерживает все версии ОС 3.х
       
      vQmod не нужен.
       
      GitHub ссылка
    • By Serg9988
      500.00 руб
      Скачать/Купить дополнение


      Уведомление о наличии PRO Opencart2
      Уведомление о наличии товара PRO
      Зачем нужен модуль?
      Данны модуль позволяет увеличить количество продаж, за счет уведомления клиента о том, что интересующий его товар появился в продаже.    Соответственно вы не теряете потенциального клиента на товар которого в определенный момент не было в наличии.
       
      Модуль позволяет отслеживать желания ваших покупателей и заказывать у поставщика именно те товары, которых нет в наличии у вас на складе, но  которыми интересуются ваши покупатели.  
      Модуль собираем эмейлы потенциальных покупателей которые можно использовать в последующих разсылках акций и распродаж.  
       
      Краткое описание:
      Модуль позволяет покупателю заказать уведомление о поступлении товара в магазин.
      Модуль заменяет кнопку "Купить" на кнопку "Уведомить", если товара нет на складе или выбранной покупателем опции у товара нет в наличии.
      Работает по:
      количеству товара на складе по количеству опций на товаре по статусу товара  

      Возможности:
       
       История запросов уведомлений от пользователей в панели администратора   Возможность ручного отключения уведомлений   Обработка всего уведомления одним нажатием   Автоматическая отправка уведомлений о поступлении товара (CRON)    Уведомляет покупателя после изменения количества товара в ручную Работает по количеству опций на товаров (необязательно включается в настройке модуля) добавлена возможность покупателю указать желаемое количество товара при котором его уведомлять о поступлении при вводе желаемого количества товара для покупки, модуль на лету проверяет достаточно ли товара на складе  История заявок в личном кабинете покупателя  Пользователь может видеть историю своих уведомлений   Добавление любых произвольных полей в окно заказа уведомления (телефон, адрес, и тд)  Конструктор писем с возможностью подстановки данных оставленных покупателем  (в том числе доп. поля) Уведомление о новых заявках в административном меню  Сортировка и фильтрация списка заявок по цене, модеи, названию, артикулу, количеству товара Управление цветом кнопок модуля с админки  
       
       

       
       
       
       
      К модулю идет инструкция где подробно описано как установить и настроить модуль. 
      Адаптация, правки вида модуля и другие работы на не стандартном шаблоне делаются за отдельную плату.
       
      Модуль работает на шаблонах:
        Moneymaker2
       Journal
       Unishop
       
      Модуль совместим с модулями:
      uni_tabs
      owlcarousel
       
      ознакомится с документацией - ДОКУМЕНТАЦИЯ
       
      Системные/технические требования:
      Протестировано на следующих версиях : 
      ocstore 2.0*,2.1*,2.2*.2.3*, 3.0* opencart 2.0*,2.1*,2.2*.2.3*, 3.0*  
      Модуль не тестировался и его работа не гарантируется на всякого рода зборках ocstore или opencart от студий или отдельных разработчиков. Работа гарантируется только на чистых официальных сборках!
       
      Для работы модуля требуется:
      PHP Version: 5.6.x или выше
       
       
      Возможности:
       
       

       
       
      В планах реализовать:
      возможность создания собственных полей на форму с возможностью использовать их в письмах - Реализовано с версии 9.6 отправка уведомлений по смс построение отчетов по заявкам и выгрузка их в Exsel  
       
      Дизайн модуля адаптивен и корректно работает на мобильных устройствах:
       

       
      Установка:
       Скачайте архив с нужной версией модуля. Модуль с версии 9.5 работает только на opencart 2.3 и выше и OCStore 2.3 и выше.  Зайдите в административную панель сайта в раздел "Дополнения/Установка дополнений" и установите модуль  Зайдите в раздел "Дополнения/Менеджер дополнений" и обновите кеш  Зайдите в раздел "Дополнения/Дополнения/Модули" Установите модуль "SM Уведомить о наличии PRO"  Зайдите в редактирование модуля (введите ключ активации или сделайте запрос на получение ключа ) активируйте модуль переведя опцию "Статус" в позицию "Включен.              Сохраните настройки  Подключите модуль на страницы Главная, категории, товары и тд. (Раздел Дизайн/Схемы)  
      Состав модуля:
      полная инструкция с описанием работы и установки модуля; файлы модуля; файл для тестирования настроек сервера;  
      ДЕМО 
      Страница товара с опциями (кнопка купить будет подменена только если выбрать опцию количество которой <=0)
      login/pass - demo/demo
       
      Полное описание:
       
      Все работы по стилизации модуля под ваш шаблон (цвет кнопки, форма размер и тд.) проводяться исключительно на платной основе.
       
      Что нового:
       
      Обновление:
       
      Условия использования:
      Лицензия на модуль выдается на следующих условиях:
      1 лицензия = 1 покупка = 1 доменное имя.
      То есть - один раз купив, вы получаете ключ для работы модуля только на одном доменном имени, одном магазине!
       
      Приобретая лицензию (покупая дополнение), Вы автоматически соглашаетесь со следующими положениями:
       
      Для получения лицензионного ключа напишите мне в личном сообщении от имени того, на кого покупался модуль:
      Название модуля Доменное имя вашего магазина Доменное имя тестовой площадки (если таковая имеется) Ваш адрес электронной почты, куда выслать ключ  
      Дополнительные лицензии вы можете получить купив модуль на сайте http://myopencart.club/
      На 4-ю и более покупку действует скидка. Чтобы получить скидку пишите в личку или на почту.
      Вопросы, пожелания можно писать в форум или на почту [email protected]
       
      Добавил Serg9988 Добавлено 30.03.2016 Категория Письма, почта, рассылки, sms Системные требования Метод активации По запросу в ЛС
      По запросу на почту
      По емейлу Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 3.0
      2.3
      2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х Обращение к серверу разработчика Нет Старая цена 600  
  • 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.