OC version. There are multiple ways you could achieve this:Lumirion wrote: ↑Fri Apr 19, 2024 1:53 amLooking through twig files like Product.twig and contact.twig I see a variable at the top that looks like this {{ header }} . I would like to add custom styles and scripts to particular views with out affecting other views that use the same headers. Is it possible to make a local copy of the contents of the {{ header }} and insert my changes into the copy like a string variable before before adding it to the twig like {{ HeaderCopy }} ? Or is there a more correct way to do this in OC 3?
- By layouts
- By extension modules
- By event triggers
without the need to reproduce the header content since OC uses the top, left, right and bottom directions to load contents from the core already.
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Code: Select all
/* before */
public function addStylesAndScriptsToProductPages(&$route, &$args) {
/*
the Product route is 'product/product',
aka: 'catalog/view/theme/journal3/template/product/product.twig'
*/
if ($route == 'product/product') {
/*
What do I do here to get my code into the head section
*/
}
}
You may use my extension Custom Templates Pro for this. This extension can substitute any template file (twig) in the engine for any route, and more.
Unfortunately, right now demo sites are unavailable.
My FREE extensions in marketplace. [ security | flexibility | speedup ]
Take note that Journal framework is not supported on the forum. However, according to your event trigger code, you are using a /before event as your comment specifies that you're looking to target the product/product.twig file. Therefore, you'd need to use a /after event to achieve this.Lumirion wrote: ↑Sat Apr 20, 2024 5:23 amI'm using Opencart 3. I would like to use the event system to do this because I like the idea of a clean core. How do I get my event to put my code into the head tag only when my chosen view is is being generated?Code: Select all
/* before */ public function addStylesAndScriptsToProductPages(&$route, &$args) { /* the Product route is 'product/product', aka: 'catalog/view/theme/journal3/template/product/product.twig' */ if ($route == 'product/product') { /* What do I do here to get my code into the head section */ } }
Multiple examples on how to achieve this can be looked into your catalog/controller/extension/advertise/google.php file . Alternatively, you can also look for the codes:
Code: Select all
$this->document->addStyle
$this->document->addScript
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
upload\catalog\controller\event\Insert_PDP_StylesAndScripts.php. In the top level, next to upload, I put a file called install.json. Then I zipped the top level folder into a file named Insert_PDP_StylesAndScripts.ocmod.zip. On the backend of a test site, I went to Extensions->Installer and clicked upload. The file uploaded and I got the Install successful message. But I don’t see my module under Extensions->Modules or my event under Events. My Insert_PDP_StylesAndScripts.php looks like this
Code: Select all
<?php
class ControllerEventInsertPDPStylesAndScripts extends Controller {
public function install() {
$this->load->model('setting/event');
$this->model_setting_event->deleteEventByCode('Insert_PDP_StylesAndScripts');
if($this->request->post['module_Insert_PDP_StylesAndScripts_status']){
$this->model_setting_event->addEvent('Insert_PDP_StylesAndScripts', 'catalog/view/theme/journal3/template/product/product/after', 'controller/event/Insert_PDP_StylesAndScripts/addStylesAndScriptsToProductPages');
}
}
public function uninstall(){
$this->load->model('setting/event');
$this->model_setting_event->deleteEventByCode('Insert_PDP_StylesAndScripts');
}
/* After product.twig is converted to HTML inject our CSS and styles into head */
public function addStylesAndScriptsToProductPages(&$route, &$args, &$output) {
/*
if the view route is 'product/product',
aka: 'catalog/view/theme/journal3/template/product/product.twig'
*/
if ($route == 'product/product') {
/* replace the </head> with the Styles and scripts we want */
$output = str_replace('</head>', '<style>
/* For mobile Devices: */
.desktoplogo {
display: none;
}
.mobilelogo {
display: block;
}
/* For PC */
@media only screen and (min-width: 768px) {
.mobilelogo {
display: none;
}
.desktoplogo {
display: none;
}
}
</style>
</head>', $output);
}
}
}
Code: Select all
public function install() {
$this->load->model('setting/event');
$this->model_setting_event->deleteEventByCode('Insert_PDP_StylesAndScripts');
if(!$this->model_setting_event->getEventByCode('Insert_PDP_StylesAndScripts')){ /* No copies of this event, or older versions, are still loded. Its safe to load one. */
$this->model_setting_event->addEvent('Insert_PDP_StylesAndScripts', 'catalog/view/product/product/after', 'extension/module/Insert_PDP_StylesAndScripts/addStylesAndScriptsToProductPages');
}
}
public function uninstall(){
$this->load->model('setting/event');
$this->model_setting_event->deleteEventByCode('Insert_PDP_StylesAndScripts');
}
/* After product.twig is converted to HTML inject our CSS and styles into head */
public function addStylesAndScriptsToProductPages(&$route, &$args, &$output){
/* replace the </head> with the Styles and scripts we want */
$output = str_replace('</head>', '<style>
/* For mobile Devices: */
.PClayout {
display: none;
}
.MobileLayout {
display: block;
}
/* For PC */
@media only screen and (min-width: 768px) {
.MobileLayout {
display: none;
}
.PCLayout {
display: block;
}
}
</style>
</head>', $output);
}
}
Did you used the installer with your ZIP file to run this extension? You'll need to post the complete ZIP file to take a look.Lumirion wrote: ↑Fri May 03, 2024 4:13 amI created a clean testing environment by installing the latest 3.0.3.9 version of OpenCart on a Virtual machine. Then I made a basic module and tested whether it would install on the server. I removed the module and edited it to register an event and handle it like this:
When I install the module the event is registered but after clearing all the caches and navigating to a default OpenCart product page if I inspect the html source the head tag remains empty.Code: Select all
public function install() { $this->load->model('setting/event'); $this->model_setting_event->deleteEventByCode('Insert_PDP_StylesAndScripts'); if(!$this->model_setting_event->getEventByCode('Insert_PDP_StylesAndScripts')){ /* No copies of this event, or older versions, are still loded. Its safe to load one. */ $this->model_setting_event->addEvent('Insert_PDP_StylesAndScripts', 'catalog/view/product/product/after', 'extension/module/Insert_PDP_StylesAndScripts/addStylesAndScriptsToProductPages'); } } public function uninstall(){ $this->load->model('setting/event'); $this->model_setting_event->deleteEventByCode('Insert_PDP_StylesAndScripts'); } /* After product.twig is converted to HTML inject our CSS and styles into head */ public function addStylesAndScriptsToProductPages(&$route, &$args, &$output){ /* replace the </head> with the Styles and scripts we want */ $output = str_replace('</head>', '<style> /* For mobile Devices: */ .PClayout { display: none; } .MobileLayout { display: block; } /* For PC */ @media only screen and (min-width: 768px) { .MobileLayout { display: none; } .PCLayout { display: block; } } </style> </head>', $output); } }
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Two issues:Lumirion wrote: ↑Fri May 03, 2024 10:37 pmYes, I used the installer. Here is a copy of the zip. https://drive.google.com/file/d/1QN76K ... p=sharing
Code: Select all
$this->model_setting_event->addEvent('Insert_PDP_StylesAndScripts', 'catalog/view/product/product/after', 'extension/module/Insert_PDP_StylesAndScripts/addStylesAndScriptsToProductPages');
2 - You're using uppercase letters and underscores with your extension/module/Insert_PDP_StylesAndScripts/addStylesAndScriptsToProductPages compared to your controller conventional name. Best to rename your filenames all lowercase as well as your controller routes by also removing the underscores from your routes.
3 (optional but good to know): You're using:
Code: Select all
<!--
Code: Select all
-->
Code: Select all
{#
Code: Select all
#}
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Now about my product page route, I’m trying to edit the head only when it’s being used for a product page. I don’t think that, if I use the header route, I can tell from the header controller which page is currently using it.
So would it be better to create a new view that extends header.twig and use my current route to the product page to over write {header} ? Or is there a simpler way?
Using the /after trigger, the &$route string will already determine the location. Therefore, you could still use:Lumirion wrote: ↑Sat May 04, 2024 3:40 amGood point about removing the underscores and capitalization in my routes and filenames. I will rename the files and update routes and fix the twig syntax shortly.
Now about my product page route, I’m trying to edit the head only when it’s being used for a product page. I don’t think that, if I use the header route, I can tell from the header controller which page is currently using it.
So would it be better to create a new view that extends header.twig and use my current route to the product page to over write {header} ? Or is there a simpler way?
Code: Select all
$this->request->get['route']
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Code: Select all
$this->request->get['route']
Code: Select all
/* After product.twig is converted to HTML inject our CSS and styles into head */
public function addproductpagestyles(string &$route, array &$args, mixed &$output): void {
/* Get the route of the current page this header is being used on and see if it is a product page. */
if (str_contains($this->request->get['route'], 'product/product')) {
/* replace the </head> with the Styles and scripts we want */
$output = str_replace(['</head>'], '<style>
/* For mobile Devices: */
.PClayout {
display: none;
}
.MobileLayout {
display: block;
}
/* For PC */
@media only screen and (min-width: 768px) {
.MobileLayout {
display: none;
}
.PClayout {
display: none;
}
}
</style>
</head>', $output);
}
}
It seems to be running and trying to affect the product pages, but the style sample is not in the head element. Instead, an error message pops up on product pages.
It says ” Unknown: preg_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/html/opencart/storage/modification/system/engine/action.php on line 65”
Do I need to do something to $output before str_replace?
Code: Select all
$this->document->addStyle
You don't need to use: str_contains to track the route. Simply:
Code: Select all
if (isset($this->request->get['route']) && $this->request->get['route'] == 'product/product') {
...
}
As for the deprecation error message, you mentioned to use Opencart 3 but the 4 decimal version hasn't been provided on your behalf.
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Line 22 of insertproductpagesstyles.php, targeting the product page is commented out. Line 23 looks like this.
Code: Select all
$this->model_setting_event->addEvent('insertproductpagestyles', 'catalog/view/common/header/after', 'extension/module/insertproductpagestyles/addproductpagestyles');
I will switch to the safer route check. I will definitely look into using $this->document->addStyle but I also want to get this version running as well .
If I were to switch to the Product/product route and replace the str_replace with a $this->document->addStyle would the route designation from the event be sufficient to associate the “$this” with the product page?
Lumirion wrote: ↑Wed May 08, 2024 12:37 amI’m using PHP 8.2 and Opencart 3.0.3.9 downloaded on 4/29/2024.
Line 22 of insertproductpagesstyles.php, targeting the product page is commented out. Line 23 looks like this.It should be targeting the header, then checking if the header is being used for a product page. I will remove the array indicators around the search string.Code: Select all
$this->model_setting_event->addEvent('insertproductpagestyles', 'catalog/view/common/header/after', 'extension/module/insertproductpagestyles/addproductpagestyles');
I will switch to the safer route check. I will definitely look into using $this->document->addStyle but I also want to get this version running as well .
If I were to switch to the Product/product route and replace the str_replace with a $this->document->addStyle would the route designation from the event be sufficient to associate the “$this” with the product page?
Code: Select all
$this->document->addStyle(...);
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Code: Select all
$this->document->addStyle('catalog/view/PDPStyles/productpage.css');
Code: Select all
$class = 'Controller' . preg_replace('/[^a-zA-Z0-9]/', '', $this->route);
Code: Select all
$this->model_setting_event->addEvent('insertproductpagestyles', 'catalog/view/common/header/after', 'extension/module/insertproductpagestyles/addproductpagestyles');
Code: Select all
$this->model_setting_event->addEvent('insertproductpagestyles', 'catalog/view/product/product/after', 'extension/module/insertproductpagestyles/addproductpagestyles');
Edit- Apparently it was. I added a new controller file insertproductpagestyles.php in catalog/controller/extension/module/ containing my event handler. Currently I no longer see that error message, but my
Code: Select all
$this->document->addStyle('catalog/view/PDPStyles/productpage.css');
Users browsing this forum: No registered users and 8 guests