So lets start with the obvious issue you have: The blank spaces.
The issue, as you already know, is that your collection contains the count of products that are not to be displayed (as per your code conditional filtering)
Hence the toolbar object contains the wrong count now, as per your actual product display.
That is just but one issue that would arise. Another is that your page count will be wrong. I am sure there will be other discrepancies.
Additionally yoru 'filtering by code' in the .phtml will create an unwanted overhead. Small, but on a busy site, compounding. With Magento is what it is, every bit (pun intended) of lost resources, is a problem.
Your wanted solution, to adjust the collection, and filter them out 'at the source' is the right move.
However:
As noted by @AmitBera, placing your code inside the .phtml is the wrong move. You are setting your self up for later fail - especially with upgradability of your site. You will have to spend time re-integrating your solution to new magento version .phtml files. Not such a big deal with M1 these days, as there is not going to be many (if at all any further) upgrades going forward. M2 is the path now.
However, It is still best to move your code to the observer method as described. The same problem will exists if you opt for a new theme, and keep on M1 for a while longer.
Secondly, your want to filter by date ranges would most likely require you to continuously adjust the code going forward. By your own statement, you have a lot of products. If you filter the collection today, using a start date, going 6 months back, you will obviously be at 7 months back in 1 month, 8 months in 2 months time time, etc etc. You will eventually reach the same problem
This will require continuous adjustment, which is not ideal at all.
An alternative approach is to filter by X days back, from the day the list is viewed. For your 6 months period, you can make that 182.5 days, thus keeping your display rock solid on a 6 month display period, calculated from the current date. No continuous updates required.
Filtering going X days back is really easy. :)
This is an extract from my Dynamic Category Products Extension, (yes blatant punt, cannot help myself!) which allows you to set rules on categories, and populate products to the category that validates to the given rule(s)
In this code the following variables would have existed prior to the code shown.
$collection
is a product collection, derived from the current active category. This is gotten by calling : Mage::getModel('catalog/category')->load($category_id)->getProductCollection();
It is still a product collection, just derived from a different source object. Will be compatible with your product collection.
$value
is the days to go back. in your case : 182.5 days
- $attrCode is whatever attribute code you want to filter on. Be it created_at, updated_at etc
The code is very straight forward. Please ask if you need any clarification.
$days = ($value == 1)
? 'day'
: 'days';
$todayDate = Mage::app()->getLocale()->date()->toString(
Varien_Date::DATE_INTERNAL_FORMAT
);
$startDate = date('Y-m-d',
strtotime(
'-' . $value . ' ' . $days,
strtotime($todayDate)
)
);
$collection->addAttributeToFilter(
array(
array(
'attribute' => $attrCode,
'gteq' => $startDate,
'date' => true
)
)
);
$collection->addAttributeToFilter(
array(
array(
'attribute' => $attrCode,
'notnull' => true
),
)
);
I hope that helps.
PS: Do consider my extension, it will save you heaps of time, especially managing a large catalog. It does not cost much.
Best Answer
It's not a super straightforward process, but I believe I found what you're looking for, all of this happens in the chrome console, so excuse the not-so-cookie-cutter solution.
I started out with:
var jQ = require('jquery'); jQ('div.swatch-attribute').each(function() { console.log(this); });
, which resulted in:[<div class="swatch-attribute color" attribute-code="color" attribute-id="93" option-selected="56">…</div>, <div class="swatch-attribute size" attribute-code="size" attribute-id="142" option-selected="168">…</div>
then I checked the event listeners on one of these elements, two relevant ones were linked to
div.swatch-opt
. I also checked the js file that had these handlers,swatch-renderer.js
, which has a method calledmageSwatchRenderer
and in that method a lot of the happiness takes place.So..
jQ('div.swatch-opt').data('mageSwatchRenderer')
and from there it's a short throw to finally gettingjQ('div.swatch-opt').data('mageSwatchRenderer').options.jsonConfig
which has all the relevant information. Specifically(jQ('[data-role=swatch-options]').data('mageSwatchRenderer').options.jsonConfig.index
has a list of the product Ids with the options.jQ('div.swatch-attribute').each(function() { console.log( jQ(this).attr('option-selected') ) });
will grab the currently set options, match that against thejsonConfig.index
and you're set.