How to customize a product details page in magento2?
https://magento.stackexchange.com/questions/259596
-
16-02-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
In magento 2 how to customize a product detail page in custom theme.
app/design/frontend/companyname/themename/Magento_Catalog/layout/catalog_product_view.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-right" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="mage/gallery/gallery.css" />
</head>
<update handle="catalog_product_opengraph" />
<update handle="page_calendar" />
<body>
<attribute name="itemtype" value="http://schema.org/Product" />
<attribute name="itemscope" value="itemscope" />
<referenceBlock name="head.components">
<block class="Magento\Framework\View\Element\Js\Components" name="checkout_page_head_components" template="Magento_Catalog::js/components.phtml" />
</referenceBlock>
<referenceBlock name="page.main.title">
<arguments>
<argument name="css_class" xsi:type="string">product</argument>
<argument name="add_base_attribute" xsi:type="string">itemprop="name"</argument>
</arguments>
</referenceBlock>
<referenceBlock name="root">
<arguments>
<argument name="add_attribute" xsi:type="string">itemscope itemtype="http://schema.org/Product"</argument>
</arguments>
</referenceBlock>
<referenceContainer name="content">
<container name="product.info.main" htmlTag="div" htmlClass="product-info-main" before="-">
<container name="product.info.price" label="Product info auxiliary container" htmlTag="div" htmlClass="product-info-price" after="product.info.review">
<container name="product.info.stock.sku" label="Product auxiliary info" htmlTag="div" htmlClass="product-info-stock-sku">
<container name="product.info.type" before="-" />
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type">
<arguments>
<argument name="at_call" xsi:type="string">getSku</argument>
<argument name="at_code" xsi:type="string">sku</argument>
<argument name="css_class" xsi:type="string">sku</argument>
<argument name="at_label" xsi:type="string">default</argument>
<argument name="add_attribute" xsi:type="string">itemprop="sku"</argument>
</arguments>
</block>
</container>
<block class="Magento\Catalog\Block\Product\View" name="product.info.review" template="product/view/review.phtml" after="product.info.stock.sku" />
<block class="Magento\Catalog\Pricing\Render" name="product.price.final" after="product.info.sku">
<arguments>
<argument name="price_render" xsi:type="string">product.price.render.default</argument>
<argument name="price_type_code" xsi:type="string">final_price</argument>
<argument name="zone" xsi:type="string">item_view</argument>
</arguments>
</block>
</container>
<block class="Magento\Catalog\Pricing\Render" name="product.price.tier" after="product.info.price">
<arguments>
<argument name="price_render" xsi:type="string">product.price.render.default</argument>
<argument name="price_type_code" xsi:type="string">tier_price</argument>
<argument name="zone" xsi:type="string">item_view</argument>
</arguments>
</block>
<container name="alert.urls" as="alert_urls" label="Alert Urls" after="product.price.tier" />
<block class="Magento\Catalog\Block\Product\View" name="product.info" template="product/view/form.phtml" after="alert.urls">
<container name="product.info.form.content" as="product_info_form_content">
<block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart" as="addtocart" template="product/view/addtocart.phtml" />
</container>
<block class="Magento\Framework\View\Element\Template" name="product.info.form.options" as="options_container">
<block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper" as="product_options_wrapper" template="product/view/options/wrapper.phtml">
<block class="Magento\Catalog\Block\Product\View\Options" name="product.info.options" as="product_options" template="product/view/options.phtml">
<block class="Magento\Catalog\Block\Product\View\Options\Type\DefaultType" as="default" template="product/view/options/type/default.phtml" />
<block class="Magento\Catalog\Block\Product\View\Options\Type\Text" as="text" template="product/view/options/type/text.phtml" />
<block class="Magento\Catalog\Block\Product\View\Options\Type\File" as="file" template="product/view/options/type/file.phtml" />
<block class="Magento\Catalog\Block\Product\View\Options\Type\Select" as="select" template="product/view/options/type/select.phtml" />
<block class="Magento\Catalog\Block\Product\View\Options\Type\Date" as="date" template="product/view/options/type/date.phtml" />
</block>
<block class="Magento\Framework\View\Element\Html\Calendar" name="html_calendar" as="html_calendar" template="Magento_Theme::js/calendar.phtml" />
</block>
<block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="product/view/options/wrapper/bottom.phtml">
<block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart.additional" as="product.info.addtocart" template="product/view/addtocart.phtml" />
</block>
</block>
</block>
<container name="product.info.extrahint" as="extrahint" label="Product View Extra Hint">
<container name="product.info.social" label="Product social links container" htmlTag="div" htmlClass="product-social-links" after="product.info.overview">
<block class="Magento\Catalog\Block\Product\View" name="product.info.addto" as="addto" template="product/view/addto.phtml">
<block class="Magento\Catalog\Block\Product\View\AddTo\Compare" name="view.addto.compare" after="view.addto.wishlist" template="Magento_Catalog::product/view/addto/compare.phtml" />
</block>
<block class="Magento\Catalog\Block\Product\View" name="product.info.mailto" template="product/view/mailto.phtml" />
</container>
</container>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.overview" template="product/view/attribute.phtml" group="detailed_info" after="product.info.extrahint">
<arguments>
<argument name="at_call" xsi:type="string">getShortDescription</argument>
<argument name="at_code" xsi:type="string">short_description</argument>
<argument name="css_class" xsi:type="string">overview</argument>
<argument name="at_label" translate="true" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Overview</argument>
<argument name="add_attribute" xsi:type="string">itemprop="description"</argument>
</arguments>
</block>
</container>
<container name="product.info.media" htmlTag="div" htmlClass="product media" after="product.info.main">
<block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="product/view/gallery.phtml" />
</container>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.details" template="product/view/details.phtml" after="product.info.media">
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getDescription</argument>
<argument name="at_code" xsi:type="string">description</argument>
<argument name="css_class" xsi:type="string">description</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Details</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">More Information</argument>
</arguments>
</block>
</block>
<block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
<arguments>
<argument name="triggers" xsi:type="array">
<item name="compareProductLink" xsi:type="string">.action.tocompare</item>
</argument>
</arguments>
</block>
</referenceContainer>
<referenceContainer name="content.aside">
<block class="Magento\Catalog\Block\Product\ProductList\Related" name="catalog.product.related" template="Magento_Catalog::product/list/items.phtml">
<arguments>
<argument name="type" xsi:type="string">related</argument>
</arguments>
<block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="related.product.addto" as="addto">
<block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare" name="related.product.addto.compare" as="compare" template="Magento_Catalog::product/list/addto/compare.phtml" />
</block>
</block>
<block class="Magento\Catalog\Block\Product\ProductList\Upsell" name="product.info.upsell" template="Magento_Catalog::product/list/items.phtml">
<arguments>
<argument name="type" xsi:type="string">upsell</argument>
</arguments>
<block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="upsell.product.addto" as="addto">
<block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare" name="upsell.product.addto.compare" as="compare" template="Magento_Catalog::product/list/addto/compare.phtml" />
</block>
</block>
<block class="Magento\Catalog\Block\Product\View\Additional" name="product.info.additional" as="product_additional_data" />
</referenceContainer>
<referenceBlock name="product.info.addtocart">
<block class="Magento\Catalog\Block\ShortcutButtons\InCatalog" name="addtocart.shortcut.buttons" />
</referenceBlock>
<referenceBlock name="product.info.addtocart.additional">
<block class="Magento\Catalog\Block\ShortcutButtons\InCatalog" name="addtocart.shortcut.buttons.additional" />
</referenceBlock>
</body>
</page>
app/design/frontend/companyname/themename/Magento_Catalog/templates/addtocart.phtml
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @var $block \Magento\Catalog\Block\Product\View */
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()): ?>
<div class="box-tocart">
<div class="fieldset">
<?php if ($block->shouldRenderQuantity()): ?>
<div class="field qty">
<label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
<div class="control">
<input type="number"
name="qty"
id="qty"
maxlength="12"
value="<?php /* @escapeNotVerified */ echo $block->getProductDefaultQty() * 1 ?>"
title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty"
data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
/>
</div>
</div>
<?php endif; ?>
<div class="actions">
<button type="submit"
title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
class="action primary tocart"
id="product-addtocart-button">
<span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span>
</button>
<?php echo $block->getChildHtml('', true) ?>
</div>
</div>
</div>
<?php endif; ?>
<script type="text/x-magento-init">
{
"#product_addtocart_form": {
"Magento_Catalog/product/view/validation": {
"radioCheckboxClosest": ".nested"
}
}
}
</script>
<?php if (!$block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
{
"#product_addtocart_form": {
"catalogAddToCart": {
"bindSubmit": false
}
}
}
</script>
<?php endif; ?>
Soluzione
Go to your catalog_product_view.xml from this path /app/design/frontend/Magento/luma/Magento_Catalog/layout/catalog_product_view.xml
For Single product : add this code in your file
<move element="product.info.social" destination="product.info.addtocart" after="-"/>
For Configurable product : add this code in your file > /app/design/frontend/Magento/luma/Magento_Catalog/layout/catalog_product_view_type_configurable.xml
<move element="product.info.social" destination="product.info.addtocart.additional" after="-"/>
then check after clear your cache using cache commands.
Altri suggerimenti
You can customize a product detail page by overriding catalog_product_view.xml
for remove an element use
<referenceBlock name="name-of-element" remove="true" />
for moving an element use
<move element="name-of-element" destination=""/>
For advanced customization you need to override relevant template files, Go to STORES -> ADVANCED -> DEVELOPER -> DEBUG and Enable 'Template Path' now you can know the template path of each element, you can override required file in your custom theme for customization
-- EDIT --
<referenceContainer name="content">
<referenceContainer name="product.info.main">
<container name="custom.info" htmlTag="div" htmlClass="product-action" after="product.info.price" />
<move element="product.info.addtocart" destination="custom.info"/>
<move element="product.info.social" destination="custom.info" after="product.info.addtocart"/>
</referenceContainer>
For same design as per your requirement you need to do it by CSS
In catalog_product_view.xml you have to add below code
<move element="view.addto.compare"
destination="product.info.addtocart" after="-"/>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a magento.stackexchange
