Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 620
  • Last Modified:

Custom AJAX Handler for Grouped Products

Hi guys, I have a group of products on a main product page. As of now, all grouped products have their own Add to Cart button. The parent product does not have one. I only wanted to add the grouped products to the cart.

Here is the coding for that:
<div>
  <? if ($product->grouped_products->count): ?>
    <ul>
      <? foreach($product->grouped_products as $grouped_product): ?>
      <? if($grouped_product->id == $product->id) continue ?>
       
        <li class="child" >     
          <?= open_form() ?>  
            <? $image_url = $grouped_product->image_url(0, 75, 'auto'); if ($image_url): ?>
              <img src="<?= $image_url ?>" alt="<?= h($product->name) ?>"/>
            <? endif ?>      
           <h3><?= $grouped_product->name ?></h3>
           <p class="price">...</p>          
           <?= $grouped_product->description ?>
      
           <? $this->render_partial('shop:product_options', array('product'=>$grouped_product)) ?>
      
           <? if (!$grouped_product->is_out_of_stock()): ?>

         <a href="#" onclick="return $(this).getForm().sendRequest
           ( 'shop:on_addToCart',
               {extraFields: {product_id: '<?= $grouped_product->id ?>',
               message: 'Number of products added to the cart: %s'},
               update: {'mini_cart': 'shop:mini_cart'}}
               )"
         type="button" value="Add to cart">Add to cart</a>

       <? endif ?>
          </form>
        </li>
      <? endforeach ?>
    </ul>
  <? endif ?>
</div>¿

Open in new window


What I want to accomplish is, instead of group product having it's own add to cart button, I want to use only ONE Add to Cart button, where it can add all grouped products at once. I think this would be possible by placing the <form> elements wrapping the <ul>, making the field name's part of a sub-array, iterate them in the backend, and then adding them to the cart.

How would I create the sub-array? For the field name, would that be the 'product_id'? And where would I iterate them inside the coding?

I believe all of that would be in this coding:
  <a href="#" onclick="return $(this).getForm().sendRequest
           ( 'shop:on_addToCart',
               {extraFields: {product_id: '<?= $grouped_product->id ?>',
               message: 'Number of products added to the cart: %s'},
               update: {'mini_cart': 'shop:mini_cart'}}
               )"
         type="button" value="Add to cart">Add to cart</a>

Open in new window


Thanks for any help!
0
areyouamac
Asked:
areyouamac
  • 5
  • 4
1 Solution
 
JayDiabloCommented:
Welcome back. :)

Quick question for you, say on that example page you posted in your previous question someone clicks on this single "add to cart" button, would the user now have two items in their cart (each grouped product represents an item in the cart)?
0
 
areyouamacAuthor Commented:
Hey Jay!

I was hoping you would answer! haha. You helped me a lot last time. So, I was hoping you'll see this post too!

Here is the link so you won't have to go back to the previous post: Test Page

Yep, that's what I want to achieve. If there are 3 grouped products, those 3 products will be added to the cart via that sing;e "add to cart" button.
0
 
JayDiabloCommented:
Is your goal to also completely remove the individual add to cart buttons?
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
areyouamacAuthor Commented:
For this question yes. I am trying to learn both things (individual add to cart and bulk add to cart).

I am assuming another possible was is to have multi-requests, where I can the <form> element as is in the 1st post (where each <form> is still in the group product's <li>). Then remove the add to cart buttons from the <li>'s, and at the bottom of the coding, iterate and submit the <form> elements.

Which do you think would be the most convenient and less confusing to tackle?

Thanks Jay btw!
 
0
 
JayDiabloCommented:
Good call, that was actually going to be my suggestion (and why I was trying to be specific with the questions).

I'd propose the iteration approach vs. trying to make one giant form that encompasses everything, primarily because I don't know how much of LemonStand is editable (for the back-end processing).

I'd leave the forms as is, but remove the add-to-cart buttons that you have now.  Outside of any of the form elements create a new add to cart button, but you're going to have to modify the javascript code used when the button is clicked.

It should be possible to do something like this:

<a href="#" onclick="return $$('form').each(function(form) {
           form.sendRequest
           ( 'shop:on_addToCart',
               {extraFields: {product_id: form.getElement('input[name=product_id]').get('value'),
               message: 'Number of products added to the cart: %s'},
               update: {'mini_cart': 'shop:mini_cart'}})
               })"
         type="button" value="Add to cart">Add to cart</a>

Open in new window


To make this work fully, you may need to add a hidden input field to each of your grouped products' form, with the name of "product_id" and the value "<?= $grouped_product->id ?>".  I changed the extraFields line to grab that value from such an input.

Note that this is going to loop through EVERY form on the page, which may not be desirable if you have a search form at the top of the page or something, so it's also possible to narrow down the scope of the "$$" function, like so:

$$('div.info ul form').each

Open in new window


That would only look for forms in the div with class "info" that are also contained by a ul.  Standard CSS selectors here.  That's probably a safer option in the long-run.

If that totally blows up, then I may be off on my JavaScript library assumptions here.  Based on the documentation I read last time, LemonStand uses Mootools and JQuery together, so what I've provided is Mootools code, which I think is what most of LemonStand's provided additions are written in, but I could be wrong. :)
0
 
areyouamacAuthor Commented:
Hey Jay!

Ok, the single add to cart button works, but only adds the FIRST grouped product to the cart, not the rest.

Here is what I added to the grou product li for the <input>:
<li class="child" >     
          <?= open_form() ?>
          <input type="hidden" name="product_id" value="<?= $grouped_product->id ?>"/> ... the rest is the same.</li>

Open in new window


I added the add to cart button after the <ul> code:
          </form>
        </li>
      <? endforeach ?> 
    </ul>
  <? endif ?>

<a href="#" onclick="return $$('form').each(function(form) 
  { form.sendRequest
    ( 'shop:on_addToCart',
    {extraFields: {product_id: form.getElement('input[name=product_id]').get('value'),
    message: 'Number of products added to the cart: %s'},
    update: {'mini_cart': 'shop:mini_cart'}})
    })"
type="button" value="Add to cart">Add to cart</a>

Open in new window


It doesn't seem to capture the individual <input> values.

Any ideas? Does this have to deal with any JS?

Thanks!
0
 
areyouamacAuthor Commented:
Also, when viewing the Page Source... there seems to two <input> codes, which the first one seems to be automatically generated by the <form> element. However, I don't think this is interfering with the 2nd <input> element we are using.
<li class="child" >     
  <form enctype="multipart/form-data" action="/project/hera/product/look-0" method="post"> 
    <input type="hidden" name="ls_session_key" value="lsk4d5ad16ce3e678.42672342"/> 
    <input type="hidden" name="product_id" value="3"/>
...
 

Open in new window

0
 
JayDiabloCommented:
Yeah, it looks like LemonStand's Javascript doesn't allow multiple simultaneous Ajax calls to happen at the same time.

I suppose in this case, the only option available would be to have one big form element that gathers all of the options.  However, in order for this to work, the script that accepts that Ajax post has to be modified.  You may want to hit up the LemonStand forums to see if it's possible to modify the script that handles the form post "/project/hera/product/look-0", it might be useful if they know the "cms_handler_name", which is "shop:on_addToCart".  If that can be modified, then this should be possible.  If they have it encrypted, then you'd have to work with them to come up with a working solution for this.
0
 
areyouamacAuthor Commented:
OK. Thanks Jay!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now