Перейти к содержимому


Фото
* * * * * 2 голосов

Удивительный слайдер товара для Simpla CMS

слайдер

  • Чтобы отвечать, сперва войдите на форум
18 ответов в теме

#1 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 19.05.2014 - 15:36

Доброго дня уважаемые форумчане!

 

Интересен кого слайдер для товара?

____________________слайдер:_________________________

    Оригинальное название: jQuery iView Slider v2.0

    Автор слайдера:               Hemn Chawroka

 

__________________принцип работы:____________________

Админ часть []

    1.    Устанавливаем "галочку" в карточке товара ~ @слайд-шоу

    2.    Загружаем фон для товара (изображение)

    3.    Все готово! :)

    Дополнительно: возможность фильтровать в ProductsAdmin 

    - одновременно несколько товаров выложить / спрятать в слайдере 

    - фильтр на товары выложенные в слайдере (принцип: Рекомендуемые товары)

* Если товары не выложены, то слайдер отсутствует (*на стороне пользователя)

 

Пользователь []

    1.    Получает интересный баннер, плавные эффекты

    2.    Переход с "слайда" на "карточку товара"

* Дополнительные телодвижения так же можно накидать (пример: быстрый просмотр, поделиться и т.д.

 

_____________________________________________________

 



#2 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 19.05.2014 - 15:39

Если кому интересно выложу доп. материалы (screen / video) 

 

PS DEMO извините нема =( на localhost играюсь :)



#3 Yaroslav

Yaroslav
  • Пользователь
  • 32 сообщений
  • Заказчик
  • Версия CMS:2.x
  • Откуда:Санкт-Петербург

Опубликовано 19.05.2014 - 16:31

Если кому интересно выложу доп. материалы (screen / video) 

 

PS DEMO извините нема =( на localhost играюсь :)

Конечно, выкладывайте, полезное дополнение :)



#4 chocolate_moles

chocolate_moles
  • Фрилансер
  • 433 сообщений
  • Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Санкт-Петербург

Опубликовано 19.05.2014 - 18:05

Слайдер сам по себе громоздкий. К тому же не обновлялся два года. К тому же его нужно настраивать и руками прописывать все эти надписи. А если просто загружать в него картинки, то это не имеет никакого смысла, когда можно установить самый обычный nivo-slider



#5 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 19.05.2014 - 19:27

Слайдер сам по себе громоздкий. К тому же не обновлялся два года. К тому же его нужно настраивать и руками прописывать все эти надписи. А если просто загружать в него картинки, то это не имеет никакого смысла, когда можно установить самый обычный nivo-slider

Зачем руками!?

1. Все данные А. Графические В. Текстовые берутся с карточки товара

2. При необходимости можно так же вывести в отдельный модуль настройки эффектов и настроек слайдера



#6 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 19.05.2014 - 19:29

Уважаемые знатоки! 

 

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

 

 

PS. Заранее благодарю! 



#7 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 19.05.2014 - 20:12

Видео на YouTube

 

Без погрузки фона, через часик думаю выложу с фоном



#8 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 20.05.2014 - 02:48

извините за ожидание - все готово! =)



#9 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 20.05.2014 - 02:51

zdjh5J1a9K4.jpgRnw-UW4mA-k.jpg



#10 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 20.05.2014 - 03:18

Слайдер выполняет следующие задачи:

1. Просто использования

    * для того что бы товар попал в слайд-шоу, достаточно отметить либо в карточки товара (добавление конкретного товара), либо указать в фильтре списка товаров (разом несколько товаров)

    * ни надо писать "ручками" какие либо данные, все данные берутся с __products, отличие от остальных товаров загрузка фона для данного товара

2. Анимация и Адаптация 

    * скрипт тестировал на IE8+, WebKit браузеры - вопрос нет

    * в отличии от банальных слайдеров (лева-права), в данном случае эффекты берутся со стандартных jQuery-UI + прописаны индивидуальные переходы

    * слайдер удобен отсутствием технических границ на выход информации

**** есть косячек, `contener` слайдера только с абсолютными width и height, скажем там, можно перевести в c px в %, но часть функционала теряется 

3. Дизайн

    * в данном случаем (то что уже сделано) положение элементов однотипное, т.е. в шаблоне tpl расстановка элементов, тип эффекта и т.д. прописана одна для всех, есть вариант вывести данные для ручной настрой по прицепу заполнение товара :) выбрал из списка опцию и радуйся 

    * вкл/выкл слайдера = зависит от наличия товара в нет, если убрать товары с слайдера, то он соответственно пропадет, что бы снова появился, достаточно добавить 1+ товар

