0

I am showing a button in product description. After button click it should translate the description using 3rd party PHP library. I checked some answers to find a solution (How to make a simple ajax call in Magento 2.1.0, Magento 2 - Send form data to Controller using AJAX and return Result to PHTML, ), but it didn't work out.

This is my file structure:

|   registration.php
|   
+---Block
|       Index.php
|       
+---Controller
|   \---Show
|           Translation.php
|           
+---etc
|   |   module.xml
|   |   
|   \---frontend
|           routes.xml
|           
\---view
    \---frontend
        +---layout
        |       catalog_product_view.xml
        |       
        \---templates
                attribute.phtml

Vendor/Module/Block/Index.php:

public function getBaseUrl()
    {
        return $this->_storeManager->getStore()->getBaseUrl();
    }

Vendor/Module/Controller/Show/Translation.php:

<?php 
namespace Vendor\Module\Controller\Show;

use Stichoza\GoogleTranslate\TranslateClient;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;

class Translation extends Action
{
    protected $resultJsonFactory;

    public function __construct(
        Context                                             $context,
        \Magento\Framework\Controller\Result\JsonFactory    $resultJsonFactory
    ) {

        $this->resultJsonFactory            = $resultJsonFactory;
        parent::__construct($context);
    }


    public function execute()
    {
        $result                 = $this->resultJsonFactory->create();
        if ($this->getRequest()->isAjax()) 
        {
            $description = $this->getRequest()->getPost('description');
            $tr = new TranslateClient(null, 'lt');
            $text = $tr->translate($description);
            $translated = [
                'translation' => $text
            ];
            return $result->setData($translated);
        }
    }
}

Vendor/Module/etc/frontend/routes.xml:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="googletranslate" frontName="translateproduct">
            <module name="Vendor_Module" />
        </route>
    </router>
</config>

attribute.phtml has:

<button title="Translate" class="secondary" id="translateButton">
        <span>Translate</span>
    </button>
<script>
require(['jquery'],function(){
    jQuery(document).ready(function() {
        jQuery("#translateButton").on('click',function(){

            var desc = jQuery(".description div").text();
            var url = "<?php echo $this->getBaseUrl().'module/show/translation/' ?>";

            jQuery.ajax({
            url: url,
            type: "POST",
            data: {description:desc},
            showLoader: true,
            cache: false,
            success: function(response){
                console.log(response);
            }
        });
        return false;
        });
    });
});
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.