添加弹出窗口以将优惠券代码放入购物车

Question

I am trying since couple days to add into exit-popup button which onlick adds Voucher code into the cart. I got no success yet.

Theoreticly its could even be possible to inject into sql onlick instead of injecting to element. But I dont know how to do that.

So far i have done: Form:

<form method="post" action="{url action='addVoucher' sTargetAction=$sTargetAction}">
<div class="popupbanner">  
<a href="#" class="myButton" clickon="copyToClipboard('#p2');ImportVoucher('FREE16')" > 

<div class="close-exit-intent" title="Click to Copy" type="submit">
    <input id="p2" class="p22" value="FREE16" />
    <p id="p2" class="p22">FREE16</p>
    </div> </a> 
<p class="click2copy">Click to Copy ↗</p>  
<a href="#" class="modal-footer"><p>No thanks</p></a>
</div>

Copytoclipboard JS

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

Importvoucher JS

function ImportVoucher(element) {

    $('input[type=p2]').click(function(ev) {
    ev.preventDefault();
    $(this).siblings('input[type=p2]').removeClass('selected');
    $(this).addClass('selected');
    $('#sVoucher').val($('.selected').val());
    $temp.remove();
}

And I've also added this in the cart footer:

<input type="text" class="add-voucher--field is--medium block" id="sVoucher" name="sVoucher" placeholder="{"{s name='CheckoutFooterAddVoucherLabelInline'}{/s}"|escape}" />

Other files: Cart.tpl:

   {* Add product using the sku *}
    {block name='frontend_checkout_cart_footer_add_product'}
        <form method="post" action="{url action='addArticle' sTargetAction=$sTargetAction}" class="table--add-product add-product--form block-group">

            {block name='frontend_checkout_cart_footer_add_product_field'}
                <input name="sAdd" class="add-product--field block" type="text" placeholder="{s name='CheckoutFooterAddProductPlaceholder' namespace='frontend/checkout/cart_footer_left'}{/s}" />
            {/block}

            {block name='frontend_checkout_cart_footer_add_product_button'}
                <button type="submit" class="add-product--button btn is--primary is--center block">
                    <i class="icon--arrow-right"></i>
                </button>
            {/block}
        </form>
    {/block}

    {block name='frontend_checkout_cart_footer_element'}
        <div class="basket--footer">
            <div class="table--aggregation">
                {* Add product using a voucher *}
                {block name='frontend_checkout_cart_footer_add_voucher'}
                    <form method="post" action="{url action='addVoucher' sTargetAction=$sTargetAction}" class="table--add-voucher add-voucher--form">

                        {block name='frontend_checkout_cart_footer_add_voucher_trigger'}
                            <input type="checkbox" id="add-voucher--trigger" class="add-voucher--checkbox">
                        {/block}

                        {block name='frontend_checkout_cart_footer_add_voucher_label'}
                            <label for="add-voucher--trigger" class="add-voucher--label">{s name="CheckoutFooterVoucherTrigger"}{/s}</label>
                        {/block}

                        <div class="add-voucher--panel is--hidden block-group">
                            {block name='frontend_checkout_cart_footer_add_voucher_field'}
                                <input type="text" class="add-voucher--field is--medium block" id="sVoucher" name="sVoucher" placeholder="{"{s name='CheckoutFooterAddVoucherLabelInline'}{/s}"|escape}" />
                            {/block}

                            {block name='frontend_checkout_cart_footer_add_voucher_button'}
                                <button type="submit" class="add-voucher--button is--medium btn is--primary is--center block">
                                    <i class="icon--arrow-right"></i>
                                </button>
                            {/block}
                        </div>
                    </form>
                {/block}

                {* Shipping costs pre-calculation *}
                {if $sBasket.content && !$sUserLoggedIn && !$sUserData.additional.user.id && {config name=basketShowCalculation}}

                    {block name='frontend_checkout_shipping_costs_country_trigger'}
                        <a href="#show-hide--shipping-costs" class="table--shipping-costs-trigger">
                            {s name='CheckoutFooterEstimatedShippingCosts'}{/s} <i class="icon--arrow-right"></i>
                        </a>
                    {/block}

                    {block name='frontend_checkout_shipping_costs_country_include'}
                        {include file="frontend/checkout/shipping_costs.tpl"}
                    {/block}
                {/if}
            </div>

            {block name='frontend_checkout_cart_footer_field_labels'}
                <ul class="aggregation--list">

                    {* Basket sum *}
                    {block name='frontend_checkout_cart_footer_field_labels_sum'}
                        <li class="list--entry block-group entry--sum">

                            {block name='frontend_checkout_cart_footer_field_labels_sum_label'}
                                <div class="entry--label block">
                                    {s name="CartFooterLabelSum"}{/s}
                                </div>
                            {/block}

                            {block name='frontend_checkout_cart_footer_field_labels_sum_value'}
                                <div class="entry--value block">
                                    {$sBasket.Amount|currency}{s name="Star" namespace="frontend/listing/box_article"}{/s}
                                </div>
                            {/block}
                        </li>
                    {/block}

                    {* Shipping costs *}
                    {block name='frontend_checkout_cart_footer_field_labels_shipping'}
                        <li class="list--entry block-group entry--shipping">

                            {block name='frontend_checkout_cart_footer_field_labels_shipping_label'}
                                <div class="entry--label block">
                                    {s name="CartFooterLabelShipping"}{/s}
                                </div>
                            {/block}

                            {block name='frontend_checkout_cart_footer_field_labels_shipping_value'}
                                <div class="entry--value block">
                                    {$sShippingcosts|currency}{s name="Star" namespace="frontend/listing/box_article"}{/s}
                                </div>
                            {/block}
                        </li>
                    {/block}

                    {* Total sum *}
                    {block name='frontend_checkout_cart_footer_field_labels_total'}
                        <li class="list--entry block-group entry--total">

                            {block name='frontend_checkout_cart_footer_field_labels_total_label'}
                                <div class="entry--label block">
                                    {s name="CartFooterLabelTotal"}{/s}
                                </div>
                            {/block}

                            {block name='frontend_checkout_cart_footer_field_labels_total_value'}
                                <div class="entry--value block is--no-star">
                                    {if $sAmountWithTax && $sUserData.additional.charge_vat}{$sAmountWithTax|currency}{else}{$sAmount|currency}{/if}
                                </div>
                            {/block}
                        </li>
                    {/block}

                    {* Total net *}
                    {block name='frontend_checkout_cart_footer_field_labels_totalnet'}
                        {if $sUserData.additional.charge_vat}
                            <li class="list--entry block-group entry--totalnet">

                                {block name='frontend_checkout_cart_footer_field_labels_totalnet_label'}
                                    <div class="entry--label block">
                                        {s name="CartFooterTotalNet"}{/s}
                                    </div>
                                {/block}

                                {block name='frontend_checkout_cart_footer_field_labels_totalnet_value'}
                                    <div class="entry--value block is--no-star">
                                        {$sAmountNet|currency}
                                    </div>
                                {/block}
                            </li>
                        {/if}
                    {/block}

                    {* Taxes *}
                    {block name='frontend_checkout_cart_footer_field_labels_taxes'}
                        {if $sUserData.additional.charge_vat}
                            {foreach $sBasket.sTaxRates as $rate => $value}

                                {block name='frontend_checkout_cart_footer_field_labels_taxes_entry'}
                                    <li class="list--entry block-group entry--taxes">

                                        {block name='frontend_checkout_cart_footer_field_labels_taxes_label'}
                                            <div class="entry--label block">
                                                {s name="CartFooterTotalTax"}{/s}
                                            </div>
                                        {/block}

                                        {block name='frontend_checkout_cart_footer_field_labels_taxes_value'}
                                            <div class="entry--value block is--no-star">
                                                {$value|currency}
                                            </div>
                                        {/block}
                                    </li>
                                {/block}
                            {/foreach}
                        {/if}
                    {/block}
                </ul>
            {/block}
        </div>
    {/block}

And voucher.tpl:

{namespace name="frontend/checkout/cart_item"}

<div class="table--tr block-group row--voucher{if $isLast} is--last-row{/if}">

    {* Product information column *}
    {block name='frontend_checkout_cart_item_voucher_name'}
        <div class="table--column column--product block">

            {* Badge *}
            {block name='frontend_checkout_cart_item_voucher_badge'}
                <div class="panel--td column--image">
                    <div class="table--media">
                        <div class="basket--badge">
                            <i class="icon--coupon"></i>
                        </div>
                    </div>
                </div>
            {/block}

            {* Product information *}
            {block name='frontend_checkout_cart_item_voucher_details'}
                <div class="panel--td table--content">

                    {* Product name *}
                    {block name='frontend_checkout_cart_item_voucher_details_title'}
                        <span class="content--title">{$sBasketItem.articlename|strip_tags|truncate:60}</span>
                    {/block}

                    {* Product SKU number *}
                    {block name='frontend_checkout_cart_item_voucher_details_sku'}
                        <p class="content--sku content">
                            {s name="CartItemInfoId"}{/s} {$sBasketItem.ordernumber}
                        </p>
                    {/block}

                    {* Additional product information *}
                    {block name='frontend_checkout_cart_item_voucher_details_inline'}{/block}
                </div>
            {/block}
        </div>
    {/block}

    {* Product tax rate *}
    {block name='frontend_checkout_cart_item_voucher_tax_price'}{/block}

    {* Accumulated product price *}
    {block name='frontend_checkout_cart_item_voucher_total_sum'}
        <div class="panel--td column--total-price block is--align-right">
            {block name='frontend_checkout_cart_item_voucher_total_sum_label'}
                <div class="column--label total-price--label">
                    {s name="CartColumnTotal" namespace="frontend/checkout/cart_header"}{/s}
                </div>
            {/block}

            {block name='frontend_checkout_cart_item_voucher_total_sum_display'}
                {if $sBasketItem.itemInfo}
                    {$sBasketItem.itemInfo}
                {else}
                    {$sBasketItem.price|currency}{block name='frontend_checkout_cart_tax_symbol'}{s name="Star" namespace="frontend/listing/box_article"}{/s}{/block}
                {/if}
            {/block}
        </div>
    {/block}

    {* Remove voucher from basket *}
    {block name='frontend_checkout_cart_item_voucher_delete_article'}
        <div class="panel--td column--actions block">
            <a href="{url action='deleteArticle' sDelete=voucher sTargetAction=$sTargetAction}" class="btn is--small column--actions-link" title="{"{s name='CartItemLinkDelete '}{/s}"|escape}">
                <i class="icon--cross"></i>
            </a>
        </div>
    {/block}
</div>

I hope someone can help me. Sorry for bad english. It is not my main language.

Answer 1

Your JS is way off for ImportVoucher ... try.

function ImportVoucher(code) {
    $('#sVoucher').val(code);
}