Magento Custom Product Options

Question

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

http://www.pauls-hair-world.co.uk/best-sellers/beauty-works-celebrity-choice-100-remy-hair-extensions

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

Я знаю, как добавить настраиваемую опцию выпадающего меню с параметрами, которые я выбираю, но как я могу заставить их показать эти изображения. (Также, когда вы нажимаете кнопку «Изменить изображение», в раскрывающемся меню появляется опция.

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

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

Answer 1

Я закончил с использованием следующих действий, чтобы вытащить текст и идентификатор для каждого варианта в раскрывающемся down.I затем используют это создайте отдельные образцы как divs с изображением для каждого цвета внутри.

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, которая изменяет раскрывающееся значение в зависимости от того, который вы нажали.

function changeOption(theId) { 
    $j('.input-box select').val(theId); 
} 

Answer 2

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

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

---

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

Answer 3

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

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

Answer 4

Это было Дамм просто все просто в файле медиа

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

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

и отведении указателя мыши

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