Integrate Cart2Quote M2 Into Your Frontend Theme
Introduction
This guide offers you the most basic, complete instruction to integrate Cart2Quote into your Magento 2 custom theme. With and through this guide, it is my intention to help you to get your store up and running in all the right ways.
Rather have myself or a colleague of mine do the hard work for you? Order our theme integration service here.
An understanding of the work to be done
There are multiple ways and methods to force frontend features to appear in their intended place, beautifully designing your store's frontend and customer experience. The method which I will be demonstrating to you here is considered good practice, because:
The changes will overwrite the existing software - as opposed to directly replacing it. This ensures module upgradability and keeps the development clean, maintaining the original copy.
Magento 2 offers the ability to smoothly develop the module and theme integration in your app/design/frontend directory. You will, if you already have a custom theme installed, have 2 additional directories within the design directory. Your directory structure will look like this: app/design/frontend/<vendor>/<theme>/Cart2Quote_Quotation/. All required overwrites will be added here. I have created a basic visualisation, and added a few example files to the file structure, below:
app/design/frontend/
├── <vendor>/
── ├── <theme>/
─────├── Cart2Quote_Quotation/
─────── ├── layout/default.xml
─────── ├── templates/
───────────── ├── quote/view.phtml
───────────── ├── product/list.phtml
─────── ├── web/
───────────── ├── css/styles.css
─────────────├── js/catalog-add-to-cart.js
─────────────├── template/quote/item/price.html
───────├── requirejs-config.js
Getting Started
You will preferably be working on a development environment and then pushing the work to your production environment after concluding module integration tests.
Before doing anything, you will need to investigate the issue and discover what needs to be done. Navigate to the store's frontend and take note of all required changes.
Changing the world wide web one element at a time
You may encounter a variety of issues which will need to be overcome, and you will require experience before being able to deduct whether the required changes relate to the layout (.xml files), the template (.phtml & .js files), the styling (.css files), or all of the above. Do some digging, and make sure you are aware of what needs to be done and where the changes should be made before making any changes to the code.
All elements relating to Cart2Quote and your custom theme already exist - they may currently be horribly warping your storefront's user experience. They may be as wrong as a handsome rat on a hot day; but the fact remains, they do exist. For example, let's say that the "add to quote" button element, as seen in the screenshot above, is currently styled to be green: "color: green;".
It is your task to add said file, as per the correct directory structure, to the app/design/frontend/vendor/theme/Cart2Quote_Quotation/ directory. You will then need to simply replace the existing "color: green;" with "color: blue;". Be sure to flush your Magento cache after making changes so that you can see implemented changes, or disable cache before starting work.
Magento performs the same logic when completing tasks more complex; such as overwriting the layout structure or correcting and specifying a javascript call, as it does when making a simple change such as the example above.
Category Pages
Cart2Quote overrides the category page to integrate the "Add to Quote" button.
If your theme has a customised category page, you can copy said template to the Cart2Quote folder and apply your changes there. See below for an overview.
Copy app/design/frontend/<Vendor>/<theme>/Magento_Catalog/product/ list.phtml to the Cart2Quote_Quotation/templates/product directory.
Replace the add-to-cart actions in the template with the contents found within:
<!-- Start Cart2Quote_Quotation -->…
<!-- End Cart2Quote_Quotation -->Depending on the theme, additional actions may be required.
MiniQuote
Some themes have alternative headers.
There is a move in our default.xml layout which can be adjusted.
Copy vendor/cart2quote/module-quotation-encoded/view/frontend/layout/default.xml to ../Cart2Quote_Quotation/layout/default.xml and adjust the destination of the move, to your theme's customminicart location:
<move element="miniquote" destination="header-wrapper" after="minicart"/>
You may need echo $this->getChildHtml(“miniquote”); in your theme’s custom header template.
