Слайдер новинок для instantSHOP 1.X

268
Готовое решение. Пошаговая инструкция.
Сделать слайдер с новинками товаров в instantSHOP достаточно просто:
Создаём файл (макет нашего слайдера) в папке moduls вашего шаблона
Слайдер новинок для instantSHOP

Далее все так же просто, можно взять любой макет понравившегося Вам слайдера (если самим не хочется возиться с новым smile ),
расставляя вместо слайдов ПОЗИЦИИ ДЛЯ МОДУЛЕЙ и не забывая добавлять названия позиций в файл positions.txt
Слайдер новинок для instantSHOP

Пример самого кода с расставленными позициями модулей в слайдере (за основу взят слайдер bootstrap fade с небольшими доработками):

Код PHP:
  1.  
  2.  
  3. <section id="sl-new---items---in---cats">
  4.  
  5.  
  6. <div class="in---header">
  7.  
  8. <div id="carousel" class=" carousel bg---width slide carousel-fade">
  9. <ol class="carousel-indicators">
  10. <li data-target="#carousel" data-slide-to="0" class="active"></li>
  11. <li data-target="#carousel" data-slide-to="1" class=""></li>
  12. <li data-target="#carousel" data-slide-to="2" class=""></li>
  13. <li data-target="#carousel" data-slide-to="3" class=""></li>
  14. <li data-target="#carousel" data-slide-to="4" class=""></li>
  15. <li data-target="#carousel" data-slide-to="5" class=""></li>
  16. <li data-target="#carousel" data-slide-to="6" class=""></li>
  17. <li data-target="#carousel" data-slide-to="7" class=""></li>
  18. <li data-target="#carousel" data-slide-to="8" class=""></li>
  19. <li data-target="#carousel" data-slide-to="9" class=""></li>
  20.  
  21. </ol>
  22.  
  23. <div class="carousel-inner">
  24. <div class="carousel-item active"> <div class="bg"></div>
  25.  
  26. <div class="sl---move---items ">
  27.  
  28. <?php $this->printModules('menu---holders'); ?> <!-- ПОЗИЦИЯ МОДУЛЯ -->
  29.  
  30. </div>
  31. </div>
  32. <div class="carousel-item"><div class="bg1"></div> <center><h1>Перекидные системы</h1></center>
  33. <div class="sl---move---items ">
  34. <?php $this->printModules('menu---holders1'); ?>
  35. </div>
  36. </div>
  37. <div class="carousel-item "><div class="bg2"></div>
  38. <div class="sl---move---items">
  39. <?php $this->printModules('menu---holders2'); ?>
  40. </div>
  41. </div>
  42. <div class="carousel-item "><div class="bg3"></div> <center><h1>Для бейджей</h1></center>
  43. <div class="sl---move---items">
  44. <?php $this->printModules('menu---holders3'); ?>
  45. </div>
  46. </div>
  47. <div class="carousel-item "><div class="bg4"></div> <center><h1>Карманы из оргстекла</h1></center>
  48. <div class="sl---move---items">
  49. <?php $this->printModules('menu---holders4'); ?>
  50. </div>
  51. </div>
  52. <div class="carousel-item "><div class="bg5"></div> <center><h1>Карманы ПВХ</h1></center>
  53. <div class="sl---move---items">
  54. <?php $this->printModules('menu---holders5'); ?>
  55. </div>
  56. </div>
  57. <div class="carousel-item "><div class="bg6"></div>
  58. <div class="sl---move---items">
  59. <?php $this->printModules('menu---holders6'); ?>
  60. </div>
  61. </div>
  62. <div class="carousel-item "><div class="bg7"></div>
  63. <div class="sl---move---items">
  64. <?php $this->printModules('menu---holders7'); ?>
  65. </div>
  66. </div>
  67. <div class="carousel-item "><div class="bg8"></div>
  68. <div class="sl---move---items">
  69. <?php $this->printModules('menu---holders8'); ?>
  70. </div>
  71. </div>
  72. <div class="carousel-item "><div class="bg9"></div>
  73. <div class="sl---move---items">
  74. <?php $this->printModules('menu---holders9'); ?>
  75. </div>
  76. </div>
  77.  
  78. </div>
  79.  
  80. <a class="carousel-control left" href="#carousel" data-slide="prev"></a>
  81. <a class="carousel-control right" href="#carousel" data-slide="next"></a>
  82. </div>
  83.  
  84. </div>
  85. <script>
  86. $('.carousel').carousel({
  87. interval: 7000,
  88. pause: 'hover',
  89. wrap: true
  90. });
  91.  
  92. </script>
  93. </section>
  94.  
Создаём новый модуль (сам наш слайдер) в админке, указав для него в качестве макета выше подготовленный шаблон:
Слайдер новинок для instantSHOP


Следующим шагом мы создаем необходимое количество копий стандартного модуля "новинок" в админке сайта, выбирая необходимые категории для показа товаров и расставляя модули по позициям в слайдере:
Слайдер новинок для instantSHOP

И так, в итоге получаем слайдер с новинками из различных категорий товаров!
Выглядит это на практике следующим образом:
Слайдер новинок для instantSHOP

Пример в действии:
Веб-сайт производственной организации Пос-материаллов
Комментарии (6)
Kreator 17 декабря 2017 в 01:55 +2
small user social cms
Плюс, что не забываете про первую ветку (только вставьте в пост breakpage "Читать далее")
Idler 17 декабря 2017 в 02:06 0
small user social cms
Спасибо smile
letsgo 17 декабря 2017 в 02:18 0
small user social cms
Читать далее - добавьте. А то портянка.
Idler 17 декабря 2017 в 02:23 0
small user social cms
Ок
Idler 17 декабря 2017 в 02:09 0
small user social cms
На мой взгляд, первая ветка instantCMS намного пригодней для некоторых проектов нежели вторая, в особенности, сам компонент instantSHOP
Денис Васильевич 17 декабря 2017 в 16:04 +1
small user social cms
Спойлер