+ т.к. данные берутся с товара, то и соответственно кнопка купить, сравнение, поделиться и т.д. без проблем вешается в шаблон

+ можно разместить где только душа пожелает

 

Ну вроде бы все... мой личный вердикт: "Начало положено, можно и больше!"

 

 

Вот теперь жду суровой критики :) Господа знатоки!



#11 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 21.05.2014 - 15:30

Хм.. видно ток мне понравилась идя.... :(

 

Надо кому слайдер / принцип создания аналогичных манипуляций с товарами?



#12 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 21.05.2014 - 16:05

Во! 

 

DEMO-слайдер + админка [admin / admin]

 

ссылка



#13 Yaroslav

Yaroslav
  • Пользователь
  • 32 сообщений
  • Заказчик
  • Версия CMS:2.x
  • Откуда:Санкт-Петербург

Опубликовано 21.05.2014 - 19:25

Во! 

 

DEMO-слайдер + админка [admin / admin]

 

ссылка

Слайдер понравился, выложите инструкцию по установке на Simpla, один уже есть, будем ставить как второй :)



#14 FDA

FDA
  • Пользователь
  • 45 сообщений
  • Пользователь
  • Версия CMS:2.x
  • Откуда:РФ

Опубликовано 23.05.2014 - 01:37

Во! 

 

DEMO-слайдер + админка [admin / admin]

 

ссылка

Слайдер норм.

Инструкция будет?



#15 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 24.05.2014 - 05:15

Да, в понедельник вечером по мск (подробная инструкция), сейчас немного занят, если кому интересно самому сделать:

1. Создаем доп. поля для s_products

  ALTER TABLE `s_products` ADD `slider` tinyint(1) DEFAULT NULL,;  // фильтр Слайдер Off/On
  ALTER TABLE `s_products` ADD `image` VARCHAR( 255 ) NOT NULL;    // изображение data-iview:image

2. Проводим аналогию в featured

файлы:

           view/View.php       // устанавливаем Smarty Plagin

           api/Products.php  // добавляем в get_ и count_ фильтр

           simpla/ProductAdmin.php // добавляем post запрос

           simpla/ProductsAdmin.php  //добавляем фильтр в update_product

           simpla/design/html/product.tpl,

           simpla/design/html/products.tpl // добавляем checkbox, option, script - по аналогии featured 

3. Загрузка изображения

           api/Products.php // добавляем таблицу

           simpla/ProductAdmin.php // добавляем обработчик

           config/config.php // добавляем папку в которую будет загрузка изображения

           simpla/design/html/product.tpl // добавляем input на загрузку 

 

4. По прицепу и подобию featured выводим в шаблон 

 

 

PS Все уже придумано, вопрос с какого угла смотреть



#16 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 27.05.2014 - 09:25

/** инструкция **/
 
1. Запрос в БД

 

    ALTER TABLE `s_products` ADD `slider` tinyint(1) DEFAULT NULL; 
    ALTER TABLE `s_products` ADD `image_slider` VARCHAR( 255 ) NOT NULL;

 

 
2. Открываем api/Products.php
    2.1 Функция get_products [*строка ~ 28]
        2.1.1     После 
$in_stock_filter = ''; [*строка ~ 41]
                Добавляем
$is_slider_filter = '';

 

        2.1.2    После
 if(!empty($filter['features'])...
                            ..., $feature, $value); [*строка ~ 103]
                Добавляем
 
if(!empty($filter['slider']))
   $is_slider_filter = $this->db->placehold('AND p.slider=?', intval($filter['slider']));
        2.1.3    В запросе к БД $query = "SELECT [*строка ~ 110]
После p.featured, [*строка ~ 120]
                Добавляем
p.slider,
p.image_slider,

 

 

        2.1.4    После 
$in_stock_filter [*строка ~ 138]
                Добавляем
$is_slider_filter
    2.2 Функция count_products [*строка ~ 158]
        2.2.1    После 

 

$in_stock_filter = ''; [*строка ~ 166]
                Добавляем 
 $is_slider_filter = '';
        2.2.2    После
 if(!empty($filter['features'])...
                        ..., $feature, $value); [*строка ~ 200]
                Добавляем
if(!empty($filter['slider']))
      $is_slider_filter = $this->db->placehold('AND p.slider=?', intval($filter['slider']));
        2.2.3    После
