3

For learning purpose I just added following css in my Module:

enter image description here

.newcolor
{
   background: #ffff00 !important;
   box-shadow: 1px 5px 5px 1px rgba(66, 103, 178, 0.51);
   font-size: 23px !important;
   font-weight: bold !important;
   border-radius: 10px;
   height: 60px;
   font-family: cursive !important;
}

Class newcolor implementation in addtocart.phtml

enter image description here

<div class="actions">
        <button type="submit"
                title="<?= /* @escapeNotVerified */ $buttonTitle ?>"
                class="action primary tocart newcolor"
                id="product-addtocart-button">
            <span><?= /* @escapeNotVerified */ $buttonTitle ?></span>
        </button>
        <?= $block->getChildHtml('', true) ?>
    </div>

Here is my Layout

enter image description here

<?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">
  <head>
        <css src="Senheng_Mycart::css/colorcart.css"/>
   </head>

   <body>
       <referenceBlock name="product.info.addtocart">
           <action method="setTemplate">
               <argument name="template" xsi:type="string">Senheng_Mycart::catalog/product/view/addtocart.phtml</argument>
           </action>
       </referenceBlock>
   </body>
</page>

Result:

Its working well for this product (button become yellow).

enter image description here

But does not work for "short pant" product.

enter image description here

My Question is why class 'newcolor' does not shown in the product with category "short pant" ?

4
  • 1
    I would be way easier to read and answer if instead of screenshots of code you added the actual code.
    – Marius
    Commented May 28, 2019 at 9:05
  • okay wait a moment Commented May 28, 2019 at 9:06
  • @Marius its updated Commented May 28, 2019 at 9:09
  • @YusufIbrahim please check the answer Commented May 28, 2019 at 10:31

1 Answer 1

1

Here is the reason why you have not see the diffrent product with your custom css:

check in

vendor/magento/module-catalog/view/frontend/templates/product/view/form.phtml

                    <?php if (!$block->hasOptions()):?>
                                <?= $block->getChildHtml('product_info_form_content') ?>
                            <?php else:?>
                                <?php if ($_product->isSaleable() && $block->getOptionsContainer() == 'container1'):?>
                                    <?= $block->getChildChildHtml('options_container') ?>
                                <?php endif;?>
                            <?php endif; ?>

                            <?php if ($_product->isSaleable() && $block->hasOptions() && $block->getOptionsContainer() == 'container2'):?>
                                <?= $block->getChildChildHtml('options_container') ?>
                            <?php endif;?>
                            <?= $block->getChildHtml('form_bottom') ?>

Now go to catalog_product_view.xml

                            <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>

check if product has option first container will load and if product hasn't option another block will call where addtocart.phtml call differently

your catalog_product_view.xml should be

               <body>
                <referenceContainer name="product.info.form.content" as="product_info_form_content">
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart" as="addtocart" template="Senheng_Mycart::catalog/product/view/addtocart.phtml"/>
                  </referenceContainer>
                   <referenceBlock name="product.info.addtocart">
                       <action method="setTemplate">
                           <argument name="template" xsi:type="string">Senheng_Mycart::catalog/product/view/addtocart.phtml</argument>
                       </action>
                   </referenceBlock>
               </body>
            </page>
7
  • hi, I will check it tomorrow mate, thank you Commented May 28, 2019 at 13:55
  • I am sorry I still don't understand how to fix it based on your information Commented May 29, 2019 at 2:22
  • You have to change product.info.form.content container 's template too @YusufIbrahim Commented May 29, 2019 at 4:16
  • please check i have updated it in my answer just replace your catalog_product_view.xml with mine @YusufIbrahim Commented May 29, 2019 at 4:19
  • I got following error "Exception #0 (Magento\Framework\Config\Dom\ValidationException): Element 'referenceContainer', attribute 'as': The attribute 'as' is not allowed." Commented May 29, 2019 at 4:23

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.