Neu Video als Produktbildild

[MrS]

Hallo,

ist es möglich bei den Produktbildern auch ein Video einzubinden? Und wenn ja, wie kann ich das möglichst mit der Ameise importieren?

Ich verwende das Standardtemplate.

Viele Grüße
Stephen

 

[css-umsetzung]

Ja, z.B.: mit dem Plugin von @Jonny | knowmates
https://www.jtl-software.de/extensi...deos-und-artikelbilder-kombinieren-jtl-shop-5

 

[MrS]

Danke für den Tipp! Aber geht das auch irgendwie anders? Ich habe leider kein Budget für ein solches Plugin

 

[css-umsetzung]

Nein....
So etwas selbst zu bauen, wird den Wert der kosten für die subscription, wenn man das in Stunden umrechnet, um ein vielfaches übersteigen.

 

[voodoo33000]

Ich weiß, dass das Thema schon älter ist, aber hatte ein ähnliches Problem. Ich hab das für mich ganz pragmatisch mit einem Child-Template gelöst. Mag sein, dass es elegantere Lösungen gibt, aber dafür kostet es nix und löst mein Problem - Mehr brauche ich auch nicht. War ein Abend arbeit.

Wenn Interesse besteht, kann ich das gerne mal bei Github hochladen.

1. Funktionsattribut für Video-URL in der WaWi angelegt
2. Video (in meinem Fall ein kurzer Clip 360°) als WebM konvertiert und hochgeladen, Link zum Video im Artikel hinterlegt
3. Child-Template vom Nova-Theme erstellt und die Datei

   /templates/NOVAChild/productdetails/image.tpl

   reingelegt:

{* ==========================================================
   In der WaWi Funktionsattribut mit dem Namen videolink anlegen!
   ========================================================== *}
{assign var='__videoURL' value=""}

{if isset($Artikel->FunktionsAttribute['videolink'])
    && $Artikel->FunktionsAttribute['videolink']|strlen > 5}
    {assign var='__videoURL' value=$Artikel->FunktionsAttribute['videolink']}
{/if}

{assign var='__hasVideo' value=$__videoURL|strlen > 5}

{block name='productdetails-image-images'}

    {if $__hasVideo}
        {assign var='__videoIndex' value=$Artikel->Bilder|count}
        <div class="square square-image js-gallery-images d-none" data-index="{$__videoIndex}">
            <div class="inner">
                <video playsinline autoplay muted loop preload="auto"
                       style="max-width:90%;max-height:80vh;width:auto;height:auto;
              object-fit:contain;background:#000;border-radius:10px;
              display:block;margin:0 auto;">>
                    <source src="{$__videoURL}" type="video/webm">
                 </video>
            </div>
        </div>
    {/if}


    {foreach $Artikel->Bilder as $image}
        {strip}
        <div class="square square-image js-gallery-images {if !$image@first}d-none{/if}" data-index="{$image@index}">
            <div class="inner">
                {image alt=$image->cAltAttribut
                    class="product-image"
                    fluid=true
                    lazy={!$image@first}
                    webp=true
                    src="{$image->cURLMini}"
                    srcset="
                        {$image->cURLMini} {$image->imageSizes->xs->size->width}w,
                        {$image->cURLKlein} {$image->imageSizes->sm->size->width}w,
                        {$image->cURLNormal} {$image->imageSizes->md->size->width}w,
                        {$image->cURLGross} {$image->imageSizes->lg->size->width}w"
                    data=["list"=>"{$image->galleryJSON|escape:'html'}", "index"=>$image@index]
                }
            </div>
        </div>
        {/strip}
    {/foreach}

    
{/block}

{block name='productdetails-image-preview-images'}
    {assign var=imageCount value=$Artikel->Bilder|count}
    {assign var=imageCountDefault value=5}
    
    {if $__hasVideo}
    <div class="square square-image js-gallery-images {if $imageCount <= $imageCountDefault} last-mr{/if}">
        <div class="inner" style="position:relative;">
        
<!-- 360° Icon als PNG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <!-- Dunkler Verlauf-Hintergrund -->
  <defs>
    <linearGradient id="grad-dark" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#1e1e1e" />
      <stop offset="100%" stop-color="#2d2d2d" />
    </linearGradient>
  </defs>
  <rect width="64" height="64" rx="8" fill="url(#grad-dark)" />

  <!-- Weicher Außenkreis -->
  <circle cx="32" cy="32" r="28"
          fill="none"
          stroke="rgba(255,255,255,0.25)"
          stroke-width="2" />

  <!-- Pfeilbogen -->
  <path d="M20 32c0-6.6 5.4-12 12-12h10"
        fill="none"
        stroke="#f3f3f3"
        stroke-width="3"
        stroke-linecap="round"
        stroke-linejoin="round" />

  <!-- Pfeilspitze -->
  <polygon points="38,16 48,20 38,24" fill="#f3f3f3" />

  <!-- 360° Text -->
  <text x="50%" y="60%"
        dominant-baseline="middle"
        text-anchor="middle"
        font-family="Arial, sans-serif"
        font-size="12"
        fill="#f3f3f3"
        opacity="0.9">360°</text>
</svg>
        </div>
    </div>
{/if}

    {foreach $Artikel->Bilder as $image}
        {strip}
        <div class="square square-image js-gallery-images
            {if $image@first} preview-first {if $imageCount <= $imageCountDefault} first-ml{/if}
            {elseif $image@index >= $imageCountDefault} d-none{/if}
            {if $image@last && $imageCount <= $imageCountDefault && !$__hasVideo} last-mr{/if}">
            <div class="inner">
                {image alt=$image->cAltAttribut
                    class="product-image"
                    fluid=true
                    lazy=true
                    webp=true
                    src="{$image->cURLKlein}"
                }
            </div>
        </div>
        {/strip}
    {/foreach}
{/block}

 

[css-umsetzung]

Und wer es dann doch etwas umfangreicher braucht:
https://forum.jtl-software.de/threads/css-galerie.239530/