Magento – Layout move elements

layoutmagento2

I would like to move the "product-price" so it is just over the "add-to-cart".

The problem is I didn't find the exact "destination".

Had some minor success, either on "configurable products" or on the "simple product" view.

So my question is it possible to move if "configurable product" –>destination a or "simple product" –>destination b

Destination A:

<move element="product.price.final" destination="product.info.options.wrapper" after="-" />

Destination B:
<move element="product.price.final" destination="product.info.form.content" before="-" />

Thanks for your help

The idea with "basket.button.price" didn't work. Here my xml:

<container name="product.info.form.content" as="product_info_form_content">
<container name="basket.button.price" htmlTag="div" htmlClass="basket__elements"></container>
    <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart" as="product.info.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">
        <container name="basket.button.price" htmlTag="div" htmlClass="basket__elements"></container>
            <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart.additional" as="product.info.addtocart" template="product/view/addtocart.phtml"/>
        </block>
    </block>

Best Answer

I added this xml file to move "product.price.final" to "product.info.form.options" destination.

File

app/design/frontend/Vendor/theme/Magento_ConfigurableProduct/layout/catalog_product_view_type_configurable.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>
        <move element="product.price.final" as="product.info.main.bottom.price" destination="product.info.form.options" before="product.info.options.wrapper.bottom"/>
    </body>
</page>

Related Solutions

Magento – How to extend layout in Custom module

Here is a simple module that displays static static html content on the product page. You can try it. It 100% works on my local Magento 2 test environment.

Base folder: app\code

Directory tree:

└── Test
    └── Catalog
        ├── Block
        │   └── Rewrite
        │       └── Product
        │           └── View.php
        ├── composer.json
        ├── etc
        │   └── module.xml
        ├── registration.php
        └── view
            └── frontend
                ├── layout
                │   └── catalog_product_view.xml
                └── templates
                    └── test.phtml

File: Test/Catalog/composer.json

{
    "name": "test/catalog",
    "description": "Test module for Magento 2",
    "type": "magento2-module",
    "version": "1.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/module-catalog": "~100.0"
    },
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "Test\\Catalog\\": ""
        }
    }
}

File: Test/Catalog/registration.php

<?php

use \Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Test_Catalog', __DIR__);

File: Test/Catalog/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="Test_Catalog" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

File: Test/Catalog/view/frontend/layout/catalog_product_view.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="Test\Catalog\Block\Rewrite\Product\View" name="product.seller.list" template="test.phtml" />
        </referenceContainer>
    </body>
</page>

File: Test/Catalog/Block/Rewrite/Product/View.php

<?php

namespace Test\Catalog\Block\Rewrite\Product;

class View extends \Magento\Catalog\Block\Product\View
{

}

File: Test/Catalog/view/frontend/templates/test.phtml

!!!!some static content!!!!

Magento – Magento 2 DOM validation exception when in developer mode

The problem you are facing is due to use of htmlTag, htmlClass for referenceContainer. You must write as follows:

<!-- Reset attributes of main containers -->
<referenceContainer name="product.info.main"  />
<referenceContainer name="product.info.media" />

Please try without those html tags as you will not be needing them in referenceContainers. You can put those for containers and blocks.

Best Answer

Related Solutions

Magento – How to extend layout in Custom module

Magento – Magento 2 DOM validation exception when in developer mode

Related Topic