Freecode Academy

ShopModxBox. Несколько картинок для одного товара

Shatalov_Vadim

Здравствуйте! tv параметр image позволяет загрузить ОДНУ картинку к товару, вопрос, как через TV прикрутить несколько фото к одному товару?

<body>
          <div class="img">
			<a href="img/1.jpg"  rel="example_group" id="adpdp14">
			<img src="img/1.jpg" id="dp14" style="margin-bottom: 3px;" alt="" /></a>
		  </div>
          <div class="thumbs">
            <div class="it"><a style="display:none;" href="img/1.jpg" rel="example_group"></a>
				<img src="img/1.jpg" onclick='setBigImage(this);' alt="" /></div>
            <div class="it"><a style="display:none;" href="img/3.jpg" rel="example_group"></a>
				<img src="img/3.jpg" onclick='setBigImage(this);' alt="" /></div>
            <div class="it"><a style="display:none;" href="img/4.jpg" rel="example_group"></a>
				<img src="img/4.jpg" onclick='setBigImage(this);' alt="" /></div>
            <div class="it"><a style="display:none;" href="img/5.jpg" rel="example_group"></a>
				<img src="img/5.jpg" onclick='setBigImage(this);' alt="" /></div>
            <div class="it"><a style="display:none;" href="img/6.jpg" rel="example_group"></a>
				<img src="img/6.jpg" onclick='setBigImage(this);' alt="" /></div>
            <div class="it"><a style="display:none;" href="img/7.jpg" rel="example_group"></a>
				<img src="img/7.jpg" onclick='setBigImage(this);' alt="" /></div>
            <div class="clr"></div>
          </div>
</body>

и чтобы в карточке товара эти фото привязывались

{if $object.image}
    {assign var=src value=$object.image}
{else}
    {assign var=src value=$object.imageDefault}
{/if}

<div class="span4">
    <div class="row-fluid">
        <div class="span8">
        
            <a href="{$object.image}">
                <img src="{snippet name=phpthumbof  params="input=`{$src}`&options=`w=200`"}" title="{field name=pagetitle}" align="left"/>
            </a>

Comments

Александр Марков
Александр Марков

Самое простое — добавить несколько TV, которые в шаблоне будут доступны не как $object.image, а как $object.tvs.img1, $object.tvs.img2 и т.д. или можно использовать MIGX

Николай Ланец
Николай Ланец

MIGX конечно же предпочтительней по ряду причин, в том числе и потому что не приходится 100500 ТВшек создавать. Вот я на одном проекте так докручивал галерею. В процессор получения товара дописал:

public function afterIteration(array $list){
        $list = parent::afterIteration($list);
   
        
        foreach($list as & $l){  
        
            switch($this->getProperty('image_url_schema')){
                case 'base':
                    $images_base_url = $this->modx->runSnippet('getSourcePath');
                    break;
                
                case 'full':
                    $images_base_url = $this->modx->getOption('site_url');
                    $images_base_url .= preg_replace("/^\//", "", $this->modx->runSnippet('getSourcePath'));
                    break;
                
                default: $images_base_url = '';
            }      
            /*
                Картинки
            */
            $l['images'] = array();
            
            if(!empty($l['tvs']['images']['value'])){
                $images = json_decode($l['tvs']['images']['value'], true);
                foreach($images as $image){
                    $image['image'] = $images_base_url.$image['image'];
                    $l['images'][] = $image;
                }
            }
        }
        return $list;
    }

А в шаблоне уже оформление по своему вкусу. У меня это вот так:

{if $object.images}
                    {foreach $object.images as $img}
                        {snippet name="phpthumbof" params="input=`{$img.image}`&options=`w=65&h=65&q=90`" assign=thumb}
                        <a rel="useZoom: 'zoom1', smallImage: '{$thumb}'" title="" href="{$img.image}" class="cloud-zoom-gallery">
                            <img alt="" src="{$thumb}">
                        </a>
                    {/foreach}
{/if}
Shatalov_Vadim

а как быть с

foreach($list as & $l){
            $l['image'] = '';
            if(!empty($l['tvs']['image']['value'])){
                $l['image'] = $images_base_url . $l['tvs']['image']['value'];
            }
            else{
                $l['imageDefault'] = $images_base_url . 'products/no_photo.png';
            }
        }
Александр Марков
Александр Марков

А это уже дело вкуса. Тут просто проверяется, задана ли картинка, и если нет — вставляется дефолтовое изображение. Но это можно и в Smarty сделать.

Николай Ланец
Николай Ланец

Если вы хотите дописать это (получение галереи товара) в исходный процессор получения товаров, то вы все это объединяете в одном цикле, то есть получится так:

