shopline给自定义模块添加心愿清单按钮

shopline安装心愿清单插件后，想要在自己的模块添加心愿清单按钮可以通过以下实现

全部代码：product-card.html

 {{assign "jump_link" product.url}}
 
 {{#capture "default_variant_id"}}
            {{default product.selected_or_first_available_variant.id (get "id" (first product.variants))}}
        {{/capture}}
      
{{assign "product_form_id" (append "quick-add-" section.id "__" product.id)}}

        {{!-- <div class="product-art-right-box swiper-slide card card-wrapper
        data-product-id="{{product.id}}"
            data-product-form-id="{{product_form_id}}"
        "> --}}
<div class="product-art-right-box swiper-slide product-card-wrapper card card-wrapper product-card-style-{{card_style}}
  {{#if card_style == 'card'}} global-product-card-border-shadow{{/if}}" 
  data-product-form-id="{{product_form_id}}"
  style="--card-image-padding: {{card_image_padding}}px; 
  --color-card-background: {{card_background_color}};
  --color-card-text: {{card_text_color}};">
  
    <a {{#if jump_link}}href="{{jump_link}}"{{else}}href="javascript:;"{{/if}} class="full-unstyled-link">
      <span class="visually-hidden">
        {{#if product_data}}
          {{product_data.title}}
        {{else}}
          {{t "onboarding.product_title"}}
        {{/if}}
      </span>
    </a>
    
          <a href="{{#if jump_link}}{{jump_link}}{{else}}javascript:;{{/if}}" class="card__media ">
            <a href="{{product.url}}">
                
          <div class="product-image-right-box">
            <img src="{{image_url product.featured_image height=1040}}" alt="{{product.title}}" />
            {{!-- <div class="product-right-favorite-icon" onclick="toggleFavorite(this)" data-product-id="{{ product.id }}">
              {{snippet "heart"}}
            </div> --}}
            
          </div>
            {{#if product.available}}
                <div class="product-right-sale-status">Sale</div>
            {{else}}
                <div class=" product-right-sale-status-out">Sold out</div>
            {{/if}}
            <div class="mb_padding-bottom">
                <p class="product-right-product-title">{{product.title}}</p>
                <p class="product-right-product-description">
                {{product.metafields.secondtitle.secondtitle.value}}
                </p>
                <div class="product-right-reviews display-none">
                    <div class="product-right-stars">★★★★★</div>
                    <div class="product-right-review-count">6 reviews</div>
                </div>
                <div class="product-right-cart-module">
                    <div class="product-right-prices">
                    {{#if product.compare_at_price}}<div class="product-right-original-price">{{money product.compare_at_price}}</div>{{/if}}
                    <div class="product-right-current-price">{{money (floor product.price)}}</div>
                    </div>
                    {{!-- {{#for product.variants as |var|}}
                        {{var.id}}-{{var.title}}
                    {{/for}}
                    productid:{{product.id}} --}}
                    
                    <product-form
                    id="{{append product_form_id '__wrapper'}}"
                        class="product-form"
                        data-default-error-message="{{t 'products.general.no_product_data_found'}}"
                        >
                    <form method="post" action="/api/carts/ajax-cart/add.js" id="productFrom" id={{product_form_id}}>
                     <input type="number" required step="1" form="product-form-{{section.id}}" name="quantity" min='1' max='999' value='1'/ hidden>
                            <input type="hidden" name="id" value="{{default product.selected_or_first_available_variant.id (get 'id' (first product.variants))}}" disabled  class="ids"/>
                    <button class="product-right-cart-button" type="submit"  name="add"  id="{{product_form_id}}-submit">
                        {{snippet "carticon"}}
                    </button>
                    <div class="loading-overlay__spinner ">
                        <svg class="icon icon-loading" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18.3337 9.99984C18.3337 14.6022 14.6027 18.3332 10.0003 18.3332C5.39795 18.3332 1.66699 14.6022 1.66699 9.99984C1.66699 5.39746 5.39795 1.6665 10.0003 1.6665" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"></path>
                        </svg>

                        </div>
                      </form>
                    </product-form>
                </div>
            </div>
            </a>
            </a>
        </div>

  

关键代码：

 {{assign "jump_link" product.url}}

<div class="product-art-right-box swiper-slide product-card-wrapper card card-wrapper product-card-style-{{card_style}}
  {{#if card_style == 'card'}} global-product-card-border-shadow{{/if}}" 
  data-product-form-id="{{product_form_id}}"
  style="--card-image-padding: {{card_image_padding}}px; 
  --color-card-background: {{card_background_color}};
  --color-card-text: {{card_text_color}};">
  
    <a {{#if jump_link}}href="{{jump_link}}"{{else}}href="javascript:;"{{/if}} class="full-unstyled-link">
      <span class="visually-hidden">
        {{#if product_data}}
          {{product_data.title}}
        {{else}}
          {{t "onboarding.product_title"}}
        {{/if}}
      </span>
          <a href="{{#if jump_link}}{{jump_link}}{{else}}javascript:;{{/if}}" class="card__media ">
                 <img src="{{image_url product.featured_image height=1040}}" alt="{{product.title}}" />

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