$in_stock_filter [*строка ~ 215]
                Добавляем
$is_slider_filter

 

    2.3 Функция get_product [*строка ~ 231]
        2.3.1    После 
p.featured,  [*строка ~ 248]
                Добавляем
p.slider,
p.image_slider,
     2.4 Перед функцией public function delete_image($id)
public function delete_image_slide($id)
    {
        $query = $this->db->placehold("SELECT image_slider FROM __products WHERE id=?", intval($id));
        $this->db->query($query);
        $filename = $this->db->result('image_slider');
        if(!empty($filename))
        {
            $query = $this->db->placehold("UPDATE __products SET image_slider=NULL WHERE id=?", $id);
            $this->db->query($query);
            $query = $this->db->placehold("SELECT count(*) as count FROM __products WHERE image_slider=? LIMIT 1", $filename);
            $this->db->query($query);
            $count = $this->db->result('count');
            if($count == 0)
            {            
                @unlink($this->config->root_dir.$this->config->slider_images_dir.$filename);        
            }
        }
}

 

3. Открываем view/View.php
    3.1 После 
            

 

$this->design->smarty->registerPlugin("function", "get_brands", array($this, 'get_brands_plugin')); [*строка ~ 95]
 

 

        Добавляем
            

 

$this->design->smarty->registerPlugin("function", "get_slider_products", array($this, 'get_slider_products_plugin'));
 

 

    3.2 После
public function get_posts_plugin($params, &$smarty) [*строка ~ 119]
                                    ...
$smarty->assign($params['var'], $this->blog->get_posts($params));
} [*строка ~ 125]
        Добавляем
           

 

 public function get_slider_products_plugin($params, &$smarty)
            {
            if(!isset($params['visible']))
                $params['visible'] = 1;
                $params['slider'] = 1;
            if(!empty($params['var']))
            {
            foreach($this->products->get_products($params) as $p)
                $products[$p->id] = $p;


            if(!empty($products))
            {
                // id выбраных товаров
                $products_ids = array_keys($products);
        
                // Выбираем варианты товаров
                $variants = $this->variants->get_variants(array('product_id'=>$products_ids, 'in_stock'=>true));
                
                // Для каждого варианта
                foreach($variants as &$variant)
                {
                    // добавляем вариант в соответствующий товар
                    $products[$variant->product_id]->variants[] = $variant;
                }
                
                // Выбираем изображения товаров
                $images = $this->products->get_images(array('product_id'=>$products_ids));
                foreach($images as $image)
                    $products[$image->product_id]->images[] = $image;
    
                foreach($products as &$product)
                {
                    if(isset($product->variants[0]))
                        $product->variant = $product->variants[0];
                    if(isset($product->images[0]))
                        $product->image = $product->images[0];
                }                
            }


            $smarty->assign($params['var'], $products);
            
            }
            }
 

 

4. Открываем simpla/ProductAdmin.php
    4.1 После    
           

 

 $product->featured = $this->request->post('featured'); [*строка ~ 26]
 

 

        Добавляем
            

 

$product->slider = $this->request->post('slider');
 

 

5. Открываем simpla/ProductsAdmin.php
    5.1 После
            

 

$filter['discounted'] = 1;  [*строка ~ 41]
        Добавляем
elseif($f == 'slider')
                $filter['slider'] = 1; 
    5.2 После
            break;
                } [*строка ~ 106]
        Добавляем
case 'set_slider':
{
$this->products->update_product($ids, array('slider'=>1));
break;
}
case 'unset_slider':
{
$this->products->update_product($ids, array('slider'=>0));
break;
} 
    5.3 Пред private 
public function fetch()

      Добавляем

$allowed_image_extentions = array('png', 'gif', 'jpg', 'jpeg', 'ico');

    5.4 Перед 

if($product->id)
     Добавляем
 /////////////////////////////////////////////////////
if($this->request->post('delete_image_slide'))
      {
      $this->products->delete_image_slide($product->id);
      unset($product->image_slider);
      }
// Загрузка изображения
$image_slider = $this->request->files('image_slider');
    if(!empty($image_slider['name']) && in_array(strtolower(pathinfo($image_slider['name'], PATHINFO_EXTENSION)), $this->allowed_image_extentions))
    {
       $this->products->delete_image_slide($product->id);                       
       move_uploaded_file($image_slider['tmp_name'], $this->root_dir.$this->config->slider_images_dir.$image_slider['name']);
       $this->products->update_product($product->id, array('image_slider'=>$image_slider['name']));
       $product->image_slider = $image_slider['name'];
    }
