Adding Google Model Viewer in Products

[ARJIEANGELOG.VICUNA]

Good day, i am very new to your platform, i want to add the google model viewer as a replacement or new function in displaying a product, but i do not know how i can implement it, may i ask for your assistance for this problem.

Thank you in advance

[aimeos]

First allow uploading the mimetype of the models by adding it using this configuration:
https://github.com/aimeos/aimeos-core/b ... #L574-L605

Then, we need to add the required HTML for the models here:
https://github.com/aimeos/ai-client-htm ... andard.php

If you create a pull request with your changes, we will be happy to merge them

[ARJIEANGELOG.VICUNA]

Good day Aimeos, may i ask again what is the directory where i can add a unpkg cdn for my google model viewer

[aimeos]

You can store it to the themes folder and add it conditionally in the header here:
https://github.com/aimeos/ai-client-htm ... hp#L77-L78

[ARJIEANGELOG.VICUNA]

Hello aimeos i did follow what you told me but i still may have a problem saving the file

I did try to insert the cdn with echo in the public header in the standard.php, because it is the only file in the catalog/detail:

Code: Select all

public function header( string $uid = '' ) : ?string
	{
		$view = $this->view();
		$config = $this->context()->config();
		$prefixes = ['d_prodid', 'd_name'];
		$confkey = 'client/html/catalog/detail';

		$code = $config->get( 'client/html/catalog/detail/prodcode-default' );
		$id = $config->get( 'client/html/catalog/detail/prodid-default', $code );
		echo '<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>';
		if( !$view->param( 'd_name', $view->param( 'd_prodid', $id ) ) ) {
			return '';
		}

		if( $html = $this->cached( 'header', $uid, $prefixes, $confkey ) ) {
			return $this->modify( $html, $uid );
		}

And then i included the mimetype in the default variable:

Code: Select all

$default = [
			'image/webp', 'image/jpeg', 'image/png', 'image/gif', 'image/svg+xml',
			'application/pdf', 'application/zip',
			'video/mp4', 'video/webm'.
			'model/gltf+json', 'model/gltf-binary'
		];

And then for the viewing of the model here i used elseif for the new media

Code: Select all

if( !strncmp( $media->getMimetype(), 'video/', 6 ) )
		{
			return '
				<video autoplay muted class="item" id="image-' . $media->getId() . '" loading="lazy"
					thumbnail="' . $enc->attr( $view->content( $media->getPreview(), $media->getFileSystem() ) ) . '"
					poster="' . $enc->attr( $view->content( $media->getPreview( 600 ), $media->getFileSystem() ) ) . '"
					src="' . $enc->attr( $view->content( $media->getUrl(), $media->getFileSystem() ) ) . '"
					alt="' . $enc->attr( $media->getProperties( 'title' )->first( $media->getName() ) ) . '"
					' . $variant . ' />
				</video>
			';
		}elseif(  !strncmp( $media->getMimetype(), 'model/', 6 )){
			return '
				<model-viewer class="item" id="image-' . $media->getId() . '" loading="lazy"
				thumbnail="' . $enc->attr( $view->content( $media->getPreview(), $media->getFileSystem() ) ) . '"
				poster="' . $enc->attr( $view->content( $media->getPreview( 600 ), $media->getFileSystem() ) ) . '"
				src="' . $enc->attr( $view->content( $media->getUrl(), $media->getFileSystem() ) ) . '"
				alt="' . $enc->attr( $media->getProperties( 'title' )->first( $media->getName() ) ) . '"
				' . $variant . ' ar auto-rotate camera-controls>
			</model-viewer>
		';
		}

But saving the gltf file in the database is empty

i am very sorry for disturbing and looking forward for a response thank you in advance

[aimeos]

I did try to insert the cdn with echo in the public header in the standard.php, because it is the only file in the catalog/detail:

You have to add the script file here:
https://github.com/aimeos/ai-client-htm ... hp#L77-L78

But saving the gltf file in the database is empty

The gltf file is stored according to your screenshot but there's no preview image generated because this works only for images.