Показаны сообщения с ярлыком JavaScript. Показать все сообщения
Показаны сообщения с ярлыком JavaScript. Показать все сообщения

среда, 17 августа 2011 г.

Magento: меняем фотографии товара, для Configurable продуктов

Сегодня попробуем сделать следующее:

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

1) Откроем файл
app/design/frontend/*/*/template/catalog/product/view.phtml

Заменим


var optionsPrice = new Product.OptionsPrice(getJsonConfig() ?>);

на


var optionsPrice = new Product.OptionsPrice(getJsonConfig() ?>);
var assocIMG =  
getTypeId() == "configurable") {
        echo "{";
        $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
        foreach ($associated_products as $assoc)
            $dados[] = $assoc->getId().":'".($assoc->image == "no_selection" || $assoc->image == "" ? $this->helper('catalog/image')->init($_product, 'image', $_product->image)->resize(365,400) : $this->helper('catalog/image')->init($assoc, 'image', $assoc->image)->resize(365,400))."'";
    } else {
        $dados[] =  "''";
    }
    echo implode(',', $dados );     
    if ($_product->getTypeId() == "configurable") {
        echo "}";
    }

2) Oткроем
app/design/frontend/*/*/template/catalog/product/view/type/options/configurable.phtml

Заменим

var spConfig = new Product.Config(getJsonConfig() ?>);

на

var spConfig = new Product.Config(getJsonConfig() ?>);
var selectedAssocProducts = {};


3) Файл
js/varien/configurable.js

a) Добавляем в самое начало файла

if(typeof selectedAssocProducts=='undefined') {
    var selectedAssocProducts = {};
}


b) В функцию configureElement : function(element), сразу после this.reloadPrice() добавляем


if (!element.value || element.value.substr(0,6) == 'choose') return; // Selected "choose option"
var attributeId = element.id.replace(/[a-z]*/, '');
for (var a in this.config.attributes)
{
    for (i = 0; i < this.config.attributes[a].options.length; i++)
    {
        if (this.config.attributes[a].options[i].id != element.value) continue;
        selectedAssocProducts[a] = this.config.attributes[attributeId].options[i].products;
    }
}
var productNo = intersect(selectedAssocProducts) || selectedAssocProducts[attributeId][0];
$('image').src = assocIMG[productNo];
c) Меняем метод resetChildren : function(element) на
resetChildren : function(element){
    delete selectedAssocProducts[element.config.id]; 
    if(element.childSettings) {       
        for(var i=0;i < element.childSettings.length;i++){
	    element.childSettings[i].selectedIndex = 0;
	    element.childSettings[i].disabled = true;               
	    delete selectedAssocProducts[element.childSettings[i].config.id]; 
	    if(element.config){
	        this.state[element.config.id] = false;                   
            }
        }
    }},
d) В конец файда добавляем:
function intersect(ar) // ar can be an array of arrays or an asssociative array
      {
          if (ar == null) return false;
          var a = new Array();
          if (ar.length == undefined) // Associate Array
          {       
              for (var i in ar)
               a.push(ar[i]);       
          }     
          else
           a = ar;
         
          if (a.length == 1) return false; // Single array ? Nothing to intersect with
          var common = new Array();
          function loop(a, index, s_index, e_index)
          {               
              if (index == null) index = 0;
              if (s_index == null) s_index = 0;
              if (e_index == null) e_index = a[index].length;
              if (index == a.length - 1) return;           
              for (var i = s_index; i < e_index; i++)
              {
                  if (common.indexOf(a[index][i]) != -1) continue;
                  for (var j = 0; j < a[index + 1].length; j++)
                  {
                      if (a[index][i] != a[index+1][j]) continue;                       
                      loop(a, index + 1, j, j + 1);
                      if (index + 1 == a.length - 1) { common.push(a[index][i]); break; }                       
                  }
              }           
          }       
          loop(a);
          return common;
      }

Сохраняем все. И готово.

Не забывайте! что мы правили js файл configurable.js следовательно если Вы решите обновить систему, то этот файл потрется. Не забудьте сделать копию предварительно.

Взято, ПРОВЕРЕНО, изменено и переведено отсюда 

четверг, 25 сентября 2008 г.

Google Maps API - введение

Решил изучить немного Google Maps API. Ну и задокументировать чтобы потом мог легко вспомнить. Авось и не только мне пригодится.

Google Maps API позволяет использовать карты Google для Ваших сайтов. Имеется конечно и официальная документация (пока что вся на Английском).

http://code.google.com/intl/ru/apis/maps/documentation/

Начнемс…
Сначала необходимо зарегистрировать свой сайт и получить ключ. Это можно сделать тут:

http://code.google.com/apis/maps/signup.html

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



Как можно легко догадаться, этот ключик используется при подключении библиотеки, вот так:


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;
key=ABQIAAAAqYpqANy2ZhPGgzZQGir01BTif9xST6-
EmBWoJN14Z8KLoR80XBTf_F2pFIKVTQmZq4YaGqQz66pNAg"
type="text/javascript"></script>




А вот код самой просто странички



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIA"
type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>



А в теге body необходимо размещение обьекта с id=’map’

Теперь немного о функциях управления картой.