$image_slider = $this->products->get_product($product->id); 

 

6. Открываем simpla/design/html/product.tpl
    6.1 После
<div class="checkbox">
<input name=visible value='1' type="checkbox" id="active_checkbox" {if $product->visible}checked{/if}/> <label for="active_checkbox">Активен</label>
</div> [*строка ~ 492]
        Добавляем
<div class="checkbox">
<input name=slider value="1" type="checkbox" id="slider_checkbox" {if $product->slider}checked{/if}/> <label for="slider_checkbox">Слайд-шоу</label>
</div>

   6.2 После 

 

<!-- Правая колонка свойств товара -->        
<div id="column_right"> 

Добавляем

 

<!-- Изображение категории -->    
<div class="block layer images">
            <h2>Изображение фона слайда</h2>
            <input class='upload_image_slide' name=image_slider type=file>            
            <input type=hidden name="delete_image_slide" value="">
            {if $product->image_slider}
            <ul>
                <li>
                    <a href='#' class="delete"><img src='design/images/cross-circle-frame.png'></a>
                    <img src="/{$config->slider_images_dir}{$product->image_slider}" alt="" /> 
                </li>
            </ul>
            {/if}
        </div>

 

 
7. Открываем simpla/design/html/products.tpl
    7.1 После
{if $product->featured}featured{/if} [*строка ~ 62]
        Добавляем (в этой же строке)
{if $product->slider}slider{/if}
    7.2 После
  <option value="unset_featured">Отменить рекомендуемый</option> [*строка ~ 120]
        Добавляем
            <option value="set_slider">Добавить в Слайд-Шоу</option>
            <option value="unset_slider">Убрать со Слайд-Шоу</option>
    7.3 После
            

 

<li {if !$filter}class="selected"{/if}><a href="{url brand_id=null category_id=null keyword=null page=null filter=null}">Все товары</a></li>
 

 

        Добавляем
          

 

  <li {if $filter=='slider'}class="selected"{/if}><a href="{url keyword=null brand_id=null category_id=null page=null filter='slider'}">Слайд-Шоу</a></li>
            
    7.4 В самом конце перед
  });
            </script>
            {/literal}
        Добавляем
$("a.slider").click(function() {
        var icon        = $(this);
        var line        = icon.closest("div.row");
        var id          = line.find('input[type="checkbox"][name*="check"]').val();
        var state       = line.hasClass('slider')?0:1;
        icon.addClass('loading_icon');
        $.ajax({
            type: 'POST',
            url: 'ajax/update_object.php',
            data: {'object': 'product', 'id': id, 'values': {'slider': state}, 'session_id': '{/literal}{$smarty.session.id}{literal}'},
            success: function(data){
                icon.removeClass('loading_icon');
                if(state)
                    line.addClass('slider');                
                else
                    line.removeClass('slider');
            },
            dataType: 'json'
        });    
        return false;    
    });


#17 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 27.05.2014 - 09:29

Незабываем править config/config.php 

прописать папку для slider_image_dir (в моем случае files/slider/)

 

+ загрузка скрипта

 

slider.js

 

slider.css

 

slider.skin.css

 

+ настройки скрипта (м/у head)

<script>
            $(document).ready(function(){
                $('#iview').iView({
                    pauseTime: 7000,
                    pauseOnHover: true,
                    directionNav: false,
                    directionNavHide: false,
                    controlNav: true,
                    controlNavNextPrev: false,
                    controlNavThumbs: true,
                    timer: "Bar",
                    timerDiameter: 120,
                    timerPadding: 3,
                    timerStroke: 4,
                    timerBarStroke: 0,
                    timerColor: "#0F0",
                    timerPosition: "bottom-right",
                    timerX: 15,
                    timerY: 60
                });
            });
        </script>

 

 

 

Спс за внимание!



#18 infinity178

infinity178
  • Сомнительные
  • 283 сообщений
  • Пользователь

Опубликовано 27.05.2014 - 09:47

А да можно так же 

 

заместо индивидуального фона установить default 

по прицепу 

{if...
   {else}
{/if}


#19 vlanik

vlanik
  • Пользователь
  • 1 сообщений
  • Пользователь

Опубликовано 23.09.2018 - 19:59

У кого-то сохранились файлы слайдера? Поделитесь плиз.







Также с меткой «слайдер»

0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых