Author Topic: SOLVED Disable add to cart on parent and use attribute as select label  (Read 4997 times)

meltingpotdesign

  • Jr. Member
  • **
  • Posts: 65
hi,

does anyone know how to disable the add to cart button when a child hasn't been selected?  we use the parent product as a placeholder for the children so the parent should never be added to basket.

Also, is it possible to name the child selection drop down with the name of the attribute the children use?  eg, if the parent product is shoes, the children are size:5, size:6, size:7, can the drop down select box be labelled: size?

meltingpotdesign

  • Jr. Member
  • **
  • Posts: 65
Re: Disable add to cart on parent and use attribute as select label
« Reply #1 on: April 14, 2012, 20:36:55 pm »
ok, I came up with a solution, and in the spirit of the community i thought id share.  Originally I made some jquery to disable and enable the add to cart button, but this caused some intermittent problems in IE, so this was the best all round solution I came up with;

Disable add to cart when no child selected:

go to component/com_virtuemart/themes/default (or your theme) /templates/product_details/includes/addtocart_form.tpl.php

at around line 45, youll find;

<input type="submit" class="<?php echo $button_cls ?>" value="<?php echo $button_lbl ?>" title="<?php echo $button_lbl ?>" />

just before this, i added a hidden div called 'substa' that contains another div called 'faux_cart' with a replica of my add to cart button, so now it looks like this;

<div class="substa" style="display:none;"><div class="faux_cart">Add to basket</div></div>
<input type="submit" class="<?php echo $button_cls ?>" value="Add to basket" title="<?php echo $button_lbl ?>" />


use css to style the fake button and position this div (using position:absolute) directly over the add to cart button.  Now I want to display a message to the user if they click the fake button to alert them to select something.

At line 11 of addtocart_form.tpl.php you will find;

<?php echo $drop_down ?>

I added this on the next line;

<div class="choosy" style="display:none;">Please make a selection</div>

Now for the js to handle all of this.  In my flypage I have added the following jQuery at the end of the file (make sure you have jQuery in no conflict mode - i recommend this plugin: System - SC jQuery);

<script type="text/javascript">

jQuery(document).ready(function(){

//on page load, if the child select box is present and on 'select' show fake button div

if (jQuery("select#product_id_field option:selected").text() == "Select") {
   jQuery(".substa").show();
}

// if the fake button div is clicked, check to make sure 'select' is in the child box, if so, show to prompt div
jQuery(".substa").click(function(){
      if (jQuery("select#product_id_field option:selected").text() == "Select") {
      jQuery(".choosy").show();

//also add a new class to highlight the select box to make it really clear
      jQuery("#product_id_field").addClass("pinkuss");
}
});
   
//now to monitor when the child select box is changed to hide/show the fake button
   
      jQuery("#product_id_field").change(function() {
      if (jQuery("select#product_id_field option:selected").text() != "Select") {
      
        jQuery("#product_id_field").removeClass("pinkuss");
        jQuery(".choosy").hide();
        jQuery(".substa").hide();
     }

     if (jQuery("select#product_id_field option:selected").text() == "Select") {
        jQuery(".substa").show();
        jQuery(".choosy").hide();
     }
      
    });

});
</script>


See it in action on the site im making - NOTE: i am making an adult toys and clothing site, so if easily offended, dont follow this link http://www.meltingpotdesign.co.uk/sauce2/index.php?page=shop.product_details&flypage=love_page.tpl&product_id=15878&category_id=39&option=com_virtuemart&Itemid=153


Thanks.