1) map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Функция задает центр карты. Т.е. при открытии страницы с картой, она будет отцентрована по заданным координатам (необходимые координаты можно получить зайдя на maps.google.com и найдя нужное место).

2) setMapType() – задает отображаемый тип карты, которых на данный момент существует 3 штуки

a. Спутник - map.setMapType(G_NORMAL_MAP);
b. Нормальная - map.setMapType(G_SATELLITE_MAP);
c. Смешанная - map.setMapType(G_HYBRID_MAP);

3) Также можно добавить элементы управления картой

map.addControl(new GSmallMapControl()); - зумирование, и стрелочки перемещения.
map.addControl(new GLargeMapControl()); - аналогично предыдущему, но отображается и шкала зумирования
map.addControl(new GSmallZoomControl()); - отображается исключительно кнопки «+» и «-»
map.addControl(new GMapTypeControl()); - кнопки переключения между режимами карты
map.addControl(new GOverviewMapControl()); - отображение миникарты в правом нижнем углу

4) Ну и самое интересное это размещение меток на карте.

var marker = new GMarker(new GLatLng(37.4419, -122.1419));
map.addOverlay(marker);

И подписи к ним:

var html="Тут что-то расположено";
marker.openInfoWindowHtml(html);


5) map.panTo(new GLatLng(37.4569, -122.1569)) – автоматическое передвижение карты. Т.е. можно поставить прерывание например функцией window.setTimeout, и потом переместить карту в какую-либо точку.

6) Данный пример реагирует на перемещение карты и отображает новые координаты центра:

map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});


7) Вывод окна сообщения без установки метки.

map.openInfoWindow(map.getCenter(), document.createTextNode
("Привет!"));

8) А данный код рисует произвольную ломанную через 5 точек

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GLatLng(southWest.lat() + latSpan *
Math.random(), southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));





9) Перехват щелчков по карте. При перехвате события «click» (щелчок) мы получаем два параметра:
• щелкнут маркер;
• координаты щелчка.
Если щелкнут не маркер (а карта), то первый параметр равен нулю.

В листинге 1 пользователь щелкает по карте и по координатам щелчка появляется маркер. Когда пользователь щелкает по маркеру, маркер удаляется.

Листинг 1.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});

10) Вывод инфоокон над маркерами. В следующем коде мы перехватываем клик и показываем окно над маркером. Здесь используются замыкания JavaScript для создания контента инфоокна для каждого маркера.

// Создаем маркер с номером point, заданным и текстом label


function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #" + number + "");
});
return marker;
}
// Размещаем 10 маркеров по случайным координатам
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() — southWest.lng();
var latSpan = northEast.lat() — southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan *
Math.random(), southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}





11) Информационные окна с закладками. Вторая версия Google Maps API дает нам классы openInfoWindowTabs() и GinfoWindowTab, поддерживающие закладки, которым можно присваивать отдельные имена. Пример в листинге 2 показывает простое окно с закладками над маркером.

Листинг 2.
 
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Содержимое инфоокна
var infoTabs = [
new GInfoWindowTab("Закладка #1", "Содержимое закладки #1"),
new GInfoWindowTab(" Закладка #2", "Содержимое закладки #2")
];
// Размещает маркер в центре окна автоматически.
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);

12) Создание пользовательских пиктограмм. Пример в листинге 3 показывает мини-маркеры. Создавая новую пиктограмму, мы должны определить изображение переднего плана, теневое изображение и его координаты.


var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Создание пиктограммы для "маленького" маркера
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// "Разбрасываем" 10 маркеров по случайным координатам
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() — southWest.lng();
var latSpan = northEast.lat() — southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan *
Math.random(), southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point, icon));
}




13) Перемещаемые маркеры.
Маркеры — интерактивные объекты, которые (если это необходимо) могут перемещаться пользователем посредством мыши. В приведенном примере мы перемещаем маркер по карте, это сделано благодаря нескольким перехватываемым простым событиям. Перемещаемый маркер поддерживает четыре события:
• щелчок (click);
• начало перетаскивания (dragstart);
• перетаскивание (drag);
• отпускание (dragend).
По умолчанию маркеры доступны только для кликов и недоступны для «таскания», но эта возможность очень просто реализуется добавлением дополнительного параметра. У перемещаемых маркеров есть также параметр «бодрость» (bouncy). Если он выставлен как true (по умолчанию), то при подхватывании и отпускании маркер весело подпрыгивает. Если вам не нравится такое «безрассудное» поведение маркера — просто выставьте bouncy=false при создании маркера, и он будет приземляться изящно (см. листинг).


var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {map.closeInfoWindow();});
GEvent.addListener(marker, "dragend", function() {marker.openInfoWindowHtml("Веселый, бодрый маркер");});
map.addOverlay(marker);

14) Использование XML и асинхронного HTTP на картах. Пожалуй, одна из самых интересных возможностей Google Maps API. Пример в листинге загружает с сервера указанный XML-файл с координатами и размещает по ним маркеры.

Содержимое data.xml:





Листинг.
var map = new GMap2(document.getElementById(«map»));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GDownloadUrl(«data.xml», function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName(«marker»);
for (var i = 0; i < point =" new" id="10869" href="http://code.google.com/intl/ru/apis/maps/documentation/">http://code.google.com/intl/ru/apis/maps/documentation/