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

Здравствуйте! Сделал изменения внешнего вида товара при выборе комплектации через прикрепление картинки к параметрам. Получается 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>
    

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

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