Галлерея для продуктов galleriffic.js. Реализация.

Главные вкладки

Аватар пользователя roma4ke roma4ke 21 августа 2012 в 2:48

У content type PRODUCTS я создал поле gallery тип image. Добавил туда кучку картинок, максимум 10, но 6 достаточно.
Суть в том что для galleriffic.js нужно 2 ссылки - на большую картинку и маленькую (thumb). Я сделал это так (дописываем в preprocess_node_product):

if($variables['page']){ // нужно только на странице товара.
         $gallery = field_fetch_field_values('node', $node, 'field_gallery',NULL,'uri'); // функция рабочая, описывал в первом посте.
        foreach ($gallery  as $item=>$img_uri) {
         $full_img_src = image_style_url('large', $img_uri);  // ccылка на стиль large (scale width 600).
         $thumb_img_src = image_style_url('product_thumb', $img_uri);// ccылка на стиль product_thumb (scale width 70).
         
         $variables['gallery'][$item]='<strong><li><a class="thumb" name="two" href='.$full_img_src.' title="image of '.$variables['title'].'">
                <img class="item_thumb" src='
.$thumb_img_src.' />
                        </a>
                 </li>'
;</strong>  // вот такой формат нужен для gallericic.js ссылка на полную картинку и маленькая картинка

        }      
 }

Создали переменную масив gallery в нужном нам формате для gallerific.js. Идем в node--product.tpl.php

<?php else: ?>
  <div id="content">
 //Галлерея - как сказали в gallerific, кстати нужно еще подключить css файл, но тут пока не до сss. стили сцепите вконце проекта.
  <strong> <div id="photos">
                <div class="slideshow-container">
                                                <div id="loading" class="loader"></div>
                                                <div id="slideshow" class="slideshow"></div>
                </div> 
        </div></strong>
   
  <div id="product-info">
               
<div class="simpleCart_shelfItem">      // название класса для simplecart.js все что в нём под названиями item_[type] будет выхватываться в корзину. нам нужно только то имя, цена и одна картинка.      
        <!-- /#product info -->
        <h1 class="<strong>item_name</strong>"><span><?php print $title; ?></span></h1><br><h1><span class="currency_sign <strong>item_price</strong>">$<?php print $price; ?></span></h1>             
        <? print render($content['body']);?>

<div id="thumbs">                            
        <div class="top pagination"></div>
    <ul class="thumbs noscript">    
        <?php
        foreach ($gallery as $key=>$value) {        // a вот и малышки ссылочки для галлереи. выводим их.
                print $value;
                }
                ?>  
    </ul>
    <div class="bottom pagination"></div>    
</div> 

------------------- // вот этой частью сейчас занимаюсь. Вывод формы для типов товаров как в options для еcommerce. Хотя для моего проекта можно и так оставить. Так как будет только одежда. Хотя попробую использовать модуль options для еcommerce может получиться. Ну это потом, отпишусь.
        <h3>Size</h3>                              
        <select class="item_size">
            <option value="Small">S</option>
            <option value="Medium">M</option>
            <option value="Large">L</option>
        </select>      

-------------------

  <a class="item_add hudbtn primary " href="javascript:;"> Add to Cart </a></p>    
               
        </div>

// ссылки на следующий и предыдущи - описывал в предыдущем посте.

        <div class="prod-nav">
  <ul id="node-navigation">
    <li class="next"><?php print pn_node($node, 'n'); ?></li>
    <li class="prev"><?php print pn_node($node, 'p'); ?></li>
  </ul>

        </div>
       
       
        </div>
</div>
<?php endif; ?>

Ну пока все. Страница продукта готова. У нас есть имя продукта, цена, описание (body), галлерея картинок, размер, и кнопка добавить в карзину. В следующей посте расскажу про настройку javascript для simplecart.js. По моему мнению - для маленьких магазинов - быстро и удобно.