Solved

Custom AJAX Handler for Grouped Products

Posted on 2011-02-15
9
577 Views
Last Modified: 2013-12-13
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
Comment
Question by:areyouamac
  • 5
  • 4
9 Comments
 
LVL 4

Expert Comment

by:JayDiablo
ID: 34899130
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
 

Author Comment

by:areyouamac
ID: 34899215
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
 
LVL 4

Expert Comment

by:JayDiablo
ID: 34899242
Is your goal to also completely remove the individual add to cart buttons?
0
 

Author Comment

by:areyouamac
ID: 34899313
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 4

Expert Comment

by:JayDiablo
ID: 34899457
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
 

Author Comment

by:areyouamac
ID: 34899856
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
 

Author Comment

by:areyouamac
ID: 34899926
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
 
LVL 4

Accepted Solution

by:
JayDiablo earned 500 total points
ID: 34900436
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
 

Author Comment

by:areyouamac
ID: 34900462
OK. Thanks Jay!
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now