2

I have created a simple phtml file to add a 3D viewer in the product page using the following code. I have also created a custom attribute for the product, called model_file_name in which I type the name of the glb file I want to display.

If I replace FILENAMEHERE with an existing file name, the 3D model is shown in the page, the only problem I have is passing a file name specific for every product.

I have found some examples about how to read an attribute, but none of them refers to the code included in a .phtml file. The sample below is using the ProductRepository, but the code does not work, the error is: Notice: Undefined variable: productRepository

How do I read a custom attribute from a .phtml file ?

Here is the list of the files I have created, they are stored in the ./app/design/frontend/[CUSTOM_THEME]/theme/Magento_Catalog/ folder

file Block/Model3D.php:

<?php
class Model3D extends \Magento\Framework\View\Element\Template
{
    private $productRepository;

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Catalog\Model\ProductRepository $productRepository
    ) {
        parent::__construct($context);
        $this->productRepository = $productRepository;
    }

    public function getProductBySku($sku)
    {
        return $this->productRepository->get($sku);
    }
}
?>

file layout/catalog_product_view.xml:

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="product.info.media">
            <block class="VrMur\theme\Magento_Catalog\Block\Model3D" name="custom.text" template="Magento_Catalog::view/customtext.phtml" after="gallery"/>
        </referenceContainer>
    </body>
</page>

file templates/view/customtext.phtml:

<?php
  $product = $block->getProductBySku("PRODUCTSKU");
  $attributes = $product->getAttributes();
  foreach($attributes as $a)
  {
      echo $a->getName()."\n";
  }
?>

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<style>
    .3d-model {
        height: 100%;
        width: 100%;
    }
</style>

<!-- Use it like any other HTML element -->
    <p>3D Model: </p>
    <model-viewer style="width: 100%; height: 600px; top: 0px; background-color: 0xeeefff;" 
    id="3d-model" class="3d-model" alt="3d model" 
    src="http://vrmur.local/media/models/FILENAMEHERE" ar environment-image="" 
    poster="" shadow-intensity="1" camera-controls>
    </model-viewer>
3
  • plz share code you used for adding phtml
    – Pawan
    Nov 3, 2022 at 4:21
  • @Pawan I have updated the question with the missing code Nov 3, 2022 at 14:22
  • Added my answer, plz give a try.
    – Pawan
    Nov 3, 2022 at 15:34

2 Answers 2

0

Fast answer would be loading product repository via object manager, you can technically do this in a template but that's bad practice

So, let's work a bit

You should first add a new block in product page layout, where you call your template. You can get more info about this here

For that block you might want to use your own custom block class. Here you a have a nice tutorial for that

And then, you'd want to implement a getProductBySku() method in your block, where you make that product repository call. So, your custom block would be something like this

class YourCustomBlock extends \Magento\Framework\View\Element\Template
{
    private $productRepository;

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Catalog\Model\ProductRepository $productRepository
    ) {
        parent::__construct($context);
        $this->productRepository = $productRepository;
    }

    public function getProductBySku($sku)
    {
        return $this->productRepository->get($sku);
    }
}

And then, in your template you can get the product this way

$product = $block->getProductBySku("PRODUCTSKU");
2
  • I have tested your solution, but I still get the same error. I've updated the question with the missing code. Nov 3, 2022 at 14:23
  • The block should be placed in app/code folder, in your custom module Nov 3, 2022 at 16:08
0

If you added layout in catalog_product_view.xml i.e. need customization on PDP page. You can change phtml block class to Magento\Catalog\Block\Product\View.

In phtml file use:

// get current product
<?php $_product = $block->getProduct(); ?>

// get attribute value from product like

<?php echo $_product->getModelFileName(); ?>
<?php echo $_product->getAttributeText('model_file_name'); ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.