Memolist (offcanvas)

Merkliste als Offcanvas umsetzen: Produkte über WatchListItemAdd und WatchListItemDelete in der Produktbox hinzufügen, entfernen und seitlich anzeigen.

​

Produkt auf die Merkliste setzen Button in der Produktbox

Fügen Sie die Form in die Produktbox außerhalb der Form ‘zur Produktdetailsicht’ ein.

{{ var $cActionWatchListItemAdd = $wsActions.create("WatchListItemAdd") }}
{{ var $cActionWatchListItemDelete = $wsActions.create("WatchListItemDelete") }}

{{ var $cProductIsInWatchList = false }}
{{ var $cWatchListItemId = "" }}

{{ foreach $cWatchListItem in $wsWatchList.items }}
	{{ if $cWatchListItem.product.id == $cProduct.id }}
		{{ $cProductIsInWatchList = true}}
		{{ $cWatchListItemId = $cWatchListItem.id }}
	{{ /if }}
{{ /foreach }}

<div>
  ...
  <form action="{{= $wsViews.current.url() }}" method="post">
     <input type="hidden" name="wsact" value="{{= $cBasketAdd.id }}">
     <input type="hidden" name="wscsrf" value="{{= $cBasketAdd.csrf }}">
     <input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
     <input type="hidden" name="productId" value="{{= $cProduct.id }}">
   </form>
   ...
  <form id="wsFormWatchlist-{{= $cProduct.id }}" method="post" action="{{= $wsViews.current.url() }}" ws-ajax-form>
     <input type="hidden" name="wsReplaceIds" value="wsFormWatchlist-{{= $cProduct.id }},wsMemolistEntries,wsMemolistOffcanvasContent">
     <input type="hidden" name="wscsrf" value="{{= $cActionWatchListItemAdd.csrf }}">
     <input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
     <input type="hidden" name="productId" value="{{= $cProduct.id }}">
     {{ if $cProductIsInWatchList }}
        <input type="hidden" name="wsact" value="{{= $cActionWatchListItemDelete.id }}">
        <input type="hidden" name="watchListItemId" value="{{= $cWatchListItemId }}">
     {{ else }}
        <input type="hidden" name="wsact" value="{{= $cActionWatchListItemAdd.id }}">
     {{ /if }}
     <button type="submit">
        {{ if $cProductIsInWatchList }}
           Produkt ist auf der Merkliste
        {{ else }}
            Auf die Merkliste
        {{ /if }}
     </button>
  </form>
  ...
</div>

​

Button im Header

Mit Klick auf den Button wird die Merkliste im offcanvas geladen

<button type="button" title="Merkliste" data-bs-toggle="offcanvas" data-bs-target="#wsMemolistOffcanvas">
  Merkliste
   <span id="wsMemolistEntries">
      {{ if $wsWatchList.items }}{{= $wsWatchList.items | len }}{{ /if }}
   </span>
</button>

​

Offcanvas Merkliste

<div class="offcanvas offcanvas-end" tabindex="-1" id="wsMemolistOffcanvas">
   <div class="offcanvas-header">
      <p>Merkliste</p>
      <button type="button" data-bs-dismiss="offcanvas">Schließen</button>
   </div>
   <div class="offcanvas-body">
      <div id="wsMemolistOffcanvasContent">
         {{ if $wsWatchList.items }}
            {{ foreach $cProduct in $wsWatchList.items }}
               {{ var $cProductDelete = $wsActions.create("WatchListItemDelete", tag = $cProduct.id) }}	
               <a href="{{= $wsViews.url('Product', {productId: $cProduct.product.id}) }}">
                  <img src="{{= $cProduct.product.custom.image.normal | ifNull(static('images/noImageThumbnail.jpg')) }}">
               </a>
               {{= $cProduct.product.name }}
               {{ if $cProduct.product.variantSelection }}
                  {{ foreach $cVarAttr in $cProduct.product.variantSelection | keys }}
                     {{= $cVarAttr}}: {{= $cProduct.product.variantSelection[$cVarAttr] }}
                  {{ /foreach }}
               {{ /if }}
               {{= $cProduct.product.price | currency }}
               <form id="wsFormWatchlistDeleteProductOffcanvas-{{= $cProduct.id }}" action="{{= $wsViews.current.url() }}" method="post" ws-ajax-form>
                  <input type="hidden" name="wsReplaceIds" value="wsFormWatchlist-{{= $cProduct.product.id }},wsWatchlistWrapper,wsMemolistEntries,wsMemolistOffcanvasContent">
                  <input type="hidden" name="wscsrf" value="{{= $cProductDelete.csrf }}">
                  <input type="hidden" name="wsact" value="{{= $cProductDelete.id }}">
                  <input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
                  <input type="hidden" name="productId" value="{{= $cProduct.product.id }}">
                  <input type="hidden" name="watchListItemId" value="{{= $cProduct.id }}">
                  <button type="submit">Von Merkliste löschen</button>
               </form>
            {{ /foreach }}
            <a href="{{= $wsViews.viewUrl('account/watchlist.htm') }}">Merkliste ansehen</a>
         {{ else }}
            Sie haben keine Produkte auf der Merkliste!
         {{ /if }}
      </div>
   </div>
</div>