0

Hello I need help moving my finance button from the middle column of the product page over to the fixed right side bar of my product page below Add to Cart button.

The finance button is a module provided by Bread and I have been able to successfully identify the template that is rendering the finance button on the product page but at a loss for how to move this over to the right side bar underneath my Add to Cart button.

I have attempted to copy the following block templates from the Bread modules XML file catalog_product_view.xml into the layout that I believe needs to be rendered on bestoffer_index_index.xml but having no success.

Bread Module Catalog Product View XML

<body>
    <referenceContainer name="content">
        <block class="Bread\BreadCheckout\Block\Js" as="breadcheckout.prod.js" name="breadcheckout.prod.js"/>
    </referenceContainer>
    <referenceContainer name="product.info.extrahint">
        <block template="Bread_BreadCheckout::breadcheckout/view.phtml" class="Bread\BreadCheckout\Block\Product\View" as="breadcheckout.prod.view" name="breadcheckout.prod.view"/>
    </referenceContainer>
    <referenceBlock name="product.info.options.wrapper">
        <block template="Bread_BreadCheckout::breadcheckout/options.phtml" class="Bread\BreadCheckout\Block\Product\View" name="breadcheckout.checkout.options"/>
    </referenceBlock>
</body>

Ultimo Themes Catalog Product View XML

<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">
                <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="Magento_Catalog::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="Magento_Catalog::product/view/review.phtml" after="product.info.stock.sku" />
                <block class="Magento\Catalog\Pricing\Render" name="product.price.final">
                    <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="Magento_Catalog::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="Magento_Catalog::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="Magento_Catalog::product/view/options/wrapper.phtml">
                        <block class="Magento\Catalog\Block\Product\View\Options" name="product.info.options" as="product_options" template="Magento_Catalog::product/view/options.phtml">
                            <block class="Magento\Catalog\Block\Product\View\Options\Type\DefaultType" name="product.info.options.default" as="default" template="Magento_Catalog::product/view/options/type/default.phtml"/>
                            <block class="Magento\Catalog\Block\Product\View\Options\Type\Text" name="product.info.options.text" as="text" template="Magento_Catalog::product/view/options/type/text.phtml"/>
                            <block class="Magento\Catalog\Block\Product\View\Options\Type\File" name="product.info.options.file" as="file" template="Magento_Catalog::product/view/options/type/file.phtml"/>
                            <block class="Magento\Catalog\Block\Product\View\Options\Type\Select" name="product.info.options.select" as="select" template="Magento_Catalog::product/view/options/type/select.phtml"/>
                            <block class="Magento\Catalog\Block\Product\View\Options\Type\Date" name="product.info.options.date" as="date" template="Magento_Catalog::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="Magento_Catalog::product/view/options/wrapper/bottom.phtml">
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart.additional" as="product.info.addtocart" template="Magento_Catalog::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">
                    <block class="Magento\Catalog\Block\Product\View" name="product.info.addto" as="addto" template="Magento_Catalog::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="Magento_Catalog::product/view/mailto.phtml"/>
                </container>
            </container>
            <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.overview" template="Magento_Catalog::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" 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\Framework\View\Element\Template" name="skip_gallery_after.target" before="skip_gallery_before.wrapper" template="Magento_Theme::html/skiptarget.phtml">
                <arguments>
                    <argument name="target_id" xsi:type="string">gallery-prev-area</argument>
                </arguments>
            </block>
            <container name="skip_gallery_before.wrapper" htmlTag="div" htmlClass="action-skip-wrapper">
                <block class="Magento\Framework\View\Element\Template" before="product.info.media.image" name="skip_gallery_before" template="Magento_Theme::html/skip.phtml">
                    <arguments>
                        <argument name="target" xsi:type="string">gallery-next-area</argument>
                        <argument name="label" translate="true" xsi:type="string">Skip to the end of the images gallery</argument>
                    </arguments>
                </block>
            </container>
            <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="Magento_Catalog::product/view/gallery.phtml"/>
            <container name="skip_gallery_after.wrapper" htmlTag="div" htmlClass="action-skip-wrapper">
                <block class="Magento\Framework\View\Element\Template" after="product.info.media.image" name="skip_gallery_after" template="Magento_Theme::html/skip.phtml">
                    <arguments>
                        <argument name="target" xsi:type="string">gallery-prev-area</argument>
                        <argument name="label" translate="true" xsi:type="string">Skip to the beginning of the images gallery</argument>
                    </arguments>
                </block>
            </container>
            <block class="Magento\Framework\View\Element\Template" name="skip_gallery_before.target" after="skip_gallery_after.wrapper" template="Magento_Theme::html/skiptarget.phtml">
                <arguments>
                    <argument name="target_id" xsi:type="string">gallery-next-area</argument>
                </arguments>
            </block>
        </container>
        <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.details" template="Magento_Catalog::product/view/details.phtml" after="product.info.media">
            <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="Magento_Catalog::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="Magento_Catalog::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>
    <referenceContainer name="content">
        <block
                class="Magento\Catalog\Block\Ui\ProductViewCounter"
                name="product_viewed_counter"
                template="Magento_Catalog::product/view/counter.phtml"/>
    </referenceContainer>
</body>

Supplied is a link to a screenshot of my template path hints along with the layout names, happy to do the work if someone can lend a hand.

3
  • did you got any solution ?
    – Pawan
    Commented Oct 20, 2018 at 4:27
  • 1. Is your screenshot the Catalog Product View (catalog_product_view.xml) page? 2. Would you mind posting the Bread_BreadCheckout's catalog_product_view.xml for reference? 3. Is bestoffer_index_index.xml a page provided by that module, or a new page you've constructed?
    – sdaugherty
    Commented Oct 20, 2018 at 7:11
  • @floorz the code example within my question is that of the Bread_BreadCheckout's catalog_product_view.xml. The bestoffer_index_index.xml file is a custom page template that was added to the theme. For reference I am using Ultimo theme and will supply a code example for ultimo/Magento_Catalog/layout xml file that I believe is rendering the elements for the product page.
    – Damian
    Commented Oct 20, 2018 at 15:35

1 Answer 1

0

Making some assumptions not having all the details needed (asked some questions in a comment on your question). I'll be happy to update my answer with more details.

Magento 2 Layout Instructions

You can issue a <move> layout instruction (Reference: Magento 2 - Layout Instructions) to move a block or container to another area of a page.

Example:

<move element="name.of.an.element" destination="name.of.destination.element" as="new_alias" after="name.of.element.after" before="name.of.element.before"/>

Module Layout Customization via Theme

For maintainability, it's best to keep your layout changes contained within the context they belong. In this case, the context is the Bread_BreadCheckout module since it's responsible for making this content available on the page.

You can do so by creating the following file under your theme:

VENDOR_NAME = The vendor of the theme you are using

THEME_NAME = The name of the theme you are using

In: app/design/frontend/VENDOR_NAME/THEME_NAME/Bread_BreadCheckout/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>
        <move element="breadcheckout.prod.view" destination="product.info.extrahint" after="-"/>
    </body>
</page>
1
  • Thanks for your suggested code, but not success here. Just for clarification I have linked to my FTP folder screencast.com/t/ls0m7uT6gQK @floorz
    – Damian
    Commented Oct 20, 2018 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.