2

I tried to move an element to above add-to-cart block at category page.

Please check the following attachments.

enter image description here

I need as the following:

enter image description here

For product availability, I am using an extension. The name of that plugin for the element is mageArray.checkDelivery.

I used the following at my layout default.xml file as follows:

<move element="product.info.addtocart" destination="product.info.main" after="mageArray.checkDelivery"/>

**I tried the above code to change the position of the product availability block. **

Then I get the layout of add to cart and pin availability as per my requirement.

But, from now, add to cart is not working.

My website : https://www.depoto.com/taparia-mh200-machinist-hammers-with-handle.html

1
  • Have you check console or error log? Oct 10, 2019 at 11:17

2 Answers 2

5

your AddtoCart Button out of the form id="product_addtocart_form"

enter image description here

please move your addtocart Button with form like:

enter image description here

xml move

<move element="product.info" destination="product.info.main" after="mageArray.checkDelivery"/>

Hope this will help you. thanks

4
  • Yes, i just seen that its out of form. Can you tell me how to do it it form? Oct 10, 2019 at 11:28
  • 1
    thanks its working. <move> above code Oct 10, 2019 at 11:48
  • @RanjeetKumar, please add the move code in answer. then i can accept Oct 12, 2019 at 4:31
  • @TejaBhagavanKollepara my answer updated. thanks Oct 15, 2019 at 13:38
3

I have to check your website and I have to find it what is an exact issue on your site. In your addtocart action form action not available

Your AddtoCart HTML:-

<div class="box-tocart">
        <div class="fieldset">
                <div class="field qty">
            <label class="label" for="qty"><span>Qty:</span></label>
            <div class="control">
                <input type="number" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1,&quot;maxAllowed&quot;:10000}}">
                <div class="qty-changer">
                    <a href="javascript:void(0)" class="qty-inc"><i class="porto-icon-up-dir"></i></a>
                    <a href="javascript:void(0)" class="qty-dec"><i class="porto-icon-down-dir"></i></a>
                </div>
            </div>
        </div>
                <div class="actions">
            <button type="submit" title="Add to Cart" class="action primary tocart" id="product-addtocart-button">
                <span>Add to Cart</span>
            </button>
</div>

My AddtoCart HTML:-

<div class="product-add-form">
    <form data-product-sku="sdfggdsfsdfsd" action="http://localhost/c/index.php/checkout/cart/add/uenc/aHR0cDovLzE5Mi4xNjguMC4xMC9jL2luZGV4LnBocC9zZGZnZ2RzZi5odG1s/product/75/" method="post" id="product_addtocart_form" novalidate="novalidate">
        <input type="hidden" name="product" value="75">
        <input type="hidden" name="selected_configurable_option" value="">
        <input type="hidden" name="related_product" id="related-products-field" value="">
        <input type="hidden" name="item" value="75">
        <input name="form_key" type="hidden" value="lGxI5yhFm66Nw1rc">                            
        <div class="box-tocart">
            <div class="fieldset">
                <div class="field qty">
                    <label class="label" for="qty"><span>Qty:</span></label>
                    <div class="control">
                        <input type="number" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1,&quot;maxAllowed&quot;:10000}}">
                        <div class="qty-changer">
                            <a href="javascript:void(0)" class="qty-inc"><i class="porto-icon-up-dir"></i></a>
                            <a href="javascript:void(0)" class="qty-dec"><i class="porto-icon-down-dir"></i></a>
                        </div>
                    </div>
                </div>
                <div class="actions">
                    <button type="submit" title="Add to Cart" class="action primary tocart" id="product-addtocart-button">
                        <span>Add to Cart</span>
                    </button>

                </div>
            </div>
        </div>

</form>
</div>

Check below xml to move addtocart element

<move element="product.info" destination="product.info.main" after="mageArray.checkDelivery"/>

Hope this will help you..!

1
  • check it I have updated my answer
    – Devidas
    Oct 10, 2019 at 11:33

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.