Затупил с product-gallery в шаблоне product.html. Нужно правильно вывести description из массива $product.images.

Имеем шаблон default 3 и SS7. В шаблоне product.html есть большое изображение товара, определяемое куском кода

{if $product.images}
<div class="image" id="product-core-image">
<a href="{$wa->shop->productImgUrl($product, '1280')}">
{$wa->shop->productImgHtml($product, '0x700', [ 'itemprop' => 'image', 'id' => 'product-image', 
'alt' => $product.name|escape, 'title' => $product.name|escape])}
</a>
{/if}

и ниже есть миниатюры других фоток выводимые примерно так при условии {if count($product.images) > 1}

{foreach $product.images as $image}
<div class="image{if $image.id == $product.image_id && empty($video)} selected{/if}">
<a id="product-image-{$image.id}" href="{$wa->shop->imgUrl($image, '1280')}" class="swipebox">
    {$wa->shop->imgHtml($image, '96x96', ['title'=> $image.description|escape, 'alt'=>$image.description|escape])}
</a>
</div>
{/foreach}

Как мне сделать "минимальной кровью" так, чтобы у большого изображения были atl и title такие же как у миниатюр, т.е. прописанные в настройках изображений товара и лежащие в description массиве $product.images?

Если бы изображение у товара было одно, то это не составило бы труда, а тут надо чтобы в галерее переключение и смена изображений работали. Известно, что признаком главного изображения вроде бы является минимальный sort в $product.images или image_id в $product. Делать ли ещё один foreach с условиями для вывода главного изображения и как лучше? И вот тут какой-то аццкий затуп накрыл.

Поскольку есть возможность задавать изображениям отдельные description, то хочется воспользоваться этим моментом.

За работу галереи и переключение миниатюр в основной режим отвечает скрипт в product.js (если вообще это поможет)

    // product images
    $("#product-gallery a").not('#product-image-video').click(function () {
        $('#product-core-image').show();
        $('#video-container').hide();
        $('.product-gallery .image').removeClass('selected');
        $(this).parent().addClass('selected');

        $("#product-image").addClass('blurred');
        $("#switching-image").show();

        var img = $(this).find('img');
        var size = $("#product-image").attr('src').replace(/^.*\/[^\/]+\.(.*)\.[^\.]*$/, '$1');
        var src = img.attr('src').replace(/^(.*\/[^\/]+\.)(.*)(\.[^\.]*)$/, '$1' + size + '$3');
        $('<img>').attr('src', src).load(function () {
            $("#product-image").attr('src', src);
            $("#product-image").removeClass('blurred');
            $("#switching-image").hide();
        }).each(function() {
            //ensure image load is fired. Fixes opera loading bug
            if (this.complete) { $(this).trigger("load"); }
        });
        var size = $("#product-image").parent().attr('href').replace(/^.*\/[^\/]+\.(.*)\.[^\.]*$/, '$1');
        var href = img.attr('src').replace(/^(.*\/[^\/]+\.)(.*)(\.[^\.]*)$/, '$1' + size + '$3');
        $("#product-image").parent().attr('href', href);
        return false;
    });

1 ответ

  • 1
    replicant 14 апреля 2018 14:53 #

    Если упростить функционал, то в принципе зря тупил. Отказаться от JS крутилки картинок и подключить к миниатюрам или каким-нибудь эскизам 350х0 под основным фото напрямую swipebox, то и проблем нет, но тогда фото среднего размера 0x700 уже не посмотреть, кроме как главное (печалька). Однако теперь в swipebox можно задействовать вывод желанных title даже в режиме слайд-шоу для десктопного просмотра (ура).

    {foreach $product.images as $img}
      {if $img@first}
    <a href="{$wa->shop->imgUrl($img, '1280')}">
        {$wa->shop->imgHtml($img, '0x700', ['itemprop' => 'image', 'id' => 'product-image', 'title'=> $img.description|escape, 'alt'=>$img.description|escape, 'style' => 'max-height:400px;'])}
    </a><br>
    {else}
    <a href="{$wa->shop->imgUrl($img, '1280')}">
        {$wa->shop->imgHtml($img, '350x0', ['title'=> $img.description|escape, 'alt'=>$img.description|escape, 'style' => 'max-width:150px;'])}
    </a>
    {/if}
    {/foreach}

    Хочется сохранить функционал в виде работающих квадратиков миниатюр 96х96 с просмотром среднего размера 0х700 в зоне увеличенного изображения, а 350х0 оставить для других задач.

    Возможно придется задействовать другой JS скрипт для миниатюр и основного фото в карточке продукта или существующий переписать. В текущей версии alt и title будут такие, как у картинки выводимой при первой загрузке страницы продукта в качестве основного фото будь она какая угодно по порядку в массиве изображений. Впрочем, не исключаю, что не до конца разобрался с тем, что есть, но желание ковырять код на сегодня пропало.

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

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