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
    May 28 '19 at 9:05
  • okay wait a moment May 28 '19 at 9:06
  • @Marius its updated May 28 '19 at 9:09
  • @YusufIbrahim please check the answer May 28 '19 at 10:31
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 May 28 '19 at 13:55
  • I am sorry I still don't understand how to fix it based on your information May 29 '19 at 2:22
  • You have to change product.info.form.content container 's template too @YusufIbrahim May 29 '19 at 4:16
  • please check i have updated it in my answer just replace your catalog_product_view.xml with mine @YusufIbrahim May 29 '19 at 4:19
  • I got following error "Exception #0 (Magento\Framework\Config\Dom\ValidationException): Element 'referenceContainer', attribute 'as': The attribute 'as' is not allowed." May 29 '19 at 4:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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