Cómo implementar un módulo «Prueba antes de comprar» personalizado en Magento 2
Julio 28, 2025
Why Implement a "Try Antes de You Buy" Module in Magento 2?
A "Try Antes de You Buy" feature is a game-changer for eCommerce stores. It lets customers test products before committing to a purchase, reducing hesitation and boosting conversions. If you’re running a Magento 2 store, adding this functionality can set you apart from competitors. The good news? You don’t always need a paid extension—you can build a custom solution tailored to your needs. En esta guía,’ll walk through cómo implement a basic "Try Antes de You Buy" module in Magento 2 desde cero.Requisitos previos
Antes de diving in, make sure you have: - A working Magento 2 instance (local or hosted) - Basic knowledge of PHP, XML, and Magento 2 module structure - Access to the línea de comandos (for setup and cache clearing)Step 1: Create the Module Structure
Primero, let’s set up the basic module structure. Navigate to your Magento 2 root directory and create these folders:app/code/Magefine/TryBeforeYouBuy/
├── etc/
│ ├── module.xml
│ ├── frontend/
│ │ ├── routes.xml
│ │ └── di.xml
├── Controller/
│ ├── Index/
│ │ └── Index.php
├── Block/
├── view/
│ ├── frontend/
│ │ ├── layout/
│ │ │ └── trybeforeyoubuy_index_index.xml
│ │ └── templates/
│ │ └── form.phtml
Step 2: Define the Module
Create app/code/Magefine/TryBeforeYouBuy/etc/module.xml:<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Magefine_TryBeforeYouBuy" setup_version="1.0.0">
<sequence>
<module name="Magento_Catalog"/>
<module name="Magento_Checkout"/>
</sequence>
</module>
</config>
Step 3: Register the Module
Run these commands to enable your module:php bin/magento module:enable Magefine_TryBeforeYouBuy
php bin/magento setup:actualización
php bin/magento cache:clean
Step 4: Create a Frontend Route
Define a route in app/code/Magefine/TryBeforeYouBuy/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="trybeforeyoubuy" frontName="trybeforeyoubuy">
<module name="Magefine_TryBeforeYouBuy"/>
</route>
</router>
</config>
Step 5: Build the Controller
Create app/code/Magefine/TryBeforeYouBuy/Controller/Index/Index.php:<?php
namespace Magefine\TryBeforeYouBuy\Controller\Index;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
class Index extends Action
{
protected $resultPageFactory;
public function __construct(
Context $context,
PageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
public function execute()
{
return $this->resultPageFactory->create();
}
}
Step 6: Add a Layout File
Create app/code/Magefine/TryBeforeYouBuy/view/frontend/layout/trybeforeyoubuy_index_index.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="content">
<block class="Magefine\TryBeforeYouBuy\Block\TryBeforeYouBuy" name="trybeforeyoubuy.form" template="Magefine_TryBeforeYouBuy::form.phtml"/>
</referenceContainer>
</body>
</page>
Step 7: Create a Block
Define app/code/Magefine/TryBeforeYouBuy/Block/TryBeforeYouBuy.php:<?php
namespace Magefine\TryBeforeYouBuy\Block;
use Magento\Framework\View\Element\Template;
use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory;
class TryBeforeYouBuy extends Template
{
protected $productCollectionFactory;
public function __construct(
Template\Context $context,
CollectionFactory $productCollectionFactory,
array $data = []
) {
$this->productCollectionFactory = $productCollectionFactory;
parent::__construct($context, $data);
}
public function getProducts()
{
$collection = $this->productCollectionFactory->create();
$collection->addAttributeToSelect('*');
$collection->setPageSize(5);
return $collection;
}
}
Step 8: Build the Frontend Template
Create app/code/Magefine/TryBeforeYouBuy/view/frontend/templates/form.phtml:<div class="try-before-you-buy">
<h2>Try Antes de You Buy</h2>
<form action="<?= $block->getUrl('trybeforeyoubuy/index/submit') ?>" method="post">
<div class="fieldset">
<div class="field">
<label for="product">Select a Product</label>
<select name="product_id" id="product">
<?php foreach ($block->getProducts() as $product): ?>
<option value="<?= $product->getId() ?>"><?= $product->getName() ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="field">
<label for="duration">Trial Duration (Days)</label>
<input type="number" name="duration" id="duration" min="1" max="30" value="7"/>
</div>
</div>
<button type="submit" class="action primary">Start Trial</button>
</form>
</div>
Step 9: Handle Form Submission
Extend your controller to process submissions:// Add this method to your existing controller
public function execute()
{
if ($this->getRequest()->isPost()) {
$postData = $this->getRequest()->getPostValue();
// Process trial request here (save to database, send email, etc.)
$this->messageManager->addSuccessMessage(__('Your trial request has been submitted!'));
return $this->resultRedirectFactory->create()->setPath('trybeforeyoubuy/index/index');
}
return $this->resultPageFactory->create();
}
Step 10: Add CSS Styling
For better appearance, add some basic CSS:.try-before-you-buy {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
background: #f9f9f9;
}
.try-before-you-buy .fieldset {
margin-bottom: 20px;
}
.try-before-you-buy .field {
margin-bottom: 15px;
}
.try-before-you-buy label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.try-before-you-buy select,
.try-before-you-buy input[type="number"] {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
}