Quick View Extension Customization
AnsweredI have two questions of varying importance about the 'MAGENTO 2 ADVANCE PRODUCT QUICK VIEW AND AJAX CART'.
Question 1 - Important:
How can I manipulate WHERE on the page / in the HTML that the Quickview Button will be placed? By default it is placing the button in the following path:
.page-products > .products-grid > .product-item > .product-item-info > .product-item-details
Ideally, I would like to have the button implemented at the following:
.page-products > .products-grid > .product-item > .product-item-info > .product-item-actions > .actions-secondary
This would allow me to treat the quickview button exactly like the add-to-compare or add-to-wishlist buttons.
Assistance would be greatly appreciated!!
Question 2 - Not as Important
I see an option to add custom css in the QuickView backend. How would this be acheived. Are there examples of what can be accomplished by using this method?
Thanks!!
-
Official comment
Question 1:
In order to modify the module structure and functionality you need to create another module 'Quickview_Custom', where you can make the necessary XML changes. You should keep the current quick view module un-customised in order to be able to upgrade to future versions without loosing your changes.
In the new custom module you can change the quick view XML templates in order to match your requirements, remove the button from one block and add it to the new location. Similar method can be applied to other modules.
Question 2:
Any custom CSS that you add in the quick view custom css area will be applied in storefront for the quick view lightbox/popup. You can customise appearance of the elements included in quick view. You can change colors, add paddings, borders.. you name it. Basically quickview follows the design you have on product page, but sometimes small adjustments are necessary.
By adding the CSS changes in the custom filed of quickview you can achieve quick design adjustments without creating a subtheme or a custom module.
For example to change the price color to red when displayed in quick view lightbox, add the code below to the Custom CSS area of quick view:
.price {color: red;}See also:
Comment actions -
I appreciate the response... Unfortunately I am not understanding the answer to the first question. I do not know how to "create another module 'Quickview_Custom', where you can make the necessary XML changes.". Which xml file or files need to be changed? Do .phtml files also need to be changed?
It have a very specific question and I would greatly appreciate a very specific answer. What exact steps do I need to take to make the weltpixel quickview button show up in my HTML in the following path:
.page-products > .products-grid > .product-item > .product-item-info > .product-item-actions > .actions-secondary
Which file establishes where the quickview button is going to be placed?
I do not understand how to create a new module. Additional information would be needed to do as you have instructed. My apologies for not understanding... My appreciation for clarification.
Thanks!
-
See also this related article:
Please sign in to leave a comment.
Comments
3 comments