Add To Button And On Click Open Form In Modal Window

I have added a form to cs-cart that captures some user data and emails it back to me.

Now I want to add a button that opens a modal window with the form I created inside. I added the following button, but what goes on the "but_onclick" to open the modal window with my form?

{include file="buttons/button.tpl" but_name="" but_text="Enter Extra Data" but_onclick="" but_role="button" but_meta="cm-process-items btn"}

Try something like

{include file="common/popupbox.tpl" id="my_form" link_meta="ty-btn__primary" href="pages.view?page_id=123" link_text=__('my_form_button_text') text=__('my_form_header')}

replace 123 with the page ID (can be found in the admin panel) and add "my_form_button_text" and "my_form_header" language variables

(!) Not tested

Thank you, this helped. Initially, your code didn't work, but it needed the action. I used act="general".

So my working code is:

{include file="common/popupbox.tpl" act="general" id="my_form" link_meta="ty-btn__primary" href="pages.view?page_id=123" link_text=__('my_form_button_text') text=__('my_form_header')}

Your reponse helped me isolate the issue. I hope this helps someone having the same issue.

Another question.

The form opens up in the modal window, but when I hit submit it redirects to a thank you page. How could I change it to give me the thank you message inside the modal window after form is submitted?

Thank you, this helped. Initially, your code didn't work, but it needed the action. I used act="general".

So my working code is:

{include file="common/popupbox.tpl" act="general" id="my_form" link_meta="ty-btn__primary" href="pages.view?page_id=123" link_text=__('my_form_button_text') text=__('my_form_header')}

Your reponse helped me isolate the issue. I hope this helps someone having the same issue.

Act is not required since it is not used in the popupbox.tpl template. At least in the default theme

Another question.

The form opens up in the modal window, but when I hit submit it redirects to a thank you page. How could I change it to give me the thank you message inside the modal window after form is submitted?

More complex changes are required in this case. You should post form with ajax and put thank you message to notification

Thanks guys (or girls),

We had the same question and thanks to you it works.

We discovered 2 other problems:

  1. We had to add content='' to the code line
  2. It only works with store-owned forms and they should not be shared with other stores (we run multiple sites). If you create a form shared with other stores, the processing will not work.

Our code looks like this now:

{include file="common/popupbox.tpl" id="123" link_meta="ty-btn__primary" href="pages.view?page_id=123" link_text=__('my_form_button_text') text=__('my_form_header') content=''}

I am trying to use this solution to add a button to my product page right underneath or next to the 'add to cart' button that sends people to a form I created, that will let them reserve the item (this is a temporary solution).

In this filepath: design/themes/[YOUR THEME]/templates/common/product_data.tpl I updated the file as following (where 123 is is my page ID for the form):

I have added the line from above

{include file="common/popupbox.tpl" id="123" link_meta="ty-btn__primary" href="pages.view?page_id=123" link_text=__('my_form_button_text') text=__('my_form_header') content=''}

After this line: {include file="buttons/add_to_cart.tpl" but_id="button_cart_`$obj_prefix``$obj_id`" but_name="dispatch[checkout.add..`$obj_id`]" but_role=$but_role block_width=$block_width obj_id=$obj_id product=$product but_meta=$add_to_cart_meta}

I also added two new language variables my_form_button_text and my_form_header.

I manually deleted the cache. Nothing happens.

Any ideas?

I am using MVE 4.12.1

3rd party addons can override the products:add_to_cart hook with add to cart button

I am trying to use this solution to add a button to my product page right underneath or next to the 'add to cart' button that sends people to a form I created, that will let them reserve the item (this is a temporary solution).

In this filepath: design/themes/[YOUR THEME]/templates/common/product_data.tpl I updated the file as following (where 123 is is my page ID for the form):

I have added the line from above

{include file="common/popupbox.tpl" id="123" link_meta="ty-btn__primary" href="pages.view?page_id=123" link_text=__('my_form_button_text') text=__('my_form_header') content=''}

After this line: {include file="buttons/add_to_cart.tpl" but_id="button_cart_`$obj_prefix``$obj_id`" but_name="dispatch[checkout.add..`$obj_id`]" but_role=$but_role block_width=$block_width obj_id=$obj_id product=$product but_meta=$add_to_cart_meta}

I also added two new language variables my_form_button_text and my_form_header.

I manually deleted the cache. Nothing happens.

Any ideas?

I am using MVE 4.12.1

I have it working now, I had to include &come_from=F , by that I mean id="XX&come_from=F''

Also it wasn't pasted in quite the right place.

I have a few additional loose ends still:

1. At the moment I have changed the product_data.tpl core file. I would prefer to make this change in the my_changes add-on but it didn't work when I saved it in the .../app/addons/my_changes folder. Is that the right path?

2. The new button doesn't match the 'add to cart' button. It is much smaller and has square edges (see for example https://www.moebel-basel.ch/shop-furniture/tables/side-tables/inlaid-wood-table/?sl=en) . How do I make the the same size?

3. The confirmation email goes to the admin. How do we also send it to the person who reserved?

Any hints or help would be very much appreciated.

1. You can use hooks in the product_data.tpl E.g.

design/themes/responsive/templates/addons/my_changes/hooks/products/add_to_cart.post.tpl

2. Just add the ty-btn class to the link

3. It is required to change process of sending e-mail in the controller

Thanks eCom. Hooks are not something I'm familiar with so I will leave it in the core files for now.

Also, in case anyone else wants to try this, in the end what I did was add a 'reserve' button next to the 'add to cart' button that went to a 'forms' page, I didn't use the pop-up since I didn't understand the code enough to get it to work. Since I use three languages on the site, I defined 'my_form_button_text' as a language variable so the button changes language depending on which language the user has picked.

This is the final code that I pasted in to my product_data.tpl core file:

{include file="buttons/button.tpl" id="32&come_from=F" but_meta="ty-btn__primary.ty-btn__big" but_href="pages.view?page_id=32&come_from=F" but_text=__('my_form_button_text') content=''}

here shown in context:

{if $extra_button}{$extra_button nofilter} {/if}
            {include file="buttons/add_to_cart.tpl" but_id=$_but_id but_name="dispatch[checkout.add..`$obj_id`]" but_role=$but_role block_width=$block_width obj_id=$obj_id product=$product but_meta=$add_to_cart_meta}
		{assign var="cart_button_exists" value=true}
		{/if}
		
		{include file="buttons/button.tpl" id="32&come_from=F" but_meta="ty-btn__primary.ty-btn__big" but_href="pages.view?page_id=32&come_from=F" but_text=__('my_form_button_text') content=''}
{/hook}

Now I just have to work out the css so the buttons line up...!