public function afterIteration(array $list){
        $list = parent::afterIteration($list);
        
        switch($this->getProperty('image_url_schema')){
            case 'base':
                $images_base_url = $this->modx->runSnippet('getSourcePath');
                break;
                
            case 'full':
                $images_base_url = $this->modx->getOption('site_url');
                $images_base_url .= preg_replace("/^\//", "", $this->modx->runSnippet('getSourcePath'));
                break;
                
            default: $images_base_url = '';
        } 
        
        foreach($list as & $l){
            // Базовая картинка
            $l['image'] = '';
            if(!empty($l['tvs']['image']['value'])){
                $l['image'] = $images_base_url . $l['tvs']['image']['value'];
            }
            else{
                $l['imageDefault'] = $images_base_url . 'products/No-Photo.jpg';
            }
            
            /*
                Картинки
            */
            $l['images'] = array();
            
            if(!empty($l['tvs']['images']['value'])){
                $images = json_decode($l['tvs']['images']['value'], true);
                foreach($images as $image){
                    $image['image'] = $images_base_url.$image['image'];
                    $l['images'][] = $image;
                }
            }
        }
        return $list;
    }

А если вы расширяете процессор, то за это не паритесь, потому что там все равно вызывается родительский метод, так что картинка будет учтена и базовая.

public function afterIteration(array $list){
        $list = parent::afterIteration($list);

В общем, здесь конечно же хорошо бы ООП понимать.

ylarus
ylarus

Только начала изучать. ShopModxRev Решила так. Установила пакет gallery и в товаре прямо загружаю фото в текстовый редактор, сколько хочу. Мышкой их уменьшаю до нужного мне размера и на сайте они увеличивпются.

Александр Марков
Александр Марков

Очень интересно. Адрес странички можно узнать? Как выглядит код картинки, если отключить визуальный редактор?

Николай Ланец
Николай Ланец

Саш, если просто вставить картинки в текстовом редакторе, они всплывать не будут. Это как минимум надо плагин DirectResize включать или типа того.

Александр Марков
Александр Марков

Я так понял, что девушка задает один размер, а на сайте картинка отображается другого размера. Я сам вообще не пользуюсь визуальными редакторами, и картинки выводить в поле контента - это по-моему не совсем удобно. :)

Николай Ланец
Николай Ланец

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

Николай Ланец
Николай Ланец

Достойный сайт получился!:) Так в итоге как именно ваш метод работает? DirectResize используете? P.S. Постараюсь в обозримом будущем накидать подробный мануал для создания галерей на базе Migx.

Shatalov_Vadim

TinyMCE визуальный HTML редактор, фото закидываю в описание товара указывая размер, описание, и т.д утомительно но продуктивно...

Николай Ланец
Николай Ланец

Незадокументированные возможности ShopModxBox :)

Дело в том, что в сборке установлен плагин DirectResize, который и дает в данном случае этот эффект. То есть перед тем, как MODX отдаст конечных HTML, срабатывает этот плагин, находит в коде картинки, для которых размеры указаны меньше, чем их реальный размер, и эти картинки заменяются на всплывашки.

Кстати, в DirectResize входит три разных JS-скрипта, и вы можете попробовать в настройках плагина изменить используемый скрипт.

Александр Марков
Александр Марков

А на нельзя задавать JS-скрипты в шаблонах? чтобы на одной страничке одни картинки через highslide обрабатывались, а другие через prettyphoto? Было бы очен удобно :)

Николай Ланец
Николай Ланец

Можно конечно поэкспериментировать на предмет того, чтобы устанавливать различные настройки через $modx->setOption(), но вряд ли сработает, так как в первую очередь учитываются настройки самого плагина, а значит без хардкода вообще никак :) Проще вручную прописать либы в шаблонах и все.

ylarus
ylarus

Я не хвастаюсь. Просто может кому нибудь пригодиться! Вот и все. Вот ссылка (сайт в процессе создания) http://iconist.ru/catalog/muzhskaya-odezhda/dzhinsyi/dzhinsyi-kingz-1294.html код к картинке не добавляю. Но если посмотреть исходный код страницы, к ссылки приписывается класс и oncluk, но в текст.редакторе ничего не меняется и кроме картинки ничего не добавляю. Для пользователя который раньше не наполнял сайт в текз.ред вполне удобно)). Есть недостаток, на андройде в браузере.

Николай Ланец
Николай Ланец

Я не хвастаюсь. Просто может кому нибудь пригодиться!

Я вас не пытался обидеть, просто не было понятно спрашиваете вы про что-то или уже опытом делитесь. Как я и написал ниже, это "виноват" плагин DirectResize.