Возникла задача, создания таблиц выбора материалов для товаров в JoomShopping для интернет магазина. На первый взгляд все вроде бы тривиально - есть "Атрибуты", каждому можно назначить картинку и свою цену. Но как быть, если например есть диван, который может быть оббит материалом с полутысячей цветов и оттенков, и при этом тот же диван в разных вариантах оббивки, имеет разную цену ? Вводить пол тысячи атрибутов ? И как будет выглядеть при этом сайт, и как пользователь ЭТО будет просматривать, и сколько усилий нужно будет тратить для ввода одного единственного товара ? С другой стороны, есть хорошие галереи, позволяющие очень удобно просмотреть все материалы в виде превью и подробно, но не "умеющие" взаимодействовать с JoomShopping. Для решения задачи, я решил взять одну из самых распространенных свободно распространяемых галерей Simple Image Gallery, и внести в нее необходимые изменения для взаимодействия с JoomShopping.
На скриншотах, показаны фрагменты карточек товаров, с использованием модифицированной галереи Simple Image Gallery. При выборе нужного материала из превью, автоматически вписывается его название, и меняется цена товара, соответственно этому материалу. На первом скриншоте, в зависимости от выбранного материала, может выбираться надбавка к цене в процентах , на втором, выбирается соответствующая категория материала, и вписывается его название в карточку товара. При этом по каждому материалу при желании можно выбрать свою скидку/цену, количество добавляемых материалов не ограничено, а для добавления новых материалов, при условии что соответствующие им цены/скидки уже "забиты" в карточке товара, вообще не требуется программирование - достаточно просто скопировать файы картинок с соответствующим материалом в каталог галереи. Понятно, что если у Вас несколько разных групп товаров, с разными наборами материалов, то нужно сделать соответствующее количество шаблонов товаров в JoomShopping, к которым добавить таблицы для материалов, в соответствующих местах которых разместить ссылки на галереи, где находятся картинки с материалами.
Просмотреть как это работает, Вы можете на сайте mebelworld.com.ua,
Вариант 1: http://www.mebelworld.com.ua/product/view/7/13 - с большм количеством отображаемых материалов - как на первом скриншоте. Внимание - очень много, на слабом компьютере может тормозить.
Вариант 2: http://www.mebelworld.com.ua/product/view/20/240 - это пример второго варианта, как на втором скриншоте.
Архив с измененными файлами галереи (V1, если будут новые версии позже добавлю) можно скачать вот отсюда: https://drive.google.com/file/d/0B8_buLPe3IyPdThseHZVOS1Tb3c/view?usp=sharing
В нем каталог, который нужно поместить в /templates/ИмяШаблонаКоторыйИспользуете/html/jw_sig, и файл popup.php, которым нужно заменить оригинальный файл галереи, лежащий в: /plugins/content/jw_sig/jw_sig/ncludes/js/jquery_fancybox. На всякий случай, рекомендую оригинальный просто переименовать. Следует помнить , что в случае обновления версии Simple Image Plugin for Joomla, указанный файл нужно снова заменить, так как он будет перезаписан при обновлении.
Теперь делаем шаблоны для тех товаров, к которым необходимо добавить таблицы с материалами. В нужно месте ставим код со ссылками на галерею, с указанием каталогов, если у Вас материалы будут разбиты по каталогам (это не обязательно), например вот так:
Теперь нам нужно наладить взаимодействие. Для этого, добавляем в карточку нужные атрибуты. Каждому материалу может соответствовать один (или ни одного) зависимый и один (или ни одного) независимый атрибут (например цена и название). При этом при необходимости, разным материалам могут соответствовать разные - никаких ограничений на это нет. После того как добавили атрибуты, смотрим исходный код страницы, чтобы выяснить какие именно индексы каждому из них были присвоены в JoomShopping.
Например:
Теперь самое время поместить в каталоги наши картинки. При этом имена картинок, присваиваются в соответствии с шаблоном:
//tn: N_name, or -nN-oO-mM-[X-Y-]D|d_name
//nN - one/two digit for attribute, if "0" - then not use
//oO option to select (0 - first, 1 - second, etc)
//mM - one/two digit for free attribute, if "0" then not use
//X (1-4 digits) - X size, Y - size for scale original and use it in preview
//Dd - "d" - as default, D - put name also under picture
//Example: -11-4-2-50-50-D_name or -11-4-0-d_name or 2_name
"name" - Это название материала, если из нескольких слов, то пробелы заменяем подчеркиванием.
nN - одно/двух значное значение "атрибута", который должен устанавливаться при выборе этого "превью" материала (клике на нем). В нашем примере выше это "13".
oO - это номер опции данного атрибута (по порядку начиная с 0), которая должна выбираться. Например в нашем примере, если при его выборе добавляется 10 процентов к цене. то "1" (0 если первая опция - 0 процентов).
mM - это индекс поля независимого атрибута, куда будет вписано название, в нашем случае "1".
Важно - Если Вы используете только один из атрибутов, то соответствующее nN или mM должно быть прописано как "0" для отключения, иначе скрипт попытается искать несуществующий атрибут и возникнет ошибка.
D/d - большое "D" использовать только вместе с параметрами X и Y, иначе возможно некорректное отображение. "d" - отображать как обычно (название картинки материала только во всплывающем окне, при наведении курсора), "D" - также добавляется подпись снизу под превью соответствующей картинки материала. Использовать только с X-Y, потому что без них не будет добавлено место для этой надписи, если без них - нужно внести соответствующую коррекцию в в каталоге "Classic" d CSS самостоятельно.
X, Y - нужны, в случае если на одном сайте, могут быть разные размеры "превью". В моем случае были например таблицы с материалами оббивки, количество которых исчислялось тысячей, и таблицы с материалами, которых пару десятков, и которые можно показывать покрупнее, и с названием под ними. В таком случае, в настройках галереи, указываем размеры превью для самого массового варианта - в моем случае он был установлен в 35х35. А через X и Y назначаем для необходимых картинок любой другой нужный нам размер превью в точках. При этмо нужно помнить, что если Вы их назначили, и учитывая что "автоматическски созданные" картинки превью могут иметь слишком маленький размер, который при "растягивании" может выглядеть очень плохо, как только Вы указали алдтернативные размеры, в "превью" таблице соответствующего материала, будет использоваться оригинальное изображение, отформатированное в браузере до соответствующего размера, указанного Вами.
Вот примеры имен файлов, которые получаются:
-13-0-1-200-135-D_Бук.jpg
-13-0-1-135-135-D_Венге_Тёмный.jpg
Важно - расширение должно быть обязательно ".jpg", не ".jpeg", и тем более не ".png".
Также возможен альтернативный синтаксис, оставшийся "в наследство от первой версии" (влом было все переименовывать, поэтому оставил как исключение):
N_Имя_картинки.jpg, где N - "Класс" - Работает толкьо если у Вас на сайте один единственный атрибут и один единственный независимый атрибут. При клике на превью соответствующей картинки, имя будет вписано в независимый атрибут, и будет выбрана соответствующая по счету опция "зависимого" (1_ - нулевая, 2_ первая итд). К использованию этот вариант не рекомендую как не универсальный.
Фича Если пользователь кликнул на "превью" а потом перелистывает уже "полноразмерные картинки", соответствующие картинке атрибуты выставляются в момент перелистывания каждой следующей.
Да, в качестве названия, естественно вписывается только та часть имени файла, которая идет после первого подчеркивания и подчеркивания заменяются на пробелы.
Важно ! Если Вы отлаживаете сайт например под xampp под виндовз, и потом переносите на юникс сервер, и у Вас русские имена (названия) в картинках, не забывайте, что в виндовз и юникс - разные кодировки русских имен, и соответственно, при переносе, их необходимо перекодировать.
PS Примеры как это работает Вы можете посмотреть
Вот здесь: http://www.mebelworld.com.ua/product/view/20/240
Или вот здесь: http://www.mebelworld.com.ua/product/view/7/13
На скриншотах, показаны фрагменты карточек товаров, с использованием модифицированной галереи Simple Image Gallery. При выборе нужного материала из превью, автоматически вписывается его название, и меняется цена товара, соответственно этому материалу. На первом скриншоте, в зависимости от выбранного материала, может выбираться надбавка к цене в процентах , на втором, выбирается соответствующая категория материала, и вписывается его название в карточку товара. При этом по каждому материалу при желании можно выбрать свою скидку/цену, количество добавляемых материалов не ограничено, а для добавления новых материалов, при условии что соответствующие им цены/скидки уже "забиты" в карточке товара, вообще не требуется программирование - достаточно просто скопировать файы картинок с соответствующим материалом в каталог галереи. Понятно, что если у Вас несколько разных групп товаров, с разными наборами материалов, то нужно сделать соответствующее количество шаблонов товаров в JoomShopping, к которым добавить таблицы для материалов, в соответствующих местах которых разместить ссылки на галереи, где находятся картинки с материалами.Просмотреть как это работает, Вы можете на сайте mebelworld.com.ua,
Вариант 1: http://www.mebelworld.com.ua/product/view/7/13 - с большм количеством отображаемых материалов - как на первом скриншоте. Внимание - очень много, на слабом компьютере может тормозить.
Вариант 2: http://www.mebelworld.com.ua/product/view/20/240 - это пример второго варианта, как на втором скриншоте.
Архив с измененными файлами галереи (V1, если будут новые версии позже добавлю) можно скачать вот отсюда: https://drive.google.com/file/d/0B8_buLPe3IyPdThseHZVOS1Tb3c/view?usp=sharing
В нем каталог, который нужно поместить в /templates/ИмяШаблонаКоторыйИспользуете/html/jw_sig, и файл popup.php, которым нужно заменить оригинальный файл галереи, лежащий в: /plugins/content/jw_sig/jw_sig/ncludes/js/jquery_fancybox. На всякий случай, рекомендую оригинальный просто переименовать. Следует помнить , что в случае обновления версии Simple Image Plugin for Joomla, указанный файл нужно снова заменить, так как он будет перезаписан при обновлении.
Теперь делаем шаблоны для тех товаров, к которым необходимо добавить таблицы с материалами. В нужно месте ставим код со ссылками на галерею, с указанием каталогов, если у Вас материалы будут разбиты по каталогам (это не обязательно), например вот так:
<table>
<col span="7">
<tr><td class="mattableh1">I Клас</td><td class="mattableh2">II Клас</td><td class="mattableh3">III Клас</td><td class="mattableh4">IV Клас</td><td class="mattableh5">V Клас</td><td class="mattableh6">VI Клас</td><td class="mattableh7">VII Клас</td></tr>
<tr>
<td class="mattablec1"><?php echo JHTML::_('content.prepare', '{gallery}K1{/gallery}'); ?></td>
<td class="mattablec2"><?php echo JHTML::_('content.prepare', '{gallery}K2{/gallery}'); ?></td>
<td class="mattablec3"><?php echo JHTML::_('content.prepare', '{gallery}K3{/gallery}'); ?></td>
<td class="mattablec4"><?php echo JHTML::_('content.prepare', '{gallery}K4{/gallery}'); ?></td>
<td class="mattablec5"><?php echo JHTML::_('content.prepare', '{gallery}K5{/gallery}'); ?></td>
<td class="mattablec6"><?php echo JHTML::_('content.prepare', '{gallery}K6{/gallery}'); ?></td>
<td class="mattablec7"><?php echo JHTML::_('content.prepare', '{gallery}K7{/gallery}'); ?></td></tr>
</table>
В каталогах соответственно K1,K2, etc у меня лежат соответствующие файлы картинок для галереи. Сами каталоги, являются подкаталогами каталога картинок, который Вы указали при начальной настройке SimpleImageGallery.Теперь нам нужно наладить взаимодействие. Для этого, добавляем в карточку нужные атрибуты. Каждому материалу может соответствовать один (или ни одного) зависимый и один (или ни одного) независимый атрибут (например цена и название). При этом при необходимости, разным материалам могут соответствовать разные - никаких ограничений на это нет. После того как добавили атрибуты, смотрим исходный код страницы, чтобы выяснить какие именно индексы каждому из них были присвоены в JoomShopping.
Например:
<td class="attributes_title"> <span class="attributes_name">Додатково:</span><span class="attributes_description"></span> </td> <td> <span id='block_attr_sel_13'> <select id="jshop_attr_id13" name="jshop_attr_id[13]" class = "inputbox" size = "1"
onchange="setAttrValue('13', this.value);">
<option value="16" selected="selected">+0%</option>
<option value="14">+10%</option></select><span class='prod_attr_img'>........................................................
<table class="jshop"> <tr> <td class="name"><span class="freeattribut_name">Назва матеріалу</span> <span class="freeattribut_description">
</span></td> <td class="field"><input type="text" class="inputbox" size="40"
name="freeattribut[1]" value="" /></td> </tr>Смотрим. Интересующий нас индекс поля свободного атрибута, в котором мы будем присваивать название - 1. Индекс поля атрибута, в данном случае наценки в процентах, "13".
Теперь самое время поместить в каталоги наши картинки. При этом имена картинок, присваиваются в соответствии с шаблоном:
//tn: N_name, or -nN-oO-mM-[X-Y-]D|d_name
//nN - one/two digit for attribute, if "0" - then not use
//oO option to select (0 - first, 1 - second, etc)
//mM - one/two digit for free attribute, if "0" then not use
//X (1-4 digits) - X size, Y - size for scale original and use it in preview
//Dd - "d" - as default, D - put name also under picture
//Example: -11-4-2-50-50-D_name or -11-4-0-d_name or 2_name
"name" - Это название материала, если из нескольких слов, то пробелы заменяем подчеркиванием.
nN - одно/двух значное значение "атрибута", который должен устанавливаться при выборе этого "превью" материала (клике на нем). В нашем примере выше это "13".
oO - это номер опции данного атрибута (по порядку начиная с 0), которая должна выбираться. Например в нашем примере, если при его выборе добавляется 10 процентов к цене. то "1" (0 если первая опция - 0 процентов).
mM - это индекс поля независимого атрибута, куда будет вписано название, в нашем случае "1".
Важно - Если Вы используете только один из атрибутов, то соответствующее nN или mM должно быть прописано как "0" для отключения, иначе скрипт попытается искать несуществующий атрибут и возникнет ошибка.
D/d - большое "D" использовать только вместе с параметрами X и Y, иначе возможно некорректное отображение. "d" - отображать как обычно (название картинки материала только во всплывающем окне, при наведении курсора), "D" - также добавляется подпись снизу под превью соответствующей картинки материала. Использовать только с X-Y, потому что без них не будет добавлено место для этой надписи, если без них - нужно внести соответствующую коррекцию в в каталоге "Classic" d CSS самостоятельно.
X, Y - нужны, в случае если на одном сайте, могут быть разные размеры "превью". В моем случае были например таблицы с материалами оббивки, количество которых исчислялось тысячей, и таблицы с материалами, которых пару десятков, и которые можно показывать покрупнее, и с названием под ними. В таком случае, в настройках галереи, указываем размеры превью для самого массового варианта - в моем случае он был установлен в 35х35. А через X и Y назначаем для необходимых картинок любой другой нужный нам размер превью в точках. При этмо нужно помнить, что если Вы их назначили, и учитывая что "автоматическски созданные" картинки превью могут иметь слишком маленький размер, который при "растягивании" может выглядеть очень плохо, как только Вы указали алдтернативные размеры, в "превью" таблице соответствующего материала, будет использоваться оригинальное изображение, отформатированное в браузере до соответствующего размера, указанного Вами.
Вот примеры имен файлов, которые получаются:
-13-0-1-200-135-D_Бук.jpg
-13-0-1-135-135-D_Венге_Тёмный.jpg
Важно - расширение должно быть обязательно ".jpg", не ".jpeg", и тем более не ".png".
Также возможен альтернативный синтаксис, оставшийся "в наследство от первой версии" (влом было все переименовывать, поэтому оставил как исключение):
N_Имя_картинки.jpg, где N - "Класс" - Работает толкьо если у Вас на сайте один единственный атрибут и один единственный независимый атрибут. При клике на превью соответствующей картинки, имя будет вписано в независимый атрибут, и будет выбрана соответствующая по счету опция "зависимого" (1_ - нулевая, 2_ первая итд). К использованию этот вариант не рекомендую как не универсальный.
Фича Если пользователь кликнул на "превью" а потом перелистывает уже "полноразмерные картинки", соответствующие картинке атрибуты выставляются в момент перелистывания каждой следующей.
Да, в качестве названия, естественно вписывается только та часть имени файла, которая идет после первого подчеркивания и подчеркивания заменяются на пробелы.
Важно ! Если Вы отлаживаете сайт например под xampp под виндовз, и потом переносите на юникс сервер, и у Вас русские имена (названия) в картинках, не забывайте, что в виндовз и юникс - разные кодировки русских имен, и соответственно, при переносе, их необходимо перекодировать.
PS Примеры как это работает Вы можете посмотреть
Вот здесь: http://www.mebelworld.com.ua/product/view/20/240
Или вот здесь: http://www.mebelworld.com.ua/product/view/7/13
Комментариев нет:
Отправить комментарий