Giter VIP home page Giter VIP logo

ajaxswatches's Introduction

ONLY WORKS WITH RWD THEME

DOES NOT WORK WITH 1.9.3

MODULE IS NO LONGER MAINTAINED

Wigman AjaxSwatches

Upgrade notice: When upgrading from versions before 0.3, please remove

  • app/code/local/wigman
  • skin/frontend/rwd/wigman
  • app/design/frontend/rwd/default/layout/wigman_ajaxswatches.xml
  • app/design/frontend/rwd/default/template/wigman

Known bugs: Does not work with 1.9.3

version

0.4.4 Release notes:

  • Adds check to product list pages wether a product is configurable and contains an attribute defined as swatch from admin (so less needless requests on the serverside
  • The loader placeholder no longer comes from javascript but is now implemented (including above check) in app/design/frontend/base/default/template/wigman/ajaxswatches/catalog/product/list/swatches.phtml
  • bugfixes to the product view pages when multiple attributes are used.

0.4.3 Release notes:

  • Composer added by Brandung GmbH & Co. KG

0.4.2 Release notes:

  • Fixed image constraint in grid/list mode.
  • Added support for custom layered navigation modules (like ManaDev). See point #4 below for detailed info.

0.4.1 Release notes:

  • Bug fix when no store-specific labels are defined.

0.4.0 Release notes:

  • Added attribute sorting by admin position
  • Swatches are now respecting the admin setting 'Display Out of Stock Products' option that can be set at System->Configuration->Catalog->Inventory->Stock Options (cataloginventory/options/show_out_of_stock)
  • Fixed a major bug preventing the swatches from being cached (many thanks to Lion Web Inc. for contributing to the fix)
  • We're now showing a loader images where the swatches are supposed to pop-up after load. Because it could take a second if the swatches haven't been cached yet

0.3.0 Release notes:

  • moved code pool to community (requested by Simon Sprankel)
  • moved theme files to /base folder since some themes are making the swatches backwards compatible
  • changed a jQuery selector to match product-list items on a wider scale of themes

For support or requests contact us through http://e-tailors.nl/contact

1. Adding Ajax functionality to the product-list pages (categories) to speed up the initial page load.

In cases where you have many product-options this can speed up the pageload 10 times!

If you have many colors/swatches in your RWD shop, you need this.

More info on this functionality here, with a test-case: http://e-tailors.nl/ajaxswatches-extension/

2. Adding Ajax functionality on product-view pages to Magento's RWD color swatches to switch all gallery images

DEMO: http://staging.e-tailors.nl/magentodemo/121-170-ladies-wallet-chamonix.html

This Module adds an Ajax event to the new ColorSwatches in Magento 1.9.1.0 When the event ConfigurableMediaImages.updateImage fires up, the original updateImage() function is executed. After this we make an AJAX request to [baseurl]+'ajaxswatches/ajax/update' requesting the MediaGallery images.

The ID used to fetch the MediaGallery uses the original code from the RWD theme:

var select = $j(el);
var label = select.find('option:selected').attr('data-label');
var productId = optionsPrice.productId;
        
var pid = ConfigurableMediaImages.productImages[productId].option_labels[label].products[0];

Once we've retrieved the new MediaGallery images, we remove the old thumbs and large images (for the sake of memory consumption). We might argue that it would be better to keep the downloaded images, but I chose to remove them. Second time you load the images it should come from browser-cache anyway.

The whole code is pretty simple and does not touch any default code. All extra images are loaded after clicking the ColorSwatches, so no extra load on page-render.

3. Sort attributes by admin position and hide out of stock products if set from admin

Why have these options and not use them in the default configurable swatches? Beats me. I don't like the idea overriding too many models, but unfortunately some where necessary.

To enable attribute sorting on swatches I extended:

  • Mage_Catalog_Block_Product_View_Type_Configurable
  • Mage_ConfigurableSwatches_Helper_Productimg
  • Mage_ConfigurableSwatches_Model_Resource_Catalog_Product_Attribute_Super_Collection

To enable admin option 'Display Out of Stock Products' set to false I extended:

  • Mage_ConfigurableSwatches_Helper_Mediafallback
  • Mage_ConfigurableSwatches_Helper_Productimg (was already overridden to enable sorting)

4. Add support for Custom layered navigation.

When using a custom layered navigation module, chances are that the jQuery selector that determines what swatches are active is malfunctioning. Therefore you can (as of version 0.4.2) set a custom jQuery selector in the layout file.

How to change the jQuery selector: Copy the file /app/design/frontend/base/default/layout/wigman_ajaxswatches.xml to your custom theme -> /app/design/frontend/[YOUR DESIGN PACKAGE]/[YOUR THEME]/layout/wigman_ajaxswatches.xml

Change '.swatch-current .value img' on line 39 into your custom selector:

		<block type="core/template" name="baseurl" template="wigman/ajaxswatches/baseurl.phtml">
		    <action method="setData"><name>active_swatch_selector</name><value><![CDATA[.swatch-current .value img]]></value></action>
		</block>

For example, if you are using ManaDev's layered navigation, the selector would become "input[id^=filter_left_color][checked=checked] ~ label span"

This selector pickes the <label><span>Attribute Label</span></label> that comes after a checked <input id="filter_left_color_1234"> element.

		<li class="m-selected-ln-item">
			<input type="checkbox" id="filter_left_color_1234" value="1000" checked="checked" onclick="setLocation('http://www.url.com');">
			<label for="filter_left_color_1234"><span class="m-selected-checkbox-item" title="Black">Black</span></label>
		</li>

You will probably need to change "filter_left_color" to reflect your attribute name (like filter_left_kleur or filter_left_farbe) if you run a non-english store.

Also, if using multiple store-views you could chain selectors like: "input[id^=filter_left_color][checked=checked] ~ label span,input[id^=filter_left_kleur][checked=checked] ~ label span".

Or you could create a separate layout file per store theme design folder:

  • /app/design/frontend/[YOUR DESIGN PACKAGE]/[YOUR THEME ENGLISH]/layout/wigman_ajaxswatches.xml
  • /app/design/frontend/[YOUR DESIGN PACKAGE]/[YOUR THEME GERMAN]/layout/wigman_ajaxswatches.xml

ajaxswatches's People

Contributors

davidverholen avatar magekube avatar nasgul avatar philwinkle avatar scottsb avatar sprankhub avatar stefas1 avatar wigman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ajaxswatches's Issues

Product List Swatches Disappear On Custom Theme

This works out of the box when installing it to the default rwd theme. However when attempting to install it on a custom theme, the product list swatches disappear. I use local.xml for all of my theme layout changes and had to add to the bottom of the local.xml to get the core swatches to work. What needs to be done to get the two working together. TY

Media Gallery / Thumbnails do not load for all products

The additional images thumbnails on the product page won't load for some products.
Looking at the Ajax requests, I saw that some return an empty JSON (even though there is more than one image for the product) and others return a JSON with the correct thumbnail URLs - in both cases the div doesn't get populated with the thumbnails. The main image does load and switch correctly though.

Switching pages 'removes' cache

Hi there, I have the following issue;

When I switch to a different page, the spinning gif shows up. When i hit 'Refresh' i see the colors. When i then go back to another page, the same stuff happens; spinning gif - > Hit refresh - > colors.

Any idea how to fix this?

p.s. I use an fpc extension of Amasty.

Thanks!

Swatches image resize

When i chane the image using swatches than image size will be change how to resize from base image

Not able to load thumbnail images using ajax update call

Hi
Extension is working fine. But had some issue after sometime. Whenever I am clicking on color it's not making ajax call to update images. I debug code in swatches-extend.js where in function ConfigurableMediaImages.updateImage returning false before making ajax call due to getting product id null while calling the var pid = ConfigurableMediaImages.getSwatchProdId(productId, label, selectedLabels); so below code returning false before ajax update call :
f(!pid){
return false;
}

What can be the solution ? Is there I am doing something wrong ?

dropdown present instead of swatches on product view page

Another issue I just ran across. On the product view page there are no swatches present, just the dropdowns which still function as they should. Unsure if this is related to the 0.4.1 fix.

system.log

2015-04-06T23:00:07+00:00 ERR (3): Notice: Undefined offset: 1 in C:\Program Files (x86)\wamp\www\magento\app\code\community\Wigman\AjaxSwatches\Block\Catalog\Product\View\Type\Configurable.php on line 130

Swatches are not loading

Attempted to test the newest 0.4.0 release on a custom theme and rwd. So far only getting a colorless swatch with the class 'swatch-link-92' on each product that would normally have swatches present.

How to change thumbnail image size/quality?

Is there a way to change the thumbnail image/size quality? On line 229 there is html code width 75 and height 75 which I can change to 100x130, but it stretches it using the small_image 75x75. Anyway to load the proper resized image?

Caching of `swatches` and `jsons` incorrectly interdependent

When the getlistdata AJAX action is called on a category page, the JSON response has two halves: the swatches and the jsons (the latter being separate, individual JSON documents encoded as strings inside the parent JSON). In each of these halves there is an entry for each product on the page, and each entry is its own block. The responsibility for retrieving the simple product collection for the configurable product is currently on the swatches blocks, and the jsons block has its data set from what was retrieved by swatches. Each of these blocks (within both the swatches and the jsons halves) are cached individually.

The issue is that since the swatches and jsons blocks are cached individually, it is possible that the product collection will not be available for the jsons block if the swatches block was retrieved from cache but the jsons block could not be. In this case, the code attempts to render the jsons block but ends up just generating an empty value since it had no product collection to loop over. Since this in turn results in an invalid JSON object, the front-end JavaScript call to parse the JSON triggers a fatal error, preventing any swatches from working on the category page at all.

The vast majority of the time these two blocks will be cached together, so there won't be an issue. However, by the nature of cache, it is transient, and it is not safe to assume that any particular entry will match the lifetime of another. The solution would be to move the retrieval of the product collection to an external class that can be referenced by both blocks. In order to avoid a double database call for the two swatches and jsons blocks, this class should memoize the results.

Ultimo Theme

Does this work with the Ultimo Theme?

Thanks,
Mike

Show category swatches only when multiple attributes exist

This is more like a feature request. I basically want to only show swatches on the category page under an item when there is more then one attribute selectable. Example, I have a product only available in one color, instead of showing just one swatch, the swatch just wouldn't be visible.

Bug when size and color swatch image

Hello,

Good module but still some bug found,

When more than one swatch attributes are there, then we trying to switch second swatch attribute, always reload image of using first swatch image.

look forward your reply

Possibility to make it work on any theme?

Hi,

I am not sure if this is the right place to post the question because it is not an issue. I am wondering if it is possible to make it work on any theme (I have ultimo theme installed).

Thanks

Can you make this working with Lesti FPC?

It is a very nice free module. It did the work as expected. However, when I enabled Lesti FPC, then it did not work. It seems that there is a conflict between them. Can you take a look how to make it with lestic FPC? Thank you!

Compatibility with Amasty Out of Stock Notifications

The extensions are not compatible out of the box. It is possible to make both extensions work together by having view_type_configurable from ajaxswatches extend the Amasty class.

However, after doing this, all options appear like "in stock" on the frontend, the "out of stock" overlay of the swatch is gone. The only way of knowing if a product is in stock, is after clicking a swatch. In case the attribute combination is out of stock, the "Sign up for stock notifications" form field appears.
A better behaviour would be to have the out of stock options greyed out or the option to have them totally hidden in order to be able to use a "Don't see your size?" link.

show loading image on list in custom template

Hi
i use this extension on custom template and it worked very well but on list and grid product just show loading image and configerable product's image does not show
is there any way to fix this issue ?

Images not updating on layered nav color select

At first I assumed this was due to the custom theme we were running, so I installed this extension on a fresh rwd install, and it produced the same issue. When I select a color under layered navigation, the extension produces the correct items, however does not update the product image to the desired color. It's not producing an error either. Using the most recent version also.

Instructions

Hi, I am wanting to use this extension. However, I wanted to know if there is any configuration that needs to be done? Or any setting in magento's admin?

Or do I install it and it works behind the scenes?

Thanks
Daniel

Conflict with another Extension

Hello,

We've just upgraded from v. 0.2 to v. 0.4.2 and noticed that the new version conflicts with an Out of Stock Notification extension so that it loops in the form field functionality of the Out of Stock notification? Can you point us in the right direction to resolve this conflict? Possibly a way to extend this extension?

Thank you,
Jonna

Swatches don't work for attribute labels that have accented uppercase letters

In the original attachConfigurableProductChildrenAttributeMapping function, the array keys are normalized using Mage_ConfigurableSwatches_Helper_Data::normalizeKey (which uses mb_strtolower). In your version, the keys are normalized using a regular strtolower, which doesn't work with special characters.

For example, I have an attribute called "Érable" for which the swatch image won't show because it's looking for a key called "érable" but the actual key is "Érable" because it was not normalized properly.

PHP Fatal error Configurable.php on line 33

Hi Wigman,

After installing the module on Mage Community 1.9.2.2, I'm getting this error on my product pages. Do you have any idea why?
Also, I notice my Administration -> Config -> Catalog -> Configurable Swatches section is no longer present. Is that expected?

Thanks!
Charlie

Cache active check is broken

I'm not entirely sure the intention of this method that's in both the List and Swatchlist blocks, but whatever it does, it has no effect:

protected function _isCacheActive()
{

    /* if there are any messages dont read from cache to show them */
    if (Mage::getSingleton('core/session')->getMessages(true)->count() > 0) {
        return false;
    }
    return true;

}

Because where it's called in both classes (inside getCacheKey) it triggers the parent class's getCacheKey method, but its return value is simply discarded, allowing control to pass through to the rest of the method, regardless of what had been returned from _isCacheActive:

if (!$this->_isCacheActive()) {
    parent::getCacheKey();
}

Using the modification on custom theme

Hi there, Got a question: Is this modification also usable on a custom theme (in my case Ultimo)? We have also big performance issues when using configurable swatches..

Color Swatches reverse on Category Listing Page

Hello,

We have discovered an issue in the latest version 0.4.2 where the swatches appear in the reverse order on the category listing page.

Example:
Our product has Black, Green, and Brown (in that order) in admin, and this appears correctly on the product view page. The category page, however, displays Brown, Green, and Black.

Thanks,
Jonna

How to get this module working in other themes?

Hi Wigman,

We talked before briefly.

I'm trying to get the module working in Intenso theme. (Switching to RWD works fine, FYI).

I'm wondering if it's possible to generalize this module to get it working across themes.

Some initial research:

In app/design/frontend/base/default/layout/wigman_ajaxswatches.xml, it seems to hook into product page but not product listing. e.g. I'm seeing javascript insert in product page, but not on product listing.

Any tips or thoughts? I'd be happy to work on a pull request to figure this out.

Charlie

Questions regarding Ultimo theme?

Since I get questions about Ultimo a lot, here's a general answer to all your questions.

Nope, it's not compatible with Ultimo and I have no interest in making it so.

Please ask your developer of choice to make it work.

Configurable swatches not working for all products

I am still trying to figure out which swatches work and which don't but without your modification, all my color swatches will update the main image, as soon as I install this modification, only some will work.

Images not updating when using two configurable attributes

Thanks for the extension, I encountered a bug regarding the image updates:
Products with two super attributes (for example color and size) won't get their main images and gallery thumbnails updated after the second attribute has been selected.

Example: The first attribute is color and the second attribute is size. Clicking the color swatches, the images will update fine as long as ONLY a color has been selected. But after a color AND a size have been selected, the images won't update anymore when switching to another color.
I tested this on a custom and the default RWD theme.

Gallery not always being shown

In some circumstances the gallery images, although being correctly loaded by this fine module, won't display in the product view. This happens when the configurable product does not have a gallery (one or no images). Magentos default behaviour is to not render the .product-image-thumbs container (see design/frontend/[package]/[theme]/template/catalog/product/view/media.phtml) when there are no gallery images, thus trying to append the thumbnails to the container has no effect.
This is just a minor issue at best as the situation is probably rare and a seasoned Magento developer should be able to circumvent this if needed. A hint about this in the documentation might save some time though.

Not loading color swatches

I'm using magento CE 1.9.2.4, when I load the category page, the colour swatches are not loading. It's only showing the loading icon and seems to never stop loading.

Configurable Product Children Attribute Mapping

I’m using your ajax swatch extension in one of our application. This works great but one concern. Below trail is trace from New Relic tool which we installed on same server and somehow this wigman swatch is consuming high as you can see in below screenshots (brown bar). Any idea or guideline would be appreciated.
1
2
3

breaks on Ajax swatch loader

I've tried this out on our site & on a fresh install on Magento 1.9 with the RWD theme and no other extensions installed and the swatches don't load, I just see the ajax loader.

image

There are no errors in the chrome console but I do get this error in my NGINX log:
/var/log/nginx/error.log

2015/10/13 12:39:33 [error] 1340#0: *2931 FastCGI sent in stderr: "PHP message: PHP Fatal error:  Cannot use string offset as an array in /var/www/magento1-9/app/code/core/Mage/ConfigurableSwatches/Helper/Mediafallback.php on line 360
PHP message: PHP Stack trace:
PHP message: PHP   1. {main}() /var/www/magento1-9/index.php:0
PHP message: PHP   2. Mage::run() /var/www/magento1-9/index.php:87
PHP message: PHP   3. Mage_Core_Model_App->run() /var/www/magento1-9/app/Mage.php:684
PHP message: PHP   4. Mage_Core_Controller_Varien_Front->dispatch() /var/www/magento1-9/app/code/core/Mage/Core/Model/App.php:354
PHP message: PHP   5. Mage_Core_Controller_Varien_Router_Standard->match() /var/www/magento1-9/app/code/core/Mage/Core/Controller/Varien/Front.php:172
PHP message: PHP   6. Mage_Core_Controller_Varien_Action->dispatch() /var/www/magento1-9/app/code/core/Mage/Core/Controller/Varien/Router/Standard.php:250
PHP message: PHP   7. Wigman_AjaxSwatches_AjaxController->getlistdataAction() /var/www/magento1-9/app/code/core/Mage/Core/Controller/Varien/Action.php:418
PHP message: PHP   8. Mage_Core_Block_Abstract->toHtml() /var/www/magento1-9/app/code/community/Wigman/AjaxSwatches/controllers/AjaxController.php:74
PHP message: PHP   9. Wigman_AjaxSwatches_Block_Swatchlist->_toHtml() /var/www/magento1-9/app/code/core/Mage/Core/Block/Abstract.php:919
PHP message: PHP  10. Mage_ConfigurableSwatches_Helper_Mediafallback->attachGallerySetToCollection() /var/www/magento1-9/app/code/community/Wigman/AjaxSwatches/Block/Swatchlist.php:37" while reading response header from upstream, client: 127.0.0.1, server: dev.magento1-9.local, request: "POST /ajaxswatches/ajax/getlistdata HTTP/1.1", upstream: "fastcgi://unix:/var/run/php5-fpm.sock:", host: "dev.magento1-9.local", referrer: "http://dev.magento1-9.local/women/tops-blouses.html"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.