Actually the pre-order system works only with the products from the categories you predefined. So in this case we'll just define a new category called 'offers' and will hide it from the slider tabs.
Please follow these steps:
- Define a new category called 'offers'. Something similar to this.
- Add the category into the 'js/products/categoryList.js' file. Like in the screenshot.
- Now you should set the default property 'hidden' for the rest of the categories to false. Open category model and set the 'hidden' attribute to false. See the screenshot.
- Hide the hidden category from the tabs. To do so, please open the 'js/products/views/categoryListView.js' and add the if statement when adding the new category, see the screenshot.
- Open your 'js/products/products.js' file and search for 'Create category collection' comment.
- Add the following lines of code like shown in the screenshot.
- Once that's done, please follow the instructions from the screenshot.
- Refresh your browser, open your browser's console and pick the correct 'cid's, see the screenshot, you'll have to add these values on your 'Order now' buttons later.
- Open your HTML file, go down to your offers and add the 'js-offer' class on every 'order now' button. Once that's done, please pass through them again and add the 'data-target' attribute with the values you've copy pasted previously. See the screenshot.
- Bind the click event on those buttons within the 'js/products/products.js' file see the screenshot. Once that function in defined all you have to do is to call that function with the init function, like in the screenshot.
- Remove / comment the 'console.log' from the script I've provided, see the screenshot.
If you wrote the correct data-targets, then by clicking on the 'order now' buttons, those offers should be added to the 'cart'.