Neu Produkt zum Warenkorb hinzugefügt auf Artikeldetailseite als Popup öffnen

[ckOne]

Guten Tag liebes Forum,

wir möchten das Template so anpassen, dass auf der Produktdetailseite ebenfalls ein Popup/Modal geöffnet wird, wenn der Artikel in den Warenkorb gelegt wird.

Wenn man im Template (NOVA/productdetails/details.tpl) das Formular von

{form id="buy_form" action=$Artikel->cURLFull class="jtl-validate"}

zu

{form id="buy_form" action=$ShopURL class="form form-basket jtl-validate" data=["toggle" => "basket-add"]}

abändert, öffnet sich das Modal wie gewünscht.
Allerdings ist es dann nicht möglich Variantenartikel in den Warenkorb zu legen. Es wird immer der Vaterartikel in den Warenkorb gelegt, was ja nicht korrekt ist. Wie müsste man die Zeile anpassen, damit auch Variantenartikel übergeben werden, ist das technisch aktuell möglich?

Vielen Dank und beste Grüße

 

[ckOne]

Push

 

[Deichgraf]

*PUSH*

Wir möchten auch gerne das Modal-Popup für die "In den Warenkorb" Aktion anstatt der oberen Warenkorb Anzeige nutzen und stehen vor der gleichen Herausforderung.

Ist es jemanden gelungen das Warenkorb-Popup auf der Artikelseite erfolgreich einzubinden?

 

[css-umsetzung]

Du könntest die pushed_success.tpl nehmen und einen modales Grundgerüst drum herum bauen, das ganze etwas aufhübschen.
einfach mal was in den WK legen (ist jetzt nur ein schnelles Beispiel): https://jtl52.dateispeicher.de/520/Yogamatte

 

[Deichgraf]

Du könntest die pushed_success.tpl nehmen und einen modales Grundgerüst drum herum bauen, das ganze etwas aufhübschen.
einfach mal was in den WK legen (ist jetzt nur ein schnelles Beispiel): https://jtl52.dateispeicher.de/520/Yogamatte

@css-umsetzung Genau so soll es, elegant und praktikabel, sehr schön gemacht!
Ist das dann ein Modal-Link mit pushed_success oder mit einem JS-push gelöst?

 

[css-umsetzung]

Da ist jetzt wirklich nur schnell das Modale drumrum gebaut um das zu verdeutlichen, man muss das schon noch aufhübschen, ich habe hierfür jetzt extra das Xselling in der tpl Datei deaktiviert damit das über die ganze Breite geht, also alles quick&dirty.
Am Ende der Datei ist dann das öffnen des modalen Fensters.

{block name='productdetails-pushed-success'}
<div class="modal fade" id="pushed-success-modal" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-lg"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">{$hinweis}</h4>
      </div>
      <div class="modal-body">
    <div id="pushed-success" {if $card}role="alert" class="card alert alert-dismissable"{/if}>
        {if isset($zuletztInWarenkorbGelegterArtikel)}
            {assign var=pushedArtikel value=$zuletztInWarenkorbGelegterArtikel}
        {else}
            {assign var=pushedArtikel value=$Artikel}
        {/if}
        {assign var=showXSellingCart value=isset($Xselling->Kauf) && count($Xselling->Kauf->Artikel) > 0}


