i want display custom option product in onepage checkout page, what i need do? and what i need add.
Magento – Display custom product option in onpage checkout
cartcheckout
Related Solutions
In the code above, $_item
refers to an instance of Mage_Sales_Model_Quote_Item
, so you can alter the buyRequest with the code below:
$buyRequest = $_item->getOptionByCode('info_buyRequest');
$buyRequestArr = unserialize($buyRequest->getValue());
$buyRequestArr['whatever_you_like'] = 'some_value';
$buyRequest->setValue(serialize($buyRequestArr))->save();
However I'd definitely not advise altering the buyRequest from a phtml file, if you want to add data in to the buyRequest or change existing data, you should do so via an event observer by listening for checkout_cart_product_add_after
, which supplied you with the quote item, so you can set data on the buyRequest like so:
public function checkoutCartProductAddAfter(Varien_Event_Observer $observer)
{
$item = $observer->getQuoteItem();
$buyRequestArr = array();
if ($buyRequest = $item->getProduct()->getCustomOption('info_buyRequest')) {
$buyRequestArr = unserialize($buyRequest->getValue());
}
$buyRequestArr['whatever_you_like'] = 'some_value';
$buyRequest->setValue(serialize($buyRequestArr))->save();
}
Here is solution for checkout summary extension. I have tested this module with Magento 2.3.5 version. It is working fine with multiple custom options.
Step1 : app/code/Namespace/Module/etc/catalog_attributes.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/catalog_attributes.xsd">
<group name="quote_item">
<attribute name="atribute1"/>
<attribute name="atribute2"/>
<attribute name="atribute3"/>
<attribute name="atribute4"/>
<attribute name="atribute5"/>
</group>
</config>
Step2 : app/code/Namespace/Module/view/frontend/layout/checkout_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>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="summary" xsi:type="array">
<item name="children" xsi:type="array">
<item name="cart_items" xsi:type="array">
<item name="children" xsi:type="array">
<item name="details" xsi:type="array">
<item name="component"
xsi:type="string">Namespace_Module/js/view/summary/item/details</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step3 : app/code/Namespace/Module/view/frontend/web/js/view/summary/item/details.js
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define(
[
'uiComponent'
],
function (Component) {
"use strict";
var quoteItemData = window.checkoutConfig.quoteItemData;
return Component.extend({
defaults: {
template: 'Namespace_Module/summary/item/details'
},
quoteItemData: quoteItemData,
getValue: function(quoteItem) {
return quoteItem.name;
},
getAttribute1: function(quoteItem){
var item = this.getItem(quoteItem.item_id);
return item.aattribute1;
},
getAttribute2: function(quoteItem) {
var item = this.getItem(quoteItem.item_id);
return item.attribute2;
},
getAttribute3: function(quoteItem) {
var item = this.getItem(quoteItem.item_id);
return item.attribute3;
},
getAttribute4: function(quoteItem) {
var item = this.getItem(quoteItem.item_id);
return item.attribute4;
},
getAttribute5: function(quoteItem) {
var item = this.getItem(quoteItem.item_id);
return item.attribute5;
},
getItem: function(item_id)
{
var itemElement = null;
_.each(this.quoteItemData, function(element, index)
{
if (element.item_id == item_id)
{
itemElement = element;
}
});
return itemElement;
}
});
}
);
Step4: app/code/Namespace/Module/view/frontend/web/template/summary/item/details.html
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<!-- ko foreach: getRegion('before_details') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="product-item-details">
<div class="product-item-inner">
<div class="product-item-name-block">
<strong class="product-item-name" data-bind="html: $parent.name"></strong>
<div class="anyclass">
<!-- ko if: (getAttribute1($parent))-->
<div><strong data-bind="text: getAttribute1($parent)"></strong></div>
<!-- /ko -->
<!-- ko if: (getAttribute2($parent))-->
<div>Attribute2: <strong data-bind="text: getAttribute2($parent)"></strong></div>
<!-- /ko -->
<!-- ko if: (getAttribute3($parent))-->
<div>Attribute3: <strong data-bind="text: getAttribute3($parent)"></strong></div>
<!-- /ko -->
<!-- ko if: (getAttribute4($parent))-->
<div>Attribute4: <strong data-bind="text: getAttribute4($parent)"></strong></div>
<!-- /ko -->
<!-- ko if: (getAttribute5($parent))-->
<div>Attribute5: <strong data-bind="text: getAttribute5($parent)"></strong></div>
<!-- /ko -->
</div>
<div class="details-qty">
<span class="label"><!-- ko i18n: 'Qty' --><!-- /ko --></span>
<span class="value" data-bind="text: $parent.qty"></span>
</div>
</div>
<!-- ko foreach: getRegion('after_details') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: (JSON.parse($parent.options).length > 0)-->
<div class="product options" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
<span data-role="title" class="toggle"><!-- ko i18n: 'View Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="item-options">
<!--ko foreach: JSON.parse($parent.options)-->
<dt class="label" data-bind="text: label"></dt>
<!-- ko if: ($data.full_view)-->
<dd class="values" data-bind="html: full_view"></dd>
<!-- /ko -->
<!-- ko ifnot: ($data.full_view)-->
<dd class="values" data-bind="html: value"></dd>
<!-- /ko -->
<!-- /ko -->
</dl>
</div>
</div>
<!-- /ko -->
</div>
<!-- ko foreach: getRegion('item_message') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
Step5 : app/code/Namespace/Module/etc/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Model\DefaultConfigProvider">
<plugin name="checkout-summary-product-attribute" type="Namespace\Module\Plugin\Checkout\Model\DefaultConfigProvider" />
</type>
</config>
Step6 : app/code/Namespace/Module/Plugin/Checkout/Model/DefaultConfigProvider.php
<?php
namespace Namespace\Module\Plugin\Checkout\Model;
use Magento\Checkout\Model\Session as CheckoutSession;
class DefaultConfigProvider
{
/**
* @var CheckoutSession
*/
protected $checkoutSession;
/**
* Constructor
*
* @param CheckoutSession $checkoutSession
*/
public function __construct(
CheckoutSession $checkoutSession
) {
$this->checkoutSession = $checkoutSession;
}
public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
{
$items = $result['totalsData']['items'];
foreach ($items as $index => $item)
{
$quoteItem = $this->checkoutSession->getQuote()->getItemById($item['item_id']);
$result['quoteItemData'][$index]['attribute1'] = $atts['product_attribute1'];
$result['quoteItemData'][$index]['attribute2'] = $atts['product_attribute2'];
$result['quoteItemData'][$index]['attribute3'] = $atts['product_attribute3'];
$result['quoteItemData'][$index]['attribute4'] = $atts['product_attribute4'];
$result['quoteItemData'][$index]['attribute5'] = $atts['product_attribute5'];
}
return $result;
}
}
No clear all cache and refresh Checkout page and enjoy!
Thumbs up for this solution.
Thank You!
Best Answer
The linked post by me on stackoverflow.com contains detailed information how to add item options dynammically.
https://stackoverflow.com/questions/9412074/magento-quote-order-product-item-attribute-based-on-user-input/9496266#9496266
Unfortunately it is a bit long to duplicate all the information here. Hopefully it will give you what you need.