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

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

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

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

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

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

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


php magento magento-1.4
person gunwin    schedule 30.12.2010    source источник

Ответы (4)


arrow_upward
2
arrow_downward

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

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

person clockworkgeek    schedule 30.12.2010

arrow_upward
1
arrow_downward

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

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

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

person Joseph Mastey    schedule 30.12.2010

arrow_upward
1
arrow_downward

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

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

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

arrow_upward
0
arrow_downward

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

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

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

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

$(".className").hide();
person KdPurvesh    schedule 15.04.2011