0

I am working on a Magento 2.1.7 shop and I have created a (custom) child-theme of Magento Blank.

On the product page, I need to add Bootstrap classes to the code below

<!-- Product photo Begin -->
<div class="row">
    <div class="product-info">
        <div class="product media">
            <!-- More code here -->
        </div>

        <div class="product-info-main">
            <!-- More code here -->
        </div>  
    </div>
</div>
<!-- Product photo End -->

like this

<!-- Product Info Begin -->
<div class="row">
    <div class="product-info">
        <div class="product media col-xs-12 col-sm-4">
            <!-- More code here -->
        </div>

        <div class="product-info-main col-xs-12 col-sm-8">
            <!-- More code here -->
        </div>  
    </div>
</div>

so that it aligns nicely.

My catalog_product_view.xmlfile contains this code:

<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <move element="product.info.main" destination="content" before="product.info.media"/>
    <move element="product.info.main" destination="content" before="product.info.details"/>
    <move element="product.info.details" destination="main"/>
    <referenceContainer name="catalog.product.related" remove="true" />
    <referenceContainer name="div.sidebar.main" remove="true" />
    <referenceContainer name="main" htmlClass="product-info">
    </referenceContainer>
</page>

Questions:

  1. In what files can I find the code for the "Product photo" and "Product info" blocks?
  2. If it is the case, where, in my custom theme shell I copy them to overwrite the defaults safely (irreversibly)?
Improve this question
1
  • It is not a duplicate: I can't find the .phtml files corresponding to the blocks I want to add classes to.
    – Razvan Zamfir
    Commented Dec 7, 2017 at 16:21

1 Answer 1

Reset to default
0

You can try to make it via layout xml:

Theme_Root/Magento_Catalog/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">
            <container name="content.row" htmlTag="div" htmlClass="row" before="-">
                <container name="content.row.product-info" htmlTag="div" htmlClass="product-info" />
            </container>
        </referenceContainer>

        <referenceContainer name="product.info.main" htmlClass="product-info-main col-xs-12 col-sm-8" />
        <referenceContainer name="product.info.media" htmlClass="product media col-xs-12 col-sm-4" />
        <move element="product.info.media" destination="content.row.product-info" before="-" />
        <move element="product.info.main" destination="content.row.product-info" />

        <referenceContainer name="div.sidebar.main" remove="true" />
        <referenceContainer name="catalog.product.related" remove="true" />
    </body>
</page>

Write me if you have any issues.

Improve this answer
12
  • Please, see the edit. Your code is good, but I need to hide my sidebar and it is showing the sidebar.
    – Razvan Zamfir
    Commented Dec 7, 2017 at 16:43
  • Try again, I removed div.sidebar.main and catalog.product.related in my layout.
    – Evgeny Levinsky
    Commented Dec 7, 2017 at 16:52
  • The <nav class="navigation navbar navbar-default" data-action="navigation">//more code</div> has to disapear from <div class="column main"> <nav class="navigation navbar navbar-default" data-action="navigation"></div><div class="row"><div class="product-info"></div></div></div>
    – Razvan Zamfir
    Commented Dec 7, 2017 at 16:57
  • I have moved the top bar to the left side and stacked it. So, the product categories form a vertical, left side navigation.
    – Razvan Zamfir
    Commented Dec 7, 2017 at 17:03
  • Great, so layout is good now? Сan I help you with anything else?
    – Evgeny Levinsky
    Commented Dec 7, 2017 at 17:07

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