Required Attribute Selection - Disallow 'Add to cart' with default attributes

[dakeweb]

Hello,

 

I am looking for a solution to require a user to select product attributes.  I need them to not be able to add a product to the cart until attributes have been selected.  A javascript function to alert the user when they have not selected attributes has been used as a solution in the past.  See the link below...  However, this fix does not work with the most recent software version.  This is also a less desirable solution.

 

If the popup warning is the only option, that is understandable.  But I could not find a function that works with the most recent prestashop version.  A working version of that would be great, but I think the aability to make attribute selections required would be a pricelss addition to he software.

 

This is being used in a clothing shop.  Their is no real default in the case of clothing, obviously. 

 

Many thanks for any help. 

 

EDIT:

 

I forgot to include the aforementioned link:

http://www.prestashop.com/forums/topic/150009-required-attribute-selection/?hl=+default%20+attribute

Edited October 9, 2014 by dakeweb (see edit history)

[cristic]

For default bootstrap theme you can modify js/modules/blockcart/ajax-cart.js - find ~line 134:

		//for product page 'add' button...
		$(document).on('click', '#add_to_cart button', function(e){
			e.preventDefault();
			ajaxCart.add($('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
		});
 

and change this by adding the following validation:

        //for product page 'add' button...
        $(document).on('click', '#add_to_cart button', function(e){
            e.preventDefault();
            if (typeof productHasAttributes != 'undefined' && productHasAttributes && !$('#idCombination').val() > 0)
                alert('Please select a combination!');
            else
                ajaxCart.add($('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
        });

[dakeweb]

Thank you for that suggestion, cristic.  In looking into the problem further I have discovered a kink in my reasoning.

In this version of prestashop, any product with combinations must have a default combination selected.  Unless defined further, this combination becomes the top-most value of each attribute which, in my case, is the lowest numeric size and/or the first color listed alphabetically. 

 

If I must have a default combination, I would need that combination to be both meaningless and not allowed to be added to the cart.  So, I am thinking I should make a value for each attribute that is the equivalent to "unselected".  I would have a value of "Unselected" for "Size" and "Color" and "Pattern" etc...  I would make the combination of "unselected" for size and color/style the default combination.  Then I would need something to check the item when "Add to cart" is clicked to see if the product's default combination is the one selected for adding to the cart and, if so, generate the pop-up and not actually add the product to the cart.

 

Your solution would work beautifully if prestashop had continued to make the default option for a attribute to be "unselected" or null rather than the first value available for the attribute.  My apologies for starting with a request that was functionally impossible. 

[cristic]

Thank you for that suggestion, cristic.  In looking into the problem further I have discovered a kink in my reasoning.

 

In this version of prestashop, any product with combinations must have a default combination selected.  Unless defined further, this combination becomes the top-most value of each attribute which, in my case, is the lowest numeric size and/or the first color listed alphabetically. 

 

If I must have a default combination, I would need that combination to be both meaningless and not allowed to be added to the cart.  So, I am thinking I should make a value for each attribute that is the equivalent to "unselected".  I would have a value of "Unselected" for "Size" and "Color" and "Pattern" etc...  I would make the combination of "unselected" for size and color/style the default combination.  Then I would need something to check the item when "Add to cart" is clicked to see if the product's default combination is the one selected for adding to the cart and, if so, generate the pop-up and not actually add the product to the cart.

 

Your solution would work beautifully if prestashop had continued to make the default option for a attribute to be "unselected" or null rather than the first value available for the attribute.  My apologies for starting with a request that was functionally impossible. 

 

I checked and you are right.

 

But in this case, shouldn't your problem be solved, by default? You wanted the user not to be able to add a product to cart if no combination is selected. Now, since it is selected by default one, why do you think it is not enough?

 

I believe you will say that you want customer not to accidentally add a product with wrong dimensions and you need him/her to pay attention to this step. In this case you can make the following modification in product.js file:

 

Around line 172, you will find:

    //init the price in relation of the selected attributes
    if (typeof productHasAttributes != 'undefined' && productHasAttributes && !url_found)
        findCombination(true);
    else if (typeof productHasAttributes != 'undefined' && !productHasAttributes && !url_found)
        refreshProductImages(0);

Change it to:

    /*
    //init the price in relation of the selected attributes
    if (typeof productHasAttributes != 'undefined' && productHasAttributes && !url_found)
        findCombination(true);
    else */
    if (typeof productHasAttributes != 'undefined' && !productHasAttributes && !url_found)
        refreshProductImages(0);

    //Also we need to make the selected combination as unavailable:
    selectedCombination['unavailable'] = true;

    //And update the display:
    updateDisplay();

However, now you will actually see "This combination does not exist for this product. Please select another combination.", but in the same time - Add to cart button is disabled.

 

Now you can display a different message, or simply hide it. To do this, you add another js variable and initiate it with 0.

In function getProductAttribute, set this variable to 1, as the first line. This function is called when a color or an attribute is changed.

 

So now you have this variable which tells if a combination has been selected and you can develop further.

[dakeweb]

Cristic,

 

You are correct - the reason the prestashop change does not solve my issue entirely is because the user could click "add to cart" and not know that they were ordering the wrong size/color. 

 

I made the changes as you suggested but saw no change in behavior.  I am not sure exactly what the changes are to accomplish.  If there is something else I am supposed to add I am not following.  I apologize for my ignorance here.

 

A pop-up that could tell if something was added to the cart without the attribute values being changed would work for what I am trying to accomplish.  What would be even better would be a combination that is unavailable (as I believe you were suggesting above).  I would make this unavailable combination the default and give it null values.

 

Hopefully I am expressing myself clearly.  I really appreciate your assistance here.  If you can help me get this working I would love to reward you with a small token of my appreciation - maybe a loaded pre-pay card to buy you a much deserved drink!

[cristic]

Ok, do like this (tested on a 1.6.0.9 fresh instance):

 

Step A: themes\default-bootstrap\js\product.js:

 

1. Right at the beginning of the file, after var colors = []; add the following line:

var combinationSelected = false;

2. Then scroll down, around line 185 and replace the following code:

	$(document).on('click', '.color_pick', function(e){
		e.preventDefault();
		colorPickerClick($(this));
		getProductAttribute();
	});

	$(document).on('change', '.attribute_select', function(e){
		e.preventDefault();
		findCombination();
		getProductAttribute();
	});

	$(document).on('click', '.attribute_radio', function(e){
		e.preventDefault();
		findCombination();
		getProductAttribute();
	});

with

	$(document).on('click', '.color_pick', function(e){
		e.preventDefault();
		colorPickerClick($(this));
		getProductAttribute();
                combinationSelected = true;
	});

	$(document).on('change', '.attribute_select', function(e){
		e.preventDefault();
		findCombination();
		getProductAttribute();
                combinationSelected = true;
	});

	$(document).on('click', '.attribute_radio', function(e){
		e.preventDefault();
		findCombination();
		getProductAttribute();
                combinationSelected = true;
	});

Step B: themes\default-bootstrap\js\modules\block-cart\ajax-cart.js:

 

Find the following code, at line 134:

		//for product page 'add' button...
		$(document).on('click', '#add_to_cart button', function(e){
			e.preventDefault();
    			ajaxCart.add($('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
		});

and replace it with:

		//for product page 'add' button...
		$(document).on('click', '#add_to_cart button', function(e){
			e.preventDefault();
                        if (!combinationSelected)
                            alert('Hey! Make sure you select your desired combination for this product.');
                        else
    			    ajaxCart.add($('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
		});

Now go ahead and test it.

 

I believe this would be the simplest method for your need. The logic is that we define a variable combinationSelected and set it to false when the page loads. Then whenever customer is pressing on a color or is changing an attribute, this variable will be true.

The only thing remaining is to check when add to cart button is pressed what is the value of combinationSelected and act accordingly.

 

Hope it helps.

Edited October 10, 2014 by cristic (see edit history)

[dakeweb]

Cristic,

 

Thank you so much for that wonderful solution!  This works beautifully and is exactly what I was looking for.  I would love to buy you a drink for your efforts - I wasn't joking!  PM me with a paypal ID or something similar and I will be happy to send something your way.

 

One other thing I just realized - the user can click 'add to cart' when seeing only the preview of the item.  I would like to leave this as an option since some things don't have any attributes to select.  But I would like to generate the same pop-up if a user clicks 'add to cart' via a preview box on an item that has size/color.  I imagine this would be accomplished by using the same if/then function to check the status of the variable we created in another .js file.  Is this correct and, if so, what file would I need to edit the 'add to cart' on the preview boxes?

Thank you again! 

[dakeweb]

Please disregard my other question.  Part of the fix we were working toward was to create "null" or "Please select a..." values for each attribute and make the null values the default combination for the items.  Obviously, there is 0 quantity in-stock of these bogus combinations, so using the option to disable ordering when quantity is 0 solved my problem.  The 'add to cart' button is disabled because the default combinations of "null" value attributes will never have stock. 

 

Thanks again, Cristic!  I think this is the most elegant solution I could have hoped for.  I really appreciate your help.

[julien325cab]

Hi, 

 

I changed both files as indicated by cristic on my site but nothing changes ... 

Is there another change to do? 

 

Thank you in advance! 

 

www.elec-auto.com 

PS 1.6.0.7

[julien325cab]

I have a partial solution, I use MODAL CART 3 (purchase confirmation) module and when I disable it I can see your message appear.

[dakeweb]

 

Hi, 

 

I changed both files as indicated by cristic on my site but nothing changes ... 

Is there another change to do? 

 

Thank you in advance! 

 

www.elec-auto.com 

PS 1.6.0.7

 

Are you using the default template?  If so are you trying to make this change with your module installed?  This fix assumes no special modules and the default theme?

 

If you are using the defaults and the change is not working I can only assume you've made a mistake.  I suggest using the strategy of crating values for attriubtes for "null" and setting the combination to be out of stock.  That coupled with disallowing ordering order of items not in stock will prevent users from adding the item to the cart with the default attributes.

 

[julien325cab]

I use default bootstrap, I solved the problem by disabling MODAL CART 3 module, this tips works now very well.

 

I'd like to improve this trick by not doing this warning appear on certain product categories or groups of attributes, so I tried the following code without success:

{if ($smarty.get.id_category == '183')
var combinationSelected = false;
else var combinationSelected = true;
}

or

{if (id_attribute_group == '15')
var combinationSelected = false;
else var combinationSelected = true;
}

Any idea?

Edited October 19, 2014 by julien325cab (see edit history)

[julien325cab]

Help, any idea for my condition if by category or group? (my php is so bad!)

[zabamich]

 //for product page 'add' button...
        $(document).on('click', '#add_to_cart button', function(e){
            e.preventDefault();
            if (typeof productHasAttributes != 'undefined' && productHasAttributes && !$('#idCombination').val() > 0)
                alert('Please select a combination!');
            else
                ajaxCart.add($('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
        });

Using this code I can display window alert when default attribute is selected.

but this solution has one issue, alert window is displayed only in one languages. and in my opinion in wrong place.

I would like also move this alert over add to basket or under last attribute window.

WIll be also great when attribute dropdown menu will be highlighted.

it possible to modify this code??

or any other similar solution?

[gonebdg - webindoshop.com]

I guess it can be achieved with following simple modifications

 

1. Create new (dummy) Product Attributes group, e.g: Name = "Please Select Combinations" with "Attribute type" = Radio buttons. Remember or make a note about id_attribute_group, for example the id_attribute_group = 4

 

2. Add new attribute value for this group with a blank value (i guess a spaces character would suffice)

 

3. Then for all products, add a new combination >>> Attribute =  "Please Select Combinations" and Value = " " (blank/empty value),  and set this combination as Default (dummy) combination.

 

4. Do not add quantity for this new combination, leave the Qty = 0, so it cannot be selected (add to cart) by customer

 

5. Modify the theme file product.tpl to add following smarty code after

   {foreach from=$groups key=id_attribute_group item=group}

<!-- Remember in this example the "dummy" id_attribute_group = 4 --> 
{if ($id_attribute_group == 4)}
	<strong id="select_comb_first">{l s='Please select the combinations first'}</strong>
{else}
	<!-- The original smarty script stay in here -->
{/if}
{/foreach} <!-- This is the end foreach -->

6. Still in product.tpl file, find HTML paragraph tag with id="availability_statut" to add class="hide" , so the warning message "This product is no longer in stock" won't be displayed for this default (dummy) combination

 

7. Modify product.js file to add following jquery script inside function getProductAttribute()

function getProductAttribute()
{
	// The original script stay here ....

        // Remove class 'hide' if customer already select a combination
        // So if the selected combination stock qty = 0, the warning messsage will be displayed
	$('#availability_statut').removeClass('hide');

        // Remove the text "Please select the combinations first"
        $('#select_comb_first').hide();
}

That's it ...  i hope you can use or make the necessary improvement with this simple idea to meet your needs

Edited December 10, 2014 by gonebdg - webindoshop.com (see edit history)

[zabamich]

thanks for your solution, but is not suit for my store.
I selling virtual product as a standard product and all product have allow to order when stock is 0. I have 1500 products, is too many work to change in all products this option. I checked in general setting and i set not allow add to basket when on stock is 0. but not working .
solution with alert is fine, but this alert windows in not able to translate for other lang. if will be possible to display alert under attribute or highlight attribute window to focus customer attention will be full success. other solution is to made not active add to basket as long as attribute is not changed from default. ( as default is easy to sent any name like please select on the first position).

 

 I found sample  store  http://www.bikiniworld-capsule.com/capsule/san-gallo/36-bikini-san-gallo-nero.html#/taglia_top_san_gallo-s_42/taglia_slip_san_gall-s_42

[gonebdg - webindoshop.com]

thanks for your solution, but is not suit for my store.

I selling virtual product as a standard product and all product have allow to order when stock is 0. I have 1500 products, is too many work to change in all products this option. I checked in general setting and i set not allow add to basket when on stock is 0. but not working .

solution with alert is fine, but this alert windows in not able to translate for other lang. if will be possible to display alert under attribute or highlight attribute window to focus customer attention will be full success. other solution is to made not active add to basket as long as attribute is not changed from default. ( as default is easy to sent any name like please select on the first position).

 

 I found sample  store  http://www.bikiniworld-capsule.com/capsule/san-gallo/36-bikini-san-gallo-nero.html#/taglia_top_san_gallo-s_42/taglia_slip_san_gall-s_42

 

 

I see ...

The simple modifications described on my previous post was to answer the thread starter dakeweb which sell clothing.

It doesn't need modification or overriding the core files, but yes it will need you to add new combinations to all products which already inputted by you. If product doesn't yet inputted to the system, the i guess it's not a big problem

 

For your case which is sell Virtual Product and all products was already there on your shop, then the solution should have different approach. And according to your explanation, the default prestashop warning message or alert is sufficient for you.

But then you need an ability to translate the warning message also able to change the position/layout, am i rite ?

 

Here you need to know more about jquery ... but then i'm not sure if i'm understand your needs

 

Prestashop is a multilanguage e-commerce software so of course you can translate the warning message, and if it is a text triggered by javascript then you can use smarty modifier

{addJsDefL name=yourVar}{l s='Text to translate'}{/addJsDefL}

 

And i guess it's not too difficult if you want to place the warning message under the attributes, you can use jquery append() or after() combined with jquery click()or submit()handler.

 

Basically it will look like this

var atc_selector = $('#add_to_cart').children('button');
$(atc_selector).on('click', function(event) {
	// find out about the combination selected by customer here
	
	// if selected combination is the default combination
        // Do something here e.g: display warning message in desired position & prevent add to cart
	
	// else
	// Process add to cart normally

	event.preventDefault();
});

or like this ...

$('#buy_block').submit(function(event) {
	// find out about the combination selected by customer here
	
	// if selected combination is the default combination
	// Do something here e.g: display warning message in desired position & prevent add to cart
	
	// else
	// Process add to cart normally

	event.preventDefault();
});

Edited December 11, 2014 by gonebdg - webindoshop.com (see edit history)

[julien325cab]

Hi,

 

Good idea to place the box under the attributes, but do you have any idea to my problem?

I see you better master programming than me!

 

I'd like to improve this trick by not doing this warning appear on certain product categories or groups of attributes, so I tried the following code without success:

 

In fact I would like to have the following behavior :

 

IF category = 183


$('#buy_block').submit(function(event) {
    // find out about the combination selected by customer here
    
    // if selected combination is the default combination
    // Do something here e.g: display warning message in desired position & prevent add to cart
    
    // else
    // Process add to cart normally


    event.preventDefault();
});


ELSE


Process add to cart normally

[ckarone]

Hi cristic!

 

I know this is an old post but many thanks for the contribution.

 

If you have products with and without attributes in your shop, here is the code you need to change in ajax-cart.js instead of cristic one!

//for product page 'add' button...
		$(document).on('click', '#add_to_cart button', function(e){
			e.preventDefault();
                        if (!combinationSelected && productHasAttributes)
                            alert(attribute_alert_text);
                        else
    			    ajaxCart.add($('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
		});

Ckarone

[mostlyharmless]

Hello.

Lovely solution that works well, but i have an issue with it that i hope some of you can help me with.

Using Version 1.6.0.14 and the default bootstrap theme.

And ive implemented the solution and it works great if i have 1 set of combinations, but if i add a second set it lets me add to cart without selecting a something from the second selection.

Can someone give me a hint on how to fix that?

[c64girl]

I found something funny in PS 1.6.1.6 maybe its in the lover versions too. If You add Attribute to some product that is quantity 0 PS will always disable the add to basket button for costumers. But when You have in products all Attributes on quantity more than 0 it will always pick default attribute. One problem with adding one attribute width quantity 0 to products is this in the products > monitoring will show that You out of quantity in the all products.

 

So if You dont use products > monitoring to check the quantity its a nice trick

[fredericomarinho.com]

I came with a solution that is ask the user if he select the right size or color, even if the user had selected. It is a way to definitelly confirm and somehow warn the user about it. Just edit the file /theme/theme_name/js/modules/blockcart/ajax-cart.js.

Look out for this code (or something like it):

$(document).on('click', '#add_to_cart button', function(e){
  e.preventDefault();

  ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
});

And add a confirm alert just before the ajaxCart.add method:

$(document).on('click', '#add_to_cart button', function(e){
  e.preventDefault();

  if (!confirm('Tem certeza que selecionou o tamanho certo?'))
  return false;

  ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
});

Worked like a charm!

[Durarte]

Hello!

I found a solution that worked for me:

I created atributes "colour-choose colour" and "size - choose size" and I made combinations. So, I have a combination product-colour "choose colour" - size "choose colour" wich I make it implicit. All other combinations that include "choose size" or "choose colur" are with stock 0. And cart is not shown because implicit product size is "choose size" and implicit colour is "choose size" wich are with stock 0

Ex. here http://crossmark.ro/tricouri-fete/23-tricou-jesus-loves-you-dama.html

Prestashop 1.6.1.24

[JBW]

I have created a module for this which works on 1.6.and latest 1.7.

You can see a demo and buy it in the addon store:
https://addons.prestashop.com/de/product.php?id_product=47851