{$showXSellingCart=false}

        {if $card}
            {block name='productdetails-pushed-success-cart-note-heading'}
                <div class="card-header alert-success">
                    {if isset($cartNote)}
                        {$cartNote}
                    {/if}
                </div>
            {/block}
            <div class="card-body">
        {/if}

        {row}
            {block name='productdetails-pushed-success-product-cell'}
                {col cols=12 md="{if $showXSellingCart}6{else}12{/if}"}
                    {block name='productdetails-pushed-success-product-cell-content'}
                        <div class="productbox-inner{if isset($class)} {$class}{/if}">
                            {row}
                                {col cols=12}
                                    {block name='productdetails-pushed-success-product-cell-subheading'}
                                        <div class="productbox-title subheadline">{$pushedArtikel->cName}</div>
                                    {/block}
                                {/col}
                                {col cols=12 md=4 class="pushed-success-image-wrapper"}
                                    {block name='productdetails-pushed-success-product-cell-image'}
                                        {include file='snippets/image.tpl'
                                            item=$pushedArtikel
                                            square=false
                                            class='image'
                                            srcSize='sm'}
                                    {/block}
                                {/col}
                                {col}
                                    {block name='productdetails-pushed-success-product-cell-details'}
                                        {row}
                                            {col cols=12}
                                                <dl class="form-row">
                                                    <dt class="col-6">{lang key='productNo'}:</dt>
                                                    <dd class="col-6">{$pushedArtikel->cArtNr}</dd>
                                                    {if !empty($pushedArtikel->cHersteller)}
                                                        <dt class="col-6">{lang key='manufacturer' section='productDetails'}:</dt>
                                                        <dd class="col-6">{$pushedArtikel->cHersteller}</dd>
                                                    {/if}
                                                    {if !empty($pushedArtikel->oMerkmale_arr)}
                                                        <dt class="col-6">{lang key='characteristics' section='comparelist'}:</dt>
                                                        <dd class="col-6 attr-characteristic">
                                                            {block name='productdetails-pushed-success-characteristics'}
                                                                {foreach $pushedArtikel->oMerkmale_arr as $characteristic}
                                                                    {$characteristic->getName()}
                                                                    {if $characteristic@index === 10 && !$characteristic@last}&hellip;{break}{/if}
                                                                    {if !$characteristic@last}, {/if}
                                                                {/foreach}
                                                            {/block}
                                                        </dd>
                                                    {/if}
                                                    {block name='productdetails-pushed-success-mhd'}
                                                        {if isset($pushedArtikel->dMHD) && isset($pushedArtikel->dMHD_de)}
                                                            <dt class="col-6">{lang key='productMHDTool'}:</dt>
                                                            <dd class="col-6">{$pushedArtikel->dMHD_de}</dd>
                                                        {/if}
                                                    {/block}
                                                    {if $Einstellungen.artikeluebersicht.artikeluebersicht_gewicht_anzeigen === 'Y' && isset($pushedArtikel->cGewicht) && $pushedArtikel->fGewicht > 0}
                                                        <dt class="col-6">{lang key='shippingWeight'}:</dt>
                                                        <dd class="col-6">{$pushedArtikel->cGewicht} {lang key='weightUnit'}</dd>
                                                    {/if}
                                                    {if $Einstellungen.artikeluebersicht.artikeluebersicht_artikelgewicht_anzeigen === 'Y' && isset($pushedArtikel->cArtikelgewicht) && $pushedArtikel->fArtikelgewicht > 0}
                                                        <dt class="col-6">{lang key='productWeight'}:</dt>
                                                        <dd class="col-6">{$pushedArtikel->cArtikelgewicht} {lang key='weightUnit'}</dd>
                                                    {/if}
                                                    {if $Einstellungen.bewertung.bewertung_anzeigen === 'Y' && (int)$pushedArtikel->fDurchschnittsBewertung !== 0}
                                                        <dt class="col-6">{lang key='ratingAverage'}:</dt>
                                                        <dd class="col-6">
                                                            {block name='productdetails-pushed-success-include-rating'}
                                                                {include file='productdetails/rating.tpl' stars=$pushedArtikel->fDurchschnittsBewertung}
                                                            {/block}
                                                        </dd>
                                                    {/if}
                                                </dl>
                                            {/col}
                                        {/row}
                                    {/block}
                                {/col}
                            {/row}
                        </div>
                    {/block}
                    {block name='productdetails-pushed-success-product-cell-links'}
                        {row class="pushed-success-buttons"}
                            {col cols=12 md=6}
                                {link href="#" attribs=["onclick"=>"$.evo.article().navigateBackToList()"]
                                    class="btn btn-outline-primary btn-block continue-shopping"
                                    data=["dismiss"=>"{if !$card}modal{/if}"]
                                    aria=["label"=>"Close"]}
                                    <i class="fa fa-arrow-circle-left"></i> {lang key='continueShopping' section='checkout'}
                                {/link}
                            {/col}
                            {col cols=12 md=6}
                                {link href="{get_static_route id='warenkorb.php'}"
                                    class="btn btn-primary btn-basket btn-block"}
                                    <i class="fas fa-shopping-cart"></i> {lang key='gotoBasket'}
                                {/link}
                            {/col}
                        {/row}
                    {/block}
                {/col}
            {/block}
            {block name='productdetails-pushed-success-x-sell'}
                {if $showXSellingCart}
                    {col cols=6 class="x-selling"}
                        {row}
                            {col cols=12}
                                {block name='productdetails-pushed-success-x-sell-heading'}
                                    <div class="productbox-title subheadline">{lang key='customerWhoBoughtXBoughtAlsoY' section='productDetails'}</div>
                                {/block}
                            {/col}
                            {col cols=12}
                                {block name='productdetails-pushed-success-include-product-slider'}
                                    {include file='snippets/product_slider.tpl' id='' productlist=$Xselling->Kauf->Artikel title='' tplscope='half'}
                                {/block}
                            {/col}
                        {/row}
                    {/col}
                {/if}
            {/block}
        {/row}
        {if $card}</div>{/if}
    </div>

</div>
  </div>
</div>

<script>
    $(document).ready(function() {
        $('body[data-page="1"] #pushed-success-modal').modal("show");       
});
</script>
{/block}

 

[said]

Guten Tag ans Forum,

das Thema ist sehr spannend auch für mich; aktuell biete ich in meiner Testumgebung / Testshop kostenlose Warenmuster (Gratisartikel umfunktioniert) an auf der Artikeldetailseite:
HIer der Button, mit dem die Warenmuster in den Warenkorb gelegt wird - direkt hinein geht....


<form method="post" name="freegift" action="{get_static_route id='warenkorb.php'}">
{$jtl_token}
<input type="hidden" name="gratis_geschenk" value="1" />
<input name="gratisgeschenk" type="hidden" value="{$Artikel->kArtikel}" id="gift{$Artikel->kArtikel}" />
<button name="gratishinzufuegen" type="submit" class="btn btn-outline-primary btn-block" type="button" title="{lang key='addToMCart' section='global'}">
</button>

</form>


Soweit funktioniert das, allerdings würde auch ich gerne wie oben genannt von Mitglied ckOne "das Template so anpassen, dass auf der Produktdetailseite ebenfalls ein Popup/Modal geöffnet wird, wenn der Artikel in den Warenkorb gelegt wird."

Wenn jemand eine Idee hat, das wäre toll!

Liebe Grüße
SD