Изменение фото товара при выборе параметров

Форум поддержки » Вопросы и ответы

Здравствуйте! Сделал изменения внешнего вида товара при выборе комплектации через прикрепление картинки к параметрам. Получается 24 картинки нужно создать к товару, если добавлю еще два варианта комплектации получится 96 картинок создать нужно. Очень трудоемко, но зато очень наглядно.

1. Можно ли как-то по другому решить эту задачу? Может быть на основную картинку как-то накладывать другие картинки?

2. Или хотя бы подскажите пожалуйста как скрыть часть картинок с карточки товара?

вот что получилось: https://celsiusperm.ru/bannye-...

6 ответов

  • 2
    replicant 4 февраля 2020 20:50 #

    Небольшой пример из бесчиленного множества вариантов как скрывать часть миниатюр, если их много.

    {if count($product.images) > 6} допустим, если картинок более 6, то

<script>$(document).ready(function () {
$(".dalee").click(function(e) {
    e.preventDefault();
  $(this).prev().toggleClass("desc-open")
})
});</script>

<style>
.desc {
  height: 350px;
  position: relative;
  overflow: hidden;
}

.desc-open {
  overflow: visible;
  height: auto;
}

.desc-open .gradient {
  display: none;
}

.dalee-hidden {display:none;}

.gradient {
  background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30%;
}
</style>

<div class="desc">
{* тут начинается код вывода миниатюр в шаблоне *}
<ul class="s-photos-list" id="s-photos-list"><li class="s-photo-thumb">
<a id="s-image-
...
</a></li></ul>

<div class="gradient"></div>
</div>

<a href="" class="dalee">Скрыть / показать</a></div><!-- ссылку можно сделать кнопкой или картинкой и спозиционировать абсолютно -->

{else}

обычный код вывода миниатюр в шаблоне без обёртки в полускрытый блок

{/if}

    Есс-но это вариант не для копировать - вставить. Надо где-то немного адаптировать и аккуратно вшивать в шаблон.

    Есть ещё варианты засунуть миниатюры в скроллируемый блок небольшого размера с показом нескольких базовых сразу, а остальное где-то там за кадром.

    ответить
    • +1
      Александр Смит Александр Смит 6 февраля 2020 19:03 #

      Поверхностное знание кода не дает адаптировать и аккуратно вшить в шаблон. Ошибка 0. Когда вставляю часть между style. Это все в шаблоне product.html?

      ответить
      • +1
        replicant replicant 6 февраля 2020 20:56 #

        Да, это все в product.html и лучше часть от <script> до </style> заключить в {literal} {/literal}. Это исключит ошибку 0 из-за всяких отсутствующих пробелов в стилях или что там ещё может встретиться. В частности на подобную запись 

        .dalee-hidden {display:none;}

        без пробела после { точно выругается.

        ответить
  • 1
    Александр Смит 6 февраля 2020 19:24 #

    Подскажите сколько стоит вписать этот код в шаблон?

    ответить
    • +1
      replicant replicant 6 февраля 2020 20:58 #

      В свободное время напишите мне в Телеграм на @dmitriy_glazachev. Попробую вам помочь в этом вопросе.

      ответить
  • 1
    Александр Смит 8 февраля 2020 10:51 #

    Почти получилось, но криво. карточка с ценой и выбором убежала за хар-ки

    Извиняюсь. Знаю что код написан не по феншую, как попало. копипастил ¯\_(ツ)_/¯ 

    где я промахнулся?

    <div class="s-column s-photos-aside right"></div>
{* THUMBS *}

                           {if count($product.images) > 6 || (count($product.images) === 1 && $_video)}

                              {literal}
                               <script>$(document).ready(function () {
$(".dalee").click(function(e) {
    e.preventDefault();
  $(this).prev().toggleClass("desc-open")
})
});</script>

<style>
.desc {
  height: 350px;
  position: relative;
  overflow: hidden;
}

.desc-open {
  overflow: visible;
  height: auto;
}

.desc-open .gradient {
  display: none;
}

.dalee-hidden {display:none;}

.gradient {
  background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30%;
}
</style>
{/literal}
<div class="desc">
                               
                               <ul class="s-photos-list" id="s-photos-list">

                                   {foreach $product.images as $image}

                                       <li class="s-photo-thumb">

                                           {* @hint link id needed for change product image on sku change event *}

                                           <a id="s-image-{$image.id}" class="{if $image.id == $product.image_id && empty($_video)}is-selected{/if}" href="{$wa->shop->imgUrl($image, '970')}" data-index="{$image@index}">

                                               {$wa->shop->imgHtml($image, '96x96')}

                                           </a>

                                       </li>

                                   {/foreach}

                                   {if $_video}

                                       <li class="s-photo-thumb">

                                           {* @hint link id needed for change product image on sku change event *}

                                           <a class="is-selected is-video" href="{$_video.url}">

                                               <img src="{$_video.images[0]}">

                                           </a>

                                       </li>

                                   {/if}

                               </ul>
<div class="gradient"></div>
</div>

<a href="" class="dalee">Скрыть / показать</a></div><!-- ссылку можно сделать кнопкой или картинкой и спозиционировать абсолютно -->
                          
                           {else}
                           
                           <ul class="s-photos-list" id="s-photos-list">

                                   {foreach $product.images as $image}

                                       <li class="s-photo-thumb">

                                           {* @hint link id needed for change product image on sku change event *}

                                           <a id="s-image-{$image.id}" class="{if $image.id == $product.image_id && empty($_video)}is-selected{/if}" href="{$wa->shop->imgUrl($image, '970')}" data-index="{$image@index}">

                                               {$wa->shop->imgHtml($image, '96x96')}

                                           </a>

                                       </li>

                                   {/foreach}

                                   {if $_video}

                                       <li class="s-photo-thumb">

                                           {* @hint link id needed for change product image on sku change event *}

                                           <a class="is-selected is-video" href="{$_video.url}">

                                               <img src="{$_video.images[0]}">

                                           </a>

                                       </li>

                                   {/if}

                               </ul>
                           
                           {/if}

                       </div>

                   </div>

                   <script>

                       ( function($) {

                           new window.waTheme.init.shop.ProductPhotos({

                               $wrapper: $("#s-product-photos")

                           });

                       })(jQuery);

                   </script>

               </figure>

           {else}

               <div id="s-photo-main">

                   <img src="{$wa_active_theme_url}img/svg/empty_photo.svg" alt="[`Empty photo`]" style="width: 100%; max-height: 200px;">

               </div>

               {$_description}

               {$_pages}

               {$_features}

           {/if}

       </div>

    ответить

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите