Вот мое сочинение на тему "Как я провел выходные" =)
Немного теории:
1. Везде где присутствует кнопка "Добавить в корзину" присутствуют невидимые <input>. Они нужны что бы определять какой товар ты положил к розину, сколько положил, какое название и т.д. Без них кнопка "Добавить в корзину" работать не будет. Вот одним из полей я и воспользовался, а если быть поточнее то тем, которое носит имя "virtuemart_product_id[]".
virtuemart_product_id - уникальный, обязательно присутствующий номер товара.
2. Каждому товару присвоена своя картинка, и у каждой картинки свой URL (SRC). Что бы узнать его я воспользовался javascript методом
getElementByID. Эта функция находит на странице тег с тем id, который указан в передаваемом параметре. Для этого необходимо тегу <img> добавить уникальный id... Догадываетесь откуда он береться? Да-да, именно тот самый "virtuemart_product_id". Делается это для ПРИМЕРНО так <img src="..." id='<?php $produc->virtuemart_product_id ?>'>.
3. Выводимый текст в facebox формируется в файле
components/com_virtuemart/assets/js/vmprices.js и
components/com_virtuemart/assets/js/facebox.js. Но нас интересует первый. Если к выводимому тексту добавить тег <img> с SRC нужным адресом. Этот адрес мы берем при помощи вышеописанного метода.
Надеюсь мысль мою уловили...
Итак, переделывать нам прийдется немало. Начнем пожалуй с этого самого
vmprices.jsВ нем, примерно в строках 61-84 находится функция с 3 условиями - if(datas.stat ==1), if(datas.stat ==2) и else , тобишь все остальные варианты, когда stat !=1 или 2. Переменная
stat указывает какой именно тип сообщения будет выводится - количество товаров обновлено (2) или просто товар добавлен (2) (это если в первый раз добавляешь), при других вариантах выводится окно ошибки. Вот к этим двум условимя добавляем свой код...
После строк
if(datas.stat ==1){
//var value = form.find('.quantity-input').val() ;
var txt = form.find(".pname").val()+' '+vmCartText;и
else if(datas.stat ==2){
var value = form.find('.quantity-input').val() ;
var txt = form.find(".pname").val();добавляем это:
var this_prod = form.find(".item_id").val() ;
var img_url = document.getElementById('Img_to_Js_'+this_prod).src;Что б было понятно, то 1 строка берет из того самого скрытого <input>, про которое я рассказывал в п. значение, которое равняется уникальному product_id.
Вторая строка находит картинку, у которой id равняется "Img_to_Js_" + значение уникального id , и берет из этого тега значение SRC. Осталось этот SRC подставить в нашу картинку, выводимую в сплывающем окне. Для этого находим эту строку, где-то через 5 строчек после нашего добавленного кода.
$.facebox({ text: datas.msg +"<H4>"+txt+"</H4><br />" }, 'my-groovy-style');и меняем на
$.facebox({ text: datas.msg +"<H4>"+txt+"</H4><br /><br /><img src='"+img_url+"' />" }, 'my-groovy-style')Сделать это нужно опять же 2 раза - для первого и второго условия, при ошибке выводить картинку нам не нужно.
На этом с
vmprices.js всё. Конечно вы можете подредактировать нводобавляемый тег <img> задав для него парамметры width и height, но это дело сугубо личное.
Теперь что бы скрипт брал значения product_id и путь из картинки на прийдется перелопатить все стр. , где встречается "Добавить в корзину". У кого-то это mod_virtuemart_product, у когото и в категориях кнопка (как например у меня), также есть "Главная" для VirtueMart и конечно же детальный просмотр (productdetail)... Это опять же сугубо индивидуальная работа.
Вот что собственно мы будем менять на этих страницах.
<input type="hidden" name="virtuemart_product_id[]" value="<?php echo $this->product->virtuemart_product_id ?>"/>меняем на
<input type="hidden" class="item_id" name="virtuemart_product_id[]" value="<?php echo $this->product->virtuemart_product_id ?>"/>Разница в тогм, что в измененнном коде дописан парамметр class="item_id" благодаря которому скрипт возьмёт парамметр.
Теперь необходимо поменять вывод картинки, добавив (или поменяв) парамметр "id" с уникальным значением.
Находим это:
echo $product->images[0]->displayMediaThumb ('class="browseProductImage" border="0" title="' . $product->product_name . '" ', TRUE, 'class="modal"'); меняем на
$image = $product->images[0]->displayMediaThumb('class="featuredProductImage" border="0" id="Img_to_Js_'.$product->virtuemart_product_id.'"',false) ;для детального просмотра (productdetails) эта строка выглядит так
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', false, "class='modal'", true); ?>меняем на
$image = $product->images[0]->displayMediaThumb('class="featuredProductImage" border="0" id="Img_to_Js_'.$product->virtuemart_product_id.'"',false) ;Вот собственно и все. Для тех кто не знает, то строки где мы меняли код картинки нужно искать здесь:
components/com_virtuemart/views/productdetails/tmpl/default_images.php - детальный просмотр
components/com_virtuemart/views/category/tmpl/default.php - категория (для тех кто хакал)
components/com_virtuemart/views/virtuemart/tmpl/default_products.php -главная стр. VirtueMart
modules/mod_virtuemart_product/tmpl/default.php - модуль "Товары"
Вроде все объяснил, старался как можно доходчивее изложить. В спойлере прикреплю готовый файл
vmprices.jsКак работает вся эта система при включенном увеличении картинки ( я имею ввиду, когда наживаешь на картинку и в всплывающем окне появляется этаже картинка в полном ее размере) не проверял. Кто проверит скажите. Тестить лучше, сами понимаете, на копии сайта.
Кто проверит, отпишитесь. Интересно как у других это заработает.
07.04.2020, 15:50:54
