How to subscribe webp to jquery.last-seen-products.js ? about froshwebp

[shyim]

You have to overwrite that place here: https://github.com/shopware/shopware/blob/5.5/themes/Frontend/Bare/frontend/index/index.tpl#L191 and add the new variables.

But a simple replace could do it also... 🙈

[Hotte512]

Thank you i already searched a long time 😈

replace would do, but what if there is no .webp?
AND i already can do replacements...

but isn't replacing that whole block insecure (update)? :-/

[shyim]

You dont have to overwrite code.
Append that block frontend_index_header_javascript_data
and modifiy the variable lastSeenProductsConfig :)

[Hotte512]

i thought about {block name="frontend_index_header_javascript" append} oder mit {$smarty.block.parent}?
{block name="frontend_index_header_javascript_data"}?? 🙉

I did this so far:

{block name="frontend_index_header_javascript"}
{$smarty.block.parent}
{if $sArticle}
            {$lastSeenProductsConfig.currentArticle = $sLastArticlesConfig}
            {$lastSeenProductsConfig.currentArticle.articleId = $sArticle.articleID}
            {$lastSeenProductsConfig.currentArticle.linkDetailsRewritten = $sArticle.linkDetailsRewrited}
            {$lastSeenProductsConfig.currentArticle.articleName = $sArticle.articleName}
            {if $sArticle.additionaltext}
                {$lastSeenProductsConfig.currentArticle.articleName = $lastSeenProductsConfig.currentArticle.articleName|cat:' ':$sArticle.additionaltext}
            {/if}
            {$lastSeenProductsConfig.currentArticle.imageTitle = $sArticle.image.description}
            {$lastSeenProductsConfig.currentArticle.images = []}

            {foreach $sArticle.image.thumbnails as $key => $image}
            
                {$lastSeenProductsConfig.currentArticle.images[$key] = [
                    'source' => $image.source,
                    'sourceWebp' => $image.attributes.webp->get('thumbnail.source'), 
                    'retinaSource' => $image.retinaSource,
                    'sourceSet' => $image.sourceSet,
                    'sourceSetWebp' => $image.attributes.webp->get('thumbnail.sourceSet')
                ]}
{$image.attributes.webp|@print_r}

            {/foreach}
			
        {/if}
{/block}

But i do get an Fatal error: Uncaught Error: Cannot use object of type Shopware\Bundle\StoreFrontBundle\Struct\Attribute as array in

is that for [source:protected] ? did try ->get() 🔅

[Hotte512]

it was quite easyer..

{$lastSeenProductsConfig.currentArticle.images[$key] = [
                    'source' => $image.source,
                    'sourceWebp' => $image.webp.source, 
                    'retinaSource' => $image.retinaSource,
                    'sourceSet' => $image.source,
                    'sourceSetWebp' => $image.webp.sourceSet
                ]}

It arrives the Frontend... (smarty debug)
But i wont get the value into jquery.last-seen-products.js :-(

createProductImage: function (data) {
            var me = this,
                image = data.images[0],
				element,
                imageEl,
                imageMedia,
                srcSet,
				srcSetWebp,
				webp;
				
            element = $('<a>', {
                'class': me.opts.imageCls,
                'href': data.linkDetailsRewritten,
                'title': data.articleName
            });

            imageEl = $('<span>', { 'class': 'image--element' }).appendTo(element);
            imageMedia = $('<span>', { 'class': 'image--media' }).appendTo(imageEl);

            if (image) {
                srcSet = image.sourceSet;
				//srcSetWebp = image.sourceSetWebp;
x				console.log(image.sourceSetWebp);
x				console.log(image.webp.sourceSet);
            } else {
                srcSet = me.opts.noPicture;
            }
			
			webp = $('<source>', {
....

good nigth

[shyim]

You have to clear once your local storage :)

[Hotte512]

Incognito mode should be enough? JS: image.sourceSetWebp; is still undefined
Or isn't it image.sourceSetWebp but i already tried image.web.sourceSet...

[Hotte512]

And what do you think about Lazyloading?
Could try to add https://github.com/aFarkas/lazysizes to WebP-Plugin.

It could also lazyload external js like maps-api or chat and stuff not needed instant.

But first :-) how do i get image.sourceSetWebp into the js ?
https://github.com/Hotte512/ShyimWebP/blob/master/Resources/views/frontend/_public/src/js/jquery.last-seen-products.js (atm tryout in place)
Give me a hint do i need to subscribe / override or extend? -for a propper plugin integration :)
https://github.com/Hotte512/ShyimWebP/blob/master/Resources/views/frontend/_public/src/js/jquery.last-seen-product-webp.js (updating the function)

Muss ich die jetzt noch manuell aus dem template in js auslesen oder bekomme ich die irgendwie in data geladen? Und wo passiert das eigentlich?

[Hotte512]

pls feed me :)

[shyim]

I mean that so 99af5b6#diff-216191de9d9d3c5e3545761a262458f4R3 :)

[Hotte512]

thank you, i do not get the js :-/ ...I'm not a developer at all.
But I think I found a small typo

You need a pizza, a composter or some wood ?