ОБНОВЛЕНИЕ: Мой ответ теперь поддерживает автоматическое изменение образа продукта после образца. Вы также можете найти более подробное руководство о том, как это сделать, включая дополнительные изображения здесь .
Magento CE 1.9.1.0 поставляется с очень приятной новой функцией: настраиваемые образцы. К сожалению, это доступно только для пакета RWD, который поставляется с установкой Magento по умолчанию. Это вопрос с самостоятельным ответом о том, как сделать настраиваемые образцы Magento доступными для пакета по умолчанию. Для тех, кто хочет интегрировать настраиваемые образцы в пользовательскую тему, эта информация также может пригодиться.
Примечание 1: это вводное руководство о том, как сделать настраиваемые образцы доступными для пакета по умолчанию в Magento. Это может (но не может) работать для каждой пользовательской темы. Всегда делайте резервные копии ваших исходных файлов (и базы данных), прежде чем вносить какие-либо изменения.
Примечание 2: образцы работают (снимок экрана ниже), но я еще не получил, чтобы изображение продукта автоматически менялось вместе с образцами. Я постараюсь разобраться в этом, когда найду время.
Не стесняйтесь вносить комментарии и предложения!
Ответы:
Скопируйте папку
и его содержание в
(или ваша папка шаблона пакета)
Скопируйте файл
в
(или ваша папка шаблона пакета)
Скопируйте файл
в
(или ваша папка шаблона пакета)
Скопируйте папки
и их содержание в
(или папка скинов вашего пакета)
Скопируйте файлы
в
(или папка скинов вашего пакета)
Скопируйте файл
в
(или ваша папка макета пакета)
Создать файл
Откройте
local.xml
и добавьте следующий код:Добавьте следующий CSS в ваш файл styles.css :
Скопируйте файл
в
источник
.product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }
в конец CSS, так как без него вы увидите последнее добавленное изображение продукта при посещении продукта, но при наведении курсора вы увидите основное изображение.Ваше решение отлично, но не показывает образец цвета в списке категорий или сетки. Здесь я добавляю решение, чтобы показать его, протестировано на magento 1.9.2.4.
В: app / design / frontend / CUSTOM-THEME / template / catalog / product добавьте следующую строку в list.phtml
1 - сначала показать в виде списка, проверить, если это, если нет, обновить или изменить (строка 39):
В альтернативе можно использовать это:
настроить размер изображения.
2 - после "getRatingSummary" = php end if =, около строки 53, добавить это:
3 - сделать то же самое изменение в виде скелета вокруг линий 120 и 152.
4 - в конце файла добавить это:
источник
Это было очень полезно! У меня есть некоторые дополнительные детали, которые я смог проработать, чтобы заставить изображение переключиться на работу.
Скопируйте файл
в
или ваша собственная тема
Скопируйте следующий список файлов:
в
или ваша собственная тема
Чтобы включить эти новые сценарии, отредактируйте app / design / frontend / DEFAULT / default / layout / page.xml (сначала сделайте резервную копию этого файла и убедитесь, что внесены изменения, если вы выполняете обновления, поскольку тема по умолчанию будет перезаписана)
Добавить после строки 38:
Добавьте после строки 50 (строка 52, если вы уже добавили две вышеупомянутые строки):
Удалите / / Product Image * / раздел из вашего файла styles.css (вокруг строк 783-803) и вставьте следующий CSS из файла RWD styles.css:
И наконец, что не менее важно, некоторые оптимизации для elevateZoom благодаря Google и нахождению следующего поста в блоге BelVG Мишеля Сойко , я смог изменить и воспользоваться дополнительными настройками для elevateZoom, такими как внутренний масштаб или смещение окна масштабирования. и т. д. Кроме того, я хотел, чтобы при нажатии на изображение появлялось всплывающее окно, которое я включил с помощью приведенного выше блога в комментариях.
Откройте файл app.js, который вы скопировали в свою тему ранее.
Над строкой 1153 (
var ProductMediaManager = {
) вставьте (скопировано из приведенной выше ссылки на блог BelVG):Если вы хотите всплывающее окно fancybox, в строке выше 1227 вставьте:
Обратите внимание, что вам нужно будет загружать библиотеку fancybox js после jQuery в вашем page.xml или в другом месте вашей темы.
Наконец, измените то, что сейчас является строкой 1232 (если вы сделали обе вставки сверху) из:
чтобы:
Для обзора всех настроек Zoomer, проверьте официальную страницу с описанием настроек ElevateZoom
И это должно заставить его работать. Если вы работаете с пользовательской темой (как я), у вас может быть больше работы.
источник
local.xml
для загрузки всех.js
файлов наhead
странице. Я обновлю свой ответ, когда найду время. До этого вы можете найти подробное руководство, которое я написал о том, как это сделать, здесь .