Выбор цвета товара

В теме default на странице товара, есть возможность выбора цвета товара. По умолчанию там идет просто квадратик с цветом. Может уже кто делал, в каком файле он может редактироваться?


Если смотреть исходный код страницы :



То видно что в теории где href="#" можно поставить картинку которая будет увеличиваться при нажатии, да и color можно было бы заменить на картинку. И получится что то типа такого.



При нажатии на цвет увеличивается




5 ответов

  • 1
    Ольга Зонтова 28 марта 2015 03:51 #

    я так понимаю редактировать нужно тут, или я ошибаюсь? {foreach $frontend_category as $_}{$_}{/foreach} , я должна загрузить фото в какую то директорию и прописать, как тогда будет выглядить код?


    • +1
      Ольга Зонтова Ольга Зонтова 28 марта 2015 06:53 #

      или тут

      <!-- SELECTABLE FEATURES selling mode -->

      {$default_sku_features = $product.sku_features}

      {$product_available = $product.status}

      {if $theme_settings.selectable_features_control == 'inline'}

      <div class="options">

      {foreach $features_selectable as $f}

      <div class="inline-select{if $f.type == 'color'} color{/if}">

      {foreach $f.values as $v_id => $v}

      {if !isset($default_sku_features[$f.id])}{$default_sku_features[$f.id]=$v_id}{/if}

      <a data-value="{$v_id}" href="#"{if $v_id == ifset($default_sku_features[$f.id])} class="selected"{/if}{if $f.type == 'color'} style="{$v->style}; margin-bottom: 20px;"{/if}>

      {if $f.type == 'color'}&nbsp;<i class="icon16 checkmark color_checkmark"></i>{/if}

      {if $f.type == 'color'}&nbsp;<span class="color_name">{strip_tags($v)}</span>{else}{$v}{/if}

      </a>

      {/foreach}

      <input type="hidden" data-feature-id="{$f.id}" class="sku-feature" name="features[{$f.id}]" value="{ifset($default_sku_features[$f.id])}">

      </div>


      {/foreach}

      </div>

      {else}

      <div class="options">

      {foreach $features_selectable as $f}

      {$f.name}:

      <select data-feature-id="{$f.id}" class="sku-feature" name="features[{$f.id}]">

      {foreach $f.values as $v_id => $v}

      <option value="{$v_id}" {if $v_id == ifset($default_sku_features[$f.id])}selected{/if}>{$v}</option>

      {/foreach}

      </select>

      {/foreach}

      </div>

      {/if}

  • 1
    Ольга Зонтова 28 марта 2015 04:27 #

    Может есть плагин готовый на это?

  • 3
    Ольга Зонтова 28 марта 2015 04:27 #

    Может есть плагин готовый на это?

  • 1

    Не читал код, но вы заведомо неправы. Дело в том, что цвет это цвет, а картинка это картинка. Это 2 совершенно разные вещи по определению. Цвет устанавливается кодом. То есть "style='backgroud-color:#FF0000;" - это фон красного цвета. А чтобы вывести картинку нужно использовать тег <img>. То есть своими руками вы ничего не сделаете. Квадратики цветов в данном случае не являются картинками и нигде не хранятся. Просто блоку задается такой цвет. В общем долго объяснять, но тут все индивидуально. В вашем случае можно сделать следующий костыль(перед началом сделайте резервную версию текущих шаблонов):

    1. Открыть шаблон product.cart.html
    2. Найти строку: <div class="inline-select{if $f.type == 'color'} color{/if}">
    Заменить на: <div class="inline-select">
    3. Чуть ниже удалить эту часть кода: {if $f.type == 'color'} style="{$v->style}; margin-bottom: 20px;"{/if}
    4. Еще чуть ниже найти:
    {if $f.type == 'color'}&nbsp;<i class="icon16 checkmark color_checkmark"></i>{/if}
    {if $f.type == 'color'}&nbsp;<span class="color_name">{strip_tags($v)}</span>{else}{$v}{/if}
    И заменить на: {if $f.type == 'color'}<img src='path_to_folder/{$v->code} .png' alt='{$v->code}' />{else}{$v}{/if}

    path_to_folder - заменить на папку, к которой у вас есть доступ. Например на: {$wa_static_url}wa-data/public/site/themes
    Через приложение "Сайт" - "Файл-менеджер" вы можете загружать туда любые картинки. После этого уже нужно будет подгрузить эти самые картинки для каждого варианта цвета. Хотя теперь это будет уже не совсем цвет... Для этого я и написал вам код в alt'e картинки. То есть вы должны увидеть примерно такую картину: http://gyazo.com/5855fa73e7baffc96a01d46eb097401f
    Дело в том, что сама картинка у нас отсутствует и вместо неё будут выводиться эти вот непонятные циферки. Создаем картинку с таким именем(в моем случае это 16777215 и 16711680 и расширением *.png. Сохраняем в ту папку, путь к которой указали выше. Готово. Теперь для этих цветов будут отображаться картинки. В данный момент это единственный способ реализации. И да он крайне неудобен. Но куда деваться :)



  • 1

    Редактор глючит, поэтому пришлось вставить пробел, чтобы код нормально отобразился. В 4 пункте удалите лишний пробел в: 'path_to_folder/{$v->code} .png'

Добавить ответ

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