Пользовательские параметры продукта Magento

Question

Если вы посмотрите на следующую страницу продукта на сайте, с которого я хочу "черпать вдохновение".

http://www.pauls -hair-world.co.uk / бестселлеры/ beauty-works-celebrity-choice-100-remy-hair-extensions

Как видите, один из вариантов продукта - выбрать цвет продукта, для вас есть вариантнажмите «Нажмите здесь, чтобы перейти к диаграмме цвета», и вы увидите множество изображений, показывающих доступные цвета продукта.

Я знаю, как добавить настраиваемый параметр раскрывающегося меню с параметрами, которыеЯ выбираю, но как мне заставить это показать те изображения также.(Кроме того, когда вы нажимаете на картинку, она меняет параметр в раскрывающемся меню.

Любая помощь очень ценится, даже ссылка на большой ресурс подойдет. Если я выясню это за это времяЯ опубликую ответ здесь (хотя и не надеюсь).

Заранее спасибо!

Answer 1

Будет ли это расширение полезным для вас?
http://www.magentocommerce.com/magento-connect/temgra/extension/893/color-swatches

(Примечание; также доступны другие расширения)

Answer 2

В итоге я использовал следующее для извлечения текста и идентификатора для каждого параметра в раскрывающемся списке. Затем я использовал его для создания отдельных образцов в виде элементов div с изображением для каждого цвета внутри.

function createColourSwatch(theid, filename) {
    if(theid != "" && filename != "NotSureSendMeSomeSamplesFirst" && filename != "PleaseSelect"){
        newSwatch = "<div class='swatchPanel' onClick='changeOption(\""+theid+"\")'><img src='"+imgLocation+filename+".jpg' /></div>";  
        return newSwatch;
    } else {
        return "";
    }
}


$j('.input-box:eq(0) option').each(function() {

    klass = $j(this).text().replace(/[^a-zA-Z 0-9]+/g,'');
    klass = klass.replace(/\s/gi,"");
    itsId = $j(this).val();

    $j('.colour-swatch:eq(0)').html($j('.colour-swatch:eq(0)').html()+createColourSwatch(itsId, klass));

});

Изображение затем отображается с использованием выпадающего текстового значения без пробелов или не буквенно-цифровых символов.Например, «45/22 Deep Red» превратился в «4522DeepRed.jpg».

Затем каждому образцу присваивается функция followig, которая изменяет значение раскрывающегося списка в зависимости от того, на который вы нажали.*

Answer 3

Общий подход состоит в том, чтобы использовать хорошо отформатированный URL для каждого доступного цвета (skin/images/hairsamples/jetsetblack.jpg, а затем выводить повторяемый URL-адрес для каждой опции, имеющейся у продукта. Используйте Javascript, чтобы связать событие onclick с изображениями, которое выбираетсоответствующая опция из поля выбора.

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

---

Для поддержки наборов цветов, основанных на производителе, измените вышеприведенное, но вместо этого используйте skin/images/hairsamples/$manufacturer/$color.jpg. Проблема решена!

Answer 4

Это было чертовски просто, все в вашем медиафайле

Просто загрузите все изображения с отображением ни одного класса.и используя jquery при наведении курсора мыши, просто отобразите это изображение с добавленным

$(".className").show();

и при наведении мыши

$(".className").hide();