| Blog |Como agregar texto personalizado debajo del precio en el frontend Magento 2

En esta oportunidad lo que vamos hacer no es mas que customizar nuestro tema, el mismo que hemos creado en el [post: diseñando un tema para magento 2] (le hemos cambiado el nombre a “gnuxdar”), lo que haremos es crear funcionalidades nuevas, en este ejemplo será agregar un texto custom a la PDP justo debajo del precio para mostrar un mensaje de la siguiente manera.

Haremos dos ejemplos utiles.

Opción 1

Lo primero que haremos es crear el directorio Magento_Catalog dentro de nuestro directorio principal
app/design/frontend/[Vendor]/[theme]/ en nuestro caso seria de la siguiente manera
app/design/frontend/Actecnology/gnuxdar/Magento_Catalog

como lo que necesitamos es mostrar el texto custom solo en la página de la vista del producto (PDP), creamos el fichero catalog_product_view.xml que será nuestro layout en nuestro tema
app/design/frontend/Actecnology/gnuxdar/Magento_Catalog/layout/catalog_product_view.xml

<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.main">
            <block class="Magento\Framework\View\Element\Template" name="custom.text" template="Magento_Catalog::view/text.phtml" after="product.info.price" />
        </referenceContainer>
        <referenceBlock name="view.addto.compare" remove="true" />
        <move element="product.info.overview" destination="page.main.title" />
        <move element="product.info.stock.sku" destination="product.info.main" after="page.main.title" />
        <move element="reviews.tab" destination="content" after="-" />
        <move element="catalog.product.related" destination="content" after="product.info.details" />
        <referenceBlock name="product.attributes" remove="true" /> <!-- tab de "more information"-->
    </body>
</page>

Ahora creamos el template text.phtml que hemos definido en el layout y escribimos el texto personalizado

app/design/frontend/Actecnology/gnuxdar/Magento_Catalog/templates/view/text.phtml

<div class="txt-pdp">
    <span><b>No olvides seleccionar los servicios opcionales</b></span>
</div>

limpiamos cache bin/magento c:f

la estructura será de la siguiente manera

layout
….catalog_product_view.xml
templates
….view
….….text.phtml

una opción muy útil también es solo mostrar en la PDP a los productos configurados con “customizable options” de una unica categoría por ejemplo
https://arturocabrera.com/blog/configurar-las-customizable-options-de-productos-en-magento-2 en ese caso en nuestro template text.phtml lo dejaríamos de la siguiente manera.

<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$category = $objectManager->get('Magento\Framework\Registry')-
>registry('current_category');
$catName = $category->getName();
?>
<?php if($catName == 'Category-Name'){ ?>
<div class="txt-pdp"><span><b>No olvides seleccionar los servicios adicionales</b></span>
</div>
<?php } ?>

(no se recomienda usar mucho el objectManager)

Opción 2

Si lo que necesita es mostrar el texto personalizado después del precio en todas partes, haremos un override de final_price.phtml

vendor/magento/module-catalog/view/base/templates/product/price/final_price.phtml

PARA

app/design/frontend/Actecnology/gnuxdar/Magento_Catalog/templates/product/price/final_price.phtml

y agregamos al final del fichero nuestro texto

<div class="txt-pdp">
<span><b>Precio Irresistible</b></span>
</div>

limpiamos cache y listo.

quedando algo asi…

Nota: Así mismo podríamos programar un modal si lo llegáramos a requerir.
Link al repositorio [github]

Happy Coding

gnuxdar

Como agregar texto personalizado debajo del precio en el frontend Magento 2

Últimas Publicaciones

Le puede interesar los ultimos articulos públicados

Categorías

Mis Twits